/* /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/BeverageCountryCleanupPage.razor.rz.scp.css */
/* Planche 1F — l'atelier de nettoyage, appliqué au référentiel pays.

   ⚠️ Aucune couleur en dur : tout passe par `--mud-palette-*` pour ce qui bascule clair/sombre, et
   par les primitives `--g-*` pour les rayons.
   ⚠️ Tout espacement en pixels s'écrit `calc(Npx * var(--g-scale))`. */

.ctry-page[b-lhsmxsal6e] {
    display: flex;
    flex-direction: column;
    gap: calc(16px * var(--g-scale));
    padding: calc(16px * var(--g-scale));
}

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

.ctry-head[b-lhsmxsal6e] {
    display: flex;
    align-items: center;
    gap: calc(16px * var(--g-scale));
    flex-wrap: wrap;
}

.ctry-back[b-lhsmxsal6e] {
    display: inline-flex;
    align-items: center;
    gap: calc(4px * var(--g-scale));
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
}

.ctry-back:hover[b-lhsmxsal6e] {
    color: var(--mud-palette-primary);
}

.ctry-headings[b-lhsmxsal6e] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.ctry-heading[b-lhsmxsal6e] {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.ctry-sub[b-lhsmxsal6e] {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

/* ── Les onglets de famille ──

   Quatre seulement : le soft et le solide n'ont aucun champ d'origine. */

.ctry-families[b-lhsmxsal6e] {
    display: flex;
    flex-wrap: wrap;
    gap: calc(8px * var(--g-scale));
}

.ctry-family[b-lhsmxsal6e] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--g-radius-pill, 999px);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
    padding: calc(6px * var(--g-scale)) calc(14px * var(--g-scale));
    cursor: pointer;
}

/* Pas sur l'onglet actif : son fond est la couleur primaire, et le survol y rendait le texte
   invisible (relevé au contrôle visuel du lot 12, sur l'atelier voisin qui recopiait cette règle). */
.ctry-family:hover:not(:disabled):not(.ctry-family--on)[b-lhsmxsal6e] {
    color: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
}

.ctry-family--on[b-lhsmxsal6e] {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.ctry-family:disabled[b-lhsmxsal6e] {
    opacity: 0.5;
    cursor: default;
}

/* ── Le plan ── */

.ctry-loading[b-lhsmxsal6e],
.ctry-alert[b-lhsmxsal6e] {
    margin-top: calc(8px * var(--g-scale));
}

.ctry-note[b-lhsmxsal6e] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.ctry-table[b-lhsmxsal6e] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.ctry-table th[b-lhsmxsal6e] {
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    padding: calc(8px * var(--g-scale));
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.ctry-table td[b-lhsmxsal6e] {
    padding: calc(6px * var(--g-scale)) calc(8px * var(--g-scale));
    border-bottom: 1px solid var(--mud-palette-lines-default);
    vertical-align: middle;
}

.ctry-col-pick[b-lhsmxsal6e] {
    width: calc(48px * var(--g-scale));
}

/* Les nombres s'alignent à droite et se lisent en tabulaire : une colonne de comptes dont les
   chiffres ne s'alignent pas oblige à relire chaque ligne pour comparer deux volumes. */
.ctry-col-num[b-lhsmxsal6e] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ctry-value[b-lhsmxsal6e] {
    color: var(--mud-palette-text-primary);
    font-weight: 500;
}

/* ── Les trois états d'une graphie ── */

.ctry-tag[b-lhsmxsal6e] {
    display: inline-block;
    border-radius: var(--g-radius-pill, 999px);
    font-size: 0.6875rem;
    font-weight: 700;
    padding: calc(3px * var(--g-scale)) calc(9px * var(--g-scale));
    white-space: nowrap;
}

.ctry-tag--settled[b-lhsmxsal6e] {
    color: var(--mud-palette-success-darken);
    background: var(--mud-palette-success-hover);
}

.ctry-tag--suggested[b-lhsmxsal6e] {
    color: var(--mud-palette-primary-darken);
    background: var(--mud-palette-primary-hover);
}

.ctry-tag--unknown[b-lhsmxsal6e] {
    color: var(--mud-palette-warning-darken);
    background: var(--mud-palette-warning-hover);
}

/* ── L'aperçu, que la décision 4 rend obligatoire ── */

.ctry-foot[b-lhsmxsal6e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(16px * var(--g-scale));
    flex-wrap: wrap;
    border-top: 1px solid var(--mud-palette-lines-default);
    padding-top: calc(12px * var(--g-scale));
}

.ctry-preview[b-lhsmxsal6e] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ctry-preview-title[b-lhsmxsal6e] {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.ctry-preview-body[b-lhsmxsal6e] {
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
}

/* ── Le cadre des ateliers du référentiel (dessin du 24/09/2026) ──
   Ces ateliers dérivent de la planche 1F — « Nettoyer une propriété » — sans en avoir une à eux :
   ils en reprennent le panneau crème, les familles en encre, les vues en encre d'accent, la table
   dans un cadre arrondi et l'aperçu sur fond. Préfixés par `.bv-palette`, posée sur la racine, pour
   primer sur les règles plus haut dans ce fichier sans en toucher une. */

.ctry-page.bv-palette[b-lhsmxsal6e] {
    margin: calc(20px * var(--g-scale)) calc(24px * var(--g-scale)) calc(28px * var(--g-scale));
    padding: calc(26px * var(--g-scale)) calc(28px * var(--g-scale));
    gap: calc(18px * var(--g-scale));
    max-width: 1320px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--g-radius-lg);
    box-shadow: var(--g-shadow-sm);
}

.bv-palette .ctry-heading[b-lhsmxsal6e] {
    font-family: "Poppins", "Figtree", system-ui, sans-serif;
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--mud-palette-text-primary);
}

.bv-palette .ctry-sub[b-lhsmxsal6e] {
    font-size: 0.84375rem;
    color: var(--mud-palette-text-secondary);
}

.bv-palette .ctry-back[b-lhsmxsal6e] {
    font-weight: 600;
}

.bv-palette .ctry-family[b-lhsmxsal6e] {
    display: inline-flex;
    align-items: center;
    gap: calc(8px * var(--g-scale));
    padding: calc(7px * var(--g-scale)) calc(13px * var(--g-scale));
    border-radius: var(--g-radius-pill);
    border: 1px solid var(--mud-palette-lines-inputs);
    background: var(--mud-palette-surface);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.bv-palette .ctry-family:not(:disabled):hover[b-lhsmxsal6e] {
    background: var(--mb-sand);
}

/* Les vues (plan, journal, filtres) en encre d'accent ; les familles, plus bas, en encre. */
.bv-palette .ctry-family--on[b-lhsmxsal6e],
.bv-palette .ctry-family--on:not(:disabled):hover[b-lhsmxsal6e] {
    background: var(--mud-palette-tertiary);
    border-color: var(--mud-palette-tertiary);
    color: var(--mud-palette-tertiary-text);
}

.bv-palette .ctry-families .ctry-family--on[b-lhsmxsal6e],
.bv-palette .ctry-families .ctry-family--on:not(:disabled):hover[b-lhsmxsal6e] {
    background: var(--mb-ink);
    border-color: var(--mb-ink);
    color: var(--mb-ink-text);
}

.bv-palette .ctry-table[b-lhsmxsal6e] {
    border-collapse: separate;
    border-spacing: 0;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 22px;
    overflow: hidden;
}

.bv-palette .ctry-table th[b-lhsmxsal6e] {
    padding: calc(12px * var(--g-scale));
    border-bottom: 1px solid var(--mud-palette-lines-default);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-gray-dark);
    background: transparent;
}

.bv-palette .ctry-table td[b-lhsmxsal6e] {
    padding: calc(10px * var(--g-scale)) calc(12px * var(--g-scale));
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.bv-palette .ctry-table tr:last-child td[b-lhsmxsal6e] {
    border-bottom: 0;
}

.bv-palette .ctry-table th:first-child[b-lhsmxsal6e],
.bv-palette .ctry-table td:first-child[b-lhsmxsal6e] {
    padding-left: calc(18px * var(--g-scale));
}

.bv-palette .ctry-table th:last-child[b-lhsmxsal6e],
.bv-palette .ctry-table td:last-child[b-lhsmxsal6e] {
    padding-right: calc(18px * var(--g-scale));
}

.bv-palette .ctry-foot[b-lhsmxsal6e] {
    padding: calc(16px * var(--g-scale)) calc(20px * var(--g-scale));
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 22px;
}

.bv-palette .ctry-note[b-lhsmxsal6e] {
    color: var(--mud-palette-text-secondary);
}
/* /Components/Pages/Admin/ManageBeverage/BeverageDuplicatesPage.razor.rz.scp.css */
/* Planche 1E — la file des doublons et l'arbitrage côte à côte (dessin du 24/09/2026).

   Un cadre : un bandeau crème en tête, la file à gauche sur la surface, les colonnes sur le fond.
   Les colonnes : la destination cerclée de terracotta, la fiche obtenue en encre ; une case
   retenue en sauge, une valeur divergente en pêche marquée « ≠ ».

   ⚠️ Aucune couleur en dur : `--mud-palette-*`, les teintes de `bv-palette` (app.css), `--g-*`.
   ⚠️ Tout espacement en pixels s'écrit `calc(Npx * var(--g-scale))`. */

.dup-page[b-tdkgz4j4u7] {
    display: flex;
    flex-direction: column;
    margin: calc(16px * var(--g-scale)) calc(20px * var(--g-scale)) calc(24px * var(--g-scale));
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--g-radius-lg);
    box-shadow: var(--g-shadow-sm);
    overflow: hidden;
    min-height: calc(100vh - 140px);
}

/* ── Le bandeau ── */

.dup-head[b-tdkgz4j4u7] {
    display: flex;
    align-items: center;
    gap: calc(18px * var(--g-scale));
    padding: calc(18px * var(--g-scale)) calc(26px * var(--g-scale));
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

@media (max-width: 1280px) {
    .dup-head[b-tdkgz4j4u7] {
        flex-wrap: wrap;
    }
}

.dup-back[b-tdkgz4j4u7] {
    display: inline-flex;
    align-items: center;
    gap: calc(8px * var(--g-scale));
    padding-right: calc(18px * var(--g-scale));
    border-right: 1px solid var(--mud-palette-lines-inputs);
    font-size: 0.84375rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
}

.dup-back:hover[b-tdkgz4j4u7] {
    color: var(--mud-palette-tertiary);
}

.dup-headings[b-tdkgz4j4u7] {
    display: flex;
    flex-direction: column;
    gap: calc(2px * var(--g-scale));
    min-width: 0;
    flex: 1 1 220px;
}

.dup-heading[b-tdkgz4j4u7] {
    font-family: "Poppins", "Figtree", system-ui, sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--mud-palette-text-primary);
}

.dup-sub[b-tdkgz4j4u7] {
    font-size: 0.8125rem;
    color: var(--mud-palette-gray-dark);
}

.dup-actions[b-tdkgz4j4u7] {
    flex: none;
    display: flex;
    align-items: center;
    gap: calc(8px * var(--g-scale));
    flex-wrap: wrap;
}

.dup-btn[b-tdkgz4j4u7] {
    display: inline-flex;
    align-items: center;
    gap: calc(6px * var(--g-scale));
    padding: calc(10px * var(--g-scale)) calc(16px * var(--g-scale));
    border-radius: var(--g-radius-pill);
    border: 1px solid transparent;
    font: inherit;
    font-size: 0.84375rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.dup-btn:disabled[b-tdkgz4j4u7] {
    opacity: 0.45;
    cursor: not-allowed;
}

.dup-btn--quiet[b-tdkgz4j4u7] {
    background: var(--mud-palette-background);
    border-color: var(--mud-palette-lines-inputs);
    color: var(--mud-palette-text-secondary);
}

.dup-btn--quiet:not(:disabled):hover[b-tdkgz4j4u7] {
    background: var(--mb-sand);
}

.dup-btn--primary[b-tdkgz4j4u7] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 700;
    padding: calc(11px * var(--g-scale)) calc(19px * var(--g-scale));
}

.dup-btn--primary:not(:disabled):hover[b-tdkgz4j4u7] {
    background: color-mix(in srgb, var(--mud-palette-primary) 86%, var(--mud-palette-text-primary));
}

/* ── Les familles ── */

.dup-families[b-tdkgz4j4u7] {
    display: flex;
    align-items: center;
    gap: calc(6px * var(--g-scale));
    padding: calc(10px * var(--g-scale)) calc(26px * var(--g-scale));
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex-wrap: wrap;
}

.dup-family[b-tdkgz4j4u7] {
    display: inline-flex;
    align-items: center;
    gap: calc(7px * var(--g-scale));
    padding: calc(7px * var(--g-scale)) calc(13px * var(--g-scale));
    border-radius: var(--g-radius-pill);
    border: 1px solid transparent;
    background: transparent;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
}

.dup-family:not(:disabled):hover[b-tdkgz4j4u7] {
    background: var(--mb-sand);
}

.dup-family--on[b-tdkgz4j4u7],
.dup-family--on:not(:disabled):hover[b-tdkgz4j4u7] {
    background: var(--mb-ink);
    color: var(--mb-ink-text);
}

.dup-family-count[b-tdkgz4j4u7] {
    font-size: 0.6875rem;
    font-weight: 700;
    border-radius: var(--g-radius-pill);
    padding: calc(2px * var(--g-scale)) calc(8px * var(--g-scale));
    background: var(--mb-sand);
    color: var(--mb-peach-ink);
}

.dup-family--on .dup-family-count[b-tdkgz4j4u7] {
    background: var(--mb-peach);
}

/* ── Le corps : la file et les colonnes ── */

.dup-body[b-tdkgz4j4u7] {
    flex: 1;
    display: flex;
    min-height: 0;
}

.dup-queue[b-tdkgz4j4u7] {
    flex: none;
    width: 292px;
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    overflow-y: auto;
    max-height: calc(100vh - 260px);
}

.dup-queue[b-tdkgz4j4u7]  .dup-views,
.dup-queue .dup-views[b-tdkgz4j4u7] {
    margin: calc(14px * var(--g-scale)) calc(18px * var(--g-scale)) 0;
    align-self: flex-start;
}

.dup-queue-head[b-tdkgz4j4u7] {
    display: flex;
    flex-direction: column;
    gap: calc(4px * var(--g-scale));
    padding: calc(16px * var(--g-scale)) calc(18px * var(--g-scale)) calc(12px * var(--g-scale));
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.dup-kicker[b-tdkgz4j4u7] {
    font-size: 0.71875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-gray-dark);
}

.dup-queue-progress[b-tdkgz4j4u7] {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    padding: calc(10px * var(--g-scale)) calc(18px * var(--g-scale)) 0;
}

.dup-queue-head .dup-queue-progress[b-tdkgz4j4u7] {
    padding: 0;
}

.dup-rank[b-tdkgz4j4u7] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: calc(4px * var(--g-scale));
    width: 100%;
    padding: calc(13px * var(--g-scale)) calc(18px * var(--g-scale));
    border: 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.dup-rank:not(:disabled):hover[b-tdkgz4j4u7] {
    background: var(--mud-palette-background);
}

.dup-rank--on[b-tdkgz4j4u7],
.dup-rank--on:not(:disabled):hover[b-tdkgz4j4u7] {
    background: var(--mb-sand);
    box-shadow: inset 3px 0 0 var(--mud-palette-primary);
}

.dup-rank--out[b-tdkgz4j4u7] {
    opacity: 0.5;
}

.dup-verdict[b-tdkgz4j4u7] {
    cursor: default;
}

.dup-rank-top[b-tdkgz4j4u7] {
    display: flex;
    align-items: center;
    gap: calc(8px * var(--g-scale));
    min-width: 0;
}

.dup-rank-badge[b-tdkgz4j4u7] {
    flex: none;
    font-size: 0.6875rem;
    font-weight: 700;
    border-radius: var(--g-radius-pill);
    padding: calc(3px * var(--g-scale)) calc(9px * var(--g-scale));
    background: var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
}

.dup-rank--on .dup-rank-badge[b-tdkgz4j4u7] {
    background: var(--mb-peach);
    color: var(--mb-peach-ink);
}

.dup-rank-name[b-tdkgz4j4u7] {
    font-size: 0.84375rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dup-rank-meta[b-tdkgz4j4u7] {
    font-size: 0.75rem;
    color: var(--mud-palette-gray-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Les colonnes ── */

.dup-columns[b-tdkgz4j4u7] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: calc(16px * var(--g-scale));
    padding: calc(22px * var(--g-scale)) calc(26px * var(--g-scale));
    overflow-x: auto;
}

.dup-grid[b-tdkgz4j4u7] {
    display: grid;
    grid-template-columns: repeat(var(--dup-cols, 3), minmax(260px, 1fr));
    gap: calc(16px * var(--g-scale));
    align-items: stretch;
}

.dup-col[b-tdkgz4j4u7] {
    display: flex;
    flex-direction: column;
    gap: calc(12px * var(--g-scale));
    min-width: 0;
    padding: calc(20px * var(--g-scale));
    border-radius: var(--g-radius-card);
    background: var(--mud-palette-surface);
    border: 2px solid var(--mud-palette-lines-default);
}

.dup-col--dest[b-tdkgz4j4u7] {
    border-color: var(--mud-palette-primary);
}

/* La fiche obtenue : encre dans les deux ambiances — c'est la respiration de la planche, comme la
   barre de sélection de la liste. */
.dup-col--result[b-tdkgz4j4u7] {
    background: var(--g-neutral-900);
    border-color: var(--g-neutral-900);
}

.dup-col-top[b-tdkgz4j4u7] {
    display: flex;
    align-items: center;
    gap: calc(10px * var(--g-scale));
    justify-content: space-between;
}

.dup-col-tag[b-tdkgz4j4u7] {
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 0.71875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-gray-dark);
    cursor: pointer;
    text-align: left;
}

.dup-col-tag:not(:disabled):hover[b-tdkgz4j4u7] {
    color: var(--mud-palette-tertiary);
    text-decoration: underline;
}

.dup-col-tag:disabled[b-tdkgz4j4u7] {
    cursor: default;
}

.dup-col--dest .dup-col-tag[b-tdkgz4j4u7] {
    color: var(--mud-palette-tertiary);
}

.dup-col--result .dup-col-tag[b-tdkgz4j4u7] {
    color: var(--g-accent-300);
}

.dup-scope-chip[b-tdkgz4j4u7] {
    flex: none;
    max-width: 55%;
    font-size: 0.71875rem;
    font-weight: 700;
    border-radius: var(--g-radius-pill);
    padding: calc(4px * var(--g-scale)) calc(10px * var(--g-scale));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dup-scope-chip--common[b-tdkgz4j4u7] {
    background: var(--mb-sage);
    color: var(--mb-sage-ink);
}

.dup-scope-chip--tenant[b-tdkgz4j4u7] {
    background: var(--mb-peach);
    color: var(--mb-peach-ink);
}

.dup-col--result .dup-scope-chip--common[b-tdkgz4j4u7] {
    background: var(--g-accent2-200);
    color: var(--g-accent2-800);
}

/* Le libellé composé d'une fiche est long — appellation, cuvée, producteur, sous-types : deux
   lignes au plus, le reste dans l'infobulle. */
.dup-col-name[b-tdkgz4j4u7] {
    font-family: "Poppins", "Figtree", system-ui, sans-serif;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--mud-palette-text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}

.dup-col--result .dup-col-name[b-tdkgz4j4u7] {
    color: var(--g-neutral-100);
}

.dup-rows[b-tdkgz4j4u7] {
    display: flex;
    flex-direction: column;
    gap: calc(7px * var(--g-scale));
}

.dup-cell[b-tdkgz4j4u7] {
    display: flex;
    align-items: center;
    gap: calc(9px * var(--g-scale));
    min-height: 34px;
    padding: calc(8px * var(--g-scale)) calc(11px * var(--g-scale));
    border-radius: 12px;
    border: 0;
    background: color-mix(in srgb, var(--mud-palette-primary) 7%, var(--mud-palette-surface));
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.dup-cell:disabled[b-tdkgz4j4u7] {
    cursor: default;
}

/* Une valeur que les fiches partagent : rien à choisir, la ligne se tait. */
.dup-cell--same[b-tdkgz4j4u7] {
    background: transparent;
}

.dup-cell--on[b-tdkgz4j4u7] {
    background: var(--mb-sage);
    box-shadow: inset 0 0 0 1.5px var(--mud-palette-secondary);
}

.dup-cell-dot[b-tdkgz4j4u7] {
    flex: none;
    width: 13px;
    height: 13px;
    border-radius: var(--g-radius-pill);
    border: 1.5px solid var(--mud-palette-lines-inputs);
}

.dup-cell--same .dup-cell-dot[b-tdkgz4j4u7] {
    border-color: transparent;
}

.dup-cell--on .dup-cell-dot[b-tdkgz4j4u7] {
    border: 0;
    background: var(--mud-palette-secondary);
}

.dup-cell-key[b-tdkgz4j4u7] {
    flex: none;
    width: 74px;
    font-size: 0.71875rem;
    font-weight: 600;
    color: var(--mud-palette-gray-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Deux lignes plutôt qu'une ellipse : la valeur est ce qu'on compare, la couper au quatrième
   caractère (« Châte… ») rendait le choix impossible dès que la colonne rétrécit. */
.dup-cell-value[b-tdkgz4j4u7] {
    flex: 1;
    min-width: 0;
    font-size: 0.84375rem;
    line-height: 1.3;
    color: var(--mb-peach-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.dup-cell--same .dup-cell-value[b-tdkgz4j4u7] {
    color: var(--mud-palette-text-secondary);
}

.dup-cell--on .dup-cell-value[b-tdkgz4j4u7] {
    color: var(--mud-palette-text-primary);
    font-weight: 700;
}

.dup-cell-mark[b-tdkgz4j4u7] {
    flex: none;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--mud-palette-primary);
}

.dup-cell--result[b-tdkgz4j4u7] {
    cursor: default;
    background: var(--g-neutral-800);
}

.dup-cell--result .dup-cell-key[b-tdkgz4j4u7] {
    color: var(--g-neutral-500);
}

.dup-cell--result .dup-cell-value[b-tdkgz4j4u7] {
    color: var(--g-neutral-100);
    font-weight: 600;
}

.dup-col-foot[b-tdkgz4j4u7] {
    margin-top: auto;
    padding-top: calc(8px * var(--g-scale));
    font-size: 0.78125rem;
    color: var(--mud-palette-gray-dark);
}

.dup-col-foot--result[b-tdkgz4j4u7] {
    color: var(--g-accent-300);
    font-weight: 600;
}

/* ── La portée ── */

.dup-scope[b-tdkgz4j4u7] {
    display: flex;
    align-items: center;
    gap: calc(12px * var(--g-scale));
    flex-wrap: wrap;
    padding: calc(14px * var(--g-scale)) calc(18px * var(--g-scale));
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 20px;
}

.dup-scope-hint[b-tdkgz4j4u7] {
    font-size: 0.78125rem;
    color: var(--mud-palette-gray-dark);
}

/* ── États vides ── */

.dup-empty[b-tdkgz4j4u7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(6px * var(--g-scale));
    margin: calc(24px * var(--g-scale));
    padding: calc(28px * var(--g-scale));
    border: 1px dashed var(--mud-palette-lines-inputs);
    border-radius: var(--g-radius-card);
    text-align: center;
}

.dup-empty-title[b-tdkgz4j4u7] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.dup-empty-text[b-tdkgz4j4u7] {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    padding: 0 calc(18px * var(--g-scale));
}

@media (max-width: 960px) {
    .dup-body[b-tdkgz4j4u7] {
        flex-direction: column;
    }

    .dup-queue[b-tdkgz4j4u7] {
        width: auto;
        max-height: 280px;
        border-right: 0;
        border-bottom: 1px solid var(--mud-palette-lines-default);
    }
}

.dup-views .dlg-seg-opt[b-tdkgz4j4u7] {
    white-space: nowrap;
    font-size: 0.78125rem;
}
/* /Components/Pages/Admin/ManageBeverage/BeverageFallbackSubTypePage.razor.rz.scp.css */
/* L'atelier du sous-type de repli (lot 13) — le gabarit de l'atelier des origines, dont il est le
   voisin : même table, même aperçu, même colonne qui dit la règle. Il y ajoute une barre de
   recherche et une pagination : une famille porte jusqu'à 2 020 fiches, pas 92 régions.

   ⚠️ Aucune couleur en dur : `--mud-palette-*` pour ce qui bascule clair/sombre, `--g-*` pour
   les rayons. Tout espacement en pixels s'écrit `calc(Npx * var(--g-scale))`. */

.fbst-page[b-nudy2utq3e] {
    display: flex;
    flex-direction: column;
    gap: calc(16px * var(--g-scale));
    padding: calc(16px * var(--g-scale));
}

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

.fbst-head[b-nudy2utq3e] {
    display: flex;
    align-items: center;
    gap: calc(16px * var(--g-scale));
    flex-wrap: wrap;
}

.fbst-back[b-nudy2utq3e] {
    display: inline-flex;
    align-items: center;
    gap: calc(4px * var(--g-scale));
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
}

.fbst-back:hover[b-nudy2utq3e] {
    color: var(--mud-palette-primary);
}

.fbst-headings[b-nudy2utq3e] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.fbst-heading[b-nudy2utq3e] {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.fbst-sub[b-nudy2utq3e] {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

/* ── Familles et vues ── */

.fbst-bar[b-nudy2utq3e] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: calc(12px * var(--g-scale));
}

.fbst-pills[b-nudy2utq3e] {
    display: flex;
    flex-wrap: wrap;
    gap: calc(8px * var(--g-scale));
}

.fbst-pill[b-nudy2utq3e] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--g-radius-pill, 999px);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
    padding: calc(6px * var(--g-scale)) calc(14px * var(--g-scale));
    cursor: pointer;
}

/* ⚠️ Pas sur la pastille active : son fond est déjà la couleur primaire, et le survol y posait
   la même couleur sur le texte — « Bières » disparaissait sous le pointeur juste après le clic. */
.fbst-pill:hover:not(:disabled):not(.fbst-pill--on)[b-nudy2utq3e] {
    color: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
}

.fbst-pill--on[b-nudy2utq3e] {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.fbst-pill:disabled[b-nudy2utq3e] {
    opacity: 0.5;
    cursor: default;
}

/* ── Le plan ── */

.fbst-loading[b-nudy2utq3e],
.fbst-alert[b-nudy2utq3e] {
    margin-top: calc(8px * var(--g-scale));
}

.fbst-note[b-nudy2utq3e] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.fbst-table[b-nudy2utq3e] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.fbst-table th[b-nudy2utq3e] {
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    padding: calc(8px * var(--g-scale));
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.fbst-table td[b-nudy2utq3e] {
    padding: calc(6px * var(--g-scale)) calc(8px * var(--g-scale));
    border-bottom: 1px solid var(--mud-palette-lines-default);
    vertical-align: middle;
}

.fbst-col-pick[b-nudy2utq3e] {
    width: calc(48px * var(--g-scale));
}

.fbst-col-num[b-nudy2utq3e] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Le sélecteur a une largeur à lui : sans elle, la colonne de la règle — la plus longue — l'écrase
   jusqu'à tronquer un libellé long (« Crème de cassis »). */
.fbst-col-target[b-nudy2utq3e] {
    width: calc(220px * var(--g-scale));
}

.fbst-col-action[b-nudy2utq3e] {
    text-align: right;
    white-space: nowrap;
}

.fbst-value[b-nudy2utq3e] {
    color: var(--mud-palette-text-primary);
    font-weight: 500;
}

.fbst-muted[b-nudy2utq3e] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
}

/* ── La règle d'une ligne ──

   Quatre tons pour quatre degrés de confiance : par le nom, par les témoins, contesté, rien. La phrase
   dit la même chose en toutes lettres ; la couleur ne sert qu'à balayer la colonne. */

.fbst-tag[b-nudy2utq3e] {
    display: inline-block;
    border-radius: var(--g-radius-md, 8px);
    font-size: 0.75rem;
    padding: calc(3px * var(--g-scale)) calc(9px * var(--g-scale));
}

.fbst-tag--sure[b-nudy2utq3e] {
    color: var(--mud-palette-success-darken);
    background: var(--mud-palette-success-hover);
}

.fbst-tag--majority[b-nudy2utq3e] {
    color: var(--mud-palette-primary-darken);
    background: var(--mud-palette-primary-hover);
}

.fbst-tag--named[b-nudy2utq3e] {
    color: var(--mud-palette-info-darken);
    background: var(--mud-palette-info-hover);
}

.fbst-tag--none[b-nudy2utq3e] {
    color: var(--mud-palette-warning-darken);
    background: var(--mud-palette-warning-hover);
}

/* ── Le journal ── */

.fbst-journal-row--reverted .fbst-value[b-nudy2utq3e] {
    text-decoration: line-through;
    color: var(--mud-palette-text-secondary);
}

/* ── L'aperçu, que la décision 4 rend obligatoire ── */

.fbst-foot[b-nudy2utq3e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(16px * var(--g-scale));
    flex-wrap: wrap;
    border-top: 1px solid var(--mud-palette-lines-default);
    padding-top: calc(12px * var(--g-scale));
}

.fbst-preview[b-nudy2utq3e] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fbst-preview-title[b-nudy2utq3e] {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.fbst-preview-body[b-nudy2utq3e] {
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
}

.fbst-actions[b-nudy2utq3e] {
    display: flex;
    gap: calc(8px * var(--g-scale));
    flex-wrap: wrap;
}

/* ── Recherche, vues et assignation à la vue ── */

.fbst-tools[b-nudy2utq3e] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(12px * var(--g-scale));
}

.fbst-search[b-nudy2utq3e] {
    flex: 1 1 calc(260px * var(--g-scale));
    max-width: calc(420px * var(--g-scale));
}

.fbst-bulk[b-nudy2utq3e] {
    display: flex;
    align-items: center;
    gap: calc(8px * var(--g-scale));
    flex-wrap: wrap;
}

.fbst-bulk-select[b-nudy2utq3e] {
    width: calc(220px * var(--g-scale));
}

.fbst-sheet[b-nudy2utq3e] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fbst-pager[b-nudy2utq3e] {
    display: flex;
    justify-content: center;
}

/* ── Le cadre des ateliers du référentiel (dessin du 24/09/2026) ──
   Ces ateliers dérivent de la planche 1F — « Nettoyer une propriété » — sans en avoir une à eux :
   ils en reprennent le panneau crème, les familles en encre, les vues en encre d'accent, la table
   dans un cadre arrondi et l'aperçu sur fond. Préfixés par `.bv-palette`, posée sur la racine, pour
   primer sur les règles plus haut dans ce fichier sans en toucher une. */

.fbst-page.bv-palette[b-nudy2utq3e] {
    margin: calc(20px * var(--g-scale)) calc(24px * var(--g-scale)) calc(28px * var(--g-scale));
    padding: calc(26px * var(--g-scale)) calc(28px * var(--g-scale));
    gap: calc(18px * var(--g-scale));
    max-width: 1320px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--g-radius-lg);
    box-shadow: var(--g-shadow-sm);
}

.bv-palette .fbst-heading[b-nudy2utq3e] {
    font-family: "Poppins", "Figtree", system-ui, sans-serif;
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--mud-palette-text-primary);
}

.bv-palette .fbst-sub[b-nudy2utq3e] {
    font-size: 0.84375rem;
    color: var(--mud-palette-text-secondary);
}

.bv-palette .fbst-back[b-nudy2utq3e] {
    font-weight: 600;
}

.bv-palette .fbst-pill[b-nudy2utq3e] {
    display: inline-flex;
    align-items: center;
    gap: calc(8px * var(--g-scale));
    padding: calc(7px * var(--g-scale)) calc(13px * var(--g-scale));
    border-radius: var(--g-radius-pill);
    border: 1px solid var(--mud-palette-lines-inputs);
    background: var(--mud-palette-surface);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.bv-palette .fbst-pill:not(:disabled):hover[b-nudy2utq3e] {
    background: var(--mb-sand);
}

/* Les vues (plan, journal, filtres) en encre d'accent ; les familles, plus bas, en encre. */
.bv-palette .fbst-pill--on[b-nudy2utq3e],
.bv-palette .fbst-pill--on:not(:disabled):hover[b-nudy2utq3e] {
    background: var(--mud-palette-tertiary);
    border-color: var(--mud-palette-tertiary);
    color: var(--mud-palette-tertiary-text);
}

.bv-palette .fbst-bar > .fbst-pills:first-child .fbst-pill--on[b-nudy2utq3e],
.bv-palette .fbst-bar > .fbst-pills:first-child .fbst-pill--on:not(:disabled):hover[b-nudy2utq3e] {
    background: var(--mb-ink);
    border-color: var(--mb-ink);
    color: var(--mb-ink-text);
}

.bv-palette .fbst-table[b-nudy2utq3e] {
    border-collapse: separate;
    border-spacing: 0;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 22px;
    overflow: hidden;
}

.bv-palette .fbst-table th[b-nudy2utq3e] {
    padding: calc(12px * var(--g-scale));
    border-bottom: 1px solid var(--mud-palette-lines-default);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-gray-dark);
    background: transparent;
}

.bv-palette .fbst-table td[b-nudy2utq3e] {
    padding: calc(10px * var(--g-scale)) calc(12px * var(--g-scale));
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.bv-palette .fbst-table tr:last-child td[b-nudy2utq3e] {
    border-bottom: 0;
}

.bv-palette .fbst-table th:first-child[b-nudy2utq3e],
.bv-palette .fbst-table td:first-child[b-nudy2utq3e] {
    padding-left: calc(18px * var(--g-scale));
}

.bv-palette .fbst-table th:last-child[b-nudy2utq3e],
.bv-palette .fbst-table td:last-child[b-nudy2utq3e] {
    padding-right: calc(18px * var(--g-scale));
}

.bv-palette .fbst-foot[b-nudy2utq3e] {
    padding: calc(16px * var(--g-scale)) calc(20px * var(--g-scale));
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 22px;
}

.bv-palette .fbst-note[b-nudy2utq3e] {
    color: var(--mud-palette-text-secondary);
}
/* /Components/Pages/Admin/ManageBeverage/BeverageOriginGapPage.razor.rz.scp.css */
/* L'atelier des origines à trou (lot 12) — le gabarit de l'atelier des pays, dont il est le
   voisin : même table, même aperçu, et une colonne de plus qui dit la règle.

   ⚠️ Aucune couleur en dur : `--mud-palette-*` pour ce qui bascule clair/sombre, `--g-*` pour
   les rayons. Tout espacement en pixels s'écrit `calc(Npx * var(--g-scale))`. */

.orig-page[b-i9fd85lyz4] {
    display: flex;
    flex-direction: column;
    gap: calc(16px * var(--g-scale));
    padding: calc(16px * var(--g-scale));
}

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

.orig-head[b-i9fd85lyz4] {
    display: flex;
    align-items: center;
    gap: calc(16px * var(--g-scale));
    flex-wrap: wrap;
}

.orig-back[b-i9fd85lyz4] {
    display: inline-flex;
    align-items: center;
    gap: calc(4px * var(--g-scale));
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
}

.orig-back:hover[b-i9fd85lyz4] {
    color: var(--mud-palette-primary);
}

.orig-headings[b-i9fd85lyz4] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.orig-heading[b-i9fd85lyz4] {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.orig-sub[b-i9fd85lyz4] {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

/* ── Familles et vues ── */

.orig-bar[b-i9fd85lyz4] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: calc(12px * var(--g-scale));
}

.orig-pills[b-i9fd85lyz4] {
    display: flex;
    flex-wrap: wrap;
    gap: calc(8px * var(--g-scale));
}

.orig-pill[b-i9fd85lyz4] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--g-radius-pill, 999px);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
    padding: calc(6px * var(--g-scale)) calc(14px * var(--g-scale));
    cursor: pointer;
}

/* ⚠️ Pas sur la pastille active : son fond est déjà la couleur primaire, et le survol y posait
   la même couleur sur le texte — « Bières » disparaissait sous le pointeur juste après le clic. */
.orig-pill:hover:not(:disabled):not(.orig-pill--on)[b-i9fd85lyz4] {
    color: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
}

.orig-pill--on[b-i9fd85lyz4] {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.orig-pill:disabled[b-i9fd85lyz4] {
    opacity: 0.5;
    cursor: default;
}

/* ── Le plan ── */

.orig-loading[b-i9fd85lyz4],
.orig-alert[b-i9fd85lyz4] {
    margin-top: calc(8px * var(--g-scale));
}

.orig-note[b-i9fd85lyz4] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.orig-table[b-i9fd85lyz4] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.orig-table th[b-i9fd85lyz4] {
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    padding: calc(8px * var(--g-scale));
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.orig-table td[b-i9fd85lyz4] {
    padding: calc(6px * var(--g-scale)) calc(8px * var(--g-scale));
    border-bottom: 1px solid var(--mud-palette-lines-default);
    vertical-align: middle;
}

.orig-col-pick[b-i9fd85lyz4] {
    width: calc(48px * var(--g-scale));
}

.orig-col-num[b-i9fd85lyz4] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Le sélecteur a une largeur à lui : sans elle, la colonne de la règle — la plus longue — l'écrase
   jusqu'à tronquer « Royaume-Uni » en « Royau… ». */
.orig-col-target[b-i9fd85lyz4] {
    width: calc(220px * var(--g-scale));
}

.orig-col-action[b-i9fd85lyz4] {
    text-align: right;
    white-space: nowrap;
}

.orig-value[b-i9fd85lyz4] {
    color: var(--mud-palette-text-primary);
    font-weight: 500;
}

.orig-muted[b-i9fd85lyz4] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
}

/* ── La règle d'une ligne ──

   Quatre tons pour quatre degrés de confiance : unanime, majoritaire, par le nom, rien. La phrase
   dit la même chose en toutes lettres ; la couleur ne sert qu'à balayer la colonne. */

.orig-tag[b-i9fd85lyz4] {
    display: inline-block;
    border-radius: var(--g-radius-md, 8px);
    font-size: 0.75rem;
    padding: calc(3px * var(--g-scale)) calc(9px * var(--g-scale));
}

.orig-tag--sure[b-i9fd85lyz4] {
    color: var(--mud-palette-success-darken);
    background: var(--mud-palette-success-hover);
}

.orig-tag--majority[b-i9fd85lyz4] {
    color: var(--mud-palette-primary-darken);
    background: var(--mud-palette-primary-hover);
}

.orig-tag--named[b-i9fd85lyz4] {
    color: var(--mud-palette-info-darken);
    background: var(--mud-palette-info-hover);
}

.orig-tag--none[b-i9fd85lyz4] {
    color: var(--mud-palette-warning-darken);
    background: var(--mud-palette-warning-hover);
}

/* ── Le journal ── */

.orig-journal-row--reverted .orig-value[b-i9fd85lyz4] {
    text-decoration: line-through;
    color: var(--mud-palette-text-secondary);
}

/* ── L'aperçu, que la décision 4 rend obligatoire ── */

.orig-foot[b-i9fd85lyz4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(16px * var(--g-scale));
    flex-wrap: wrap;
    border-top: 1px solid var(--mud-palette-lines-default);
    padding-top: calc(12px * var(--g-scale));
}

.orig-preview[b-i9fd85lyz4] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.orig-preview-title[b-i9fd85lyz4] {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.orig-preview-body[b-i9fd85lyz4] {
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
}

.orig-actions[b-i9fd85lyz4] {
    display: flex;
    gap: calc(8px * var(--g-scale));
    flex-wrap: wrap;
}

/* ── Le cadre des ateliers du référentiel (dessin du 24/09/2026) ──
   Ces ateliers dérivent de la planche 1F — « Nettoyer une propriété » — sans en avoir une à eux :
   ils en reprennent le panneau crème, les familles en encre, les vues en encre d'accent, la table
   dans un cadre arrondi et l'aperçu sur fond. Préfixés par `.bv-palette`, posée sur la racine, pour
   primer sur les règles plus haut dans ce fichier sans en toucher une. */

.orig-page.bv-palette[b-i9fd85lyz4] {
    margin: calc(20px * var(--g-scale)) calc(24px * var(--g-scale)) calc(28px * var(--g-scale));
    padding: calc(26px * var(--g-scale)) calc(28px * var(--g-scale));
    gap: calc(18px * var(--g-scale));
    max-width: 1320px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--g-radius-lg);
    box-shadow: var(--g-shadow-sm);
}

.bv-palette .orig-heading[b-i9fd85lyz4] {
    font-family: "Poppins", "Figtree", system-ui, sans-serif;
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--mud-palette-text-primary);
}

.bv-palette .orig-sub[b-i9fd85lyz4] {
    font-size: 0.84375rem;
    color: var(--mud-palette-text-secondary);
}

.bv-palette .orig-back[b-i9fd85lyz4] {
    font-weight: 600;
}

.bv-palette .orig-pill[b-i9fd85lyz4] {
    display: inline-flex;
    align-items: center;
    gap: calc(8px * var(--g-scale));
    padding: calc(7px * var(--g-scale)) calc(13px * var(--g-scale));
    border-radius: var(--g-radius-pill);
    border: 1px solid var(--mud-palette-lines-inputs);
    background: var(--mud-palette-surface);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.bv-palette .orig-pill:not(:disabled):hover[b-i9fd85lyz4] {
    background: var(--mb-sand);
}

/* Les vues (plan, journal, filtres) en encre d'accent ; les familles, plus bas, en encre. */
.bv-palette .orig-pill--on[b-i9fd85lyz4],
.bv-palette .orig-pill--on:not(:disabled):hover[b-i9fd85lyz4] {
    background: var(--mud-palette-tertiary);
    border-color: var(--mud-palette-tertiary);
    color: var(--mud-palette-tertiary-text);
}

.bv-palette .orig-bar > .orig-pills:first-child .orig-pill--on[b-i9fd85lyz4],
.bv-palette .orig-bar > .orig-pills:first-child .orig-pill--on:not(:disabled):hover[b-i9fd85lyz4] {
    background: var(--mb-ink);
    border-color: var(--mb-ink);
    color: var(--mb-ink-text);
}

.bv-palette .orig-table[b-i9fd85lyz4] {
    border-collapse: separate;
    border-spacing: 0;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 22px;
    overflow: hidden;
}

.bv-palette .orig-table th[b-i9fd85lyz4] {
    padding: calc(12px * var(--g-scale));
    border-bottom: 1px solid var(--mud-palette-lines-default);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-gray-dark);
    background: transparent;
}

.bv-palette .orig-table td[b-i9fd85lyz4] {
    padding: calc(10px * var(--g-scale)) calc(12px * var(--g-scale));
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.bv-palette .orig-table tr:last-child td[b-i9fd85lyz4] {
    border-bottom: 0;
}

.bv-palette .orig-table th:first-child[b-i9fd85lyz4],
.bv-palette .orig-table td:first-child[b-i9fd85lyz4] {
    padding-left: calc(18px * var(--g-scale));
}

.bv-palette .orig-table th:last-child[b-i9fd85lyz4],
.bv-palette .orig-table td:last-child[b-i9fd85lyz4] {
    padding-right: calc(18px * var(--g-scale));
}

.bv-palette .orig-foot[b-i9fd85lyz4] {
    padding: calc(16px * var(--g-scale)) calc(20px * var(--g-scale));
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 22px;
}

.bv-palette .orig-note[b-i9fd85lyz4] {
    color: var(--mud-palette-text-secondary);
}
/* /Components/Pages/Admin/ManageBeverage/BeverageQualityPage.razor.rz.scp.css */
/* Planche 1C — le tableau de bord qualité du référentiel (dessin du 24/09/2026).

   ⚠️ Aucune couleur en dur : `--mud-palette-*` pour ce qui bascule clair/sombre, les teintes
   composées de `bv-palette` (app.css) pour le sable, la pêche et la sauge, `--g-*` pour le reste.
   ⚠️ Tout espacement en pixels s'écrit `calc(Npx * var(--g-scale))`. */

.qual-page[b-u25bhijgzx] {
    display: flex;
    flex-direction: column;
    gap: calc(12px * var(--g-scale));
    padding: calc(20px * var(--g-scale)) calc(24px * var(--g-scale)) calc(28px * var(--g-scale));
    max-width: 1320px;
}

.qual-back[b-u25bhijgzx] {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: calc(4px * var(--g-scale));
    font-size: 0.84375rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
}

.qual-back:hover[b-u25bhijgzx] {
    color: var(--mud-palette-tertiary);
}

/* ── Le panneau : la planche pose tout le tableau de bord sur une seule carte crème ── */

.qual-board[b-u25bhijgzx] {
    display: flex;
    flex-direction: column;
    gap: calc(22px * var(--g-scale));
    padding: calc(26px * var(--g-scale)) calc(28px * var(--g-scale));
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--g-radius-lg);
    box-shadow: var(--g-shadow-sm);
}

.qual-head[b-u25bhijgzx] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(20px * var(--g-scale));
}

.qual-headings[b-u25bhijgzx] {
    display: flex;
    flex-direction: column;
    gap: calc(4px * var(--g-scale));
    min-width: 0;
}

.qual-heading[b-u25bhijgzx] {
    margin: 0;
    font-family: "Poppins", "Figtree", system-ui, sans-serif;
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--mud-palette-text-primary);
}

.qual-sub[b-u25bhijgzx] {
    font-size: 0.84375rem;
    color: var(--mud-palette-text-secondary);
}

[b-u25bhijgzx] .qual-refresh {
    color: var(--mud-palette-text-secondary);
}

/* ── Les cartes de chantier : trois par rangée, sable sur la carte crème ── */

.qual-cards[b-u25bhijgzx] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(14px * var(--g-scale));
}

@media (max-width: 1100px) {
    .qual-cards[b-u25bhijgzx] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .qual-cards[b-u25bhijgzx] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.qual-card[b-u25bhijgzx] {
    display: flex;
    flex-direction: column;
    gap: calc(10px * var(--g-scale));
    padding: calc(18px * var(--g-scale)) calc(20px * var(--g-scale));
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 22px;
}

.qual-card-title[b-u25bhijgzx] {
    display: flex;
    align-items: center;
    gap: calc(10px * var(--g-scale));
    font-size: 0.84375rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.qual-dot[b-u25bhijgzx] {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: var(--g-radius-pill);
    background: var(--mud-palette-text-disabled);
}

/* Les teintes de la planche, chantier par chantier. */
.qual-dot--Duplicate[b-u25bhijgzx] { background: var(--mud-palette-primary); }
.qual-dot--MinorSpelling[b-u25bhijgzx] { background: var(--g-family-hotbeverage); }
.qual-dot--IncompleteOrigin[b-u25bhijgzx] { background: var(--g-family-wine); }
.qual-dot--ExclusiveDoublingCommon[b-u25bhijgzx] { background: var(--mud-palette-secondary); }
.qual-dot--FallbackSubType[b-u25bhijgzx] { background: var(--g-family-solid); }

.qual-card-value[b-u25bhijgzx] {
    display: flex;
    align-items: baseline;
    gap: calc(8px * var(--g-scale));
}

.qual-value[b-u25bhijgzx] {
    font-family: "Poppins", "Figtree", system-ui, sans-serif;
    font-size: 1.875rem;
    font-weight: 600;
    line-height: 1;
    color: var(--mud-palette-text-primary);
}

.qual-unit[b-u25bhijgzx] {
    font-size: 0.8125rem;
    color: var(--mud-palette-gray-dark);
}

.qual-card-decisions[b-u25bhijgzx] {
    font-size: 0.78125rem;
    font-weight: 600;
    color: var(--mud-palette-gray-dark);
}

.qual-card-desc[b-u25bhijgzx] {
    flex: 1;
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

.qual-card-cta[b-u25bhijgzx] {
    min-height: 1.2em;
}

.qual-link[b-u25bhijgzx] {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--mud-palette-tertiary);
    text-decoration: none;
}

.qual-link:hover[b-u25bhijgzx] {
    text-decoration: underline;
}

/* ── À traiter en priorité ── */

.qual-priorities[b-u25bhijgzx] {
    display: flex;
    flex-direction: column;
    gap: calc(10px * var(--g-scale));
}

.qual-priorities-title[b-u25bhijgzx] {
    margin: 0;
    font-family: inherit;
    font-size: 0.71875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-gray-dark);
}

.qual-empty[b-u25bhijgzx] {
    margin: 0;
    padding: calc(16px * var(--g-scale)) calc(20px * var(--g-scale));
    font-size: 0.84375rem;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background);
    border: 1px dashed var(--mud-palette-lines-inputs);
    border-radius: 22px;
}

.qual-priority-list[b-u25bhijgzx] {
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 22px;
    overflow: hidden;
}

.qual-priority[b-u25bhijgzx] {
    display: grid;
    grid-template-columns: 1.5fr 1.6fr 0.6fr 0.8fr auto;
    gap: calc(16px * var(--g-scale));
    align-items: center;
    padding: calc(15px * var(--g-scale)) calc(20px * var(--g-scale));
    border-bottom: 1px solid var(--mud-palette-lines-default);
    font-size: 0.84375rem;
    color: var(--mud-palette-text-secondary);
}

.qual-priority:last-child[b-u25bhijgzx] {
    border-bottom: 0;
}

.qual-priority-what[b-u25bhijgzx] {
    display: flex;
    align-items: center;
    gap: calc(10px * var(--g-scale));
    min-width: 0;
}

.qual-chip[b-u25bhijgzx] {
    flex: none;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: var(--g-radius-pill);
    padding: calc(4px * var(--g-scale)) calc(10px * var(--g-scale));
    white-space: nowrap;
    background: var(--mb-sand);
    color: var(--mud-palette-text-secondary);
}

/* Les trois voix de la planche : graphies en sauge, doublons en pêche, le reste en sable. */
.qual-chip--MinorSpelling[b-u25bhijgzx] {
    background: var(--mb-sage);
    color: var(--mb-sage-ink);
}

.qual-chip--Duplicate[b-u25bhijgzx],
.qual-chip--ExclusiveDoublingCommon[b-u25bhijgzx] {
    background: var(--mb-peach);
    color: var(--mb-peach-ink);
}

.qual-priority-prop[b-u25bhijgzx] {
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qual-priority-detail[b-u25bhijgzx] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qual-priority-decisions[b-u25bhijgzx] {
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}

.qual-priority-impact[b-u25bhijgzx] {
    white-space: nowrap;
}

.qual-priority-action[b-u25bhijgzx] {
    justify-self: end;
}

.qual-pill[b-u25bhijgzx] {
    display: inline-flex;
    align-items: center;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--mb-peach-ink);
    background: var(--mb-peach);
    border-radius: var(--g-radius-pill);
    padding: calc(8px * var(--g-scale)) calc(15px * var(--g-scale));
    white-space: nowrap;
    text-decoration: none;
}

.qual-pill:hover[b-u25bhijgzx] {
    background: color-mix(in srgb, var(--mb-peach) 70%, var(--mud-palette-surface));
}

@media (max-width: 900px) {
    .qual-priority[b-u25bhijgzx] {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .qual-priority-detail[b-u25bhijgzx],
    .qual-priority-decisions[b-u25bhijgzx] {
        display: none;
    }
}
/* /Components/Pages/Admin/ManageBeverage/BeverageSpellingCleanupPage.razor.rz.scp.css */
/* Planches 1F et 1G — l'atelier des graphies (dessin du 24/09/2026).

   1F en deux colonnes : les valeurs à gauche (la retenue en sauge, celles qui basculent en pêche),
   le plan de bascule à droite sur un panneau sable. 1G : une carte de décision à deux options,
   la conservée cerclée de sauge.

   ⚠️ Aucune couleur en dur : `--mud-palette-*`, les teintes de `bv-palette` (app.css), `--g-*`.
   ⚠️ Tout espacement en pixels s'écrit `calc(Npx * var(--g-scale))`. */

.spl-page[b-p0bobscb0o] {
    display: flex;
    flex-direction: column;
    gap: calc(12px * var(--g-scale));
    padding: calc(20px * var(--g-scale)) calc(24px * var(--g-scale)) calc(28px * var(--g-scale));
    max-width: 1320px;
}

.spl-back[b-p0bobscb0o] {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: calc(4px * var(--g-scale));
    font-size: 0.84375rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
}

.spl-back:hover[b-p0bobscb0o] {
    color: var(--mud-palette-tertiary);
}

.spl-board[b-p0bobscb0o] {
    display: flex;
    flex-direction: column;
    gap: calc(20px * var(--g-scale));
    padding: calc(26px * var(--g-scale)) calc(28px * var(--g-scale));
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--g-radius-lg);
    box-shadow: var(--g-shadow-sm);
}

/* ── En-tête : titre à gauche, les propriétés en segment à droite ── */

.spl-head[b-p0bobscb0o] {
    display: flex;
    align-items: flex-start;
    gap: calc(16px * var(--g-scale));
    flex-wrap: wrap;
}

.spl-headings[b-p0bobscb0o] {
    display: flex;
    flex-direction: column;
    gap: calc(4px * var(--g-scale));
    min-width: 0;
    flex: 1 1 280px;
}

.spl-heading[b-p0bobscb0o] {
    margin: 0;
    font-family: "Poppins", "Figtree", system-ui, sans-serif;
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--mud-palette-text-primary);
}

.spl-sub[b-p0bobscb0o] {
    font-size: 0.84375rem;
    color: var(--mud-palette-text-secondary);
}

[b-p0bobscb0o] .spl-refresh {
    color: var(--mud-palette-text-secondary);
}

.spl-seg[b-p0bobscb0o] {
    display: flex;
    align-items: center;
    gap: calc(4px * var(--g-scale));
    padding: calc(5px * var(--g-scale));
    border-radius: var(--g-radius-pill);
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-inputs);
    flex-wrap: wrap;
}

.spl-seg-opt[b-p0bobscb0o] {
    padding: calc(8px * var(--g-scale)) calc(15px * var(--g-scale));
    border: 0;
    border-radius: var(--g-radius-pill);
    background: transparent;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    white-space: nowrap;
}

.spl-seg-opt:not(:disabled):hover[b-p0bobscb0o] {
    background: var(--mb-sand);
}

.spl-seg-opt--on[b-p0bobscb0o],
.spl-seg-opt--on:not(:disabled):hover[b-p0bobscb0o] {
    background: var(--mb-ink);
    color: var(--mb-ink-text);
}

/* ── La barre : familles à gauche, vues à droite ── */

.spl-bar[b-p0bobscb0o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(12px * var(--g-scale));
    flex-wrap: wrap;
    padding-bottom: calc(14px * var(--g-scale));
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.spl-families[b-p0bobscb0o],
.spl-modes[b-p0bobscb0o] {
    display: flex;
    align-items: center;
    gap: calc(6px * var(--g-scale));
    flex-wrap: wrap;
}

.spl-family[b-p0bobscb0o],
.spl-mode[b-p0bobscb0o] {
    display: inline-flex;
    align-items: center;
    gap: calc(8px * var(--g-scale));
    padding: calc(7px * var(--g-scale)) calc(13px * var(--g-scale));
    border-radius: var(--g-radius-pill);
    border: 1px solid var(--mud-palette-lines-inputs);
    background: var(--mud-palette-surface);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    white-space: nowrap;
}

.spl-family:not(:disabled):hover[b-p0bobscb0o],
.spl-mode:not(:disabled):hover[b-p0bobscb0o] {
    background: var(--mb-sand);
}

.spl-family--on[b-p0bobscb0o],
.spl-family--on:not(:disabled):hover[b-p0bobscb0o] {
    background: var(--mb-ink);
    border-color: var(--mb-ink);
    color: var(--mb-ink-text);
}

.spl-mode--on[b-p0bobscb0o],
.spl-mode--on:not(:disabled):hover[b-p0bobscb0o] {
    background: var(--mud-palette-tertiary);
    border-color: var(--mud-palette-tertiary);
    color: var(--mud-palette-tertiary-text);
}

.spl-dot[b-p0bobscb0o] {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: var(--g-radius-pill);
    background: var(--mud-palette-text-disabled);
}

.spl-dot--wine[b-p0bobscb0o] { background: var(--g-family-wine); }
.spl-dot--beer[b-p0bobscb0o] { background: var(--g-family-beer); }
.spl-dot--spirit[b-p0bobscb0o] { background: var(--g-family-spirit); }
.spl-dot--softdrink[b-p0bobscb0o] { background: var(--g-family-softdrink); }
.spl-dot--hotbeverage[b-p0bobscb0o] { background: var(--g-family-hotbeverage); }
.spl-dot--solid[b-p0bobscb0o] { background: var(--g-family-solid); }

[b-p0bobscb0o] .spl-loading {
    margin: calc(12px * var(--g-scale)) 0;
}

[b-p0bobscb0o] .spl-alert {
    margin: 0;
}

.spl-empty[b-p0bobscb0o] {
    margin: 0;
    padding: calc(18px * var(--g-scale)) calc(20px * var(--g-scale));
    font-size: 0.84375rem;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background);
    border: 1px dashed var(--mud-palette-lines-inputs);
    border-radius: 22px;
}

/* ── Les boutons ── */

.spl-btn[b-p0bobscb0o] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(8px * var(--g-scale));
    padding: calc(11px * var(--g-scale)) calc(18px * var(--g-scale));
    border-radius: var(--g-radius-pill);
    border: 1px solid transparent;
    font: inherit;
    font-size: 0.84375rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.spl-btn:disabled[b-p0bobscb0o] {
    opacity: 0.45;
    cursor: not-allowed;
}

.spl-btn--primary[b-p0bobscb0o] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 700;
    padding: calc(12px * var(--g-scale)) calc(20px * var(--g-scale));
}

.spl-btn--primary:not(:disabled):hover[b-p0bobscb0o] {
    background: color-mix(in srgb, var(--mud-palette-primary) 86%, var(--mud-palette-text-primary));
}

.spl-btn--quiet[b-p0bobscb0o] {
    background: var(--mud-palette-background);
    border-color: var(--mud-palette-lines-inputs);
    color: var(--mud-palette-text-secondary);
}

.spl-btn--quiet:not(:disabled):hover[b-p0bobscb0o] {
    background: var(--mb-sand);
}

.spl-btn--small[b-p0bobscb0o] {
    padding: calc(6px * var(--g-scale)) calc(12px * var(--g-scale));
    font-size: 0.78125rem;
}

.spl-spacer[b-p0bobscb0o] {
    flex: 1;
}

.spl-chip[b-p0bobscb0o] {
    display: inline-flex;
    align-items: center;
    font-size: 0.78125rem;
    font-weight: 700;
    border-radius: var(--g-radius-pill);
    padding: calc(8px * var(--g-scale)) calc(14px * var(--g-scale));
    white-space: nowrap;
}

.spl-chip--sage[b-p0bobscb0o] {
    background: var(--mb-sage);
    color: var(--mb-sage-ink);
}

.spl-kicker[b-p0bobscb0o] {
    font-size: 0.71875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-gray-dark);
}

.spl-muted[b-p0bobscb0o] {
    color: var(--mud-palette-gray-dark);
}

.spl-nowrap[b-p0bobscb0o] {
    white-space: nowrap;
}

/* ── 1F : deux colonnes ── */

.spl-plan[b-p0bobscb0o] {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: calc(18px * var(--g-scale));
    align-items: start;
}

@media (max-width: 1100px) {
    .spl-plan[b-p0bobscb0o] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.spl-plan-values[b-p0bobscb0o] {
    display: flex;
    flex-direction: column;
    gap: calc(10px * var(--g-scale));
    min-width: 0;
}

.spl-toolbar[b-p0bobscb0o] {
    display: flex;
    align-items: center;
    gap: calc(10px * var(--g-scale));
}

[b-p0bobscb0o] .spl-search {
    flex: 1;
    margin: 0;
}

[b-p0bobscb0o] .spl-search .mud-input-outlined-border {
    border-radius: var(--g-radius-pill);
    border-color: var(--mud-palette-lines-inputs);
}

[b-p0bobscb0o] .spl-search .mud-input {
    background: var(--mud-palette-background);
    border-radius: var(--g-radius-pill);
}

[b-p0bobscb0o] .spl-switch {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.spl-list[b-p0bobscb0o] {
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 22px;
    overflow: hidden;
}

.spl-table[b-p0bobscb0o] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84375rem;
}

.spl-table th[b-p0bobscb0o] {
    padding: calc(12px * var(--g-scale)) calc(12px * var(--g-scale));
    border-bottom: 1px solid var(--mud-palette-lines-default);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
    color: var(--mud-palette-gray-dark);
}

.spl-table td[b-p0bobscb0o] {
    padding: calc(11px * var(--g-scale)) calc(12px * var(--g-scale));
    border-bottom: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
    vertical-align: middle;
}

.spl-table th:first-child[b-p0bobscb0o],
.spl-table td:first-child[b-p0bobscb0o] {
    padding-left: calc(18px * var(--g-scale));
}

.spl-table th:last-child[b-p0bobscb0o],
.spl-table td:last-child[b-p0bobscb0o] {
    padding-right: calc(18px * var(--g-scale));
}

.spl-col-pick[b-p0bobscb0o] {
    width: 44px;
}

.spl-col-num[b-p0bobscb0o] {
    width: 80px;
    text-align: right;
    white-space: nowrap;
}

.spl-table th.spl-col-num[b-p0bobscb0o] {
    text-align: right;
}

.spl-col-status[b-p0bobscb0o] {
    width: 130px;
    text-align: right;
}

.spl-table th.spl-col-status[b-p0bobscb0o] {
    text-align: right;
}

.spl-col-action[b-p0bobscb0o] {
    text-align: right;
    white-space: nowrap;
}

/* Un groupe : son nom en gras, et ses graphies juste dessous, en retrait. */
.spl-group td[b-p0bobscb0o] {
    border-bottom: 0;
    padding-top: calc(14px * var(--g-scale));
}

.spl-group-name[b-p0bobscb0o] {
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.spl-group-meta[b-p0bobscb0o],
.spl-country[b-p0bobscb0o] {
    margin-left: calc(10px * var(--g-scale));
    font-size: 0.75rem;
    color: var(--mud-palette-gray-dark);
}

.spl-country[b-p0bobscb0o] {
    font-weight: 700;
    color: var(--mb-sage-ink);
}

.spl-variant td[b-p0bobscb0o] {
    padding-top: calc(7px * var(--g-scale));
    padding-bottom: calc(7px * var(--g-scale));
    border-bottom: 0;
}

.spl-variant-raw[b-p0bobscb0o] {
    padding-left: calc(24px * var(--g-scale)) !important;
}

.spl-variant--keep td[b-p0bobscb0o] {
    background: var(--mb-sage);
}

.spl-variant--keep .spl-variant-raw[b-p0bobscb0o] {
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.spl-variant--drop td[b-p0bobscb0o] {
    background: var(--mb-sand);
}

.spl-variant--drop .spl-variant-raw[b-p0bobscb0o] {
    font-weight: 700;
    color: var(--mb-peach-ink);
}

/* Le filet entre deux groupes : sous la dernière graphie, avant le groupe suivant. */
.spl-table--values tbody tr.spl-group:not(:first-child) td[b-p0bobscb0o] {
    border-top: 1px solid var(--mud-palette-lines-default);
}

.spl-check[b-p0bobscb0o] {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    width: 19px;
    height: 19px;
    border-radius: 6px;
    border: 1.5px solid var(--mud-palette-lines-inputs);
    background: var(--mud-palette-surface);
    cursor: pointer;
    vertical-align: middle;
}

.spl-check:checked[b-p0bobscb0o] {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E")
        center / 12px no-repeat;
}

.spl-tag[b-p0bobscb0o] {
    display: inline-flex;
    align-items: center;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border-radius: var(--g-radius-pill);
    padding: calc(4px * var(--g-scale)) calc(10px * var(--g-scale));
    white-space: nowrap;
    background: var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
}

.spl-tag--keep[b-p0bobscb0o],
.spl-tag--Distinct[b-p0bobscb0o] {
    background: color-mix(in srgb, var(--mud-palette-secondary) 36%, var(--mud-palette-surface));
    color: var(--mb-sage-ink);
}

.spl-tag--drop[b-p0bobscb0o],
.spl-tag--Rewrite[b-p0bobscb0o] {
    background: var(--mb-peach);
    color: var(--mb-peach-ink);
}

.spl-more[b-p0bobscb0o] {
    padding: calc(12px * var(--g-scale));
    border: 0;
    border-top: 1px solid var(--mud-palette-lines-default);
    background: transparent;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--mud-palette-tertiary);
    cursor: pointer;
}

.spl-more:hover[b-p0bobscb0o] {
    background: var(--mb-sand);
}

/* ── Le plan de bascule ── */

.spl-plan-panel[b-p0bobscb0o] {
    position: sticky;
    top: calc(80px * var(--g-scale));
    display: flex;
    flex-direction: column;
    gap: calc(14px * var(--g-scale));
    padding: calc(20px * var(--g-scale));
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--g-radius-card);
    max-height: calc(100vh - 110px);
    overflow-y: auto;
}

.spl-panel-empty[b-p0bobscb0o] {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

.spl-switch-card[b-p0bobscb0o] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: calc(8px * var(--g-scale));
    padding-bottom: calc(14px * var(--g-scale));
    border-bottom: 1px solid var(--mud-palette-lines-inputs);
}

.spl-source[b-p0bobscb0o] {
    display: flex;
    align-items: center;
    gap: calc(10px * var(--g-scale));
    padding: calc(10px * var(--g-scale)) calc(14px * var(--g-scale));
    margin-right: calc(36px * var(--g-scale));
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 14px;
}

.spl-source-name[b-p0bobscb0o] {
    flex: 1;
    min-width: 0;
    font-size: 0.84375rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.spl-source-count[b-p0bobscb0o] {
    font-size: 0.78125rem;
    color: var(--mud-palette-gray-dark);
    white-space: nowrap;
}

.spl-arrow[b-p0bobscb0o] {
    display: inline-flex;
    align-items: center;
    gap: calc(8px * var(--g-scale));
    font-size: 0.78125rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mud-palette-gray-dark);
}

.spl-target[b-p0bobscb0o] {
    display: flex;
    flex-direction: column;
    gap: calc(4px * var(--g-scale));
    padding: calc(12px * var(--g-scale)) calc(14px * var(--g-scale));
    margin-right: calc(36px * var(--g-scale));
    background: var(--mb-sage);
    border: 1px solid color-mix(in srgb, var(--mud-palette-secondary) 45%, var(--mud-palette-surface));
    border-radius: 18px;
}

[b-p0bobscb0o] .spl-target-select {
    margin: 0;
}

[b-p0bobscb0o] .spl-target-select .mud-input {
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    border-radius: 12px;
}

.spl-target-meta[b-p0bobscb0o] {
    font-size: 0.78125rem;
    color: var(--mb-sage-ink);
}

.spl-unpick[b-p0bobscb0o] {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: var(--g-radius-pill);
    background: transparent;
    color: var(--mud-palette-text-disabled);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.spl-unpick:not(:disabled):hover[b-p0bobscb0o] {
    background: var(--mb-sand);
    color: var(--mud-palette-tertiary);
}

.spl-preview[b-p0bobscb0o] {
    display: flex;
    flex-direction: column;
    gap: calc(6px * var(--g-scale));
}

.spl-preview-body[b-p0bobscb0o] {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

.spl-preview-common[b-p0bobscb0o] {
    font-size: 0.78125rem;
    font-weight: 600;
    color: var(--mud-palette-tertiary);
}

.spl-plan-panel > .spl-btn--primary[b-p0bobscb0o] {
    align-self: flex-start;
}

/* ── 1G : la carte de décision ── */

.spl-queue-head[b-p0bobscb0o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(12px * var(--g-scale));
    flex-wrap: wrap;
}

.spl-note[b-p0bobscb0o] {
    margin: 0;
    font-size: 0.84375rem;
    color: var(--mud-palette-text-secondary);
}

.spl-card[b-p0bobscb0o] {
    display: flex;
    flex-direction: column;
    gap: calc(12px * var(--g-scale));
    padding: calc(22px * var(--g-scale));
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--g-radius-card);
    max-width: 860px;
}

.spl-option[b-p0bobscb0o] {
    display: flex;
    align-items: center;
    gap: calc(14px * var(--g-scale));
    padding: calc(16px * var(--g-scale)) calc(18px * var(--g-scale));
    border-radius: 20px;
    border: 2px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

.spl-option--keep[b-p0bobscb0o] {
    background: var(--mb-sage);
    border-color: var(--mud-palette-secondary);
}

.spl-option--drop[b-p0bobscb0o] {
    cursor: pointer;
}

.spl-option--drop:hover[b-p0bobscb0o] {
    border-color: var(--mud-palette-lines-inputs);
}

.spl-radio[b-p0bobscb0o] {
    flex: none;
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: var(--g-radius-pill);
    border: 1.5px solid var(--mud-palette-lines-inputs);
    background: var(--mud-palette-surface);
    cursor: pointer;
}

.spl-radio--on[b-p0bobscb0o] {
    border: 0;
    background: var(--mud-palette-secondary);
    box-shadow: inset 0 0 0 6px var(--mud-palette-secondary), inset 0 0 0 10px var(--mud-palette-surface);
    cursor: default;
}

.spl-option-texts[b-p0bobscb0o] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: calc(3px * var(--g-scale));
}

.spl-option-value[b-p0bobscb0o] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.spl-option-meta[b-p0bobscb0o] {
    font-size: 0.78125rem;
    color: var(--mud-palette-text-secondary);
}

.spl-sentence[b-p0bobscb0o] {
    margin: 0;
    padding: calc(13px * var(--g-scale)) calc(16px * var(--g-scale));
    font-size: 0.84375rem;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 18px;
}

.spl-card-actions[b-p0bobscb0o] {
    display: flex;
    align-items: center;
    gap: calc(10px * var(--g-scale));
    flex-wrap: wrap;
    max-width: 860px;
}

.spl-later[b-p0bobscb0o] {
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 0.8125rem;
    color: var(--mud-palette-gray-dark);
    cursor: pointer;
}

.spl-later:not(:disabled):hover[b-p0bobscb0o] {
    color: var(--mud-palette-tertiary);
}

.spl-next[b-p0bobscb0o] {
    display: flex;
    flex-direction: column;
    gap: calc(8px * var(--g-scale));
    max-width: 860px;
}

.spl-next-list[b-p0bobscb0o] {
    display: flex;
    flex-direction: column;
    gap: calc(8px * var(--g-scale));
    margin: 0;
    padding: 0;
    list-style: none;
}

.spl-next-list li[b-p0bobscb0o] {
    display: flex;
    align-items: center;
    gap: calc(12px * var(--g-scale));
    padding: calc(11px * var(--g-scale)) calc(15px * var(--g-scale));
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
}

.spl-next-score[b-p0bobscb0o] {
    flex: none;
    font-size: 0.6875rem;
    font-weight: 700;
    border-radius: var(--g-radius-pill);
    padding: calc(4px * var(--g-scale)) calc(9px * var(--g-scale));
    background: var(--mb-peach);
    color: var(--mb-peach-ink);
}

.spl-next-label[b-p0bobscb0o] {
    flex: 1;
    min-width: 0;
    font-size: 0.84375rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Le journal ── */

.spl-journal-row--reverted td[b-p0bobscb0o] {
    opacity: 0.55;
}

.spl-value[b-p0bobscb0o] {
    color: var(--mud-palette-text-primary);
}
/* /Components/Pages/Admin/ManageBeverage/Components/BeverageBulkEditDialog.razor.rz.scp.css */
/* « Modifier en masse » — planche 1A, barre de sélection. Le squelette (dlg-*) vient de
   css/dialogs.css ; ici seulement la mise en page propre au dialogue. */

.be-body[b-u0q94ygq4s] {
    display: flex;
    flex-direction: column;
    gap: calc(16px * var(--g-scale));
}

.be-card[b-u0q94ygq4s] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: calc(12px * var(--g-scale));
}

/* Une ligne d'assignation : le champ prend la place, le retrait reste à droite. */
.be-field-row[b-u0q94ygq4s] {
    display: flex;
    align-items: flex-start;
    gap: calc(10px * var(--g-scale));
}

.be-field-row[b-u0q94ygq4s]  .mud-input-control {
    flex: 1;
    min-width: 0;
}

.be-flag-field[b-u0q94ygq4s] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: calc(12px * var(--g-scale));
}

.be-add-field[b-u0q94ygq4s] {
    max-width: 320px;
}

/* L'aperçu : une ligne par sort, le compte à gauche du libellé. */
.be-plan[b-u0q94ygq4s] {
    display: flex;
    flex-direction: column;
    gap: calc(6px * var(--g-scale));
}

.be-plan-row[b-u0q94ygq4s] {
    display: flex;
    align-items: center;
    gap: calc(10px * var(--g-scale));
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
}

.be-plan-count[b-u0q94ygq4s] {
    font-weight: 700;
    min-width: 44px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.be-dot[b-u0q94ygq4s] {
    width: 9px;
    height: 9px;
    border-radius: var(--g-radius-pill);
    flex: none;
}

.be-dot--updated[b-u0q94ygq4s] { background: var(--g-accent2); }
.be-dot--unchanged[b-u0q94ygq4s] { background: var(--g-neutral-500); }
.be-dot--collision[b-u0q94ygq4s] { background: var(--g-accent); }
.be-dot--rejected[b-u0q94ygq4s] { background: var(--mud-palette-error); }

/* Le détail des fiches laissées de côté — borné, il défile. */
.be-details[b-u0q94ygq4s] {
    max-height: 260px;
    overflow-y: auto;
}
/* /Components/Pages/Admin/ManageBeverage/Components/BeverageImportExportDialog.razor.rz.scp.css */
/* Import / export CSV — planche 1I. Les classes `dlg-*` viennent de wwwroot/css/dialogs.css ;
   ne vivent ici que les formes propres à cet écran : la carte à deux colonnes, la rangée du
   fichier et l'encart « ce que l'import fera ». */

[b-o1b5s4gtfm] .ie-body {
    gap: calc(16px * var(--g-scale));
}

.ie-card[b-o1b5s4gtfm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(16px * var(--g-scale));
}

.ie-card--column[b-o1b5s4gtfm] {
    flex-direction: column;
    align-items: stretch;
}

.ie-file-row[b-o1b5s4gtfm] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(12px * var(--g-scale));
}

/* L'encart de la planche : un point de couleur, le compte à largeur fixe pour que les libellés
   s'alignent, le libellé qui prend le reste, et le lien de détail qui ne se replie pas. */
.ie-plan[b-o1b5s4gtfm] {
    display: flex;
    flex-direction: column;
    gap: calc(8px * var(--g-scale));
}

.ie-plan-row[b-o1b5s4gtfm] {
    display: flex;
    align-items: center;
    gap: calc(12px * var(--g-scale));
    padding: calc(10px * var(--g-scale)) calc(14px * var(--g-scale));
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-background-gray);
}

.ie-plan-count[b-o1b5s4gtfm] {
    min-width: 4ch;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
}

.ie-plan-label[b-o1b5s4gtfm] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
}

.ie-dot[b-o1b5s4gtfm] {
    width: 9px;
    height: 9px;
    flex: none;
    border-radius: 999px;
    background: var(--mud-palette-text-disabled);
}

/* Les cinq voix : sauge pour ce qui s'écrit, neutre pour ce qui ne bouge pas, accent pour une
   place déjà prise, et l'erreur pour un rejet — les seules couleurs sémantiques de la palette. */
.ie-dot--update[b-o1b5s4gtfm] { background: var(--mud-palette-success); }
.ie-dot--create[b-o1b5s4gtfm] { background: var(--mud-palette-info); }
.ie-dot--unchanged[b-o1b5s4gtfm] { background: var(--mud-palette-text-disabled); }
.ie-dot--collision[b-o1b5s4gtfm] { background: var(--mud-palette-warning); }
.ie-dot--rejected[b-o1b5s4gtfm] { background: var(--mud-palette-error); }

.ie-ignored[b-o1b5s4gtfm] {
    color: var(--mud-palette-warning);
    font-style: italic;
}

[b-o1b5s4gtfm] .ie-mapping,
[b-o1b5s4gtfm] .ie-details {
    max-height: 260px;
    overflow-y: auto;
}

/* Le rattachement : en-tête du fichier, destination choisie, et comment elle a été obtenue. Une
   colonne à confirmer porte un filet d'accent — la seule chose que la liste doit faire voir. */
.ie-mapping-head[b-o1b5s4gtfm] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(12px * var(--g-scale));
}

[b-o1b5s4gtfm] .ie-mapping-line {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
}

/* Le filet est une bordure à coins droits : posé en ombre sur une ligne arrondie, il en suivait
   l'arrondi et dessinait une parenthèse. */
[b-o1b5s4gtfm] .ie-mapping-line--confirm {
    border-left: 3px solid var(--mud-palette-warning);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Une ligne de rattachement porte une liste déroulante : deux fois plus haute qu'une ligne de
   détail, 260 px n'en montraient que trois. */
[b-o1b5s4gtfm] .ie-mapping {
    max-height: 420px;
}

[b-o1b5s4gtfm] .ie-mapping-header {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 700px) {
    [b-o1b5s4gtfm] .ie-mapping-line {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Le lien de retour ne se replie pas : c'est la phrase d'aide qui cède la place. */
.ie-mapping-head > button[b-o1b5s4gtfm] {
    flex: none;
    white-space: nowrap;
}

/* ── Le dessin du 24/09/2026 (planche 1I) ──
   L'export sur une carte de fond, titrée en gras et non en capitales ; l'import dans une zone en
   pointillés, qui dit qu'on y dépose un fichier. Bornés à `.ie-body` : dialogs.css reste commun à
   toutes les modales. */
.ie-body .ie-card[b-o1b5s4gtfm] {
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 22px;
    padding: calc(18px * var(--g-scale)) calc(20px * var(--g-scale));
}

.ie-body .ie-card--column[b-o1b5s4gtfm] {
    border: 1px dashed var(--mud-palette-lines-inputs);
    border-radius: var(--g-radius-card);
    padding: calc(22px * var(--g-scale));
}

.ie-body .ie-card > .dlg-card-texts > .dlg-kicker[b-o1b5s4gtfm] {
    font-size: 0.90625rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--mud-palette-text-primary);
}

.ie-body .dlg-card-note[b-o1b5s4gtfm] {
    color: var(--mud-palette-text-secondary);
}

/* « Exporter en CSV » : un bouton neutre, comme la planche — l'action principale du dialogue est
   l'import. */
.ie-body .ie-card[b-o1b5s4gtfm]  .mud-button-outlined {
    background: var(--mud-palette-surface);
    border-color: var(--mud-palette-lines-inputs);
    color: var(--mud-palette-text-secondary);
}
/* /Components/Pages/Admin/ManageBeverage/Components/BeverageMergeDialog.razor.rz.scp.css */
/* L'arbitrage d'une fusion, au dessin de la planche 1E (24/09/2026).

   Une colonne par fiche — la destination d'abord, cerclée de terracotta, puis les sources, puis la
   fiche obtenue en encre. Les en-têtes et le tableau partagent la même grille, `--mrg-cols`
   colonnes : les lignes du tableau s'effacent de la mise en page (`display: contents`), si bien
   que leurs cases se rangent colonne par colonne sous leur en-tête.

   Ce qui n'est pas ici vient de `wwwroot/css/dialogs.css` (en-tête, bandeaux, pied).
   ⚠️ Aucune couleur en dur : `--mud-palette-*`, les teintes de `bv-palette` (app.css), `--g-*`.
   ⚠️ Tout espacement en pixels s'écrit `calc(Npx * var(--g-scale))`. */

.mrg-heads[b-21pzd2sw5d],
.mrg-table[b-21pzd2sw5d] {
    display: grid;
    grid-template-columns: repeat(var(--mrg-cols, 3), minmax(190px, 1fr));
    column-gap: calc(14px * var(--g-scale));
}

.mrg-body[b-21pzd2sw5d] {
    overflow-x: auto;
}

/* ── Les en-têtes de colonne ── */

.mrg-heads[b-21pzd2sw5d] {
    row-gap: calc(12px * var(--g-scale));
}

.mrg-head[b-21pzd2sw5d] {
    display: flex;
    flex-direction: column;
    gap: calc(8px * var(--g-scale));
    min-width: 0;
    padding: calc(16px * var(--g-scale));
    border-radius: 20px;
    background: var(--mud-palette-surface);
    border: 2px solid var(--mud-palette-lines-default);
}

.mrg-head--dest[b-21pzd2sw5d] {
    border-color: var(--mud-palette-primary);
}

/* La fiche obtenue : encre dans les deux ambiances, comme la colonne de la file des doublons. */
.mrg-head--result[b-21pzd2sw5d] {
    background: var(--g-neutral-900);
    border-color: var(--g-neutral-900);
}

.mrg-head-top[b-21pzd2sw5d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(8px * var(--g-scale));
}

.mrg-tag[b-21pzd2sw5d] {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-gray-dark);
}

.mrg-head--dest .mrg-tag[b-21pzd2sw5d] {
    color: var(--mud-palette-tertiary);
}

.mrg-head--result .mrg-tag[b-21pzd2sw5d] {
    color: var(--g-accent-300);
}

.mrg-scope-chip[b-21pzd2sw5d] {
    flex: none;
    max-width: 55%;
    font-size: 0.6875rem;
    font-weight: 700;
    border-radius: var(--g-radius-pill);
    padding: calc(3px * var(--g-scale)) calc(9px * var(--g-scale));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mrg-scope-chip--common[b-21pzd2sw5d] {
    background: var(--mb-sage);
    color: var(--mb-sage-ink);
}

.mrg-scope-chip--tenant[b-21pzd2sw5d] {
    background: var(--mb-peach);
    color: var(--mb-peach-ink);
}

.mrg-head--result .mrg-scope-chip--common[b-21pzd2sw5d] {
    background: var(--g-accent2-200);
    color: var(--g-accent2-800);
}

.mrg-sheet-name[b-21pzd2sw5d] {
    font-family: "Poppins", "Figtree", system-ui, sans-serif;
    font-size: 0.96875rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--mud-palette-text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mrg-head--result .mrg-sheet-name[b-21pzd2sw5d] {
    color: var(--g-neutral-100);
}

.mrg-link[b-21pzd2sw5d] {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 0.78125rem;
    font-weight: 700;
    color: var(--mud-palette-tertiary);
    cursor: pointer;
}

.mrg-link:not(:disabled):hover[b-21pzd2sw5d] {
    text-decoration: underline;
}

.mrg-foot[b-21pzd2sw5d] {
    font-size: 0.75rem;
    color: var(--mud-palette-gray-dark);
}

/* ── Le tableau ── */

.mrg-table[b-21pzd2sw5d] {
    row-gap: calc(7px * var(--g-scale));
}

.mrg-row[b-21pzd2sw5d] {
    display: contents;
}

.mrg-pick[b-21pzd2sw5d] {
    display: flex;
    align-items: center;
    gap: calc(8px * var(--g-scale));
    min-width: 0;
    min-height: 34px;
    padding: calc(8px * var(--g-scale)) calc(11px * var(--g-scale));
    border-radius: 12px;
    border: 0;
    background: color-mix(in srgb, var(--mud-palette-primary) 7%, var(--mud-palette-surface));
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.mrg-pick:disabled[b-21pzd2sw5d] {
    cursor: default;
}

/* Une valeur que toutes les fiches partagent : rien à choisir, la case se tait. */
.mrg-row--same .mrg-pick:not(.mrg-pick--result)[b-21pzd2sw5d] {
    background: transparent;
}

.mrg-pick--on[b-21pzd2sw5d] {
    background: var(--mb-sage);
    box-shadow: inset 0 0 0 1.5px var(--mud-palette-secondary);
}

.mrg-dot[b-21pzd2sw5d] {
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: var(--g-radius-pill);
    border: 1.5px solid var(--mud-palette-lines-inputs);
}

.mrg-row--same .mrg-dot[b-21pzd2sw5d] {
    border-color: transparent;
}

.mrg-pick--on .mrg-dot[b-21pzd2sw5d] {
    border: 0;
    background: var(--mud-palette-secondary);
}

.mrg-key[b-21pzd2sw5d] {
    flex: none;
    width: 76px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--mud-palette-gray-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mrg-value[b-21pzd2sw5d] {
    flex: 1;
    min-width: 0;
    font-size: 0.8125rem;
    line-height: 1.3;
    color: var(--mb-peach-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.mrg-row--same .mrg-value[b-21pzd2sw5d] {
    color: var(--mud-palette-text-secondary);
}

.mrg-pick--on .mrg-value[b-21pzd2sw5d] {
    color: var(--mud-palette-text-primary);
    font-weight: 700;
}

.mrg-mark[b-21pzd2sw5d] {
    flex: none;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--mud-palette-primary);
}

.mrg-pick--result[b-21pzd2sw5d] {
    cursor: default;
    background: var(--g-neutral-800);
}

.mrg-pick--result .mrg-key[b-21pzd2sw5d] {
    color: var(--g-neutral-500);
}

.mrg-pick--result .mrg-value[b-21pzd2sw5d],
.mrg-row--same .mrg-pick--result .mrg-value[b-21pzd2sw5d] {
    color: var(--g-neutral-100);
    font-weight: 600;
}

/* ── La portée ── */

.mrg-scope[b-21pzd2sw5d] {
    display: flex;
    align-items: center;
    gap: calc(12px * var(--g-scale));
    flex-wrap: wrap;
    padding: calc(12px * var(--g-scale)) calc(16px * var(--g-scale));
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 18px;
}
/* /Components/Pages/Admin/ManageBeverage/Components/BeverageSheetEditorDialog.razor.rz.scp.css */
/* Planche 1H — l'éditeur d'une fiche boisson, révision du 22/09.

   Ce qui n'est pas ici vient de `wwwroot/css/dialogs.css` : l'en-tête, les pastilles, les
   bandeaux et le pied sont ceux de toutes les modales du dépôt. Ne vivent ici que les quatre
   formes propres à cet écran — les deux onglets, la case de confirmation du doublon, la liste des
   champs perdus au changement de type, et le journal de l'onglet Historique.

   ⚠️ Aucune couleur en dur : tout passe par `--mud-palette-*` pour ce qui bascule clair/sombre.
   ⚠️ Tout espacement en pixels s'écrit `calc(Npx * var(--g-scale))`. */

/* ── Les deux onglets ── */

.ed-tabs[b-o8u07neh2t] {
    display: flex;
    align-items: center;
    gap: calc(22px * var(--g-scale));
    border-bottom: 1px solid var(--mud-palette-lines-default);
    margin-bottom: calc(12px * var(--g-scale));
}

.ed-tab[b-o8u07neh2t] {
    appearance: none;
    background: none;
    border: 0;
    padding: calc(4px * var(--g-scale)) 0 calc(11px * var(--g-scale));
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -1px;
}

.ed-tab--on[b-o8u07neh2t] {
    color: var(--mud-palette-text-primary);
    border-bottom-color: var(--mud-palette-primary);
}

/* ── La case « ce n'est pas un doublon » ── */

.ed-check[b-o8u07neh2t] {
    display: flex;
    align-items: center;
    gap: calc(11px * var(--g-scale));
    padding: calc(10px * var(--g-scale)) calc(14px * var(--g-scale));
    border-radius: var(--g-radius-md);
    background: var(--mud-palette-surface);
    cursor: pointer;
    border: 0;
    text-align: left;
    font: inherit;
    width: 100%;
}

.ed-check-box[b-o8u07neh2t] {
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 7px;
    border: 1.5px solid var(--mud-palette-lines-inputs);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-success-text);
}

.ed-check--on .ed-check-box[b-o8u07neh2t] {
    background: var(--mud-palette-success);
    border-color: var(--mud-palette-success);
}

.ed-check-text[b-o8u07neh2t] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

/* ── Les champs perdus au changement de type ── */

.ed-lost[b-o8u07neh2t] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(6px * var(--g-scale));
    margin-top: calc(6px * var(--g-scale));
}

/* ── Le journal ── */

.ed-history[b-o8u07neh2t] {
    display: flex;
    flex-direction: column;
    gap: calc(8px * var(--g-scale));
}

.ed-entry[b-o8u07neh2t] {
    display: flex;
    align-items: flex-start;
    gap: calc(14px * var(--g-scale));
    padding: calc(12px * var(--g-scale)) calc(16px * var(--g-scale));
    border-radius: var(--g-radius-md);
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
}

.ed-entry-date[b-o8u07neh2t] {
    flex: none;
    width: 118px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
}

.ed-entry-texts[b-o8u07neh2t] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: calc(3px * var(--g-scale));
}

.ed-entry-label[b-o8u07neh2t] {
    font-size: 0.85rem;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.ed-entry-who[b-o8u07neh2t] {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
}

@media (max-width: 700px) {
    .ed-entry[b-o8u07neh2t] {
        flex-wrap: wrap;
    }

    .ed-entry-date[b-o8u07neh2t] {
        width: 100%;
    }
}

/* ── Le dessin du 24/09/2026 (planche 1H) ──
   Les pastilles, la grille et le pied viennent de dialogs.css, commun à toutes les modales : les
   écarts de la planche se posent ici, bornés à l'éditeur par `.ed-body`, sans toucher aux autres
   dialogues. */

/* La famille choisie en encre, avec son point de couleur — le code des onglets de la liste. */
.ed-body .ed-type[b-o8u07neh2t] {
    gap: calc(9px * var(--g-scale));
}

.ed-body .ed-type.dlg-chip--on[b-o8u07neh2t] {
    background: var(--mb-ink);
    border-color: var(--mb-ink);
    color: var(--mb-ink-text);
}

.ed-dot[b-o8u07neh2t] {
    display: inline-block;
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: var(--g-radius-pill);
    background: var(--mud-palette-text-disabled);
}

.ed-dot--wine[b-o8u07neh2t] { background: var(--g-family-wine); }
.ed-dot--beer[b-o8u07neh2t] { background: var(--g-family-beer); }
.ed-dot--spirit[b-o8u07neh2t] { background: var(--g-family-spirit); }
.ed-dot--softdrink[b-o8u07neh2t] { background: var(--g-family-softdrink); }
.ed-dot--hotbeverage[b-o8u07neh2t] { background: var(--g-family-hotbeverage); }
.ed-dot--solid[b-o8u07neh2t] { background: var(--g-family-solid); }

/* Un sous-type retenu en sauge pleine. */
.ed-body .ed-subtype.dlg-chip--on[b-o8u07neh2t] {
    background: var(--mud-palette-secondary);
    border-color: var(--mud-palette-secondary);
    color: var(--mud-palette-secondary-text);
}

/* Trois champs par rangée, cadres arrondis sur le fond — la planche pose l'intitulé au-dessus. */
.ed-body .dlg-grid[b-o8u07neh2t] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(12px * var(--g-scale));
}

@media (max-width: 760px) {
    .ed-body .dlg-grid[b-o8u07neh2t] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ed-body[b-o8u07neh2t]  .mud-input-outlined-border {
    border-radius: 14px;
    border-color: var(--mud-palette-lines-inputs);
}

.ed-body[b-o8u07neh2t]  .mud-input.mud-input-outlined {
    background: var(--mud-palette-background);
    border-radius: 14px;
}

/* La portée, dans le corps. */
.ed-scope-row[b-o8u07neh2t] {
    display: flex;
    align-items: center;
    gap: calc(12px * var(--g-scale));
    flex-wrap: wrap;
}

.ed-foot-spacer[b-o8u07neh2t] {
    flex: 1;
}

/* Les intitulés de section en gris, comme la planche : le terracotta des modales ordinaires
   rivaliserait ici avec les pastilles, qui portent déjà la couleur. */
.ed-body .dlg-kicker[b-o8u07neh2t],
.ed-body .dlg-rule-label[b-o8u07neh2t] {
    color: var(--mud-palette-gray-dark);
}
/* /Components/Pages/Admin/ManageBeverage/ManageBeveragePage.razor.rz.scp.css */
/* =========================================================
   Le référentiel des fiches boissons — planche 1A de « GoStan - Boissons (référentiel) »
   (dessin du 24/09/2026). Les cotes sont celles de la planche ; les couleurs, ses teintes
   ramenées aux rôles de la palette pour que l'ambiance sombre suive.
   ========================================================= */

/* Les teintes composées de la planche (sable, pêche, sauge…) : classe globale `bv-palette`,
   posée sur l'enveloppe — voir wwwroot/css/app.css. */

[b-u2i4osucdf] .mb-container {
    padding-top: calc(20px * var(--g-scale));
    padding-bottom: calc(24px * var(--g-scale));
    display: flex;
    flex-direction: column;
    gap: calc(14px * var(--g-scale));
}

.mb-spacer[b-u2i4osucdf] {
    flex: 1;
}

/* --- En-tête ------------------------------------------- */
.mb-header[b-u2i4osucdf] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(20px * var(--g-scale));
}

.mb-header-texts[b-u2i4osucdf] {
    display: flex;
    flex-direction: column;
    gap: calc(3px * var(--g-scale));
    min-width: 0;
}

.mb-title[b-u2i4osucdf] {
    font-family: "Poppins", "Figtree", system-ui, sans-serif;
    font-weight: 600;
    font-size: 1.8125rem;
    line-height: 1.15;
    margin: 0;
    color: var(--mud-palette-text-primary);
}

.mb-subtitle[b-u2i4osucdf] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.mb-header-actions[b-u2i4osucdf] {
    flex: none;
    display: flex;
    align-items: center;
    gap: calc(10px * var(--g-scale));
}

[b-u2i4osucdf] .mb-refresh {
    color: var(--mud-palette-text-secondary);
}

/* --- Boutons pilule ------------------------------------ */
.mb-btn[b-u2i4osucdf] {
    display: inline-flex;
    align-items: center;
    gap: calc(8px * var(--g-scale));
    border-radius: var(--g-radius-pill);
    padding: calc(10px * var(--g-scale)) calc(17px * var(--g-scale));
    font: inherit;
    font-size: 0.84375rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    background: transparent;
    color: var(--mud-palette-text-primary);
    transition: background 0.12s ease;
}

.mb-btn:disabled[b-u2i4osucdf] {
    opacity: 0.45;
    cursor: not-allowed;
}

.mb-btn--primary[b-u2i4osucdf] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 700;
    padding: calc(11px * var(--g-scale)) calc(18px * var(--g-scale));
}

.mb-btn--primary:not(:disabled):hover[b-u2i4osucdf] {
    background: color-mix(in srgb, var(--mud-palette-primary) 86%, var(--mud-palette-text-primary));
}

.mb-btn--outline[b-u2i4osucdf] {
    background: var(--mud-palette-surface);
    border-color: var(--mud-palette-lines-inputs);
    color: var(--mud-palette-text-secondary);
}

.mb-btn--outline:not(:disabled):hover[b-u2i4osucdf],
.mb-btn--ghost:not(:disabled):hover[b-u2i4osucdf] {
    background: var(--mb-sand);
}

.mb-btn--ghost[b-u2i4osucdf] {
    color: var(--mud-palette-text-secondary);
}

.mb-btn--peach[b-u2i4osucdf] {
    background: var(--mb-peach);
    color: var(--mb-peach-ink);
    font-weight: 700;
}

.mb-btn--peach:not(:disabled):hover[b-u2i4osucdf] {
    background: color-mix(in srgb, var(--mb-peach) 70%, var(--mud-palette-surface));
}

/* « Comparer les deux fiches » : l'encre de l'accent, sur le sable du panneau de fusion. */
.mb-btn--deep[b-u2i4osucdf] {
    background: var(--mud-palette-tertiary);
    color: var(--mud-palette-tertiary-text);
    font-weight: 700;
    padding: calc(9px * var(--g-scale)) calc(16px * var(--g-scale));
}

.mb-btn--small[b-u2i4osucdf] {
    font-size: 0.75rem;
    font-weight: 700;
    padding: calc(6px * var(--g-scale)) calc(11px * var(--g-scale));
    gap: calc(6px * var(--g-scale));
}

.mb-icon-btn[b-u2i4osucdf] {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: var(--g-radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--mb-peach-ink);
    cursor: pointer;
}

.mb-icon-btn:not(:disabled):hover[b-u2i4osucdf] {
    background: var(--mb-sand-line);
}

.mb-icon-btn--b[b-u2i4osucdf] {
    color: var(--mb-sage-ink);
}

.mb-icon-btn--b:not(:disabled):hover[b-u2i4osucdf] {
    background: var(--mb-sage);
}

/* --- Pastilles de famille ------------------------------ */
.mb-dot[b-u2i4osucdf] {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: var(--g-radius-pill);
    background: var(--mud-palette-text-disabled);
}

.mb-dot--wine[b-u2i4osucdf] { background: var(--g-family-wine); }
.mb-dot--beer[b-u2i4osucdf] { background: var(--g-family-beer); }
.mb-dot--spirit[b-u2i4osucdf] { background: var(--g-family-spirit); }
.mb-dot--softdrink[b-u2i4osucdf] { background: var(--g-family-softdrink); }
.mb-dot--hotbeverage[b-u2i4osucdf] { background: var(--g-family-hotbeverage); }
.mb-dot--solid[b-u2i4osucdf] { background: var(--g-family-solid); }

/* --- Cartes KPI : les six familles, et le sélecteur ---- */
.mb-kpis[b-u2i4osucdf] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: calc(10px * var(--g-scale));
}

.mb-kpi[b-u2i4osucdf] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(6px * var(--g-scale));
    min-width: 0;
    padding: calc(14px * var(--g-scale)) calc(16px * var(--g-scale));
    border-radius: 20px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: var(--g-shadow-sm);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease;
}

.mb-kpi:hover[b-u2i4osucdf] {
    background: color-mix(in srgb, var(--mud-palette-surface) 70%, var(--mb-sand));
}

.mb-kpi--on[b-u2i4osucdf],
.mb-kpi--on:hover[b-u2i4osucdf] {
    background: var(--mb-ink);
    border-color: var(--mb-ink);
}

.mb-kpi-head[b-u2i4osucdf] {
    display: flex;
    align-items: center;
    gap: calc(8px * var(--g-scale));
    min-width: 0;
}

.mb-kpi-label[b-u2i4osucdf] {
    font-size: 0.71875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mud-palette-gray-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mb-kpi--on .mb-kpi-label[b-u2i4osucdf] {
    color: var(--mb-ink-accent);
}

.mb-kpi-value[b-u2i4osucdf] {
    font-family: "Poppins", "Figtree", system-ui, sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--mud-palette-text-primary);
}

.mb-kpi--on .mb-kpi-value[b-u2i4osucdf] {
    color: var(--mb-ink-text);
}

.mb-kpi-sub[b-u2i4osucdf] {
    font-size: 0.71875rem;
    color: var(--mud-palette-text-disabled);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* --- Portée et chantiers ------------------------------- */
.mb-filters[b-u2i4osucdf] {
    display: flex;
    align-items: center;
    gap: calc(8px * var(--g-scale));
    flex-wrap: wrap;
}

.mb-filters-label[b-u2i4osucdf] {
    font-size: 0.71875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-gray-dark);
    padding-right: calc(4px * var(--g-scale));
}

.mb-filters-sep[b-u2i4osucdf] {
    width: 1px;
    height: 22px;
    background: var(--mud-palette-lines-inputs);
    margin: 0 calc(6px * var(--g-scale));
}

.mb-pill[b-u2i4osucdf] {
    display: inline-flex;
    align-items: center;
    gap: calc(7px * var(--g-scale));
    padding: calc(8px * var(--g-scale)) calc(14px * var(--g-scale));
    border-radius: var(--g-radius-pill);
    border: 1px solid var(--mud-palette-lines-inputs);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.mb-pill:not(:disabled):hover[b-u2i4osucdf] {
    background: var(--mb-sand);
}

.mb-pill:disabled[b-u2i4osucdf] {
    cursor: progress;
}

.mb-pill--on[b-u2i4osucdf],
.mb-pill--on:not(:disabled):hover[b-u2i4osucdf] {
    background: var(--mb-ink);
    border-color: var(--mb-ink);
    color: var(--mb-ink-text);
}

.mb-pill-count[b-u2i4osucdf] {
    font-size: 0.71875rem;
    font-weight: 700;
    border-radius: var(--g-radius-pill);
    padding: calc(2px * var(--g-scale)) calc(8px * var(--g-scale));
    background: var(--mb-sand);
    color: var(--mb-peach-ink);
}

.mb-pill--quality-on[b-u2i4osucdf],
.mb-pill--quality-on:not(:disabled):hover[b-u2i4osucdf] {
    background: var(--mud-palette-tertiary);
    border-color: var(--mud-palette-tertiary);
    color: var(--mud-palette-tertiary-text);
}

.mb-pill--quality-on .mb-pill-count[b-u2i4osucdf] {
    background: var(--mb-peach);
    color: var(--mb-peach-ink);
}

.mb-quality-hint[b-u2i4osucdf] {
    margin: calc(-4px * var(--g-scale)) 0 0;
    font-size: 0.8125rem;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
}

/* --- Le panneau de la table ---------------------------- */
.mb-panel[b-u2i4osucdf] {
    display: flex;
    flex-direction: column;
    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);
    overflow: hidden;
}

.mb-tabs[b-u2i4osucdf] {
    display: flex;
    align-items: center;
    gap: calc(6px * var(--g-scale));
    padding: calc(12px * var(--g-scale)) calc(16px * var(--g-scale)) 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    overflow-x: auto;
}

.mb-tab[b-u2i4osucdf] {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: calc(9px * var(--g-scale));
    padding: calc(10px * var(--g-scale)) calc(16px * var(--g-scale));
    border: 0;
    border-radius: 16px 16px 0 0;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: 0.84375rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.mb-tab:hover[b-u2i4osucdf] {
    color: var(--mud-palette-text-primary);
}

.mb-tab--on[b-u2i4osucdf] {
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    box-shadow: inset 0 -3px 0 var(--mud-palette-primary);
}

.mb-tab-count[b-u2i4osucdf] {
    font-size: 0.6875rem;
    font-weight: 700;
    border-radius: var(--g-radius-pill);
    padding: calc(2px * var(--g-scale)) calc(8px * var(--g-scale));
    background: var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
}

.mb-tab--on .mb-tab-count[b-u2i4osucdf] {
    background: var(--mb-peach);
    color: var(--mb-peach-ink);
}

.mb-panel-head[b-u2i4osucdf] {
    display: flex;
    align-items: center;
    gap: calc(14px * var(--g-scale));
    padding: calc(14px * var(--g-scale)) calc(20px * var(--g-scale)) calc(6px * var(--g-scale));
    flex-wrap: wrap;
}

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

.mb-panel-hint[b-u2i4osucdf] {
    font-size: 0.8125rem;
    color: var(--mud-palette-gray-dark);
}

/* Les deux champs de la ligne de titre, en pilule comme la recherche de la planche. */
[b-u2i4osucdf] .mb-subtype-field {
    flex: 0 0 200px;
}

[b-u2i4osucdf] .mb-search-field {
    flex: 0 1 300px;
    min-width: 220px;
}

[b-u2i4osucdf] .mb-subtype-field,
[b-u2i4osucdf] .mb-search-field {
    margin: 0;
}

[b-u2i4osucdf] .mb-subtype-field .mud-input-outlined-border,
[b-u2i4osucdf] .mb-search-field .mud-input-outlined-border {
    border-radius: var(--g-radius-pill);
    border-color: var(--mud-palette-lines-inputs);
}

[b-u2i4osucdf] .mb-subtype-field .mud-input,
[b-u2i4osucdf] .mb-search-field .mud-input {
    background: var(--mud-palette-background);
    border-radius: var(--g-radius-pill);
    font-size: 0.875rem;
}

/* --- La table ------------------------------------------ */
/* La table est un composant enfant : ses classes s'atteignent à travers ::deep, sous l'enveloppe
   de la page qui porte l'attribut de portée. */
[b-u2i4osucdf] .mb-beverage-table {
    background: transparent;
}

[b-u2i4osucdf] .mb-beverage-table .mud-table-container {
    overflow-x: auto;
}

[b-u2i4osucdf] .mb-beverage-table .mud-table-root {
    table-layout: fixed;
    width: 100%;
}

[b-u2i4osucdf] .mb-beverage-table .mb-col--first { width: 16%; }
[b-u2i4osucdf] .mb-beverage-table .mb-col--flag { width: 72px; }
[b-u2i4osucdf] .mb-beverage-table .mb-col--date { width: 96px; }
[b-u2i4osucdf] .mb-beverage-table .mb-col--tenant { width: 116px; }
[b-u2i4osucdf] .mb-beverage-table .mb-col--subtypes { width: 124px; }

[b-u2i4osucdf] .mb-beverage-table .mud-table-head .mud-table-cell {
    padding: calc(8px * var(--g-scale)) calc(10px * var(--g-scale)) calc(12px * var(--g-scale));
    border-bottom: 1px solid var(--mud-palette-lines-default);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    /* Coupé net et non ellipsé : l'icône de tri, invisible hors survol, déborde de l'intitulé, et
       l'ellipse qu'elle déclenchait laissait un point orphelin à côté de l'en-tête voisin. */
    text-overflow: clip;
    color: var(--mud-palette-gray-dark);
    background: transparent;
}

[b-u2i4osucdf] .mb-beverage-table .mud-table-head .mud-table-cell .mud-table-sort-label {
    font: inherit;
    letter-spacing: inherit;
}

[b-u2i4osucdf] .mb-beverage-table .mud-table-body .mud-table-cell {
    padding: calc(12px * var(--g-scale)) calc(10px * var(--g-scale));
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-lines-default) 70%, transparent);
    font-size: 0.84375rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-u2i4osucdf] .mb-beverage-table .mud-table-body .mud-table-cell:first-child,
[b-u2i4osucdf] .mb-beverage-table .mud-table-head .mud-table-cell:first-child {
    padding-left: calc(20px * var(--g-scale));
}

[b-u2i4osucdf] .mb-beverage-table .mud-table-body .mud-table-cell:last-child,
[b-u2i4osucdf] .mb-beverage-table .mud-table-head .mud-table-cell:last-child {
    padding-right: calc(16px * var(--g-scale));
}

[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-background);
}

[b-u2i4osucdf] .mb-beverage-table .mud-table-body .mud-table-row.mb-row-archived {
    cursor: default;
    opacity: 0.72;
}

[b-u2i4osucdf] .mb-beverage-table .mud-table-body .mud-table-row.mb-row-selected {
    background: var(--mb-sage);
}

[b-u2i4osucdf] .mb-beverage-table .mud-table-pagination {
    border-top: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-gray-dark);
    font-size: 0.78125rem;
}

/* Le texte d'une cellule : la première colonne en gras, les autres sur une ligne avec ellipse —
   une cuvée ne se lit plus sur trois lignes. */
[b-u2i4osucdf] .mb-cell-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--mud-palette-text-secondary);
}

[b-u2i4osucdf] .mb-cell-text--first {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

/* Une valeur vide : un tiret terracotta, qui signale le manque plutôt que de se fondre. */
[b-u2i4osucdf] .mb-cell-empty {
    color: var(--mud-palette-primary);
    font-weight: 700;
}

[b-u2i4osucdf] .mb-cell-muted {
    color: var(--mud-palette-text-disabled);
}

/* --- Puces de cellule ---------------------------------- */
[b-u2i4osucdf] .mb-chips {
    display: flex;
    gap: calc(4px * var(--g-scale));
    overflow: hidden;
}

[b-u2i4osucdf] .mb-chip {
    display: inline-flex;
    align-items: center;
    flex: none;
    font-size: 0.71875rem;
    font-weight: 700;
    line-height: 1.3;
    border-radius: var(--g-radius-pill);
    padding: calc(4px * var(--g-scale)) calc(10px * var(--g-scale));
    white-space: nowrap;
}

[b-u2i4osucdf] .mb-chip--type {
    background: var(--mb-sand);
    color: var(--mb-peach-ink);
}

[b-u2i4osucdf] .mb-chip--sage {
    background: var(--mb-sage);
    color: var(--mb-sage-ink);
}

[b-u2i4osucdf] .mb-chip--tenant {
    background: var(--mb-peach);
    color: var(--mb-peach-ink);
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-u2i4osucdf] .mb-chip--warn {
    background: color-mix(in srgb, var(--mud-palette-error) 20%, var(--mud-palette-surface));
    color: var(--mud-palette-error);
}

/* --- La case de sélection et les marques A / B --------- */
/* Les colonnes de geste ne s'ellipsent pas : une case ou un bouton tronqué laissait traîner un
   « … » à côté de lui. Leur largeur compte le retrait de bord de la table. */
[b-u2i4osucdf] .mb-beverage-table .mud-table-cell.mb-select-head,
[b-u2i4osucdf] .mb-beverage-table .mud-table-cell.mb-select-cell,
[b-u2i4osucdf] .mb-beverage-table .mud-table-cell.mb-fusion-mark-head,
[b-u2i4osucdf] .mb-beverage-table .mud-table-cell.mb-fusion-mark-cell {
    width: 52px;
    overflow: visible;
    text-overflow: clip;
}

[b-u2i4osucdf] .mb-check {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    width: 20px;
    height: 20px;
    border-radius: 7px;
    border: 1.5px solid var(--mud-palette-lines-inputs);
    background: var(--mud-palette-surface);
    display: grid;
    place-content: center;
    cursor: pointer;
    vertical-align: middle;
}

[b-u2i4osucdf] .mb-check:checked {
    border-color: var(--mud-palette-secondary);
    background: var(--mud-palette-secondary)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E")
        center / 12px no-repeat;
}

[b-u2i4osucdf] .mb-fusion-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 7px;
    font-size: 0.71875rem;
    font-weight: 800;
    border: 1.5px dashed var(--mud-palette-lines-inputs);
    color: transparent;
}

[b-u2i4osucdf] .mb-fusion-mark--a {
    border: 0;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

[b-u2i4osucdf] .mb-fusion-mark--b {
    border: 0;
    background: var(--mud-palette-secondary);
    color: var(--mud-palette-secondary-text);
}

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

[b-u2i4osucdf] .fusion-row-destination,
[b-u2i4osucdf] .fusion-row-destination:hover {
    background: var(--mb-sage) !important;
}

/* --- La colonne QUALITÉ -------------------------------- */
/* Deux voix, celles de la planche : la sauge dit « rien à faire », la pêche « quelque chose à
   faire ». Un état inconnu reste un tiret, jamais « OK ». */
[b-u2i4osucdf] .mb-quality-head,
[b-u2i4osucdf] .mb-quality-cell {
    text-align: right;
    width: 104px;
}

[b-u2i4osucdf] .mb-quality {
    display: inline-flex;
    align-items: center;
    gap: calc(6px * var(--g-scale));
    padding: calc(4px * var(--g-scale)) calc(10px * var(--g-scale));
    border-radius: var(--g-radius-pill);
    font-size: 0.71875rem;
    font-weight: 700;
    background: var(--mb-peach);
    color: var(--mb-peach-ink);
}

[b-u2i4osucdf] .mb-quality::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: var(--g-radius-pill);
    background: currentColor;
}

[b-u2i4osucdf] .mb-quality--ok {
    background: var(--mb-sage);
    color: var(--mb-sage-ink);
}

/* --- Le menu de ligne ---------------------------------- */
[b-u2i4osucdf] .mb-beverage-table .mud-table-cell.mb-row-actions-head,
[b-u2i4osucdf] .mb-beverage-table .mud-table-cell.mb-row-actions {
    width: 58px;
    text-align: right;
    overflow: visible;
    text-overflow: clip;
}

[b-u2i4osucdf] .mb-beverage-table .mud-table-cell.mb-quality-head,
[b-u2i4osucdf] .mb-beverage-table .mud-table-cell.mb-quality-cell {
    width: 100px;
    overflow: visible;
    text-overflow: clip;
}

[b-u2i4osucdf] .mb-row-menu .mud-icon-button {
    width: 30px;
    height: 30px;
    padding: 0;
    color: var(--mud-palette-gray-dark);
}

[b-u2i4osucdf] .mb-row-menu .mud-icon-button:hover {
    background: var(--mb-ink);
    color: var(--mb-ink-text);
}

/* --- Les ateliers -------------------------------------- */
.mb-workshops[b-u2i4osucdf] {
    display: flex;
    align-items: center;
    gap: calc(16px * var(--g-scale));
    flex-wrap: wrap;
    padding: 0 calc(4px * var(--g-scale));
}

.mb-link[b-u2i4osucdf] {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--mud-palette-tertiary);
    text-decoration: none;
}

.mb-link:hover[b-u2i4osucdf] {
    text-decoration: underline;
}

/* --- Fusion A / B -------------------------------------- */
/* Le panneau de sable de la planche : A en terracotta — la fiche disparaît —, B en sauge — elle
   survit. Un emplacement vide porte un liseré en tirets ; l'emplacement actif, celui de sa
   couleur. */
.fusion-panel[b-u2i4osucdf] {
    display: flex;
    flex-direction: column;
    gap: calc(12px * var(--g-scale));
    padding: calc(15px * var(--g-scale)) calc(18px * var(--g-scale));
    background: var(--mb-sand);
    border: 1px solid var(--mb-sand-line);
    border-radius: 22px;
}

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

[b-u2i4osucdf] .fusion-panel-icon {
    color: var(--mb-peach-ink);
}

.fusion-panel-title[b-u2i4osucdf] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.fusion-hint[b-u2i4osucdf] {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.fusion-slots[b-u2i4osucdf] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 118px minmax(0, 1fr);
    gap: calc(12px * var(--g-scale));
    align-items: stretch;
}

@media (max-width: 960px) {
    .fusion-slots[b-u2i4osucdf] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.fusion-slot[b-u2i4osucdf] {
    display: flex;
    align-items: center;
    gap: calc(12px * var(--g-scale));
    min-width: 0;
    padding: calc(12px * var(--g-scale)) calc(14px * var(--g-scale));
    border-radius: 18px;
    border: 2px dashed var(--mb-sand-line);
    background: color-mix(in srgb, var(--mud-palette-surface) 50%, transparent);
    cursor: pointer;
    text-align: left;
}

.fusion-slot--a.fusion-slot--active[b-u2i4osucdf] { border-color: var(--mud-palette-primary); background: var(--mud-palette-surface); }
.fusion-slot--b.fusion-slot--active[b-u2i4osucdf] { border-color: var(--mud-palette-secondary); background: var(--mud-palette-surface); }

.fusion-slot--a.fusion-slot--filled[b-u2i4osucdf] { border: 2px solid var(--mud-palette-primary); background: var(--mud-palette-surface); }
.fusion-slot--b.fusion-slot--filled[b-u2i4osucdf] { border: 2px solid var(--mud-palette-secondary); background: var(--mud-palette-surface); }

.fusion-slot-badge[b-u2i4osucdf] {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 800;
    background: var(--mb-sand-line);
    color: var(--mud-palette-gray-dark);
}

.fusion-slot--a.fusion-slot--active .fusion-slot-badge[b-u2i4osucdf],
.fusion-slot--a.fusion-slot--filled .fusion-slot-badge[b-u2i4osucdf] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.fusion-slot--b.fusion-slot--active .fusion-slot-badge[b-u2i4osucdf],
.fusion-slot--b.fusion-slot--filled .fusion-slot-badge[b-u2i4osucdf] {
    background: var(--mud-palette-secondary);
    color: var(--mud-palette-secondary-text);
}

.fusion-slot-texts[b-u2i4osucdf] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: calc(2px * var(--g-scale));
}

.fusion-slot-kicker[b-u2i4osucdf] {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--mb-peach-ink);
}

.fusion-slot--b .fusion-slot-kicker[b-u2i4osucdf] {
    color: var(--mb-sage-ink);
}

.fusion-slot-name[b-u2i4osucdf] {
    font-size: 0.90625rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fusion-slot--empty .fusion-slot-name[b-u2i4osucdf] {
    color: var(--mud-palette-text-disabled);
    font-weight: 600;
}

.fusion-slot-meta[b-u2i4osucdf] {
    font-size: 0.78125rem;
    color: var(--mud-palette-gray-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fusion-slot-chips[b-u2i4osucdf] {
    display: flex;
    flex-wrap: wrap;
    gap: calc(4px * var(--g-scale));
}

.fusion-swap[b-u2i4osucdf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(6px * var(--g-scale));
}

.fusion-arrow[b-u2i4osucdf] {
    stroke: var(--mb-peach-ink);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fusion-rules[b-u2i4osucdf] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(10px * var(--g-scale));
    font-size: 0.78125rem;
    color: var(--mud-palette-gray-dark);
}

.fusion-suggestion[b-u2i4osucdf] {
    display: inline-flex;
    align-items: center;
    gap: calc(8px * var(--g-scale));
    padding: calc(6px * var(--g-scale)) calc(13px * var(--g-scale));
    border-radius: var(--g-radius-pill);
    border: 1px solid var(--mud-palette-lines-inputs);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: 0.78125rem;
    font-weight: 700;
    cursor: pointer;
}

.fusion-suggestion:hover[b-u2i4osucdf] {
    background: var(--mud-palette-background);
}

.fusion-suggestion-mark[b-u2i4osucdf] {
    font-size: 0.6875rem;
    font-weight: 800;
    color: var(--mb-peach-ink);
}

.fusion-rules-hint[b-u2i4osucdf] {
    font-style: italic;
}

/* --- La barre de sélection ----------------------------- */
/* Encre dans les deux ambiances, comme la planche la dessine : les primitives neutres portent ce
   choix, les rôles MudBlazor basculeraient avec le thème. */
.mb-bulk-bar[b-u2i4osucdf] {
    position: sticky;
    bottom: calc(16px * var(--g-scale));
    z-index: 10;
    display: flex;
    align-items: center;
    gap: calc(18px * var(--g-scale));
    padding: calc(13px * var(--g-scale)) calc(20px * var(--g-scale));
    background: var(--g-neutral-900);
    border-radius: 22px;
    box-shadow: var(--g-shadow-lg);
}

.mb-bulk-texts[b-u2i4osucdf] {
    display: flex;
    flex-direction: column;
    gap: calc(2px * var(--g-scale));
    min-width: 0;
}

.mb-bulk-count[b-u2i4osucdf] {
    font-family: "Poppins", "Figtree", system-ui, sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: var(--g-neutral-100);
}

.mb-bulk-hint[b-u2i4osucdf] {
    font-size: 0.78125rem;
    color: var(--g-neutral-500);
}

.mb-bulk-cap[b-u2i4osucdf] {
    color: var(--g-accent-300);
}

/* Sur l'encre, la pêche garde ses valeurs claires quel que soit le thème. */
.mb-bulk-bar .mb-btn--peach[b-u2i4osucdf] {
    background: var(--g-accent-300);
    color: var(--g-accent-700);
}

.mb-bulk-bar .mb-btn--peach:not(:disabled):hover[b-u2i4osucdf] {
    background: var(--g-accent-100);
}

.mb-bulk-clear[b-u2i4osucdf] {
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 0.84375rem;
    color: var(--g-neutral-500);
    cursor: pointer;
    padding: calc(10px * var(--g-scale)) calc(6px * var(--g-scale));
}

.mb-bulk-clear:hover[b-u2i4osucdf] {
    color: var(--g-neutral-100);
}

/* --- Largeurs intermédiaires --------------------------- */
@media (max-width: 1200px) {
    .mb-kpis[b-u2i4osucdf] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 960px) {
    .mb-header[b-u2i4osucdf] {
        flex-direction: column;
    }

    .mb-kpis[b-u2i4osucdf] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* /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/Kpi/ArticlePurchaseValueBreakdownDialog.razor.rz.scp.css */
/* =====================================================================
   Détail de la valeur d'achat — couches de coût d'une référence.
   Trois colonnes (quantité / coût unitaire / valeur), rangs posés sur un
   voile d'encre : il fonce la surface en salle et l'éclaircit en cave,
   sans qu'aucune teinte soit écrite en dur.
   ===================================================================== */

.pvb-subtitle[b-gdpfi8d27q] {
    color: var(--mud-palette-gray-dark);
    line-height: 1.3;
}

.pvb-head[b-gdpfi8d27q],
.pvb-row[b-gdpfi8d27q],
.pvb-total[b-gdpfi8d27q] {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: calc(14px * var(--g-scale));
    align-items: center;
}

.pvb-head[b-gdpfi8d27q] {
    padding: 0 calc(14px * var(--g-scale)) var(--g-space-2);
    font-size: 0.69rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    color: var(--mud-palette-gray-dark);
}

.pvb-rows[b-gdpfi8d27q] {
    display: flex;
    flex-direction: column;
    gap: calc(4px * var(--g-scale));
}

.pvb-row[b-gdpfi8d27q] {
    padding: calc(11px * var(--g-scale)) calc(14px * var(--g-scale));
    border-radius: var(--g-radius-md);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 5%, transparent);
}

.pvb-num[b-gdpfi8d27q] {
    text-align: right;
}

.pvb-qty[b-gdpfi8d27q] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.pvb-unit[b-gdpfi8d27q] {
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.pvb-value[b-gdpfi8d27q] {
    font-family: var(--mud-typography-h5-family);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}

/* Phrase posée dans le flux pour les lecteurs d'écran et masquée à l'œil : un `title` ne s'ouvre
   pas au doigt, et le rang d'écart est le seul dont le sens ne se lit pas sur ses trois colonnes.
   `clip-path` plutôt que `display: none`, qui la retirerait aussi de l'arbre d'accessibilité. */
.pvb-sr-only[b-gdpfi8d27q] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* L'écart de valorisation n'est pas une marchandise : il se lit en retrait des couches. */
.pvb-row--carried .pvb-qty[b-gdpfi8d27q] {
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    cursor: help;
}

[b-gdpfi8d27q] .pvb-toggle {
    margin-top: var(--g-space-2);
    border-radius: var(--g-radius-pill);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--mud-palette-tertiary);
    text-transform: none;
}

.pvb-total[b-gdpfi8d27q] {
    align-items: baseline;
    margin-top: var(--g-space-3);
    padding: calc(14px * var(--g-scale)) calc(14px * var(--g-scale)) 0;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.pvb-total-qty[b-gdpfi8d27q] {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.pvb-total-avg[b-gdpfi8d27q] {
    font-size: 0.82rem;
    color: var(--mud-palette-gray-dark);
    white-space: nowrap;
}

.pvb-total-value[b-gdpfi8d27q] {
    font-family: var(--mud-typography-h5-family);
    font-size: 1.19rem;
    font-weight: 700;
    color: var(--mud-palette-tertiary);
    white-space: nowrap;
}
/* /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);
}

/* Quatrième carte « Recettes vendues » (planche 1A) : le héros reprend la largeur de la planche. */
.home-kpi-row--four[b-ndkt03sbu9] {
    grid-template-columns: 1.35fr 0.8fr 0.8fr 0.8fr;
}

.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-bar--ochre[b-ndkt03sbu9] {
    background: var(--g-ochre);
}

.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));
}

/* Point informatif sans destination accessible (ex. comptages mobiles en attente pour un
   utilisateur non super-admin) : pas d'effet de survol qui promettrait un clic. */
[b-ndkt03sbu9] .home-action--static:hover {
    background: 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: calc(2px * var(--g-scale));
}
/* /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-*).
   ===================================================================== */

/* Geste de défilement (planche révisée) : c'est la PAGE qui défile, pas la liste. Deux blocs
   restent : le bandeau de titre, puis celui des onglets et des en-têtes de colonnes. Entre les
   deux, la rangée de zones, les cartes d'état et la barre de recherche s'en vont — ce sont des
   réglages, on les repose une fois et on déroule.

   Les deux collent contre le VIEWPORT, pas contre le corps de page : l'AppBar MudBlazor est en
   `position: fixed`, un `top: 0` glisserait dessous. D'où l'offset, et d'où le fait que la
   hauteur du premier bandeau doive être connue du second — ce que `--stock-head-height` porte,
   et que `min-height` sur le bandeau garantit par construction plutôt que par estimation.

   ⚠️ Ces deux propriétés sont le SEUL point de contact possible avec la feuille de
   `StockListView` : une propriété personnalisée traverse les scopes CSS (elle hérite par le DOM),
   une règle non. Un sélecteur écrit ici pour une classe rendue par la vue serait réécrit
   `.classe[b-page]` et ne matcherait jamais — l'élément porte le scope de la vue. C'est à la vue
   de poser son `top`, pas à la page. (Défaut vécu : le bloc collant n'a collé nulle part, et le
   test qui vérifiait la classe passait sur une règle morte.) */
.stock-page[b-5hasmrypic] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-4);

    /* 62 px de contenu (h1 2rem/1,15 + sous-titre + leur écart) : en rem, donc suit la taille
       d'affichage, qui agit sur le font-size racine. Les gouttières, elles, prennent le facteur
       explicite, comme tout espacement du projet. */
    --stock-head-content: 3.875rem;
    --stock-head-height: calc(var(--stock-head-content) + calc(24px * var(--g-scale)) + calc(16px * var(--g-scale)));
    /* 68px = AppbarHeight d'OrganicTheme. Le repli couvre le cas où la variable MudBlazor
       manquerait (rendu hors shell : test, story). */
    --stock-appbar-height: var(--mud-appbar-height, 68px);
}

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

.stock-head[b-5hasmrypic] {
    position: sticky;
    top: var(--stock-appbar-height);
    z-index: 6;
    flex: none;
    box-sizing: content-box;
    min-height: var(--stock-head-content);
    padding: calc(24px * var(--g-scale)) 0 calc(16px * var(--g-scale));
    /* Fond de page et non de surface : ce qui passe dessous doit disparaître, pas transparaître. */
    background: var(--mud-palette-background);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--g-space-6);
    /* ⚠️ Pas de `wrap` tant que le bandeau colle. `min-height` PLANCHE sa hauteur, il ne la
       plafonne pas : une deuxième ligne — nom d'établissement et zone longs, entre 900 et
       1100 px — le ferait dépasser les 62 px que `--stock-head-height` annonce au bloc d'en
       dessous, qui viendrait alors coller SOUS lui. Le sous-titre s'ellipse plutôt que de
       pousser : c'est une ligne de contexte, pas le titre. La hauteur est ainsi tenue par
       construction, et non par estimation. */
    flex-wrap: nowrap;
}

.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);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stock-head-actions[b-5hasmrypic] {
    display: flex;
    flex: none;
    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-background-gray);
    border: 1px solid var(--mud-palette-lines-inputs);
    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);
}

/* Encre en salle, crème en cave — l'inverse de l'ambiance, comme la planche. L'accent reste
   réservé aux trois cartes d'état et au bouton primaire : deux terracottas dans la même colonne
   se disputeraient le regard, et la zone n'est pas un filtre d'état. */
.stock-zone-pill--active[b-5hasmrypic] {
    background: var(--mud-palette-text-primary);
    color: var(--mud-palette-surface);
    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 ──────────────────────────────────────────────────────── */

/* Même borne que la liste (StockListView.razor.css) : sous 900px elle redevient une boîte
   défilante, et le bandeau collant n'aurait plus rien à couvrir. Les deux se relâchent
   ensemble — c'est la moitié visible de la règle écrite là-bas. */
@media (max-width: 900px) {
    .stock-head[b-5hasmrypic] {
        position: static;
        padding-top: var(--g-space-4);
        /* Le bandeau ne colle plus : sa hauteur n'est plus une mesure dont dépend un voisin,
           et les deux boutons peuvent reprendre la ligne du dessous. */
        flex-wrap: wrap;
    }
}

@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/StockAdvancedFilterBar.razor.rz.scp.css */
/* =====================================================================
   Barre de filtres avancée — pastilles « + Ajouter un filtre » éditées
   sur place, puis « Mes vues » en dessous.
   ===================================================================== */

.stock-adv-bar[b-51ltvmypsq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(8px * var(--g-scale));
}

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

.stock-adv-pill[b-51ltvmypsq] {
    display: flex;
    align-items: center;
    border-radius: var(--g-radius-pill);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    font-size: 0.85rem;
}

.stock-adv-pill--active[b-51ltvmypsq] {
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-tertiary);
}

.stock-adv-pill-toggle[b-51ltvmypsq] {
    display: flex;
    align-items: center;
    gap: calc(6px * var(--g-scale));
    padding: calc(9px * var(--g-scale)) calc(6px * var(--g-scale)) calc(9px * var(--g-scale)) calc(16px * var(--g-scale));
    cursor: pointer;
    white-space: nowrap;
}

.stock-adv-pill-remove[b-51ltvmypsq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-right: calc(5px * var(--g-scale));
    border: none;
    border-radius: var(--g-radius-pill);
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.stock-adv-pill-remove:hover[b-51ltvmypsq] {
    background: color-mix(in srgb, var(--g-ink) 12%, transparent);
}

/* ── Popover d'édition ────────────────────────────────────────────────── */

.stock-adv-popover[b-51ltvmypsq] {
    display: flex;
    flex-direction: column;
    gap: calc(12px * var(--g-scale));
    padding: calc(14px * var(--g-scale));
    min-width: 260px;
}

.stock-adv-range[b-51ltvmypsq] {
    display: flex;
    align-items: center;
    gap: calc(8px * var(--g-scale));
}

.stock-adv-range-sep[b-51ltvmypsq] {
    color: var(--mud-palette-text-disabled);
}

.stock-adv-range-unit[b-51ltvmypsq] {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

.stock-adv-options[b-51ltvmypsq] {
    display: flex;
    flex-wrap: wrap;
    gap: calc(6px * var(--g-scale));
}

.stock-adv-option[b-51ltvmypsq] {
    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);
    background: transparent;
    color: var(--mud-palette-text-primary);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.stock-adv-option--active[b-51ltvmypsq] {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.stock-adv-popover-footer[b-51ltvmypsq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.stock-adv-text-btn[b-51ltvmypsq] {
    border: none;
    background: transparent;
    color: var(--mud-palette-tertiary);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    padding: calc(6px * var(--g-scale)) calc(10px * var(--g-scale));
    border-radius: var(--g-radius-pill);
    cursor: pointer;
}

.stock-adv-text-btn:hover[b-51ltvmypsq] {
    background: color-mix(in srgb, var(--g-ink) 8%, transparent);
}

.stock-adv-ok-btn[b-51ltvmypsq] {
    border: none;
    background: var(--mud-palette-dark);
    color: var(--mud-palette-dark-text);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    padding: calc(8px * var(--g-scale)) calc(18px * var(--g-scale));
    border-radius: var(--g-radius-pill);
    cursor: pointer;
}

/* ── « + Ajouter un filtre » ──────────────────────────────────────────── */

.stock-adv-add-btn[b-51ltvmypsq] {
    display: inline-flex;
    align-items: center;
    border: 1.5px dashed var(--mud-palette-lines-inputs);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    padding: calc(9px * var(--g-scale)) calc(16px * var(--g-scale));
    border-radius: var(--g-radius-pill);
    white-space: nowrap;
    cursor: pointer;
}

.stock-adv-add-btn:hover[b-51ltvmypsq] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-tertiary);
}

/* ── Mes vues ─────────────────────────────────────────────────────────── */

.stock-adv-views-row[b-51ltvmypsq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(7px * var(--g-scale));
    padding-top: calc(4px * var(--g-scale));
    /* Cette rangée vit désormais dans la barre d'outils de StockListView (search + filtres +
       chips de portée, cf. Filters) : flex-basis force sa propre ligne plutôt que de se glisser
       entre eux quand il reste de la place sur la première. */
    flex: 1 0 100%;
}

.stock-adv-views-label[b-51ltvmypsq] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--mud-palette-gray-dark);
    margin-left: calc(4px * var(--g-scale));
}

.stock-adv-view-chip-wrap[b-51ltvmypsq] {
    display: flex;
    align-items: center;
}

.stock-adv-view-chip[b-51ltvmypsq] {
    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) 0 0 var(--g-radius-pill);
    background: transparent;
    color: var(--mud-palette-text-primary);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.stock-adv-view-chip:hover[b-51ltvmypsq] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-tertiary);
}

.stock-adv-view-remove[b-51ltvmypsq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 30px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-left: none;
    border-radius: 0 var(--g-radius-pill) var(--g-radius-pill) 0;
    background: transparent;
    color: var(--mud-palette-text-disabled);
    cursor: pointer;
}

.stock-adv-view-remove:hover[b-51ltvmypsq] {
    color: var(--mud-palette-primary);
}

.stock-adv-save-btn[b-51ltvmypsq] {
    border: 1.5px dashed var(--mud-palette-lines-inputs);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    padding: calc(7px * var(--g-scale)) calc(14px * var(--g-scale));
    border-radius: var(--g-radius-pill);
    white-space: nowrap;
    cursor: pointer;
}

.stock-adv-save-btn:hover:not(:disabled)[b-51ltvmypsq] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-tertiary);
}

.stock-adv-save-btn:disabled[b-51ltvmypsq] {
    opacity: 0.5;
    cursor: default;
}
/* /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 ────────────────────────────────── */

/* Pas de justify-content: space-between : la barre de filtres avancée (slot Filters) s'intercale
   entre la recherche et les chips de portée, en ligne à droite de la recherche — c'est
   .stock-scope-chips (margin-left: auto) qui pousse les chips en bout de ligne, comme
   space-between le faisait quand la recherche et les chips étaient les deux seuls éléments. */
.stock-list-toolbar[b-m4g9872avx] {
    display: flex;
    align-items: center;
    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;
    margin-left: auto;
}

.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 ───────────────────────────────────────────────────────────── */

/* La liste ne défile plus dans sa propre boîte : c'est la page qui défile (planche révisée).
   ⚠️ Ce n'est PAS au prix de la virtualisation, contrairement à ce que disait le commentaire
   précédent : `Virtualize` cherche l'ancêtre dont l'`overflow-y` calculé n'est pas `visible`, et
   rend `null` en arrivant au corps du document — l'observateur prend alors le viewport pour
   racine (`root: null`). Sans ancêtre défilant, il virtualise donc contre la fenêtre. */
/* Aucune gouttière droite : elle dégageait la barre de défilement de la boîte d'avant, et
   l'en-tête de colonnes vivait alors dedans. Il est sorti — la garder rendrait les lignes 2 px
   plus étroites que lui, et décalerait chaque frontière de colonne de la grille partagée. */
.stock-list[b-m4g9872avx] {
    display: block;
}

/* ── Boîte de la liste : bloc collant + lignes ───────────────────────────
   Les deux sont réunis pour que, sous 900px, l'en-tête de colonnes défile HORIZONTALEMENT avec
   ses lignes : la grille est partagée, les séparer désalignerait les colonnes dès le premier
   geste latéral. Au-dessus de 900px, c'est une simple colonne — la page défile. */
.stock-scroll[b-m4g9872avx] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-4);
}

/* Onglets de type + en-têtes de colonnes en UN bloc, comme la planche : ils se lisent ensemble.
   Le décalage se lit sur les propriétés posées par la page : elles héritent par le DOM, là où une
   règle écrite dans la feuille de la page ne pourrait pas atteindre cet élément (scopes CSS
   distincts). Fond de page, pour couvrir les lignes qui passent dessous. */
.stock-sticky-head[b-m4g9872avx] {
    position: sticky;
    top: calc(var(--stock-appbar-height) + var(--stock-head-height));
    z-index: 5;
    flex: none;
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-background);
}

.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 et spiritueux. */
.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--vintage[b-m4g9872avx] {
    grid-template-columns: 6px 2.6fr 1.4fr 0.6fr 0.6fr 0.6fr 0.8fr 1.4fr;
}

/* Plus de sticky propre : l'en-tête colle avec les onglets, dans le bloc qui les réunit. */
.stock-list-header[b-m4g9872avx] {
    padding: calc(14px * var(--g-scale)) 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);
}

/* Deux voix, pas trois : terracotta pour la rupture, sauge pour le stock faible — les mêmes
   que les libellés des deux cartes d'état, et que le liseré de la carte active. */
.stock-row-rail--rupture[b-m4g9872avx] {
    background: var(--mud-palette-primary);
}

.stock-row-rail--low[b-m4g9872avx] {
    background: var(--mud-palette-secondary);
}

/* Le vrai grid item de chaque cellule, ce n'est pas `.stock-row-name` ou `.stock-row-muted` :
   c'est l'ancre de `StockCellLink` qui les enveloppe. Sans `min-width: 0` posé ICI, sa largeur
   minimale automatique se cale sur le contenu non enveloppé (`white-space: nowrap`) du titre
   le plus long — et chaque ligne étant sa PROPRE grille (`.stock-grid` n'est pas partagée avec
   l'en-tête, faute de subgrid), les colonnes `fr` se répartissent différemment d'une ligne à
   l'autre selon la longueur de son nom : le format, la liaison caisse et le stock ne s'alignent
   plus d'une ligne sur l'autre. `min-width: 0` en dessous, sur `.stock-row-name`, ne suffit pas
   — la taille minimale automatique d'un grid item se calcule sur SA propre boîte, pas sur celle
   d'un descendant.
   `::deep` est obligatoire : l'ancre est rendue par le composant enfant `StockCellLink`, qui n'a
   pas de feuille scopée à lui — un sélecteur nu ici porterait le scope de CETTE feuille et ne
   matcherait jamais un élément que cette feuille ne rend pas elle-même (même piège que documenté
   dans `StockStickyHeadCssTests`, en sens inverse : vers un enfant plutôt que depuis la page). */
[b-m4g9872avx] .stock-cell-link {
    display: block;
    min-width: 0;
}

.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] {
    display: block;
    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);
}

/* ── Liaison caisse ──────────────────────────────────────────────────── */

.stock-link[b-m4g9872avx] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(8px * var(--g-scale));
}

/* Cotes fixes : ce sont des pastilles, pas du texte — les faire suivre la taille
   d'affichage les rendrait ovales d'un cran à l'autre (largeur et hauteur arrondies
   séparément). */
.stock-link-bottle[b-m4g9872avx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: var(--g-radius-pill);
}

.stock-link-bottle svg[b-m4g9872avx] {
    width: 13px;
    height: 13px;
}

.stock-link-glass[b-m4g9872avx] {
    width: 9px;
    height: 9px;
    flex: none;
    border-radius: var(--g-radius-pill);
}

.stock-link--on[b-m4g9872avx] {
    background: var(--mud-palette-secondary);
    border: 2px solid var(--mud-palette-secondary);
    color: var(--mud-palette-secondary-text);
}

/* Le tracé est le SEUL signe d'une pastille non liée — elle n'a pas de fond. Il doit donc
   tenir la borne des objets graphiques (WCAG 1.4.11, 3:1) : text-disabled n'est qu'à 2,63:1
   sur la surface claire, gray-dark à 3,92:1 (et 7,04:1 en cave). */
.stock-link--off[b-m4g9872avx] {
    background: transparent;
    border: 2px solid var(--mud-palette-gray-dark);
    color: var(--mud-palette-gray-dark);
}

.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-tertiary);
}

.stock-row-qty--low[b-m4g9872avx] {
    color: var(--mud-palette-secondary);
}

.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);
}

/* Cible ronde : largeur et hauteur doivent rester égales, elles restent donc en pixels
   fixes comme toutes les hauteurs de la DA. */
.stock-btn--round[b-m4g9872avx] {
    width: 34px;
    height: 34px;
    padding: 0;
    justify-content: center;
    flex: none;
}

[b-m4g9872avx] .stock-kebab .mud-icon-button {
    width: 34px;
    height: 34px;
    color: var(--mud-palette-gray-dark);
}

[b-m4g9872avx] .stock-kebab .mud-icon-button:hover {
    color: var(--mud-palette-text-primary);
    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).

   ⚠️ Les deux régimes vont par paire et ne se mélangent pas. `overflow-x: auto` calcule
   l'`overflow-y` à `auto` (une seule des deux valeurs peut rester `visible`) : la liste
   redevient donc un ancêtre défilant, que `Virtualize` prendrait pour racine — sans hauteur
   bornée, il croirait tout visible et rendrait les huit cents lignes d'un coup. La boîte
   revient donc avec sa borne, et les deux bandeaux collants se relâchent : un sticky contre le
   viewport n'a plus de sens quand le contenu défile dans une boîte. */
@media (max-width: 900px) {
    .stock-scroll[b-m4g9872avx] {
        max-height: calc(100vh - 220px);
        overflow: auto;
    }

    .stock-grid[b-m4g9872avx],
    .stock-grid--vintage[b-m4g9872avx] {
        min-width: 860px;
    }

    /* Le bloc reste collant, mais contre le haut de CETTE boîte : l'offset du viewport n'a plus
       de sens ici, et les en-têtes doivent rester lisibles pendant qu'on déroule la grille. */
    .stock-sticky-head[b-m4g9872avx] {
        top: 0;
    }
}
/* /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: calc(2px * var(--g-scale));
    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: calc(2px * var(--g-scale)) 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;
    }
}