@import '_content/Blazored.Toast/Blazored.Toast.bundle.scp.css';
@import '_content/LinkoocRazorComponents/LinkoocRazorComponents.g03dv2z4or.bundle.scp.css';
@import '_content/MatrixComponents/MatrixComponents.du4cc3vhj2.bundle.scp.css';

/* /Components/Common/Establishment/EstablishmentTranslations.razor.rz.scp.css */
/* Plan 417 — regles deplacees depuis le <style> global du .razor vers
   l'isolation CSS Blazor. Les declarations sont inchangees.

   Pourquoi les :where() : le compilateur ajoute [b-xxxxxxxxxx] a la fin du
   selecteur, ce qui lui ajoute le poids d'une classe. Sans compensation, ces
   regles se mettraient a battre des regles globales plus specifiques
   (mobile.css, plans 393/399) qu'elles perdaient jusqu'ici. :where() sur la
   premiere classe rend ce poids : la specificite reste exactement celle du
   <style> d'origine, seule la portee change. */

:where(.linkooc-translation-nav__item)[b-xwpaetq9ex],
[b-xwpaetq9ex] :where(.linkooc-translation-nav__item) {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: var(--linkooc-text-display, #000601);
    border-radius: 0.65rem;
    padding: 0.55rem 0.6rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.4rem;
    align-items: center;
    text-align: left;
    font-size: 0.84rem;
    min-height: 2.4rem;
}

:where(.linkooc-translation-nav__item):hover[b-xwpaetq9ex],
[b-xwpaetq9ex] :where(.linkooc-translation-nav__item):hover,
:where(.linkooc-translation-nav__item).active[b-xwpaetq9ex],
[b-xwpaetq9ex] :where(.linkooc-translation-nav__item).active {
    background: color-mix(in srgb, var(--linkooc-primary-subtle, #e8f5e9) 72%, white 28%);
    border-color: color-mix(in srgb, var(--linkooc-primary, #08781B) 22%, white 78%);
}

:where(.linkooc-translation-segment__button)[b-xwpaetq9ex],
[b-xwpaetq9ex] :where(.linkooc-translation-segment__button),
:where(.linkooc-filter-clear)[b-xwpaetq9ex],
[b-xwpaetq9ex] :where(.linkooc-filter-clear) {
    appearance: none;
    border: 0;
    background: transparent;
    border-radius: 999px;
    color: var(--linkooc-text-muted, #6d6d6d);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
}

:where(.linkooc-translation-segment__button)[b-xwpaetq9ex],
[b-xwpaetq9ex] :where(.linkooc-translation-segment__button) {
    padding: 0.45rem 0.62rem;
}
/* /Components/Common/Feedback/Skeleton.razor.rz.scp.css */
/* ==========================================================================
   Skeleton Component Styles
   A clean, shadcn-inspired skeleton loader for loading states.
   ========================================================================== */

.lk-skeleton[b-l5095tlgsg] {
    display: block;
    background-color: hsl(210, 10%, 91%);
    /* Neutral gray - no color tint */
}

/* Variant: Text (default) */
.lk-skeleton--text[b-l5095tlgsg] {
    height: 1rem;
    border-radius: 4px;
    transform-origin: 0 55%;
}

.lk-skeleton--text:empty[b-l5095tlgsg]::before {
    content: "\00a0";
}

/* Variant: Rectangular */
.lk-skeleton--rect[b-l5095tlgsg] {
    border-radius: 0;
}

/* Variant: Circular */
.lk-skeleton--circular[b-l5095tlgsg] {
    border-radius: 50%;
}

/* Variant: Rounded */
.lk-skeleton--rounded[b-l5095tlgsg] {
    border-radius: 8px;
}

/* Animation: Pulse */
.lk-skeleton--pulse[b-l5095tlgsg] {
    animation: lk-skeleton-pulse-b-l5095tlgsg 1.5s ease-in-out 0.5s infinite;
}

@keyframes lk-skeleton-pulse-b-l5095tlgsg {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

/* Animation: Wave/Shimmer */
.lk-skeleton--wave[b-l5095tlgsg] {
    position: relative;
    overflow: hidden;
}

.lk-skeleton--wave[b-l5095tlgsg]::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg,
            transparent,
            hsla(0, 0%, 100%, 0.5),
            transparent);
    animation: lk-skeleton-wave-b-l5095tlgsg 1.6s linear 0.5s infinite;
}

@keyframes lk-skeleton-wave-b-l5095tlgsg {
    100% {
        transform: translateX(100%);
    }
}

/* ==========================================================================
   SkeletonGroup Helper Classes
   Use these for common skeleton patterns.
   ========================================================================== */

.lk-skeleton-group[b-l5095tlgsg] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.lk-skeleton-group--horizontal[b-l5095tlgsg] {
    flex-direction: row;
    align-items: center;
}

/* Pre-defined skeleton line widths */
.lk-skeleton--w-25[b-l5095tlgsg] {
    width: 25%;
}

.lk-skeleton--w-33[b-l5095tlgsg] {
    width: 33%;
}

.lk-skeleton--w-50[b-l5095tlgsg] {
    width: 50%;
}

.lk-skeleton--w-66[b-l5095tlgsg] {
    width: 66%;
}

.lk-skeleton--w-75[b-l5095tlgsg] {
    width: 75%;
}

.lk-skeleton--w-100[b-l5095tlgsg] {
    width: 100%;
}

/* Pre-defined skeleton heights */
.lk-skeleton--h-sm[b-l5095tlgsg] {
    height: 0.75rem;
}

.lk-skeleton--h-md[b-l5095tlgsg] {
    height: 1rem;
}

.lk-skeleton--h-lg[b-l5095tlgsg] {
    height: 1.5rem;
}

.lk-skeleton--h-xl[b-l5095tlgsg] {
    height: 2rem;
}

.lk-skeleton--h-2xl[b-l5095tlgsg] {
    height: 3rem;
}
/* /Components/Common/Item/ItemDetail.razor.rz.scp.css */
/* Plan 401 — regles deplacees depuis le <style> global du .razor vers
   l'isolation CSS Blazor. Les declarations sont inchangees.

   Pourquoi les :where() : le compilateur ajoute [b-xxxxxxxxxx] a la fin du
   selecteur, ce qui lui ajoute le poids d'une classe. Sans compensation, ces
   regles se mettraient a battre des regles globales plus specifiques
   (mobile.css, plans 393/399) qu'elles perdaient jusqu'ici. :where() sur la
   premiere classe rend ce poids : la specificite reste exactement celle du
   <style> d'origine, seule la portee change. */

:where(.linkooc-detail-container)[b-abqzb6o265],
[b-abqzb6o265] :where(.linkooc-detail-container) {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative; /* Establish containing block for sticky bar */
}

:where(.linkooc-detail-container) .linkooc-panel-header[b-abqzb6o265],
[b-abqzb6o265] :where(.linkooc-detail-container) .linkooc-panel-header {
    min-height: 56px;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--linkooc-border-color, #dee2e6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-shrink: 0;
    background: var(--linkooc-bg, #fff);
}

:where(.linkooc-detail-container) .linkooc-panel-header--two-rows[b-abqzb6o265],
[b-abqzb6o265] :where(.linkooc-detail-container) .linkooc-panel-header--two-rows {
    flex-direction: column;
    align-items: stretch;
    gap: 0.1rem;
    padding: 0.35rem 1rem 0.5rem;
}

:where(.linkooc-detail-header-row1)[b-abqzb6o265],
[b-abqzb6o265] :where(.linkooc-detail-header-row1) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

:where(.linkooc-detail-title)[b-abqzb6o265],
[b-abqzb6o265] :where(.linkooc-detail-title) {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--linkooc-text-display, #000601);
    margin: 0;
}

:where(.linkooc-detail-content)[b-abqzb6o265],
[b-abqzb6o265] :where(.linkooc-detail-content) {
    flex: 1 1 0;      /* Grow, shrink, and start from 0 to respect siblings */
    min-height: 0;    /* Allow shrinking below content height */
    width: 100%;
    overflow-y: auto;
}

@media (max-width: 767.98px) {
    :where(.linkooc-detail-title)[b-abqzb6o265],
    [b-abqzb6o265] :where(.linkooc-detail-title) {
        font-size: 1rem;
    }
}
/* /Components/Common/Item/ItemTranslations.razor.rz.scp.css */
/* Plan 438 / F2 — l'en-tête « Traductions » de la fiche article au téléphone.

   Le constat : dans la rangée unique de l'en-tête, le TelerikComboBox de langue
   était coincé à droite de « Traductions + Guide ». Le préfixe drapeau (20px +
   marges), la croix « vider » (44px — plancher tactile du plan 420, VOULU, on ne
   lui reprend pas un pixel) et la flèche consommaient toute la largeur : le nom
   de la langue tombait à « a… » et le contrôle se lisait comme un champ vide muni
   d'un bouton clear, pas comme « vous voyez les traductions anglaises ».

   Le fix ne rétrécit rien : il DONNE de la largeur au champ en passant l'en-tête
   en deux rangées sous le breakpoint. Bureau ≥ 768px : aucune règle ne s'applique,
   la rangée unique d'aujourd'hui est conservée telle quelle.

   Bootstrap n'a pas de `w-md-auto`, d'où ce fichier : la largeur 100% ne peut se
   régler qu'en CSS. Les internes Telerik ne sont PAS ciblés — seul le wrapper
   .k-combobox / .k-picker l'est, et via ::deep parce qu'il est rendu par un
   composant enfant (il ne porte donc pas l'attribut de portée de ce fichier).

   Les noms de classes sont ceux que EstablishmentTranslations.razor emploie déjà
   pour le même en-tête (plan 394 / F9) : une seule convention pour les deux pages. */

@media (max-width: 767.98px) {

    .linkooc-translation-head[b-b6ums254zb] {
        flex-direction: column;
        /* !important : .align-items-center de Bootstrap est lui-même !important. */
        align-items: stretch !important;
        gap: 0.5rem;
    }

    .linkooc-translation-head__control[b-b6ums254zb] {
        width: 100%;
    }

    .linkooc-translation-head__control[b-b6ums254zb]  .k-combobox,
    .linkooc-translation-head__control[b-b6ums254zb]  .k-picker {
        width: 100%;
        /* Redit le plancher tactile du plan 420 : la largeur imposée ici ne doit
           pas être l'occasion d'un champ plus court que 44px. */
        min-height: 2.75rem;
    }
}
/* /Components/Common/LinkToWiki.razor.rz.scp.css */
.linkooc-link-wiki[b-bl52vy5uup] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--linkooc-body-size, 0.875rem);
    font-weight: 500;
    color: var(--linkooc-primary-ink, #08781B);
    text-decoration: none;
    transition: color var(--linkooc-transition-fast, 150ms) ease,
                opacity var(--linkooc-transition-fast, 150ms) ease;
}

.linkooc-link-wiki:hover[b-bl52vy5uup] {
    color: var(--linkooc-button-secondary, #054810);
    text-decoration: underline;
}

.linkooc-link-wiki-external[b-bl52vy5uup] {
    font-size: 0.625rem;
    opacity: 0.5;
}
/* /Components/Common/Partner/PartnerBreakdownCard.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════════════════
   PartnerBreakdownCard — détail commission partagé (096 / 097).
   ════════════════════════════════════════════════════════════════════════════ */
.pdash-card[b-9ojjribrh3] {
    background: var(--linkooc-surface);
    border: 1px solid var(--linkooc-border-color);
    border-radius: var(--linkooc-radius-md);
    padding: var(--linkooc-spacing-md);
    box-shadow: var(--linkooc-shadow-sm);
}

.pdash-card-title[b-9ojjribrh3] {
    font-size: var(--linkooc-section-title-size);
    font-weight: var(--linkooc-section-title-weight);
    color: var(--linkooc-text-primary);
    margin-bottom: var(--linkooc-spacing-md);
}

.pdash-tier-note[b-9ojjribrh3] {
    font-size: var(--linkooc-small-size);
    color: var(--linkooc-text-muted);
}

.pdash-breakdown-list[b-9ojjribrh3] {
    list-style: none;
    margin: 0 0 var(--linkooc-spacing-sm);
    padding: 0;
}

.pdash-breakdown-line[b-9ojjribrh3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.375rem 0;
    border-bottom: 1px solid var(--linkooc-border-color);
}

.pdash-breakdown-line.excluded[b-9ojjribrh3] {
    color: var(--linkooc-text-muted);
}

.pdash-breakdown-cat[b-9ojjribrh3] {
    font-size: var(--linkooc-body-size);
    color: var(--linkooc-text-primary);
}

.pdash-breakdown-line.excluded .pdash-breakdown-cat[b-9ojjribrh3] {
    color: var(--linkooc-text-muted);
}

.pdash-breakdown-rate[b-9ojjribrh3] {
    font-size: var(--linkooc-tiny-size);
    color: var(--linkooc-text-muted);
    margin-left: 0.375rem;
}

.pdash-breakdown-amount[b-9ojjribrh3] {
    font-weight: 600;
    color: var(--linkooc-text-primary);
    font-size: var(--linkooc-body-size);
}

.pdash-num-accent[b-9ojjribrh3] {
    color: var(--linkooc-primary-ink);
}

.pdash-breakdown-total[b-9ojjribrh3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--linkooc-spacing-sm);
    font-weight: 700;
    color: var(--linkooc-text-primary);
    border-top: 2px solid var(--linkooc-border-color);
}

.pdash-breakdown-note[b-9ojjribrh3] {
    margin-top: var(--linkooc-spacing-sm);
    font-size: var(--linkooc-small-size);
    color: var(--linkooc-text-muted);
    font-style: italic;
}
/* /Components/Common/Partner/PartnerKpiRow.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════════════════
   PartnerKpiRow — cartes KPI partagées (096 / 097). Tokens Linkooc uniquement.
   ════════════════════════════════════════════════════════════════════════════ */
.pdash-kpi-row[b-4fzmq43d5h] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--linkooc-spacing-md);
    margin-bottom: var(--linkooc-spacing-lg);
}

.pdash-kpi-card[b-4fzmq43d5h] {
    display: flex;
    align-items: center;
    gap: var(--linkooc-spacing-md);
    background: var(--linkooc-surface);
    border: 1px solid var(--linkooc-border-color);
    border-radius: var(--linkooc-radius-md);
    padding: var(--linkooc-spacing-md);
    box-shadow: var(--linkooc-shadow-sm);
}

.pdash-kpi-icon[b-4fzmq43d5h] {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--linkooc-radius-sm);
    background: var(--linkooc-surface-hover);
    color: var(--linkooc-text-muted);
    font-size: 1.25rem;
}

.pdash-kpi-icon-accent[b-4fzmq43d5h] {
    background: var(--linkooc-primary-subtle);
    color: var(--linkooc-primary-ink);
}

.pdash-kpi-value[b-4fzmq43d5h] {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--linkooc-text-primary);
    line-height: 1.1;
}

.pdash-kpi-label[b-4fzmq43d5h] {
    font-size: var(--linkooc-body-size);
    color: var(--linkooc-text-primary);
    font-weight: 500;
}

.pdash-kpi-sub[b-4fzmq43d5h] {
    font-size: var(--linkooc-small-size);
    color: var(--linkooc-text-muted);
}

/* Carte « En attente de versement » : non encore disponible (pas de données réelles). */
.pdash-kpi-card-soon[b-4fzmq43d5h] {
    opacity: 0.85;
}

.pdash-soon-badge[b-4fzmq43d5h] {
    display: inline-block;
    font-size: var(--linkooc-small-size);
    font-weight: 600;
    color: var(--linkooc-text-muted);
    background: var(--linkooc-surface-hover);
    border: 1px solid var(--linkooc-border-color);
    border-radius: var(--linkooc-radius-sm);
    padding: 0.1rem 0.5rem;
}

@media (max-width: 1100px) {
    .pdash-kpi-row[b-4fzmq43d5h] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .pdash-kpi-row[b-4fzmq43d5h] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Common/Partner/PartnerRestaurantList.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════════════════
   PartnerRestaurantList — liste restaurants partagée (096 / 097).
   ════════════════════════════════════════════════════════════════════════════ */
.pdash-card[b-bfynguo6n8] {
    background: var(--linkooc-surface);
    border: 1px solid var(--linkooc-border-color);
    border-radius: var(--linkooc-radius-md);
    padding: var(--linkooc-spacing-md);
    box-shadow: var(--linkooc-shadow-sm);
}

.pdash-card-title[b-bfynguo6n8] {
    font-size: var(--linkooc-section-title-size);
    font-weight: var(--linkooc-section-title-weight);
    color: var(--linkooc-text-primary);
    margin-bottom: var(--linkooc-spacing-md);
}

.pdash-card-header[b-bfynguo6n8] {
    margin-bottom: var(--linkooc-spacing-sm);
}

/* ── Recherche ───────────────────────────────────────────────────────────── */
.pdash-search[b-bfynguo6n8] {
    position: relative;
    display: flex;
    align-items: center;
}

.pdash-search i[b-bfynguo6n8] {
    position: absolute;
    left: 0.625rem;
    color: var(--linkooc-text-muted);
    font-size: var(--linkooc-body-size);
    pointer-events: none;
}

.pdash-search input[b-bfynguo6n8] {
    padding: 0.375rem 0.75rem 0.375rem 2rem;
    border: 1px solid var(--linkooc-border-color);
    border-radius: var(--linkooc-radius-sm);
    background: var(--linkooc-bg);
    color: var(--linkooc-text-primary);
    font-size: var(--linkooc-input-size);
    min-width: 220px;
}

.pdash-search input:focus[b-bfynguo6n8] {
    outline: none;
    border-color: var(--linkooc-primary);
}

/* ── Puces de tri ────────────────────────────────────────────────────────── */
.pdash-sort-chips[b-bfynguo6n8] {
    display: flex;
    gap: var(--linkooc-spacing-xs);
    margin-bottom: var(--linkooc-spacing-md);
}

.pdash-chip[b-bfynguo6n8] {
    border: 1px solid var(--linkooc-border-color);
    background: var(--linkooc-bg);
    color: var(--linkooc-text-muted);
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    font-size: var(--linkooc-small-size);
    cursor: pointer;
    transition: var(--linkooc-transition-fast);
}

.pdash-chip:hover[b-bfynguo6n8] {
    background: var(--linkooc-surface-hover);
}

.pdash-chip.active[b-bfynguo6n8] {
    background: var(--linkooc-primary);
    border-color: var(--linkooc-primary);
    color: #fff;
}

/* ── Liste ───────────────────────────────────────────────────────────────── */
.pdash-restaurant-list[b-bfynguo6n8] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pdash-restaurant-row[b-bfynguo6n8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--linkooc-spacing-md);
    padding: var(--linkooc-spacing-sm) 0;
    border-bottom: 1px solid var(--linkooc-border-color);
    flex-wrap: wrap;
}

.pdash-restaurant-row:last-child[b-bfynguo6n8] {
    border-bottom: none;
}

.pdash-restaurant-name[b-bfynguo6n8] {
    font-size: var(--linkooc-list-item-title-size);
    font-weight: var(--linkooc-list-item-title-weight);
    color: var(--linkooc-text-primary);
}

.pdash-restaurant-meta[b-bfynguo6n8] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--linkooc-spacing-sm);
    font-size: var(--linkooc-list-item-desc-size);
    color: var(--linkooc-text-muted);
    margin-top: 0.125rem;
}

.pdash-restaurant-meta i[b-bfynguo6n8] {
    margin-right: 0.125rem;
}

.pdash-restaurant-numbers[b-bfynguo6n8] {
    display: flex;
    gap: var(--linkooc-spacing-lg);
}

/* « Passer sur cet établissement » — action inline par ligne (optionnelle). */
.pdash-restaurant-action[b-bfynguo6n8] {
    flex: 0 0 auto;
}

.pdash-switch-btn[b-bfynguo6n8] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    font-size: var(--linkooc-small-size);
    font-weight: 500;
    color: var(--linkooc-primary-ink);
    background: transparent;
    border: 1px solid var(--linkooc-primary);
    border-radius: var(--linkooc-radius-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.pdash-switch-btn:hover[b-bfynguo6n8] {
    background: var(--linkooc-primary);
    color: #fff;
}

.pdash-num[b-bfynguo6n8] {
    display: flex;
    flex-direction: column;
    text-align: right;
    min-width: 70px;
}

.pdash-num-value[b-bfynguo6n8] {
    font-weight: 600;
    color: var(--linkooc-text-primary);
    font-size: var(--linkooc-body-size);
}

.pdash-num-accent[b-bfynguo6n8] {
    color: var(--linkooc-primary-ink);
}

.pdash-num-label[b-bfynguo6n8] {
    font-size: var(--linkooc-tiny-size);
    color: var(--linkooc-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* ── Badges de statut ────────────────────────────────────────────────────── */
.pdash-status[b-bfynguo6n8] {
    display: inline-flex;
    align-items: center;
    padding: 0.0625rem 0.5rem;
    border-radius: 999px;
    font-size: var(--linkooc-tiny-size);
    font-weight: 600;
}

.pdash-status-active[b-bfynguo6n8] {
    background: var(--linkooc-success-light);
    color: var(--linkooc-success);
}

.pdash-status-left[b-bfynguo6n8] {
    background: var(--linkooc-danger-light);
    color: var(--linkooc-danger);
}

.pdash-status-neutral[b-bfynguo6n8] {
    background: var(--linkooc-surface-hover);
    color: var(--linkooc-text-muted);
}

/* ── État vide ───────────────────────────────────────────────────────────── */
.pdash-empty[b-bfynguo6n8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--linkooc-spacing-sm);
    padding: var(--linkooc-spacing-xl) var(--linkooc-spacing-md);
    text-align: center;
    color: var(--linkooc-text-muted);
}

.pdash-empty > i[b-bfynguo6n8] {
    font-size: 2rem;
    color: var(--linkooc-primary-ink);
}

@media (max-width: 600px) {
    .pdash-restaurant-numbers[b-bfynguo6n8] {
        gap: var(--linkooc-spacing-md);
    }
}
/* /Components/Common/Partner/PartnerTierCard.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════════════════
   PartnerTierCard — palier annuel partagé (096 / 097).
   ════════════════════════════════════════════════════════════════════════════ */
.pdash-card[b-i8fg77ddiv] {
    background: var(--linkooc-surface);
    border: 1px solid var(--linkooc-border-color);
    border-radius: var(--linkooc-radius-md);
    padding: var(--linkooc-spacing-md);
    box-shadow: var(--linkooc-shadow-sm);
}

.pdash-card-title[b-i8fg77ddiv] {
    font-size: var(--linkooc-section-title-size);
    font-weight: var(--linkooc-section-title-weight);
    color: var(--linkooc-text-primary);
    margin-bottom: var(--linkooc-spacing-md);
}

.pdash-tier-rate[b-i8fg77ddiv] {
    font-size: 2rem;
    font-weight: 800;
    color: var(--linkooc-primary-ink);
    line-height: 1;
}

.pdash-tier-rate-label[b-i8fg77ddiv] {
    font-size: var(--linkooc-small-size);
    color: var(--linkooc-text-muted);
    margin-bottom: var(--linkooc-spacing-md);
}

.pdash-progress[b-i8fg77ddiv] {
    height: 8px;
    border-radius: 999px;
    background: var(--linkooc-surface-hover);
    overflow: hidden;
    margin-bottom: var(--linkooc-spacing-sm);
}

.pdash-progress-bar[b-i8fg77ddiv] {
    height: 100%;
    background: var(--linkooc-primary);
    transition: width var(--linkooc-transition-normal);
}

.pdash-progress-bar.boosted[b-i8fg77ddiv] {
    background: var(--linkooc-success);
}

.pdash-tier-note[b-i8fg77ddiv] {
    font-size: var(--linkooc-small-size);
    color: var(--linkooc-text-muted);
}
/* /Components/Common/Theme/AmbianceCard.razor.rz.scp.css */
/* ═══════════════ Plan 358 — carte d'ambiance ═══════════════
   Le chrome (bordures, fonds, textes de l'interface) reste sur tokens
   --linkooc-*. Les couleurs de l'ambiance sont posées en style="" côté
   Razor : elles ne doivent JAMAIS fuir dans l'interface Linkooc. */

.amb-card[b-xyeua51d5v] {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--linkooc-border-color);
    border-radius: var(--linkooc-radius-sm);
    background: var(--linkooc-bg);
    overflow: hidden;
}

.amb-card.current[b-xyeua51d5v] {
    border-color: var(--linkooc-green-400);
}

/* ─── Plan 359 — actions au survol ───
   Invisibles au repos : la carte doit se lire comme un rendu. Elles
   réapparaissent au survol ET au focus clavier, sinon elles seraient
   inatteignables sans souris. */

.amb-actions[b-xyeua51d5v] {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    z-index: 1;
    display: flex;
    gap: 0.15rem;
    opacity: 0;
    transition: opacity 0.12s ease-in-out;
}

.amb-card:hover .amb-actions[b-xyeua51d5v],
.amb-card:focus-within .amb-actions[b-xyeua51d5v] {
    opacity: 1;
}

.amb-action[b-xyeua51d5v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    font-size: 11px;
    line-height: 1;
    color: var(--linkooc-text-secondary);
    /* Semi-opaque: the actions sit ON the mock-up, whose colours are the
       ambiance's own and can be anything. */
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--linkooc-border-color);
    border-radius: var(--linkooc-radius-sm);
    cursor: pointer;
}

.amb-action:hover:not(:disabled)[b-xyeua51d5v] {
    color: var(--linkooc-text-primary);
    background: #fff;
}

.amb-action:disabled[b-xyeua51d5v] {
    opacity: 0.5;
    cursor: default;
}

.amb-action-danger:hover:not(:disabled)[b-xyeua51d5v] {
    color: var(--linkooc-red-600, #b42318);
}

/* ─── La maquette ─── */

.amb-mock[b-xyeua51d5v] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.7rem 0.75rem 0.8rem;
    min-height: 118px;
}

.amb-card.compact .amb-mock[b-xyeua51d5v] {
    min-height: 96px;
    padding: 0.55rem 0.6rem 0.65rem;
}

.amb-mock-empty[b-xyeua51d5v] {
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.7rem;
    color: var(--linkooc-text-secondary);
    background: var(--linkooc-bg-muted);
}

.amb-mock-eyebrow[b-xyeua51d5v] {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    line-height: 1.2;
}

.amb-mock-title[b-xyeua51d5v] {
    font-size: 18px;
    line-height: 1.15;
    margin-bottom: 0.15rem;
}

.amb-card.compact .amb-mock-title[b-xyeua51d5v] {
    font-size: 15px;
}

.amb-mock-line[b-xyeua51d5v] {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    font-size: 12px;
    line-height: 1.35;
}

.amb-card.compact .amb-mock-line[b-xyeua51d5v] {
    font-size: 11px;
}

.amb-mock-dish[b-xyeua51d5v] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* La ligne de conduite : une bordure pointillée à 30 % de la couleur du texte.
   currentColor n'est pas utilisable ici (le trait n'a pas de texte), d'où la
   couleur posée en style="" et l'opacité portée par la CSS. */
.amb-mock-dots[b-xyeua51d5v] {
    flex: 1 1 auto;
    min-width: 12px;
    border-bottom: 1px dotted;
    opacity: 0.3;
    transform: translateY(-0.2em);
}

.amb-mock-price[b-xyeua51d5v] {
    font-weight: 500;
    white-space: nowrap;
}

.amb-mock-cta[b-xyeua51d5v] {
    align-self: flex-start;
    margin-top: 0.4rem;
    font-size: 10px;
    line-height: 1;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
}
/* /Components/Common/Theme/AmbianceEditDrawer.razor.rz.scp.css */
/* ═══════════════ Plan 359 — tiroir d'édition d'ambiance ═══════════════
   Un panneau ANCRÉ À DROITE dans le studio, pas un dialogue : le catalogue
   reste visible à côté, on compare pendant qu'on édite.

   Z-index 10055 : au-dessus du corps du studio (10050), sous la confirmation
   de suppression (10060) et sous les toasts (10100).

   Densité 10/11/12/13 px et contrôles compacts (handoff §7). Le chrome reste
   sur tokens --linkooc-* ; les couleurs de l'ambiance ne vivent que dans les
   pastilles et l'aperçu. */

.amb-drawer[b-vybb4tu1sc] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10055;
    width: min(340px, 100vw);
    display: flex;
    flex-direction: column;
    background: var(--linkooc-bg);
    border-left: 1px solid var(--linkooc-border-color);
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
    outline: none;
}

.amb-drawer-head[b-vybb4tu1sc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    height: 44px;
    padding: 0 0.75rem;
    border-bottom: 1px solid var(--linkooc-border-color);
}

.amb-drawer-title[b-vybb4tu1sc] {
    flex: 1 1 auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--linkooc-text);
}

.amb-drawer-close[b-vybb4tu1sc] {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    font-size: 11px;
    line-height: 1;
    color: var(--linkooc-text-secondary);
    background: transparent;
    border: 1px solid var(--linkooc-border-color);
    border-radius: var(--linkooc-radius-sm);
    cursor: pointer;
}

.amb-drawer-close:hover[b-vybb4tu1sc] {
    color: var(--linkooc-text);
    background: var(--linkooc-surface-hover);
}

.amb-drawer-body[b-vybb4tu1sc] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.amb-drawer-preview[b-vybb4tu1sc] {
    margin-bottom: 0.25rem;
}

.amb-group-title[b-vybb4tu1sc] {
    margin-top: 0.4rem;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--linkooc-text-secondary);
}

.amb-field[b-vybb4tu1sc] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.amb-field-label[b-vybb4tu1sc] {
    font-size: 11px;
    color: var(--linkooc-text-secondary);
}

.amb-input[b-vybb4tu1sc],
.amb-select[b-vybb4tu1sc] {
    width: 100%;
    height: 28px;
    padding: 0 0.4rem;
    font-size: 12px;
    color: var(--linkooc-text);
    background: var(--linkooc-bg);
    border: 1px solid var(--linkooc-border-color);
    border-radius: var(--linkooc-radius-sm);
}

.amb-input:focus[b-vybb4tu1sc],
.amb-select:focus[b-vybb4tu1sc] {
    outline: none;
    border-color: var(--linkooc-green-400);
}

.amb-color-field[b-vybb4tu1sc] {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.amb-color-row[b-vybb4tu1sc] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.amb-color[b-vybb4tu1sc] {
    width: 30px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--linkooc-border-color);
    border-radius: var(--linkooc-radius-sm);
    cursor: pointer;
}

/* The hex is informative, never the primary control — monospace so four of
   them line up, and small enough not to compete with the swatch. */
.amb-hex[b-vybb4tu1sc] {
    min-width: 62px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    color: var(--linkooc-text-secondary);
}

.amb-drawer-foot[b-vybb4tu1sc] {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
    padding: 0.6rem 0.75rem;
    border-top: 1px solid var(--linkooc-border-color);
}

.amb-drawer-cancel[b-vybb4tu1sc] {
    padding: 0.3rem 0.7rem;
    font-size: 12px;
    color: var(--linkooc-text-secondary);
    background: transparent;
    border: 1px solid var(--linkooc-border-color);
    border-radius: var(--linkooc-radius-sm);
    cursor: pointer;
}

.amb-drawer-cancel:hover[b-vybb4tu1sc] {
    color: var(--linkooc-text);
    background: var(--linkooc-surface-hover);
}

.amb-drawer-save[b-vybb4tu1sc] {
    padding: 0.3rem 0.8rem;
    font-size: 12px;
    color: #fff;
    background: var(--linkooc-green-600, #2e7d32);
    border: 1px solid var(--linkooc-green-600, #2e7d32);
    border-radius: var(--linkooc-radius-sm);
    cursor: pointer;
}

.amb-drawer-save:disabled[b-vybb4tu1sc] {
    opacity: 0.55;
    cursor: default;
}
/* /Components/Common/Theme/AmbianceGallery.razor.rz.scp.css */
/* Plan 679 — la galerie d'ambiances du rail « Votre ambiance ». Deux colonnes de
   vignettes muettes ; rien sous les vignettes. */

.amb-gallery[b-18vl9lhprb] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--linkooc-spacing-sm, 0.5rem);
}

.amb-gallery__item[b-18vl9lhprb] {
    position: relative;
    min-width: 0;
}

/* Les gestes de gestion (plan 359) n'apparaissent qu'au survol ou au clavier :
   silence par défaut. Posés sur une pastille de la surface du BackOffice pour
   rester lisibles sur n'importe quel site. */
.amb-gallery__actions[b-18vl9lhprb] {
    position: absolute;
    top: var(--linkooc-spacing-xs, 0.25rem);
    right: var(--linkooc-spacing-xs, 0.25rem);
    z-index: 3;
    display: flex;
    gap: 2px;
    padding: 2px;
    border-radius: var(--linkooc-control-radius, 1.5rem);
    background: var(--linkooc-surface);
    border: var(--linkooc-border-width, 1px) solid var(--linkooc-border-color);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--linkooc-transition-fast, 150ms ease);
}

/* :focus-visible et non :focus-within : après un clic souris, la vignette garde le
   focus et les icônes resteraient affichées sur l'ambiance essayée. */
.amb-gallery__item:hover .amb-gallery__actions[b-18vl9lhprb],
.amb-gallery__item:has(:focus-visible) .amb-gallery__actions[b-18vl9lhprb] {
    opacity: 1;
    pointer-events: auto;
}

/* « + » : une vignette vide de la même forme, muette (l'infobulle dit le geste). */
.amb-gallery__create[b-18vl9lhprb] {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1024 / 704; /* = TileViewportWidth / TileViewportHeight (plan 692) */
    width: 100%;
    margin: 0;
    padding: 0;
    border: 2px dashed var(--linkooc-border-color);
    border-radius: var(--linkooc-radius-sm, 0.5rem);
    background: transparent;
    color: var(--linkooc-text-secondary);
    font-size: 1.25rem;
    cursor: pointer;
    transition: border-color var(--linkooc-transition-fast, 150ms ease),
                color var(--linkooc-transition-fast, 150ms ease);
}

.amb-gallery__create:hover:not(:disabled)[b-18vl9lhprb],
.amb-gallery__create:focus-visible[b-18vl9lhprb] {
    outline: none;
    border-color: var(--linkooc-primary, #08781B);
    color: var(--linkooc-primary-ink);
}

.amb-gallery__create:disabled[b-18vl9lhprb] {
    cursor: default;
    opacity: 0.5;
}
/* /Components/Common/Theme/AmbianceSpecimen.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   Issue 220 — le spécimen d'une ambiance publiée, à côté du geste qui la ramène.

   Il vit dans une barre d'outils : la hauteur de la barre commande, pas le
   spécimen. Les « Aa » sont donc à l'échelle du texte de la barre (0,75 rem),
   la ligne entière ne dépasse pas la hauteur d'un bouton, et rien ne pousse la
   barre à se replier.

   Discipline du plan 248 : le chrome reste sur tokens --linkooc-* ; les familles
   et les hex du restaurateur n'arrivent qu'en style="" côté Razor.
   ═══════════════════════════════════════════════════════════════════════════ */

.amb-spec[b-z4ak406iab] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.15rem 0.45rem;
    border: 1px solid var(--linkooc-border-color);
    border-radius: var(--linkooc-radius-sm);
    background: var(--linkooc-surface);
    flex: 0 0 auto;
}

/* Les « Aa » s'alignent sur leur LIGNE DE BASE : c'est là que se compare une
   fonte à une autre (même règle que la vignette du Designer, plan 625). */
.amb-spec-aa[b-z4ak406iab] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    line-height: 1.1;
}

.amb-spec-glyph[b-z4ak406iab] {
    font-size: 1.05rem;
    color: var(--linkooc-text);
    white-space: nowrap;
}

.amb-spec-inks[b-z4ak406iab] {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
}

/* Assez grande pour qu'une couleur se reconnaisse, assez petite pour ne pas
   grandir la barre. Le liseré existe pour que le FOND clair (souvent proche du
   blanc du panneau) reste une pastille et pas un trou. */
.amb-spec-ink[b-z4ak406iab] {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: var(--linkooc-radius-sm);
    border: 1px solid var(--linkooc-border-color);
    flex: 0 0 auto;
}
/* /Components/Common/Theme/DraftBar.razor.rz.scp.css */
/* ═══════════════ Plan 355 — DraftBar ═══════════════ */

.draftbar[b-fezckzn3r2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.draftbar-status[b-fezckzn3r2] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Le compteur est cliquable : il mène aux éléments modifiés. */
.draftbar-status-btn[b-fezckzn3r2] {
    border: 1px solid transparent;
    border-radius: var(--linkooc-radius-sm);
    padding: 0.3rem 0.5rem;
    background: transparent;
    cursor: pointer;
}

.draftbar-status-btn:hover[b-fezckzn3r2] {
    background: var(--linkooc-hover-bg);
    border-color: var(--linkooc-border-color);
}

.draftbar-dot[b-fezckzn3r2] {
    width: 8px;
    height: 8px;
    border-radius: var(--linkooc-radius-sm);
    flex: 0 0 auto;
}

.draftbar.clean .draftbar-dot[b-fezckzn3r2] {
    background: var(--linkooc-green-400);
}

.draftbar.clean .draftbar-status-text[b-fezckzn3r2] {
    color: var(--linkooc-text-secondary);
}

.draftbar.dirty .draftbar-dot[b-fezckzn3r2] {
    background: var(--linkooc-orange-var-2);
}

.draftbar.dirty .draftbar-status-text[b-fezckzn3r2] {
    color: var(--linkooc-orange-var-5);
}

/* Issue 192 — le site n'a pas confirmé : ni vert (ce serait faux) ni orange
   (le brouillon, lui, est bien parti). */
.draftbar.unreachable .draftbar-dot[b-fezckzn3r2] {
    background: var(--linkooc-danger);
}

.draftbar.unreachable .draftbar-status-text[b-fezckzn3r2] {
    color: var(--linkooc-danger);
}

/* ─── Actions ─── */

.draftbar-btn[b-fezckzn3r2] {
    border: 1px solid transparent;
    border-radius: var(--linkooc-radius-sm);
    padding: 0.3rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    background: transparent;
    color: var(--linkooc-text);
    cursor: pointer;
    white-space: nowrap;
}

.draftbar-btn:disabled[b-fezckzn3r2] {
    opacity: 0.55;
    cursor: default;
}

.draftbar-btn-outline[b-fezckzn3r2] {
    border-color: var(--linkooc-border-color);
}

.draftbar-btn-outline:hover:not(:disabled)[b-fezckzn3r2] {
    background: var(--linkooc-hover-bg);
}

.draftbar-btn-primary[b-fezckzn3r2] {
    background: var(--linkooc-button-primary);
    color: var(--linkooc-on-solid, #ffffff);
}

.draftbar-btn-primary:hover:not(:disabled)[b-fezckzn3r2] {
    background: var(--linkooc-button-primary-hover);
}

/* ─── Issue 686 — ce que le compteur compte, juste en dessous ─── */

.draftbar-changes-anchor[b-fezckzn3r2] {
    position: relative;
    display: inline-flex;
}

.draftbar-changes-backdrop[b-fezckzn3r2] {
    position: fixed;
    inset: 0;
    z-index: 1040;
}

.draftbar-changes[b-fezckzn3r2] {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    z-index: 1041;
    min-width: 20rem;
    max-width: 28rem;
    max-height: 60vh;
    overflow-y: auto;
    margin: 0;
    padding: 0.35rem;
    list-style: none;
    background: var(--linkooc-surface, #ffffff);
    border: 1px solid var(--linkooc-border-color);
    border-radius: var(--linkooc-radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.draftbar-change[b-fezckzn3r2] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 0;
    border-radius: var(--linkooc-radius-sm);
    background: transparent;
    color: var(--linkooc-text);
    text-align: left;
    font-size: 0.8rem;
}

.draftbar-change-link[b-fezckzn3r2] {
    cursor: pointer;
}

.draftbar-change-link:hover[b-fezckzn3r2] {
    background: var(--linkooc-hover-bg);
}

.draftbar-change-name[b-fezckzn3r2] {
    font-weight: 600;
}

.draftbar-change-value[b-fezckzn3r2] {
    color: var(--linkooc-text-secondary);
    overflow-wrap: anywhere;
}

.draftbar-swatch[b-fezckzn3r2] {
    display: inline-block;
    width: 0.8rem;
    height: 0.8rem;
    margin: 0 0.1rem -0.1rem;
    border: 1px solid var(--linkooc-border-color);
    border-radius: var(--linkooc-radius-sm);
}
/* /Components/Common/Theme/FontPicker.razor.rz.scp.css */
/* ═══════════════ Plan 395 — sélecteur de police ═══════════════
   Le chrome reste sur tokens --linkooc-*. La SEULE chose que la donnée
   (le nom de la famille) pilote est le font-family, posé en style="" côté
   Razor — jamais une couleur, jamais une taille.

   Les tailles sont fixes (puce 22×22, champ 34 px, nom tronqué) : c'est ce
   qui garantit qu'un specimen qui arrive change le DESSIN des lettres et
   rien d'autre — pas un pixel de mise en page ne bouge. */

.fp-wrap[b-aoikmq5wnp] {
    display: block;
    width: 100%;
}

/* ─── Le champ fermé ─── */

/* 34 px, la hauteur d'avant : ce composant remplace trois TelerikComboBox
   dans une grille dense, il ne doit rien coûter en verticalité. */
.fp-wrap[b-aoikmq5wnp]  .k-combobox,
.fp-wrap[b-aoikmq5wnp]  .k-input {
    height: 34px;
    min-height: 34px;
}

/* La valeur est écrite dans sa propre police. Scopée à l'input : le reste du
   combobox (chevron, croix) garde les icônes de Telerik. */
.fp-wrap[b-aoikmq5wnp]  .k-input-inner {
    font-family: var(--fp-face, inherit);
    font-size: 13.5px;
    padding-inline-start: 4px;
    text-overflow: ellipsis;
}

/* Le préfixe ne doit pas ouvrir le champ : pas de séparateur, pas de marge. */
.fp-wrap[b-aoikmq5wnp]  .k-input-prefix {
    padding-inline: 6px 0;
}

/* ─── La puce « Aa » ─── */

.fp-chip[b-aoikmq5wnp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background: var(--linkooc-hover-bg);
    color: var(--linkooc-text);
    font-size: 13px;
    line-height: 1;
    overflow: hidden;
}

/* Dans le champ fermé la puce suit la valeur ; dans la liste, chaque item pose
   sa propre famille en style="". */
.fp-chip:not(.fp-chip-item)[b-aoikmq5wnp] {
    font-family: var(--fp-face, inherit);
}

/* ─── Un item de la liste ─── */

.fp-item[b-aoikmq5wnp] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    width: 100%;
    min-width: 0;
}

.fp-item-lines[b-aoikmq5wnp] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    line-height: 1.25;
}

.fp-item-name[b-aoikmq5wnp] {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ligne 2 : « Votre ambiance », sur la police dont le restaurateur est parti
   pour CE rôle. Discrète, jamais vide — quand il n'y a rien à dire l'élément
   n'est pas rendu du tout (cf. le @if du gabarit), pas réduit à une ligne
   blanche. Un item au plus la porte. */
.fp-item-origin[b-aoikmq5wnp] {
    font-size: 10.5px;
    color: var(--linkooc-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sur la ligne active, Telerik peint un vert soutenu et bascule le NOM en
   blanc — mais pas cette ligne-ci, qui gardait son gris fixe : mesuré à
   1,09:1 sur #08781B, illisible (plancher WCAG 4,5:1 pour ce corps).
   Un blanc atténué la remet à ~4,8:1 tout en la gardant secondaire.
   L'ancêtre .k-selected appartient à Telerik (la liste est rendue hors du
   composant) ; l'isolation CSS ne tague que le dernier sélecteur, donc la
   règle porte bien. */
li.k-selected .fp-item-origin[b-aoikmq5wnp],
li.k-focus .fp-item-origin[b-aoikmq5wnp] {
    color: rgba(255, 255, 255, 0.88);
}

/* ─── La dernière ligne : « Charger ma police… » (issue #167) ───
   Elle occupe la ligne entière — c'est un <label>, la zone cliquable doit
   couvrir l'item, pas le seul texte. Rien qui la décore : elle se distingue
   d'être en bas, dans la police du BackOffice, quand toutes les autres sont
   écrites dans la leur. */
.fp-load[b-aoikmq5wnp] {
    display: block;
    width: 100%;
    min-height: 28px;
    line-height: 28px;
    font-size: 13px;
    cursor: pointer;
    margin: 0;
}
/* /Components/Common/Theme/LkSitePreviewTile.razor.rz.scp.css */
/* Plan 679 — LkSitePreviewTile. Reprise fidèle de la vignette de la galerie des
   templates (EstablishmentApparencePanel : .template-card-preview,
   .template-iframe-scaler, .template-iframe, .template-preview-shimmer), passée en
   variables pour servir aussi la galerie d'ambiances. */

.lk-site-tile[b-afxx4w2wqs] {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lk-site-tile__scaler[b-afxx4w2wqs] {
    width: var(--lk-tile-w, 1440px);
    height: var(--lk-tile-h, 900px);
    transform: scale(var(--lk-tile-scale, 0.22));
    transform-origin: center center;
    pointer-events: none;
    flex-shrink: 0;
}

.lk-site-tile__frame[b-afxx4w2wqs] {
    width: var(--lk-tile-w, 1440px);
    height: var(--lk-tile-h, 900px);
    border: none;
    background: #fff;
    display: block;
}

/* Masque le flash de l'iframe au premier rendu, s'efface après 3 s. */
.lk-site-tile__shimmer[b-afxx4w2wqs] {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 37%, #f0f0f0 63%);
    background-size: 400% 100%;
    animation: lk-site-tile-shimmer-b-afxx4w2wqs 1.4s ease infinite, lk-site-tile-fade-out-b-afxx4w2wqs 0.6s ease 3s forwards;
    pointer-events: none;
}

@keyframes lk-site-tile-shimmer-b-afxx4w2wqs {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes lk-site-tile-fade-out-b-afxx4w2wqs {
    to {
        opacity: 0;
        pointer-events: none;
    }
}

/* ─── Vignette autonome (galerie d'ambiances) ─── */

.lk-site-tile--framed[b-afxx4w2wqs] {
    border: 2px solid var(--linkooc-border-color);
    border-radius: var(--linkooc-radius-sm, 0.5rem);
    background: var(--linkooc-surface);
    transition: border-color var(--linkooc-transition-fast, 150ms ease),
                box-shadow var(--linkooc-transition-fast, 150ms ease);
}

.lk-site-tile--framed .lk-site-tile__shimmer[b-afxx4w2wqs] {
    background: linear-gradient(90deg, var(--linkooc-surface) 25%, var(--linkooc-hover-bg) 37%, var(--linkooc-surface) 63%);
    background-size: 400% 100%;
}

.lk-site-tile--framed.lk-site-tile--clickable:hover[b-afxx4w2wqs] {
    border-color: var(--linkooc-green-300, #399142);
}

.lk-site-tile--framed.lk-site-tile--selected[b-afxx4w2wqs],
.lk-site-tile--framed.lk-site-tile--selected:hover[b-afxx4w2wqs] {
    border-color: var(--linkooc-primary, #08781B);
    box-shadow: 0 0 0 2px var(--linkooc-primary-subtle, rgba(8, 120, 27, 0.25));
}

.lk-site-tile__hit[b-afxx4w2wqs] {
    position: absolute;
    inset: 0;
    z-index: 2;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

.lk-site-tile__hit:focus-visible[b-afxx4w2wqs] {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--linkooc-primary, #08781B);
}

/* ─── Plan 752 — la vignette est une image ─── */

/* L'image remplit la vignette (même fenêtre que l'iframe : rien à recadrer) et
   apparaît en fondu, 300 ms. */
.lk-site-tile__img[b-afxx4w2wqs] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    user-select: none;
    animation: lk-site-tile-in-b-afxx4w2wqs 300ms ease both;
}

/* Plan 852 — l'image d'avant, sous la neuve qui arrive en fondu. */
.lk-site-tile__img--under[b-afxx4w2wqs] {
    animation: none;
}

@keyframes lk-site-tile-in-b-afxx4w2wqs {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ─── Plan 826 — l'attente se voit ───
   Le « fond papier calme » du 752 se lisait comme une vignette cassée. En attente :
   un fond un ton sous la surface (jamais confondu avec le « + » en pointillés, qui
   est transparent), un reflet qui le traverse en boucle, et, quand elle est connue,
   la même ambiance sur l'autre page, pâlie dessous. Le reflet n'existe que dans cet
   état : il s'arrête quand l'image arrive ou quand la vignette passe à l'iframe. */
.lk-site-tile__wait[b-afxx4w2wqs] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: color-mix(in srgb, var(--linkooc-surface, #fefefe) 90%, var(--linkooc-text, #000601));
}

/* L'autre page : un aperçu de ce qui vient, jamais pris pour le résultat. */
.lk-site-tile__stand-in[b-afxx4w2wqs] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.45;
    filter: saturate(0.5);
    user-select: none;
}

/* Une bande claire, large comme la moitié de la vignette, qui la traverse. */
.lk-site-tile__sweep[b-afxx4w2wqs] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 60%;
    background: linear-gradient(90deg,
        transparent 0%,
        color-mix(in srgb, var(--linkooc-surface, #fefefe) 85%, transparent) 50%,
        transparent 100%);
    transform: translateX(-100%);
    animation: lk-site-tile-sweep-b-afxx4w2wqs 1.6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes lk-site-tile-sweep-b-afxx4w2wqs {
    from { transform: translateX(-100%); }
    to   { transform: translateX(170%); }
}

@media (prefers-reduced-motion: reduce) {
    .lk-site-tile__img[b-afxx4w2wqs] {
        animation: none;
    }

    /* Pas de balayage : le fond un ton sous la surface (et l'autre page pâlie) suffit à
       dire « pas encore là ». */
    .lk-site-tile__sweep[b-afxx4w2wqs] {
        display: none;
    }
}
/* /Components/Common/Theme/LooksRail.razor.rz.scp.css */
/* ═══════════════ Plan 356 — « Mes looks » ═══════════════ */

.looks[b-nubbxcjiib] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.75rem 0.75rem 1rem;
    min-height: 0;
}

.looks-helper[b-nubbxcjiib] {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--linkooc-text-secondary);
}

/* ─── « + Enregistrer l'ambiance actuelle » ─── */

.looks-save[b-nubbxcjiib] {
    border: 1px dashed var(--linkooc-border-color);
    border-radius: var(--linkooc-radius-sm);
    background: transparent;
    color: var(--linkooc-text);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.55rem 0.7rem;
    cursor: pointer;
    text-align: center;
    width: 100%;
}

.looks-save:hover:not(:disabled)[b-nubbxcjiib] {
    border-color: var(--linkooc-green-400);
    color: var(--linkooc-green-600);
}

.looks-save:disabled[b-nubbxcjiib] {
    opacity: 0.55;
    cursor: default;
}

.looks-empty[b-nubbxcjiib] {
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--linkooc-text-secondary);
    padding: 0.35rem 0.1rem;
}

/* ─── Cartes ─── */

.looks-list[b-nubbxcjiib] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* La carte elle-même est un LkCard : ici, seulement la grille de son contenu. */
.looks-card[b-nubbxcjiib] {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "swatches menu"
        "body     menu";
    align-items: center;
    column-gap: 0.4rem;
    row-gap: 0.35rem;
}

.looks-swatches[b-nubbxcjiib] {
    grid-area: swatches;
    display: flex;
    gap: 0.25rem;
}

.looks-swatch[b-nubbxcjiib] {
    width: 22px;
    height: 22px;
    border-radius: var(--linkooc-radius-sm);
    border: 1px solid var(--linkooc-border-color);
    flex: 0 0 auto;
}

/* Slot vide : pas de couleur inventée, une pastille neutre rayée. */
.looks-swatch.unset[b-nubbxcjiib] {
    background: repeating-linear-gradient(
        45deg,
        var(--linkooc-bg-muted),
        var(--linkooc-bg-muted) 3px,
        var(--linkooc-border-color) 3px,
        var(--linkooc-border-color) 5px);
}

.looks-card-body[b-nubbxcjiib] {
    grid-area: body;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.looks-card-name[b-nubbxcjiib] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--linkooc-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.looks-card-meta[b-nubbxcjiib] {
    font-size: 0.7rem;
    color: var(--linkooc-text-secondary);
}

/* ─── Menu ⋮ (LkMenu) ─── */

.looks-card-menu[b-nubbxcjiib] {
    grid-area: menu;
}

/* ─── Champ du dialogue ─── */

.looks-field-label[b-nubbxcjiib] {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--linkooc-text-secondary);
    margin-bottom: 0.25rem;
}

.looks-field[b-nubbxcjiib] {
    width: 100%;
    border: 1px solid var(--linkooc-border-color);
    border-radius: var(--linkooc-radius-sm);
    padding: 0.4rem 0.55rem;
    font-size: 0.85rem;
    color: var(--linkooc-text);
    background: var(--linkooc-bg);
}

.looks-field:focus[b-nubbxcjiib] {
    outline: none;
    border-color: var(--linkooc-green-400);
}

.looks-field-error[b-nubbxcjiib] {
    margin-top: 0.35rem;
    font-size: 0.75rem;
    color: var(--linkooc-red-var-2);
}
/* /Components/Common/Theme/SiteLegibilityList.razor.rz.scp.css */
/* Plan 694 — « Lisibilité » sous l'aperçu. Une aide, pas une alerte : aucune couleur
   d'erreur, aucune icône d'avertissement. Le spécimen montre le problème ; le reste se
   tait. */

.lk-legibility[b-m7ta6xhbju] {
    flex-shrink: 0;
    max-height: 30vh;
    overflow-y: auto;
    padding: var(--linkooc-spacing-sm, 0.5rem) var(--linkooc-spacing-md, 1rem);
    border-top: var(--linkooc-border-width, 1px) solid var(--linkooc-border-color);
    background: var(--linkooc-surface, #fff);
}

.lk-legibility__head[b-m7ta6xhbju] {
    display: flex;
    align-items: baseline;
    gap: var(--linkooc-spacing-sm, 0.5rem);
    margin-bottom: var(--linkooc-spacing-xs, 0.25rem);
}

.lk-legibility__title[b-m7ta6xhbju] {
    font-weight: 600;
    color: var(--linkooc-text);
}

.lk-legibility__lead[b-m7ta6xhbju] {
    color: var(--linkooc-text-secondary);
    font-size: 0.875rem;
}

.lk-legibility__list[b-m7ta6xhbju] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lk-legibility__row[b-m7ta6xhbju] {
    display: flex;
    align-items: center;
    gap: var(--linkooc-spacing-sm, 0.5rem);
    padding: var(--linkooc-spacing-xs, 0.25rem) 0;
}

/* Le mot, dans l'encre du site, sur le fond du site : la ligne se lit d'un regard. */
.lk-legibility__specimen[b-m7ta6xhbju] {
    flex-shrink: 0;
    min-width: 8.5rem;
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0.35rem 0.75rem;
    border: var(--linkooc-border-width, 1px) solid var(--linkooc-border-color);
    border-radius: var(--linkooc-radius-sm, 0.5rem);
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.lk-legibility__place[b-m7ta6xhbju] {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--linkooc-text);
    font-size: 0.875rem;
}

.lk-legibility__page[b-m7ta6xhbju] {
    color: var(--linkooc-text-secondary);
}

.lk-legibility__actions[b-m7ta6xhbju] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--linkooc-spacing-xs, 0.25rem);
    justify-content: flex-end;
}
/* /Components/Common/TranslationStrip/TranslationCultureStrip.razor.rz.scp.css */
/* Plan 438 / F3 + F4 — la bande d'état des traductions au téléphone.

   POURQUOI CE FICHIER EXISTE. La bande est partagée par trois consommateurs réels
   (ItemTranslations, EstablishmentTranslations, ManualTranslationEditor) et se
   montre aussi dans /ui-gallery. Le rail avait déjà été écrit pour UN d'entre eux,
   dans le <style> de page de EstablishmentTranslations.razor (plan 394 / F9) : la
   fiche article, elle, empilait toujours ses 7 langues sur 5 rangées avant le
   moindre contenu. Mis dans l'isolation CSS du composant, le comportement voyage
   avec lui — les trois pages en héritent et une quatrième l'aura d'office.

   La portée Blazor est aussi ce qui rend ces règles SANS DANGER : `.menu-membership-row`
   est également la ligne de pastilles de MenuMembershipStrip et de la liste des
   articles. L'attribut de portée les laisse strictement en dehors, sans avoir à
   inventer un sélecteur défensif.

   Bureau ≥ 768px : aucune règle de rail ne s'applique, le `flex-wrap: wrap` de
   site.css est conservé tel quel. */

@media (max-width: 768px) {

    /* ── F3 : un rail qui défile, jamais un mur de rangées ────────────────── */
    .translation-culture-strip .menu-membership-row[b-ivdpedw9gy] {
        position: relative;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0.15rem;
    }

    .translation-culture-strip .menu-membership-row[b-ivdpedw9gy]::-webkit-scrollbar {
        display: none;
    }

    /* L'indice de défilement DOIT être peint PAR-DESSUS les pastilles. Un
       background-image posé sur le conteneur passe DERRIÈRE ses enfants : les
       pastilles sont opaques et occupent toute la hauteur du rail, donc le
       dégradé serait intégralement masqué et rien ne signalerait qu'il reste des
       langues à droite — le rail se lirait comme un libellé tronqué.
       ::after est un item flex du scroller ; `sticky right: 0` le colle au bord
       droit du champ visible et la marge négative l'empêche d'occuper de la
       largeur. (Mécanique identique à celle du plan 394 / F9.) */
    .translation-culture-strip .menu-membership-row[b-ivdpedw9gy]::after {
        content: "";
        position: sticky;
        right: 0;
        z-index: 2;
        flex: 0 0 36px;
        margin-left: -36px;
        align-self: stretch;
        pointer-events: none;
        background: linear-gradient(to left, var(--linkooc-surface, #fff) 18%, rgba(255, 255, 255, 0) 100%);
    }

    /* Là où les animations pilotées par le défilement existent (Chrome et Edge
       115+), le voile s'efface une fois la fin atteinte. Ailleurs il reste
       affiché : repli acceptable, un indice permanent vaut mieux que rien. */
    @supports (animation-timeline: scroll(self inline)) {
        .translation-culture-strip .menu-membership-row[b-ivdpedw9gy]::after {
            animation: lk-rail-hint-b-ivdpedw9gy linear both;
            animation-timeline: scroll(self inline);
            /* Pourcentages de progression du défilement. Surtout pas `contain …` :
               c'est une plage de view-timeline, invalide ici, et le voile reste
               alors allumé jusqu'au bout. */
            animation-range: 80% 100%;
        }
    }

    @keyframes lk-rail-hint-b-ivdpedw9gy {
        to {
            opacity: 0;
        }
    }

    .translation-culture-strip .menu-pill[b-ivdpedw9gy],
    .translation-culture-strip .menu-membership-link-icon[b-ivdpedw9gy] {
        flex: 0 0 auto;
    }

    /* ── F4 : la pastille devient tappable, donc elle prend un vrai plancher ──
       R12 (44px) s'applique à ce qui est interactif, et le tap qui révèle l'état
       vient de rendre ces pastilles interactives. Le rail passe de 5 rangées à
       une seule de 44px : le compte vertical reste très largement gagnant.
       Seule la SURFACE grandit — la taille de police n'est pas touchée. */
    .translation-culture-strip .menu-pill[b-ivdpedw9gy] {
        min-height: 2.75rem;
        padding: 0.4rem 0.7rem;
        border-radius: 1.5rem;
    }

    /* Le libellé déplié peut allonger la pastille : c'est le rail qui absorbe,
       jamais la page. `nowrap` garantit qu'il ne casse pas la hauteur du rail. */
    .translation-culture-strip .menu-pill-state[b-ivdpedw9gy] {
        white-space: nowrap;
    }
}

/* Bureau comme téléphone : le libellé révélé se distingue du nom de la langue
   sans introduire une couleur de plus (la pastille porte déjà celle de l'état). */
.translation-culture-strip .menu-pill-state[b-ivdpedw9gy] {
    margin-left: 0.2rem;
    font-weight: 400;
    opacity: 0.85;
}
/* /Components/Menu/ItemStockOutDialog.razor.rz.scp.css */
/* Plan 969 — la fenêtre « plus en stock » (cible plans/assets/rupture-plat/q1-B.png). */

.stockout-dlg[b-o6iqa3z1nq] {
    display: flex;
    flex-direction: column;
    gap: var(--linkooc-spacing-md, 1rem);
}

.stockout-dlg__group[b-o6iqa3z1nq] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
}

.stockout-dlg__label[b-o6iqa3z1nq] {
    color: var(--linkooc-text-muted);
    font-size: var(--linkooc-body-size, 0.875rem);
}

.stockout-dlg__radio[b-o6iqa3z1nq] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2rem;
    cursor: pointer;
    color: var(--linkooc-text);
}

.stockout-dlg__radio input[type="radio"][b-o6iqa3z1nq] {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--linkooc-primary, #08781B);
    cursor: pointer;
}

.stockout-dlg__time[b-o6iqa3z1nq] {
    height: 2rem;
    padding: 0 0.5rem;
    border: var(--linkooc-border-width, 1px) solid var(--linkooc-border-color);
    border-radius: var(--linkooc-radius-sm, 0.5rem);
    background: var(--linkooc-bg, #fff);
    color: var(--linkooc-text);
    font: inherit;
}

.stockout-dlg__time:focus[b-o6iqa3z1nq] {
    outline: none;
    border-color: var(--linkooc-primary, #08781B);
    box-shadow: 0 0 0 3px var(--linkooc-primary-subtle, rgba(8, 120, 27, 0.1));
}

@media (max-width: 768px) {
    .stockout-dlg__radio[b-o6iqa3z1nq] {
        min-height: 44px;
    }

    .stockout-dlg__time[b-o6iqa3z1nq] {
        height: 44px;
    }
}
/* /Components/Menu/MenuDetailsPanel.razor.rz.scp.css */
/* Plan 417 — regles deplacees depuis le <style> global du .razor vers
   l'isolation CSS Blazor. Les declarations sont inchangees.

   Pourquoi les :where() : le compilateur ajoute [b-xxxxxxxxxx] a la fin du
   selecteur, ce qui lui ajoute le poids d'une classe. Sans compensation, ces
   regles se mettraient a battre des regles globales plus specifiques
   (mobile.css, plans 393/399) qu'elles perdaient jusqu'ici. :where() sur la
   premiere classe rend ce poids : la specificite reste exactement celle du
   <style> d'origine, seule la portee change. */

:where(.linkooc-input)[b-3mq82jpola],
[b-3mq82jpola] :where(.linkooc-input),
:where(.linkooc-select)[b-3mq82jpola],
[b-3mq82jpola] :where(.linkooc-select) {
    padding: var(--linkooc-spacing-sm) var(--linkooc-spacing-md);
    font-size: var(--linkooc-input-size);
    border: 1px solid var(--linkooc-border-color);
    border-radius: var(--linkooc-radius-sm);
    background: var(--linkooc-surface);
    color: var(--linkooc-text-primary);
    transition: border-color var(--linkooc-transition-fast), box-shadow var(--linkooc-transition-fast);
}

:where(.linkooc-input):focus[b-3mq82jpola],
[b-3mq82jpola] :where(.linkooc-input):focus,
:where(.linkooc-select):focus[b-3mq82jpola],
[b-3mq82jpola] :where(.linkooc-select):focus {
    outline: none;
    border-color: var(--linkooc-primary);
    box-shadow: 0 0 0 3px var(--linkooc-primary-subtle);
}
/* /Components/Menu/StockOutDisplaySetting.razor.rz.scp.css */
/* Plan 969 — « Plat en rupture, sur votre site » : deux spécimens muets (cible q2-A.png). */

.stockout-setting[b-flj0g6077y] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0 0 var(--linkooc-spacing-md, 1rem);
    border-bottom: var(--linkooc-border-width, 1px) solid var(--linkooc-border-color);
}

.stockout-setting__title[b-flj0g6077y] {
    font-weight: 500;
    color: var(--linkooc-text);
}

.stockout-setting__choices[b-flj0g6077y] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.stockout-setting__card[b-flj0g6077y] {
    display: block;
    width: 100%;
    padding: 0.375rem;
    border: 2px solid var(--linkooc-border-color);
    border-radius: var(--linkooc-radius-sm, 0.5rem);
    background: var(--linkooc-bg, #fff);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.stockout-setting__card:hover:not(.is-selected):not(:disabled)[b-flj0g6077y] {
    border-color: color-mix(in srgb, var(--linkooc-primary, #08781B) 45%, var(--linkooc-border-color));
}

.stockout-setting__card.is-selected[b-flj0g6077y] {
    border-color: var(--linkooc-primary, #08781B);
}

.stockout-setting__card:disabled[b-flj0g6077y] {
    cursor: default;
}

.stockout-setting__card:focus-visible[b-flj0g6077y] {
    outline: none;
    box-shadow: 0 0 0 3px var(--linkooc-primary-subtle, rgba(8, 120, 27, 0.1));
}

/* Le spécimen : un morceau de carte de restaurant, rendu en HTML (pas une capture). */
.stockout-specimen[b-flj0g6077y] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    /* Une fenêtre sur la carte : même hauteur pour les deux, la suite est coupée en bas. */
    height: 8.25rem;
    overflow: hidden;
    padding: 0.75rem 0.875rem;
    border-radius: calc(var(--linkooc-radius-sm, 0.5rem) - 0.125rem);
    background: #f4efe8;
    color: #2a2622;
    font-size: 0.6875rem;
    line-height: 1.35;
}

.stockout-specimen__dish[b-flj0g6077y] {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 0.125rem;
}

.stockout-specimen__row[b-flj0g6077y] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.stockout-specimen__name[b-flj0g6077y] {
    font-weight: 600;
}

.stockout-specimen__price[b-flj0g6077y] {
    font-weight: 600;
    color: #5a1010;
    white-space: nowrap;
}

.stockout-specimen__desc[b-flj0g6077y] {
    color: #6b635b;
}

.stockout-specimen__dish.is-out .stockout-specimen__name[b-flj0g6077y] {
    text-decoration: line-through;
    opacity: 0.55;
}

.stockout-specimen__dish.is-out .stockout-specimen__desc[b-flj0g6077y] {
    opacity: 0.55;
}

.stockout-specimen__success[b-flj0g6077y] {
    font-style: italic;
    color: #5a1010;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .stockout-setting__choices[b-flj0g6077y] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Ui/LkActionBar.razor.rz.scp.css */
/* Plan 412 — LkActionBar. Groupe 17 : « une seule ».

   Un seul socle. Les deux modes ne changent que la couleur du message, jamais
   la géométrie — c'est ce qui empêche « Dirty » et « Draft » de redevenir deux
   barres. */

.lk-actionbar[b-96je55ptgf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--linkooc-spacing-md, 1rem);
    min-height: var(--linkooc-panel-header-height, 3.5rem);
    padding: var(--linkooc-spacing-sm, 0.5rem) var(--linkooc-spacing-lg, 1.5rem);
    background-color: var(--linkooc-bg);
    border-top: var(--linkooc-border-width, 1px) solid var(--linkooc-border-color);
    box-shadow: var(--linkooc-shadow-sticky);
}

.lk-actionbar__status[b-96je55ptgf] {
    display: flex;
    align-items: center;
    gap: var(--linkooc-spacing-sm, 0.5rem);
    min-width: 0;
}

.lk-actionbar__message[b-96je55ptgf] {
    display: inline-flex;
    align-items: center;
    gap: var(--linkooc-spacing-xs, 0.25rem);
    font-size: var(--linkooc-list-item-desc-size, 0.8125rem);
}

.lk-actionbar--dirty .lk-actionbar__message[b-96je55ptgf] {
    color: var(--linkooc-warning-strong, #9a6700);
}

.lk-actionbar--draft .lk-actionbar__message[b-96je55ptgf] {
    color: var(--linkooc-text-secondary);
}

.lk-actionbar__actions[b-96je55ptgf] {
    display: flex;
    align-items: center;
    gap: var(--linkooc-spacing-sm, 0.5rem);
    flex: 0 0 auto;
}

/* Sous 769px la barre s'empile et les boutons prennent toute la largeur : le
   plancher tactile est tenu par LkButton, pas par une exception écrite ici. */
@media (max-width: 768px) {
    .lk-actionbar[b-96je55ptgf] {
        flex-direction: column;
        align-items: stretch;
        padding: var(--linkooc-spacing-sm, 0.5rem) var(--linkooc-spacing-md, 1rem);
    }

    .lk-actionbar__actions[b-96je55ptgf] {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}
/* /Components/Ui/LkBadge.razor.rz.scp.css */
/* Plan 412 — LkBadge. Groupe 9 : « celle de site.css ».

   Les six tons sont ceux de `wwwroot/css/site.css:418` → `:443`. Les couleurs
   qui n'avaient pas encore de jeton sont écrites en REPLI d'un nom de jeton :
   le rendu reste identique au pixel près, et le jour où le jeton entre dans
   `linkooc-theme.css`, il gagne sans toucher ce fichier. */

.lk-badge[b-14xggq8miu] {
    display: inline-flex;
    align-items: center;
    gap: var(--linkooc-spacing-xs, 0.25rem);
    padding: 0.25rem 0.625rem;
    border: var(--linkooc-border-width, 1px) solid transparent;
    border-radius: var(--linkooc-radius-lg, 1rem);
    font-family: var(--linkooc-font-family);
    font-size: var(--linkooc-small-size, 0.75rem);
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

.lk-badge i[b-14xggq8miu] {
    font-size: var(--linkooc-tiny-size, 0.7rem);
}

.lk-badge--success[b-14xggq8miu] {
    color: var(--linkooc-green-var-2);
    background-color: var(--linkooc-success-surface, #d1e7dd);
}

.lk-badge--warning[b-14xggq8miu] {
    color: var(--linkooc-warning-strong, #856404);
    background-color: var(--linkooc-warning-surface, #fff3cd);
}

.lk-badge--danger[b-14xggq8miu] {
    color: var(--linkooc-red-var-2);
    background-color: var(--linkooc-danger-surface, #f8d7da);
}

.lk-badge--info[b-14xggq8miu] {
    color: var(--linkooc-blue-var-2);
    background-color: var(--linkooc-info-surface, #cce5ff);
}

.lk-badge--muted[b-14xggq8miu] {
    color: var(--linkooc-text-secondary);
    background-color: var(--linkooc-hover-bg);
}

.lk-badge--neutral[b-14xggq8miu] {
    color: var(--linkooc-text-secondary);
    background-color: transparent;
    border-color: var(--linkooc-border-color);
}
/* /Components/Ui/LkButton.razor.rz.scp.css */
/* Plan 412 — LkButton. Groupes 1, 2, 3 et 20 du compagnon de décisions.

   Toute valeur passe par un jeton `--linkooc-*`. Les replis écrits en second
   argument de `var()` existent parce que ce plan n'a pas le droit de modifier
   `wwwroot/css/linkooc-theme.css` (STOP condition) : le jour où le jeton y est
   déclaré, il gagne sans qu'une seule ligne d'ici ne bouge.

   Hauteur : le plancher tactile de 44px des plans 393/399/402 est la valeur de
   BASE, et le jeton de contrôle (32px) ne s'applique qu'au-dessus de 769px —
   c'est la doctrine posée par le plan 407 en fin de `linkooc-theme.css`. */

.lk-btn[b-1a5xwtw7ba] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--linkooc-spacing-xs, 0.25rem);
    min-height: var(--linkooc-touch-target, 44px);
    padding-block: 0.25rem;
    padding-inline: var(--linkooc-spacing-md, 1rem);
    border: var(--linkooc-border-width, 1px) solid transparent;
    border-radius: var(--linkooc-control-radius, 1.5rem);
    font-family: var(--linkooc-font-family);
    font-size: var(--linkooc-body-size, 0.875rem);
    font-weight: 600;
    line-height: 1.375rem;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--linkooc-transition-fast, 150ms ease),
                border-color var(--linkooc-transition-fast, 150ms ease),
                color var(--linkooc-transition-fast, 150ms ease);
}

.lk-btn--block[b-1a5xwtw7ba] {
    width: 100%;
}

.lk-btn--sm[b-1a5xwtw7ba] {
    padding-inline: var(--linkooc-spacing-sm, 0.5rem);
    font-size: var(--linkooc-small-size, 0.75rem);
}

.lk-btn__label[b-1a5xwtw7ba] {
    display: inline-block;
}

/* ── Groupe 1 : la pilule verte pleine ─────────────────────────────────── */
.lk-btn--primary[b-1a5xwtw7ba] {
    background-color: var(--linkooc-button-primary);
    border-color: var(--linkooc-button-primary);
    color: var(--linkooc-on-solid, #ffffff);
}

.lk-btn--primary:hover:not(:disabled)[b-1a5xwtw7ba],
.lk-btn--primary:focus-visible:not(:disabled)[b-1a5xwtw7ba] {
    background-color: var(--linkooc-button-primary-hover);
    border-color: var(--linkooc-button-primary-hover);
}

/* ── Groupe 2 : contour, fond transparent, JAMAIS de remplissage plein ─── */
.lk-btn--outline[b-1a5xwtw7ba] {
    background-color: transparent;
    border-color: var(--linkooc-border-color);
    color: var(--linkooc-primary-ink);
}

.lk-btn--outline:hover:not(:disabled)[b-1a5xwtw7ba],
.lk-btn--outline:focus-visible:not(:disabled)[b-1a5xwtw7ba] {
    background-color: var(--linkooc-primary-subtle);
    border-color: var(--linkooc-button-primary);
}

/* ── Groupe 2 : le neutre d'« Annuler » ────────────────────────────────── */
.lk-btn--ghost[b-1a5xwtw7ba] {
    background-color: transparent;
    border-color: transparent;
    color: var(--linkooc-text-secondary);
}

.lk-btn--ghost:hover:not(:disabled)[b-1a5xwtw7ba],
.lk-btn--ghost:focus-visible:not(:disabled)[b-1a5xwtw7ba] {
    background-color: var(--linkooc-hover-bg);
    color: var(--linkooc-text);
}

/* ── Groupe 3 : contour rouge. Le rouge plein reste au dialogue ────────── */
.lk-btn--danger[b-1a5xwtw7ba] {
    background-color: transparent;
    border-color: var(--linkooc-danger-light);
    color: var(--linkooc-danger);
}

.lk-btn--danger:hover:not(:disabled)[b-1a5xwtw7ba],
.lk-btn--danger:focus-visible:not(:disabled)[b-1a5xwtw7ba] {
    background-color: var(--linkooc-danger-light);
    border-color: var(--linkooc-danger);
}

/* ── Groupe 3, l'exception : le rouge PLEIN de la confirmation ─────────────

   Le compagnon de décisions l'écrit noir sur blanc : « le rouge plein est
   réservé à la confirmation DANS un dialogue, jamais dans une liste ». Cette
   variante est donc celle du bouton de confirmation d'un `LkConfirm` (plan 530),
   pas celle d'une carte — `--danger` (contour) reste le bouton des listes, et
   ses douze appelants n'ont pas bougé.

   Le fond n'est PAS `--linkooc-danger` : ce jeton sert d'abord à du TEXTE rouge,
   et en thème sombre il vaut #e5534b, sur lequel du blanc ne mesure que 3,7:1 —
   sous le seuil AA de 4,5:1. `--linkooc-danger-solid` est le rouge dont le rôle
   est de porter du blanc, déclaré pour les deux thèmes dans
   `wwwroot/css/linkooc-theme.css`. */
.lk-btn--danger-solid[b-1a5xwtw7ba] {
    background-color: var(--linkooc-danger-solid);
    border-color: var(--linkooc-danger-solid);
    color: var(--linkooc-on-solid, #ffffff);
}

.lk-btn--danger-solid:hover:not(:disabled)[b-1a5xwtw7ba],
.lk-btn--danger-solid:focus-visible:not(:disabled)[b-1a5xwtw7ba] {
    background-color: var(--linkooc-danger-solid-hover);
    border-color: var(--linkooc-danger-solid-hover);
}

.lk-btn:focus-visible[b-1a5xwtw7ba] {
    outline: none;
    box-shadow: 0 0 0 0.125rem var(--linkooc-primary-subtle);
}

.lk-btn--danger:focus-visible[b-1a5xwtw7ba],
.lk-btn--danger-solid:focus-visible[b-1a5xwtw7ba] {
    box-shadow: 0 0 0 0.125rem var(--linkooc-danger-light);
}

.lk-btn:disabled[b-1a5xwtw7ba] {
    opacity: 0.55;
    cursor: not-allowed;
}

.lk-btn__spinner[b-1a5xwtw7ba] {
    width: 0.875rem;
    height: 0.875rem;
    border: 0.125rem solid currentColor;
    border-right-color: transparent;
    border-radius: var(--linkooc-control-radius, 1.5rem);
    animation: lk-btn-spin-b-1a5xwtw7ba 0.75s linear infinite;
}

@keyframes lk-btn-spin-b-1a5xwtw7ba {
    to {
        transform: rotate(360deg);
    }
}

/* Au-dessus de 769px le dessin se resserre sur le jeton de contrôle : c'est la
   densité de bureau du BackOffice, arbitrée par le plan 407. */
@media (min-width: 769px) {
    .lk-btn[b-1a5xwtw7ba] {
        min-height: var(--linkooc-control-height, 2rem);
    }
}
/* /Components/Ui/LkCard.razor.rz.scp.css */
/* Plan 412 — LkCard. Groupe 7 : rayon 12px, quatre coins égaux.

   `--linkooc-radius-md` vaut 0.75rem, soit exactement les 12px arbitrés. */

.lk-card[b-00i2txkfmx] {
    display: block;
    background-color: var(--linkooc-surface);
    border: var(--linkooc-border-width, 1px) solid var(--linkooc-border-color);
    border-radius: var(--linkooc-radius-md, 0.75rem);
    padding: var(--linkooc-spacing-md, 1rem) var(--linkooc-spacing-lg, 1.5rem);
    box-shadow: none;
    text-align: start;
    transition: border-color var(--linkooc-transition-fast, 150ms ease),
                box-shadow var(--linkooc-transition-fast, 150ms ease);
}

/* Pour les cartes qui contiennent une liste : les rangées portent déjà leur
   marge, un rembourrage de carte les décalerait deux fois. */
.lk-card--flush[b-00i2txkfmx] {
    padding: 0;
}

.lk-card--interactive[b-00i2txkfmx] {
    cursor: pointer;
}

.lk-card--interactive:hover[b-00i2txkfmx],
.lk-card--interactive:focus-visible[b-00i2txkfmx] {
    border-color: var(--linkooc-button-primary);
    box-shadow: var(--linkooc-shadow-sm);
}

.lk-card--interactive:focus-visible[b-00i2txkfmx] {
    outline: none;
}

.lk-card--selected[b-00i2txkfmx] {
    border-color: var(--linkooc-list-selection-border-color);
    background-color: var(--linkooc-list-selection-bg);
}

.lk-card__header[b-00i2txkfmx] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--linkooc-spacing-sm, 0.5rem);
    margin-bottom: var(--linkooc-spacing-sm, 0.5rem);
}

.lk-card__titles[b-00i2txkfmx] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lk-card__heading[b-00i2txkfmx] {
    color: var(--linkooc-text);
    font-size: var(--linkooc-section-title-size, 1rem);
    font-weight: var(--linkooc-section-title-weight, 600);
}

.lk-card__subheading[b-00i2txkfmx] {
    color: var(--linkooc-text-secondary);
    font-size: var(--linkooc-list-item-desc-size, 0.8125rem);
}

.lk-card__actions[b-00i2txkfmx] {
    display: flex;
    align-items: center;
    gap: var(--linkooc-spacing-xs, 0.25rem);
    flex: 0 0 auto;
}

/* Une carte en pleine largeur de téléphone n'a pas besoin de son rembourrage
   horizontal de bureau : il mange le texte. */
@media (max-width: 768px) {
    .lk-card[b-00i2txkfmx] {
        padding: var(--linkooc-spacing-md, 1rem);
    }

    .lk-card--flush[b-00i2txkfmx] {
        padding: 0;
    }
}
/* /Components/Ui/LkChip.razor.rz.scp.css */
/* Plan 412 — LkChip. Groupe 10 (le carrefour) + groupe 20 option 3.

   La forme est la même que celle du bouton : une pilule. Ce qui sépare une chip
   d'un bouton est le REMPLISSAGE — gris clair et bordure fine au repos, vert
   plein une fois le filtre appliqué. */

.lk-chip[b-rsebf735uc] {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    flex: 0 0 auto;
    min-height: var(--linkooc-control-height, 2rem);
    background-color: var(--linkooc-hover-bg);
    border: var(--linkooc-border-width, 1px) solid var(--linkooc-border-color);
    border-radius: var(--linkooc-control-radius, 1.5rem);
    color: var(--linkooc-text-secondary);
    font-family: var(--linkooc-font-family);
    font-size: var(--linkooc-list-item-desc-size, 0.8125rem);
    transition: background-color var(--linkooc-transition-fast, 150ms ease),
                border-color var(--linkooc-transition-fast, 150ms ease),
                color var(--linkooc-transition-fast, 150ms ease);
}

/* La zone de frappe, invisible : le dessin compact est voulu (groupe 20).
   Elle est posée SUR LE BOUTON et non sur l'enveloppe — un pseudo-élément
   d'enveloppe attraperait le clic sans jamais l'envoyer au bouton. */
.lk-chip__main[b-rsebf735uc]::after,
.lk-chip__remove[b-rsebf735uc]::after {
    content: "";
    position: absolute;
    /* En pourcentage de la hauteur DESSINÉE de l'hôte : la cible atteint
       touch-target quel que soit le dessin (26, 30 ou 32px). L'ancienne
       formule supposait un hôte à control-height et laissait la croix à 38px
       et la chip à 42 — mesuré au gate 413. */
    top: calc((100% - var(--linkooc-touch-target, 44px)) / 2);
    bottom: calc((100% - var(--linkooc-touch-target, 44px)) / 2);
    left: 0;
    right: 0;
}

/* La croix reste à droite : sa zone étendue ne recouvre jamais le bouton
   principal (left: 0 la borne à son propre bord), elle ne vole aucun clic. */

.lk-chip:hover[b-rsebf735uc] {
    border-color: var(--linkooc-button-primary);
    color: var(--linkooc-text);
}

/* Le remplissage plein. C'est LUI qui dit « ce filtre est appliqué ». */
.lk-chip--active[b-rsebf735uc] {
    background-color: var(--linkooc-button-primary);
    border-color: var(--linkooc-button-primary);
    color: var(--linkooc-on-solid, #ffffff);
}

.lk-chip--active:hover[b-rsebf735uc] {
    background-color: var(--linkooc-button-primary-hover);
    border-color: var(--linkooc-button-primary-hover);
    color: var(--linkooc-on-solid, #ffffff);
}

.lk-chip__main[b-rsebf735uc],
.lk-chip__remove[b-rsebf735uc] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--linkooc-spacing-xs, 0.25rem);
    padding: 0 var(--linkooc-spacing-sm, 0.5rem);
    background-color: transparent;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.lk-chip__remove[b-rsebf735uc] {
    padding-inline-start: 0;
}

.lk-chip__main:focus-visible[b-rsebf735uc],
.lk-chip__remove:focus-visible[b-rsebf735uc] {
    outline: none;
    box-shadow: inset 0 0 0 0.125rem var(--linkooc-primary-subtle);
}

.lk-chip__count[b-rsebf735uc] {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--linkooc-spacing-xs, 0.25rem);
    background-color: var(--linkooc-surface);
    border-radius: var(--linkooc-control-radius, 1.5rem);
    color: var(--linkooc-text-secondary);
    font-size: var(--linkooc-small-size, 0.75rem);
    font-weight: 600;
}

.lk-chip--active .lk-chip__count[b-rsebf735uc] {
    background-color: var(--linkooc-primary-subtle);
    color: var(--linkooc-on-solid, #ffffff);
}

.lk-chip__main:disabled[b-rsebf735uc],
.lk-chip__remove:disabled[b-rsebf735uc] {
    opacity: 0.55;
    cursor: not-allowed;
}
/* /Components/Ui/LkConfirm.razor.rz.scp.css */
/* Plan 530 — LkConfirm.

   Presque rien : la géométrie du dialogue (corps, pied, ordre des boutons,
   plein écran sous 769px) appartient à `LkDialog`, et l'allure des boutons à
   `LkButton`. Redéclarer l'une ou l'autre ici ferait la deuxième définition que
   le plan 412 a passé une campagne à supprimer.

   Ce fichier n'habille donc que la phrase du corps, quand l'appelant s'est
   contenté de `Message`. */

.lk-confirm__message[b-veq1a0010q] {
    margin: 0;
    color: var(--linkooc-text);
}
/* /Components/Ui/LkDialog.razor.rz.scp.css */
/* Plan 412 — LkDialog. Groupe 15 : enveloppe Telerik.

   Ce fichier n'habille QUE le corps et le pied, c'est-à-dire les éléments que
   la primitive écrit elle-même. La barre de titre, l'ombre, le voile modal et
   le passage en plein écran sous 768px restent l'affaire de Telerik et du bloc
   `.k-window` de `mobile.css` : les redéclarer ici ferait une deuxième
   définition du groupe 15. */

.lk-dlg__body[b-toqvaegkg8] {
    padding: var(--linkooc-spacing-md, 1rem) var(--linkooc-spacing-lg, 1.5rem);
    overflow-y: auto;
    color: var(--linkooc-text);
    font-size: var(--linkooc-body-size, 0.875rem);
}

/* Le pied COLLE au bas de la zone qui défile.

   Sous 768px `mobile.css` plafonne la fenêtre (`max-height: 85vh`) et rend
   `.k-window-content` défilant : corps ET pied s'y trouvent, donc sans ce
   `sticky` un formulaire long fait naître « Annuler » et l'action SOUS le pli —
   le défaut mesuré par le plan 489 (y = 1050 dans un viewport de 844). Le
   `sticky` est écrit ici, sur l'élément que la primitive rend elle-même, plutôt
   que sur `.k-window-content` : la règle partagée par les 83 fenêtres du
   BackOffice n'est pas touchée (condition STOP 4 du plan 489).

   Quand rien ne défile — le cas du bureau — `sticky` n'a aucun effet. */
.lk-dlg__footer[b-toqvaegkg8] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--linkooc-spacing-sm, 0.5rem);
    padding: var(--linkooc-spacing-sm, 0.5rem) var(--linkooc-spacing-lg, 1.5rem);
    border-top: var(--linkooc-border-width, 1px) solid var(--linkooc-border-color);
    position: sticky;
    bottom: 0;
    z-index: 1;
    background: var(--linkooc-bg, #fff);
}

/* Au-dessus de 768px, RIEN ne plafonne la fenêtre Telerik : un formulaire de
   douze champs la fait dépasser du navigateur (mesuré à 1440×900, plan 489 :
   fenêtre de 910 px, barre de titre coupée à y = -5). On borne donc le corps —
   l'élément que la primitive rend elle-même — pour que la fenêtre entière tienne
   à l'écran ; le corps défile seul et le pied reste posé dessous, ce qui est la
   promesse du groupe 15. Le bloc mobile de `mobile.css` n'est pas concerné. */
@media (min-width: 768.02px) {
    .lk-dlg__body[b-toqvaegkg8] {
        max-height: calc(100vh - 14rem);
    }
}

/* Sous 769px la fenêtre est déjà en plein écran : le pied s'empile et les
   boutons prennent toute la largeur, comme le veut le groupe 17. */
@media (max-width: 768px) {
    .lk-dlg__body[b-toqvaegkg8] {
        padding: var(--linkooc-spacing-md, 1rem);
    }

    .lk-dlg__footer[b-toqvaegkg8] {
        flex-direction: column-reverse;
        align-items: stretch;
        padding: var(--linkooc-spacing-md, 1rem);
    }
}
/* /Components/Ui/LkEmptyState.razor.rz.scp.css */
/* Plan 412 — LkEmptyState. Groupe 16 : « celle de linkooc-theme.css ».

   Reprise de `linkooc-theme.css:1047`. La hauteur minimale de 300px y était
   écrite en dur ; elle passe ici par un jeton avec repli, comme le reste. */

.lk-empty[b-77dyh6jkcy] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: var(--linkooc-empty-state-height, 300px);
    padding: var(--linkooc-spacing-2xl, 3rem) var(--linkooc-spacing-lg, 1.5rem);
    text-align: center;
}

.lk-empty__icon[b-77dyh6jkcy] {
    margin-bottom: var(--linkooc-spacing-md, 1rem);
    color: var(--linkooc-text-muted);
    font-size: 4rem;
}

.lk-empty__title[b-77dyh6jkcy] {
    margin-bottom: var(--linkooc-spacing-sm, 0.5rem);
    color: var(--linkooc-text-display);
    font-size: var(--linkooc-section-title-size, 1rem);
    font-weight: var(--linkooc-section-title-weight, 600);
}

.lk-empty__message[b-77dyh6jkcy] {
    margin-bottom: var(--linkooc-spacing-lg, 1.5rem);
    color: var(--linkooc-text-muted);
    font-size: var(--linkooc-body-size, 0.875rem);
}

.lk-empty__action[b-77dyh6jkcy] {
    display: flex;
    justify-content: center;
}
/* /Components/Ui/LkIconButton.razor.rz.scp.css */
/* Plan 412 — LkIconButton. Groupe 4 + groupe 20 option 3.

   Le dessin fait 32×32 à toutes les largeurs : c'est ce qui préserve la densité
   du Tour de contrôle, où 13 kebabs cohabitent sur un écran. La cible tactile de
   44px est obtenue par un pseudo-élément transparent, invisible à l'œil.

   Toute valeur passe par un jeton `--linkooc-*` ; les replis existent parce que
   ce plan n'a pas le droit d'écrire dans `linkooc-theme.css`. */

.lk-icon-btn[b-75nx0up04w] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--linkooc-control-height, 2rem);
    height: var(--linkooc-control-height, 2rem);
    padding: 0;
    background-color: transparent;
    border: var(--linkooc-border-width, 1px) solid transparent;
    border-radius: var(--linkooc-control-radius, 1.5rem);
    color: var(--linkooc-text-secondary);
    font-size: var(--linkooc-body-size, 0.875rem);
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--linkooc-transition-fast, 150ms ease),
                border-color var(--linkooc-transition-fast, 150ms ease),
                color var(--linkooc-transition-fast, 150ms ease);
}

/* La zone de frappe, invisible : c'est le prix payé pour garder la densité de
   bureau tout en respectant les plans 393/399/402. En pourcentage de la
   hauteur DESSINÉE de l'hôte, la cible atteint touch-target même si un
   variant dessine autre chose que control-height. */
.lk-icon-btn[b-75nx0up04w]::after {
    content: "";
    position: absolute;
    top: calc((100% - var(--linkooc-touch-target, 44px)) / 2);
    bottom: calc((100% - var(--linkooc-touch-target, 44px)) / 2);
    left: calc((100% - var(--linkooc-touch-target, 44px)) / 2);
    right: calc((100% - var(--linkooc-touch-target, 44px)) / 2);
}

.lk-icon-btn:hover:not(:disabled)[b-75nx0up04w],
.lk-icon-btn:focus-visible:not(:disabled)[b-75nx0up04w] {
    background-color: var(--linkooc-primary-subtle);
    color: var(--linkooc-primary-ink);
}

.lk-icon-btn--bordered[b-75nx0up04w] {
    background-color: var(--linkooc-bg);
    border-color: var(--linkooc-border-color);
}

.lk-icon-btn--active[b-75nx0up04w] {
    background-color: var(--linkooc-primary-subtle);
    color: var(--linkooc-primary-ink);
}

/* Groupe 3 : le ton destructeur, contour et teinte — jamais de rouge plein. */
.lk-icon-btn--danger[b-75nx0up04w] {
    color: var(--linkooc-danger);
}

.lk-icon-btn--danger:hover:not(:disabled)[b-75nx0up04w],
.lk-icon-btn--danger:focus-visible:not(:disabled)[b-75nx0up04w] {
    background-color: var(--linkooc-danger-light);
    color: var(--linkooc-danger);
}

.lk-icon-btn:focus-visible[b-75nx0up04w] {
    outline: none;
    box-shadow: 0 0 0 0.125rem var(--linkooc-primary-subtle);
}

.lk-icon-btn--danger:focus-visible[b-75nx0up04w] {
    box-shadow: 0 0 0 0.125rem var(--linkooc-danger-light);
}

.lk-icon-btn:disabled[b-75nx0up04w] {
    opacity: 0.55;
    cursor: not-allowed;
}

.lk-icon-btn:disabled[b-75nx0up04w]::after {
    content: none;
}
/* /Components/Ui/LkLabel.razor.rz.scp.css */
/* Plan 412 — LkLabel. Groupe 12 : 14px / 500, jetons du plan 406.

   Ce fichier ne DÉFINIT aucune échelle : il lit `--linkooc-label-*`. C'est ce
   qui empêche une vingt-troisième règle `.form-label` de naître ici. */

.lk-label[b-8ggiz4q067] {
    display: block;
    margin-bottom: var(--linkooc-spacing-xs, 0.25rem);
    color: var(--linkooc-label-color, var(--linkooc-text));
    font-family: var(--linkooc-font-family);
    font-size: var(--linkooc-label-size, 0.875rem);
    font-weight: var(--linkooc-label-weight, 500);
    line-height: 1.4;
}

.lk-label__required[b-8ggiz4q067] {
    margin-inline-start: var(--linkooc-spacing-xs, 0.25rem);
    color: var(--linkooc-danger);
}

.lk-label__hint[b-8ggiz4q067] {
    margin-inline-start: var(--linkooc-spacing-xs, 0.25rem);
    color: var(--linkooc-text-secondary);
    font-size: var(--linkooc-small-size, 0.75rem);
    font-weight: 400;
}
/* /Components/Ui/LkMenu.razor.rz.scp.css */
/* Plan 412 — LkMenu. Groupe 14 : « celle de la barre latérale ».

   Reprise de `sidebar-dropdown-menu` (linkooc-theme.css:697), à ceci près que
   son rayon lisait `--linkooc-radius-md` avec un repli de 0.5rem qui mentait
   sur la valeur du jeton : ici le repli dit 0.75rem, soit les 12px réels. */

.lk-menu[b-3q5m9nn9wi] {
    position: relative;
    display: inline-flex;
}

.lk-menu__trigger[b-3q5m9nn9wi] {
    display: inline-flex;
}

/* Le voile qui ferme au clic extérieur. Transparent, plein écran, sous le
   panneau : c'est le patron de `sidebar-dropdown-overlay`. */
.lk-menu__overlay[b-3q5m9nn9wi] {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background-color: transparent;
}

.lk-menu__panel[b-3q5m9nn9wi] {
    position: absolute;
    top: calc(100% + var(--linkooc-spacing-xs, 0.25rem));
    left: 0;
    z-index: 1050;
    min-width: 12rem;
    padding: var(--linkooc-spacing-sm, 0.5rem) 0;
    background-color: var(--linkooc-bg);
    border: var(--linkooc-border-width, 1px) solid var(--linkooc-border-color);
    border-radius: var(--linkooc-radius-md, 0.75rem);
    box-shadow: var(--linkooc-shadow-md);
    animation: lk-menu-in-b-3q5m9nn9wi 0.15s ease-out;
}

.lk-menu__panel--end[b-3q5m9nn9wi] {
    left: auto;
    right: 0;
}

.lk-menu__panel--up[b-3q5m9nn9wi] {
    top: auto;
    bottom: calc(100% + var(--linkooc-spacing-xs, 0.25rem));
}

@keyframes lk-menu-in-b-3q5m9nn9wi {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Components/Ui/LkMenuItem.razor.rz.scp.css */
/* Plan 412 — LkMenuItem. Groupe 14 + groupe 20 option 1. */

.lk-menu-item[b-ejf8v1x3tr] {
    display: flex;
    align-items: center;
    gap: var(--linkooc-spacing-sm, 0.5rem);
    width: 100%;
    min-height: var(--linkooc-touch-target, 44px);
    padding: var(--linkooc-spacing-sm, 0.5rem) var(--linkooc-spacing-md, 1rem);
    background-color: transparent;
    border: none;
    color: var(--linkooc-text-display);
    font-family: var(--linkooc-font-family);
    font-size: var(--linkooc-body-size, 0.875rem);
    font-weight: 500;
    text-align: start;
    cursor: pointer;
    transition: background-color var(--linkooc-transition-fast, 150ms ease);
}

.lk-menu-item:hover:not(:disabled)[b-ejf8v1x3tr],
.lk-menu-item:focus-visible:not(:disabled)[b-ejf8v1x3tr] {
    background-color: var(--linkooc-hover-second-bg);
}

.lk-menu-item:focus-visible[b-ejf8v1x3tr] {
    outline: none;
}

.lk-menu-item--danger[b-ejf8v1x3tr] {
    color: var(--linkooc-danger);
}

.lk-menu-item--danger:hover:not(:disabled)[b-ejf8v1x3tr],
.lk-menu-item--danger:focus-visible:not(:disabled)[b-ejf8v1x3tr] {
    background-color: var(--linkooc-danger-light);
}

.lk-menu-item:disabled[b-ejf8v1x3tr] {
    opacity: 0.55;
    cursor: not-allowed;
}

.lk-menu-item__icon[b-ejf8v1x3tr] {
    flex: 0 0 auto;
    color: var(--linkooc-text-secondary);
}

.lk-menu-item--danger .lk-menu-item__icon[b-ejf8v1x3tr] {
    color: var(--linkooc-danger);
}

.lk-menu-item__text[b-ejf8v1x3tr] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lk-menu-item__desc[b-ejf8v1x3tr] {
    color: var(--linkooc-text-secondary);
    font-size: var(--linkooc-small-size, 0.75rem);
    font-weight: 400;
}
/* /Components/Ui/LkSearchField.razor.rz.scp.css */
/* Plan 412 — LkSearchField. Groupe 11 (« pilule, 32px ») + groupe 20 option 1.

   Hauteur de bureau : le jeton de contrôle. Sous 769px, le plancher tactile
   reprend la main — un champ se vise au pouce, il n'a rien à gagner à rester
   compact. */

.lk-search[b-pyykubjmbu] {
    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--linkooc-touch-target, 44px);
    background-color: var(--linkooc-bg);
    border: var(--linkooc-border-width, 1px) solid var(--linkooc-border-color);
    border-radius: var(--linkooc-control-radius, 1.5rem);
    padding-inline: var(--linkooc-spacing-sm, 0.5rem);
    transition: border-color var(--linkooc-transition-fast, 150ms ease),
                box-shadow var(--linkooc-transition-fast, 150ms ease);
}

.lk-search:focus-within[b-pyykubjmbu] {
    border-color: var(--linkooc-button-primary);
    box-shadow: 0 0 0 0.125rem var(--linkooc-primary-subtle);
}

.lk-search__icon[b-pyykubjmbu] {
    flex: 0 0 auto;
    margin-inline-end: var(--linkooc-spacing-xs, 0.25rem);
    color: var(--linkooc-text-secondary);
    font-size: var(--linkooc-list-item-desc-size, 0.8125rem);
}

.lk-search__input[b-pyykubjmbu] {
    flex: 1 1 auto;
    min-width: 0;
    background-color: transparent;
    border: none;
    outline: none;
    color: var(--linkooc-text);
    font-family: var(--linkooc-font-family);
    font-size: var(--linkooc-input-size, 0.875rem);
}

.lk-search__input[b-pyykubjmbu]::placeholder {
    color: var(--linkooc-text-secondary);
}

/* La croix native de `type="search"` doublerait notre bouton d'effacement. */
.lk-search__input[b-pyykubjmbu]::-webkit-search-cancel-button {
    appearance: none;
}

.lk-search__clear[b-pyykubjmbu] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: var(--linkooc-spacing-xs, 0.25rem);
    background-color: transparent;
    border: none;
    border-radius: var(--linkooc-control-radius, 1.5rem);
    color: var(--linkooc-text-secondary);
    font-size: var(--linkooc-small-size, 0.75rem);
    cursor: pointer;
}

/* La zone de frappe, invisible (groupe 20) — bornée côté gauche pour ne pas
   recouvrir le champ et lui voler le focus au toucher. */
.lk-search__clear[b-pyykubjmbu]::after {
    content: "";
    position: absolute;
    top: calc((100% - var(--linkooc-touch-target, 44px)) / 2);
    bottom: calc((100% - var(--linkooc-touch-target, 44px)) / 2);
    left: 0;
    right: 0;
}

.lk-search__clear:hover[b-pyykubjmbu] {
    color: var(--linkooc-text);
}

@media (min-width: 769px) {
    .lk-search[b-pyykubjmbu] {
        min-height: var(--linkooc-control-height, 2rem);
    }
}
/* /Components/Ui/LkSegmented.razor.rz.scp.css */
/* Plan 412 — LkSegmented. Groupe 6 : « celui d'Apparence ».

   Reprise fidèle de `apparence-sub-tab`, à la valeur en dur près : ce qui y
   était écrit `0.8125rem` / `0.3rem 0.75rem` passe par les jetons. */

.lk-seg[b-cing9wry47] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--linkooc-spacing-xs, 0.25rem);
    flex-shrink: 0;
}

.lk-seg__btn[b-cing9wry47] {
    display: inline-flex;
    align-items: center;
    gap: var(--linkooc-spacing-xs, 0.25rem);
    flex: 0 0 auto;
    min-height: var(--linkooc-touch-target, 44px);
    padding: var(--linkooc-spacing-xs, 0.25rem) var(--linkooc-spacing-sm, 0.5rem);
    background-color: transparent;
    /* Contour au repos : sans lui, un segment non sélectionné se lit comme un
       simple paragraphe de texte gris et le groupe ne se donne pas à voir comme
       un choix. La largeur était déjà réservée, seule la couleur change. */
    border: var(--linkooc-border-width, 1px) solid var(--linkooc-border-color);
    border-radius: var(--linkooc-radius-sm, 0.5rem);
    color: var(--linkooc-text-secondary);
    font-family: var(--linkooc-font-family);
    font-size: var(--linkooc-list-item-desc-size, 0.8125rem);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--linkooc-transition-fast, 150ms ease),
                border-color var(--linkooc-transition-fast, 150ms ease),
                color var(--linkooc-transition-fast, 150ms ease);
}

.lk-seg__btn:hover[b-cing9wry47] {
    background-color: var(--linkooc-hover-bg);
    color: var(--linkooc-text);
}

.lk-seg__btn--active[b-cing9wry47] {
    background-color: var(--linkooc-primary-light);
    border-color: var(--linkooc-primary);
    color: var(--linkooc-primary-ink);
    font-weight: 600;
}

/* Le survol du segment actif ne doit pas effacer la sélection : `:hover` a la
   même spécificité que `--active` (0,2,0) et gagnait au seul titre de l'ordre.
   Cette règle, posée après `.lk-seg__btn:hover`, lui reprend la main. */
.lk-seg__btn--active:hover[b-cing9wry47] {
    background-color: var(--linkooc-primary-light);
    border-color: var(--linkooc-primary);
    color: var(--linkooc-primary-ink);
}

.lk-seg__btn:focus-visible[b-cing9wry47] {
    outline: none;
    box-shadow: 0 0 0 0.125rem var(--linkooc-primary-subtle);
}

/* Au-dessus de 769px le segmenté retrouve la densité de bureau d'Apparence :
   il n'est jamais seul, la cible reste confortable à la souris. */
@media (min-width: 769px) {
    .lk-seg__btn[b-cing9wry47] {
        min-height: var(--linkooc-control-height, 2rem);
    }
}
/* /Components/Ui/LkSelect.razor.rz.scp.css */
/* Plan 412 — LkSelect. Groupe 14 + groupe 20 option 1.

   Les métriques de bureau sont déjà tenues par le bloc `@media (min-width:769px)`
   de `linkooc-theme.css` (plan 407) : `.k-picker-md` y lit le jeton de contrôle
   et le rayon en pilule. Ce fichier ne les redéclare PAS — il ne fait qu'ajouter
   le plancher tactile sous 769px, qui manquait. */

.lk-select[b-scnt9saca5] {
    display: block;
    width: 100%;
}

@media (max-width: 768px) {
    .lk-select[b-scnt9saca5]  .k-picker {
        min-height: var(--linkooc-touch-target, 44px);
    }
}
/* /Components/Ui/LkStatCard.razor.rz.scp.css */
/* Plan 412 — LkStatCard. Groupe 8 : UNE échelle typographique.

   Le fond, la bordure et le rayon viennent de LkCard : rien de tout cela n'est
   redéclaré ici, sinon le groupe 7 aurait deux définitions. */

.lk-stat[b-fiowkdvnmp] {
    display: flex;
    align-items: center;
    gap: var(--linkooc-spacing-md, 1rem);
}

.lk-stat__icon[b-fiowkdvnmp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--linkooc-hover-bg);
    border-radius: var(--linkooc-radius-md, 0.75rem);
    color: var(--lk-stat-icon-color, var(--linkooc-primary-ink));
    font-size: var(--linkooc-section-title-size, 1rem);
}

.lk-stat__body[b-fiowkdvnmp] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lk-stat__value[b-fiowkdvnmp] {
    color: var(--linkooc-text);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
}

.lk-stat__label[b-fiowkdvnmp] {
    color: var(--linkooc-text-secondary);
    font-size: var(--linkooc-list-item-desc-size, 0.8125rem);
    font-weight: 500;
}

.lk-stat__hint[b-fiowkdvnmp] {
    color: var(--linkooc-text-secondary);
    font-size: var(--linkooc-small-size, 0.75rem);
}
/* /Components/Ui/LkSwitch.razor.rz.scp.css */
/* Plan 412 — LkSwitch. Groupe 13 : « garder 32×16 ».

   Volontairement minuscule : les métriques restent celles de Telerik, arbitrage
   de l'opérateur. Ce fichier ne fait que poser l'alignement de l'enveloppe. Y
   ajouter une largeur ou une hauteur, c'est rouvrir le groupe 13. */

.lk-switch[b-4znh9nlbyo] {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}
/* /Components/Ui/LkTable.razor.rz.scp.css */
/* Plan 412 — LkTable. Groupe 18 : « Telerik partout en admin ».

   Trois règles, pas une de plus : l'en-tête, la ligne, le survol. Tout le reste
   vient du thème Telerik, dont les jetons sont déjà mappés sur `--linkooc-*`
   en fin de `linkooc-theme.css`. */

.lk-table[b-t1ryxrc3rf] {
    display: block;
    width: 100%;
}

.lk-table[b-t1ryxrc3rf]  .k-grid-header .k-table-th {
    min-height: var(--linkooc-touch-target, 44px);
    background-color: var(--linkooc-hover-bg);
    color: var(--linkooc-text);
    font-size: var(--linkooc-list-item-desc-size, 0.8125rem);
    font-weight: 600;
}

.lk-table[b-t1ryxrc3rf]  .k-table-row > .k-table-td {
    font-size: var(--linkooc-body-size, 0.875rem);
}

.lk-table[b-t1ryxrc3rf]  .k-table-row:hover > .k-table-td {
    background-color: var(--linkooc-list-hover-bg);
}
/* /Components/Ui/LkTabs.razor.rz.scp.css */
/* Plan 412 — LkTabs. Groupe 5 + groupe 20 option 1.

   UNE hauteur, 44px, à toutes les largeurs. Le défilement horizontal avec
   barre masquée vient de `mobile.css:101` : c'est le comportement qui marchait,
   remonté ici pour toutes les largeurs plutôt que réservé au téléphone. */

.lk-tabs[b-ovnwfib9pw] {
    display: flex;
    align-items: stretch;
    gap: var(--linkooc-spacing-xs, 0.25rem);
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: var(--linkooc-border-width, 1px) solid var(--linkooc-border-color);
}

.lk-tabs[b-ovnwfib9pw]::-webkit-scrollbar {
    display: none;
}

/* Plan 914 — le cadre porte les flèches ; la barre garde sa bordure et son
   défilement. Les flèches couvrent le bout des onglets sur un fondu, au-dessus
   de la bordure (elles s'arrêtent avant elle pour ne pas la masquer). */
.lk-tabs-frame[b-ovnwfib9pw] {
    position: relative;
    min-width: 0;
}

.lk-tabs-nav[b-ovnwfib9pw] {
    position: absolute;
    top: 0;
    bottom: var(--linkooc-border-width, 1px);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    width: var(--linkooc-touch-target, 44px);
    padding: 0;
    border: none;
    color: var(--linkooc-text-secondary);
    font-size: var(--linkooc-body-size, 0.875rem);
    cursor: pointer;
    transition: color var(--linkooc-transition-fast, 150ms ease);
}

.lk-tabs-nav[hidden][b-ovnwfib9pw] {
    display: none;
}

.lk-tabs-nav:hover[b-ovnwfib9pw] {
    color: var(--linkooc-primary-ink);
}

.lk-tabs-nav--prev[b-ovnwfib9pw] {
    left: 0;
    justify-content: flex-start;
    background: linear-gradient(to right, var(--linkooc-surface) 55%, transparent);
}

.lk-tabs-nav--next[b-ovnwfib9pw] {
    right: 0;
    justify-content: flex-end;
    background: linear-gradient(to left, var(--linkooc-surface) 55%, transparent);
}

.lk-tab[b-ovnwfib9pw] {
    display: inline-flex;
    align-items: center;
    gap: var(--linkooc-spacing-xs, 0.25rem);
    flex: 0 0 auto;
    min-height: var(--linkooc-touch-target, 44px);
    padding: var(--linkooc-spacing-sm, 0.5rem) var(--linkooc-spacing-md, 1rem);
    background-color: transparent;
    border: none;
    /* Le soulignement de l'onglet actif. Il est posé au repos en transparent
       pour que l'activation ne décale pas le texte d'une épaisseur. */
    border-bottom: 0.125rem solid transparent;
    color: var(--linkooc-text-secondary);
    font-family: var(--linkooc-font-family);
    font-size: var(--linkooc-body-size, 0.875rem);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--linkooc-transition-fast, 150ms ease),
                border-color var(--linkooc-transition-fast, 150ms ease);
}

.lk-tab:hover[b-ovnwfib9pw] {
    color: var(--linkooc-text);
}

.lk-tab--active[b-ovnwfib9pw] {
    color: var(--linkooc-primary-ink);
    border-bottom-color: var(--linkooc-primary-ink);
    font-weight: 600;
}

.lk-tab:focus-visible[b-ovnwfib9pw] {
    outline: none;
    box-shadow: inset 0 0 0 0.125rem var(--linkooc-primary-subtle);
}

.lk-tab__badge[b-ovnwfib9pw] {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--linkooc-spacing-xs, 0.25rem);
    background-color: var(--linkooc-hover-bg);
    border-radius: var(--linkooc-control-radius, 1.5rem);
    color: var(--linkooc-text-secondary);
    font-size: var(--linkooc-small-size, 0.75rem);
    font-weight: 600;
}

.lk-tab--active .lk-tab__badge[b-ovnwfib9pw] {
    background-color: var(--linkooc-primary-subtle);
    color: var(--linkooc-primary-ink);
}
/* /Components/Ui/LkToggleRow.razor.rz.scp.css */
/* Plan 412 — LkToggleRow. Groupe 13 : la rangée porte la cible tactile.

   56px de haut, cliquable de bout en bout. C'est ce qui rend acceptable le
   choix de garder l'interrupteur Telerik à 32×16. */

.lk-toggle-row[b-paiv400k9l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--linkooc-spacing-md, 1rem);
    min-height: 3.5rem;
    padding: var(--linkooc-spacing-sm, 0.5rem) var(--linkooc-spacing-md, 1rem);
    background-color: transparent;
    border: var(--linkooc-border-width, 1px) solid transparent;
    border-radius: var(--linkooc-radius-sm, 0.5rem);
    cursor: pointer;
    transition: background-color var(--linkooc-transition-fast, 150ms ease),
                border-color var(--linkooc-transition-fast, 150ms ease);
}

.lk-toggle-row:hover[b-paiv400k9l] {
    background-color: var(--linkooc-hover-bg);
}

.lk-toggle-row--on[b-paiv400k9l] {
    background-color: var(--linkooc-hover-second-bg);
    border-color: var(--linkooc-primary-subtle);
}

.lk-toggle-row:focus-visible[b-paiv400k9l] {
    outline: none;
    box-shadow: 0 0 0 0.125rem var(--linkooc-primary-subtle);
}

.lk-toggle-row--disabled[b-paiv400k9l] {
    opacity: 0.55;
    cursor: not-allowed;
}

.lk-toggle-row__text[b-paiv400k9l] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lk-toggle-row__label[b-paiv400k9l] {
    color: var(--linkooc-text);
    font-size: var(--linkooc-body-size, 0.875rem);
    font-weight: 500;
}

.lk-toggle-row__desc[b-paiv400k9l] {
    color: var(--linkooc-text-secondary);
    font-size: var(--linkooc-list-item-desc-size, 0.8125rem);
}

.lk-toggle-row__control[b-paiv400k9l] {
    flex: 0 0 auto;
}
/* /Layout/Components/EstablishmentCard.razor.rz.scp.css */
/* Plan 916 — ex-balise <style> de EstablishmentCard.razor, en CSS isolée : elle n'est plus
   répétée une fois par carte et par sélecteur (3 × N blocs à chaque démarrage de page). */
.establishment-card[b-p7rk6bjqin] {
    display: flex;
    align-items: center;
    gap: var(--linkooc-spacing-sm);
    padding: var(--linkooc-spacing-sm) var(--linkooc-spacing-md);
    border: 2px solid var(--linkooc-border-color);
    border-radius: var(--linkooc-radius-md);
    cursor: pointer;
    transition: var(--linkooc-transition-fast);
    background-color: var(--linkooc-bg);
}

.establishment-card:hover[b-p7rk6bjqin] {
    border-color: var(--linkooc-primary);
    background-color: var(--linkooc-hover-bg);
}

.establishment-card.selected[b-p7rk6bjqin] {
    border-color: var(--linkooc-primary);
    background-color: var(--linkooc-primary-subtle);
}

.establishment-qr[b-p7rk6bjqin] {
    flex-shrink: 0;
    padding: 4px;
    background: white;
    border-radius: var(--linkooc-radius-sm);
}

.establishment-info[b-p7rk6bjqin] {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.establishment-name[b-p7rk6bjqin] {
    font-weight: 600;
    color: var(--linkooc-primary-ink);
    font-size: var(--linkooc-list-item-title-size);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.establishment-id[b-p7rk6bjqin] {
    font-size: var(--linkooc-small-size);
    color: var(--linkooc-text-muted);
}

.establishment-check[b-p7rk6bjqin] {
    flex-shrink: 0;
    font-size: 1.2rem;
    color: var(--linkooc-primary-ink);
}
/* /Layout/Components/EstablishmentDrawer.razor.rz.scp.css */
/* Plan 916 — ex-balise <style> de EstablishmentDrawer.razor (trois copies par page), en CSS isolée. */
.establishment-drawer-overlay[b-ez3xavrevt] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: var(--linkooc-transition-normal);
}

.establishment-drawer-overlay.open[b-ez3xavrevt] {
    opacity: 1;
    visibility: visible;
}

.establishment-drawer[b-ez3xavrevt] {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 320px;
    max-width: 90vw;
    background-color: var(--linkooc-bg);
    z-index: 1050;
    transform: translateX(-100%);
    transition: transform var(--linkooc-transition-normal);
    display: flex;
    flex-direction: column;
    box-shadow: var(--linkooc-shadow-lg);
}

.establishment-drawer.open[b-ez3xavrevt] {
    transform: translateX(0);
}

.drawer-header[b-ez3xavrevt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--linkooc-spacing-md);
    border-bottom: 1px solid var(--linkooc-border-color);
    background: var(--linkooc-surface);
}

.drawer-title[b-ez3xavrevt] {
    margin: 0;
    font-size: var(--linkooc-section-title-size);
    font-weight: 600;
    color: var(--linkooc-text-primary);
}

.drawer-close[b-ez3xavrevt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--linkooc-text-muted);
    border-radius: var(--linkooc-radius-sm);
    cursor: pointer;
    transition: var(--linkooc-transition-fast);
}

.drawer-close:hover[b-ez3xavrevt] {
    background: var(--linkooc-surface-hover);
    color: var(--linkooc-text-primary);
}

.drawer-search[b-ez3xavrevt] {
    padding: var(--linkooc-spacing-sm) var(--linkooc-spacing-md);
    border-bottom: 1px solid var(--linkooc-border-color);
}

.search-input-wrapper[b-ez3xavrevt] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon[b-ez3xavrevt] {
    position: absolute;
    left: 12px;
    color: var(--linkooc-text-muted);
    font-size: var(--linkooc-body-size);
    pointer-events: none;
}

/* Plan 916 — `:where()` garde au champ la spécificité (0,1,0) qu'il avait dans l'ancienne balise
   <style> : la CSS isolée y ajoute [b-…] (0,1,0 de plus) et ferait gagner ces lignes sur
   `.search-input-wrapper input` (menu-editor.css, 0,1,1) et `input.search-input`
   (linkooc-theme.css, 0,1,1), qui dessinent le champ aujourd'hui (mesuré : padding 4px 32px 4px 8px,
   bordure verte, rayon 24px). Même rendu au pixel près. */
:where(.search-input)[b-ez3xavrevt] {
    width: 100%;
    padding: 10px 12px 10px 38px;
    border: 1px solid var(--linkooc-border-color);
    border-radius: var(--kendo-border-radius-md, 0.375rem);
    font-size: var(--linkooc-body-size);
    color: var(--linkooc-text-primary);
    background: var(--linkooc-bg);
    transition: var(--linkooc-transition-fast);
}

:where(.search-input)[b-ez3xavrevt]::placeholder {
    color: var(--linkooc-text-muted);
}

:where(.search-input):focus[b-ez3xavrevt] {
    outline: none;
    border-color: var(--linkooc-primary);
    box-shadow: 0 0 0 2px rgba(8, 120, 27, 0.15);
}

.drawer-content[b-ez3xavrevt] {
    flex: 1;
    overflow-y: auto;
    padding: var(--linkooc-spacing-md);
}

.establishment-list[b-ez3xavrevt] {
    display: flex;
    flex-direction: column;
    gap: var(--linkooc-spacing-sm);
}

.drawer-footer[b-ez3xavrevt] {
    padding: var(--linkooc-spacing-md);
    border-top: 1px solid var(--linkooc-border-color);
}

.drawer-add-btn[b-ez3xavrevt] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--linkooc-spacing-sm);
    width: 100%;
    padding: 10px 16px;
    border: none;
    background-color: var(--linkooc-button-primary, #08781B);
    color: #fff;
    font-size: var(--linkooc-body-size);
    font-weight: 500;
    border-radius: var(--kendo-border-radius-md, 0.375rem);
    cursor: pointer;
    transition: var(--linkooc-transition-fast);
}

.drawer-add-btn:hover[b-ez3xavrevt] {
    background-color: var(--linkooc-button-secondary, #054810);
}
/* /Layout/Components/EstablishmentPicker.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   ESTABLISHMENT PICKER - PRIMARY style (same as "Créer un menu")
   border-radius: 0.375rem (kendo-border-radius-md)
   ═══════════════════════════════════════════════════════════════════════════ */
.establishment-picker-container[b-op2sba1coa] {
    display: flex;
    align-items: center;
}

/* Match Matrix_Button btn-primary styling - SIZE: Large */
.establishment-picker-btn[b-op2sba1coa] {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 1rem;
    background-color: var(--linkooc-button-primary, #08781B);
    border: 1px solid var(--linkooc-button-primary, #08781B);
    border-radius: var(--kendo-border-radius-md, 0.375rem);
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    cursor: pointer;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
    white-space: nowrap;
    max-width: 320px;
    min-height: 40px;
}

.establishment-picker-btn:hover[b-op2sba1coa] {
    background-color: var(--linkooc-button-primary-hover, #11671E);
    border-color: var(--linkooc-button-primary-hover, #11671E);
    color: #fff;
}

.establishment-picker-btn:focus-visible[b-op2sba1coa] {
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(8, 120, 27, 0.5);
}

.establishment-picker-btn i[b-op2sba1coa] {
    color: #fff;
    font-size: 1.125rem;
}

.establishment-picker-btn i:last-child[b-op2sba1coa] {
    font-size: 0.875rem;
    margin-left: auto;
}

.establishment-picker-name[b-op2sba1coa] {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
    color: inherit;
}

/* Empty state - outline style */
.establishment-picker-empty[b-op2sba1coa] {
    background-color: transparent;
    border: 1px dashed var(--linkooc-button-primary, #08781B);
    color: var(--linkooc-primary-ink, #08781B);
}

.establishment-picker-empty i[b-op2sba1coa] {
    color: var(--linkooc-primary-ink, #08781B);
}

.establishment-picker-empty:hover[b-op2sba1coa] {
    background-color: var(--linkooc-button-primary, #08781B);
    border-style: solid;
    color: #fff;
}

.establishment-picker-empty:hover i[b-op2sba1coa] {
    color: #fff;
}

@media (max-width: 768px) {
    .establishment-picker-btn[b-op2sba1coa] {
        padding: 0.25rem 0.5rem;
        max-width: 160px;
    }

    .establishment-picker-name[b-op2sba1coa] {
        max-width: 100px;
    }
}
/* /Pages/Admin/BorneLabelPage.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════
   Plan 533 — Étiquette borne imprimable.
   Volontairement autonome : pas de token de thème, pas de dépendance au chrome
   du back-office. Ce qui sort de l'imprimante doit être noir sur blanc, quel
   que soit le thème de l'écran.
   ══════════════════════════════════════════════════════════════════════════ */

.lk-lbl-page[b-ir4n4e3but] {
    min-height: 100vh;
    background: #fff;
    color: #111;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 1rem;
    font-family: system-ui, "Segoe UI", sans-serif;
}

.lk-lbl-msg[b-ir4n4e3but] {
    font-size: 1rem;
    color: #444;
}

.lk-lbl-print[b-ir4n4e3but] {
    border: 1px solid #111;
    background: #111;
    color: #fff;
    border-radius: 6px;
    padding: 0.5rem 1.1rem;
    font-size: 0.95rem;
    cursor: pointer;
    /* Cible tactile confortable : cette page s'ouvre aussi depuis un téléphone. */
    min-height: 44px;
}

.lk-lbl-print:hover[b-ir4n4e3but] {
    background: #333;
}

/* ── L'étiquette elle-même ─────────────────────────────────────────────────
   Largeur fixe en millimètres : le papier ne se redimensionne pas, et une
   étiquette dont la taille dépendrait de la fenêtre sortirait différente à
   chaque impression. */
.lk-lbl-card[b-ir4n4e3but] {
    width: 90mm;
    max-width: 100%;
    border: 2px solid #111;
    border-radius: 4px;
    padding: 6mm 5mm;
    text-align: center;
    background: #fff;
}

.lk-lbl-brand[b-ir4n4e3but] {
    font-size: 3.2mm;
    letter-spacing: 0.18em;
    color: #555;
    margin-bottom: 3mm;
}

/* Le code est ce qu'on lit à un mètre, dans un local de stockage. */
.lk-lbl-code[b-ir4n4e3but] {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 18mm;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.06em;
}

.lk-lbl-name[b-ir4n4e3but] {
    font-size: 4.2mm;
    color: #333;
    margin-top: 2mm;
    word-break: break-word;
}

.lk-lbl-qr[b-ir4n4e3but] {
    display: block;
    width: 45mm;
    height: 45mm;
    margin: 4mm auto 3mm;
    /* Un QR interpolé se lit mal : on garde les carrés carrés. */
    image-rendering: pixelated;
}

/* L'URL en toutes lettres : un QR abîmé ne doit pas bloquer l'installation. */
.lk-lbl-url[b-ir4n4e3but] {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 3.4mm;
    word-break: break-all;
    color: #111;
}

.lk-lbl-foot[b-ir4n4e3but] {
    font-size: 3mm;
    color: #666;
    margin-top: 3mm;
}

/* ── Impression ────────────────────────────────────────────────────────────
   Le bouton est le seul élément d'écran : il ne s'imprime pas. */
@media print {
    .lk-lbl-print[b-ir4n4e3but] {
        display: none;
    }

    .lk-lbl-page[b-ir4n4e3but] {
        min-height: auto;
        padding: 0;
        display: block;
    }

    .lk-lbl-card[b-ir4n4e3but] {
        margin: 0;
    }
}
/* /Pages/Admin/BornesFleetPage.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   FLOTTE DE BORNES (plan 382) — même famille visuelle que la tour de contrôle
   (pills, chips, tons) ; classes préfixées lk-bf-*.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Résumé ────────────────────────────────────────────────────────────────── */
.lk-bf-summary[b-s5fseewubh] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.lk-bf-sum[b-s5fseewubh] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 600;
}

.lk-bf-sum-ok[b-s5fseewubh] { background: rgba(8, 120, 27, 0.10); color: var(--linkooc-primary-ink, #08781B); }
.lk-bf-sum-down[b-s5fseewubh] { background: rgba(220, 53, 69, 0.10); color: var(--linkooc-danger, #dc3545); }
.lk-bf-sum-service[b-s5fseewubh] { background: rgba(8, 120, 27, 0.10); color: var(--linkooc-primary-ink, #08781B); }
.lk-bf-sum-stock[b-s5fseewubh] {
    background: var(--linkooc-bg-secondary, #f1f3f5);
    color: var(--linkooc-text-secondary, #6d6d6d);
    border: 1px solid #e3e6ea;
}

.lk-bf-sum-total[b-s5fseewubh] {
    font-size: 0.8125rem;
    color: var(--linkooc-text-secondary, #6d6d6d);
}

/* ── Pastille en ligne / hors ligne ───────────────────────────────────────── */
.lk-bf-dot[b-s5fseewubh] {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.lk-bf-dot.on[b-s5fseewubh] { background: var(--linkooc-primary, #08781B); }
.lk-bf-dot.off[b-s5fseewubh] {
    background: transparent;
    border: 2px solid var(--linkooc-danger, #dc3545);
}

/* ── Tableau ──────────────────────────────────────────────────────────────── */
.lk-bf-table-wrap[b-s5fseewubh] {
    overflow-x: auto;
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: var(--linkooc-radius-md, 0.75rem);
    background: var(--linkooc-bg, #fff);
}

.lk-bf-table[b-s5fseewubh] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

/* Plan 794 — 0.5rem de côté (au lieu de 0.75) : avec la colonne Build et
   l'action « Recharger la carte », le tableau débordait de son conteneur à
   1600 px de fenêtre (mesuré : 1373 px pour 1366, dernière icône coupée). */
.lk-bf-table th[b-s5fseewubh] {
    text-align: left;
    padding: 0.6rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--linkooc-text-secondary, #6d6d6d);
    background: var(--linkooc-surface, #FEFEFE);
    border-bottom: 1px solid var(--linkooc-border-color, #dee2e6);
    white-space: nowrap;
}

.lk-bf-table td[b-s5fseewubh] {
    padding: 0.55rem 0.5rem;
    border-bottom: 1px solid var(--linkooc-border-color, #eef0f2);
    vertical-align: middle;
}

.lk-bf-table tbody:last-child tr:last-child td[b-s5fseewubh] { border-bottom: none; }

/* ── Groupes « En service » / « En stock » (plan 389) ─────────────────────────
   Deux groupes visibles dans le même tableau, pas un filtre caché : l'opérateur
   doit voir son stock sans avoir à le chercher. */
.lk-bf-group-row td[b-s5fseewubh] {
    padding: 0.5rem 0.75rem;
    background: var(--linkooc-surface, #FEFEFE);
    border-top: 1px solid var(--linkooc-border-color, #dee2e6);
    border-bottom: 1px solid var(--linkooc-border-color, #dee2e6);
}

.lk-bf-group:first-of-type .lk-bf-group-row td[b-s5fseewubh] { border-top: none; }

.lk-bf-group-title[b-s5fseewubh] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--linkooc-text, #000601);
}

.lk-bf-group-count[b-s5fseewubh] {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.05rem 0.45rem;
    border-radius: 9999px;
    background: var(--linkooc-bg-secondary, #f1f3f5);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--linkooc-text-secondary, #6d6d6d);
}

.lk-bf-group-hint[b-s5fseewubh] {
    margin-left: 0.5rem;
    font-size: 0.6875rem;
    color: var(--linkooc-text-secondary, #6d6d6d);
}

.lk-bf-group-empty[b-s5fseewubh] {
    padding: 0.75rem;
    font-size: 0.75rem;
    font-style: italic;
    color: var(--linkooc-text-secondary, #6d6d6d);
}

/* Code public : la seule identité de la borne qui s'affiche (jamais l'Id). */
.lk-bf-code code[b-s5fseewubh] {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    background: var(--linkooc-surface, #FEFEFE);
    border: 1px solid var(--linkooc-border-color, #e3e6ea);
    border-radius: 0.25rem;
    padding: 1px 6px;
    white-space: nowrap;
}

.lk-bf-stock-tag[b-s5fseewubh] {
    color: var(--linkooc-text-secondary, #6d6d6d);
    font-style: italic;
    font-weight: 400;
}

/* Borne active sans signe de vie : c'est elle qu'on vient voir. */
.lk-bf-row-down[b-s5fseewubh] { background: rgba(220, 53, 69, 0.04); }

.lk-bf-row-inactive td[b-s5fseewubh] { color: var(--linkooc-text-secondary, #6d6d6d); }

/* Plan 794 — carte suspecte (autre build que le site depuis plus de 2 h, ou
   moins de routes qu'hier) : un rouge LISIBLE, et un trait à gauche. Passe
   avant « hors ligne ». Le trait est une ombre intérieure, pas une bordure :
   une bordure de 3 px élargirait la première colonne de cette seule ligne
   (border-collapse) et décalerait le tableau. */
.lk-bf-row-alert td[b-s5fseewubh] { background: rgba(220, 53, 69, 0.14); }
.lk-bf-row-alert td:first-child[b-s5fseewubh] { box-shadow: inset 3px 0 0 var(--linkooc-danger, #dc3545); }

/* Plan 794 — ordre « Recharger la carte » en attente : texte inactif, à la
   place de l'action. En BLOC au-dessus des icônes : sur une ligne, ses 130 px
   élargissaient la colonne d'actions de TOUTES les lignes (mesuré : +100 px,
   tableau à 1508 px pour 1366). Au-dessus, il tient dans la largeur des icônes. */
.lk-bf-reload-pending[b-s5fseewubh] {
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.75rem;
    line-height: 1.2;
    text-align: right;
    color: var(--linkooc-text-secondary, #6d6d6d);
    cursor: default;
}

/* Plan 794 — la colonne Build ne montre que 7 caractères : marge réduite. */
.lk-bf-table .lk-bf-build[b-s5fseewubh] {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

/* Plan 794 — « Carte embarquée » : la date et « · N routes » sont deux blocs
   insécables ; la cellule passe à la ligne ENTRE eux quand la place manque,
   plutôt que d'élargir le tableau (+62 px mesurés une fois les routes remontées). */
.lk-bf-table td.lk-bf-carte[b-s5fseewubh] { white-space: normal; }
.lk-bf-carte > span[b-s5fseewubh] { white-space: nowrap; }

.lk-bf-est[b-s5fseewubh] { font-weight: 600; }

.lk-bf-name[b-s5fseewubh] { font-weight: 500; }

.lk-bf-status[b-s5fseewubh] {
    white-space: nowrap;
}

.lk-bf-status .lk-bf-dot[b-s5fseewubh] { margin-right: 0.35rem; }

.lk-bf-status-text[b-s5fseewubh] { color: var(--linkooc-text-secondary, #6d6d6d); }
.lk-bf-status-text.is-down[b-s5fseewubh] { color: var(--linkooc-danger, #dc3545); font-weight: 600; }

.lk-bf-badge[b-s5fseewubh] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
}

.lk-bf-badge-muted[b-s5fseewubh] {
    background: var(--linkooc-bg-secondary, #f1f3f5);
    color: #6d6d6d;
    border: 1px solid #e3e6ea;
}

.lk-bf-target code[b-s5fseewubh],
.lk-bf-url code[b-s5fseewubh] {
    font-size: 0.75rem;
    background: var(--linkooc-surface, #FEFEFE);
    border: 1px solid var(--linkooc-border-color, #e3e6ea);
    border-radius: 0.25rem;
    padding: 1px 6px;
    word-break: break-all;
}

.lk-bf-target-default[b-s5fseewubh] {
    color: var(--linkooc-text-secondary, #6d6d6d);
    font-style: italic;
}

/* Plan 546 — version du kit remontée par la borne : valeur brute, discrète
   (le « — » d'une borne jamais remontée ne doit pas crier). */
.lk-bf-kit[b-s5fseewubh] {
    font-size: 0.75rem;
    color: var(--linkooc-text-secondary, #6d6d6d);
    white-space: nowrap;
}

.lk-bf-url[b-s5fseewubh] {
    white-space: nowrap;
}

/* ── Boutons ──────────────────────────────────────────────────────────────── */
.lk-bf-icon-btn[b-s5fseewubh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-left: 0.25rem;
    padding: 0;
    border: none;
    border-radius: var(--linkooc-radius-sm, 0.5rem);
    background: transparent;
    color: var(--linkooc-text-secondary, #6d6d6d);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.lk-bf-icon-btn:hover[b-s5fseewubh] {
    background: var(--linkooc-bg-secondary, #f1f3f5);
    color: var(--linkooc-text, #000601);
}

.lk-bf-actions[b-s5fseewubh] { white-space: nowrap; text-align: right; }
.lk-bf-table td.lk-bf-actions[b-s5fseewubh] { padding-left: 0.25rem; }
.lk-bf-th-actions[b-s5fseewubh] { width: 1%; }

.lk-bf-btn[b-s5fseewubh] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: var(--linkooc-radius-sm, 0.5rem);
    background: var(--linkooc-bg, #fff);
    color: var(--linkooc-text, #000601);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease;
}

.lk-bf-btn:hover:not(:disabled)[b-s5fseewubh] { background: var(--linkooc-bg-secondary, #f1f3f5); }
.lk-bf-btn:disabled[b-s5fseewubh] { opacity: 0.6; cursor: default; }

.lk-bf-btn-primary[b-s5fseewubh] {
    background: var(--linkooc-primary, #08781B);
    border-color: var(--linkooc-primary, #08781B);
    color: #fff;
}

.lk-bf-btn-primary:hover:not(:disabled)[b-s5fseewubh] {
    background: var(--linkooc-primary-hover, #066414);
}

.lk-bf-btn-sm[b-s5fseewubh] { padding: 0.25rem 0.6rem; font-size: 0.75rem; }

/* ── Formulaire de création ───────────────────────────────────────────────── */
.lk-bf-create[b-s5fseewubh] {
    padding: 1rem 1.25rem;
    background: var(--linkooc-bg, #fff);
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: var(--linkooc-radius-md, 0.75rem);
}

.lk-bf-create-head[b-s5fseewubh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    font-size: 0.875rem;
}

.lk-bf-create-fields[b-s5fseewubh] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1rem;
}

.lk-bf-field[b-s5fseewubh] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.lk-bf-field-wide[b-s5fseewubh] { grid-column: 1 / -1; }

.lk-bf-field-label[b-s5fseewubh] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--linkooc-text-secondary, #6d6d6d);
}

.lk-bf-field-help[b-s5fseewubh] {
    font-size: 0.6875rem;
    color: var(--linkooc-text-secondary, #6d6d6d);
}

.lk-bf-input[b-s5fseewubh] {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: var(--linkooc-radius-sm, 0.5rem);
    font-size: 0.8125rem;
    background: var(--linkooc-bg, #fff);
    color: var(--linkooc-text, #000601);
}

.lk-bf-input:focus[b-s5fseewubh] {
    outline: 2px solid var(--linkooc-primary, #08781B);
    outline-offset: -1px;
}

.lk-bf-input-sm[b-s5fseewubh] { padding: 0.25rem 0.5rem; font-size: 0.75rem; width: 100%; min-width: 120px; }

.lk-bf-create-actions[b-s5fseewubh] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* ── Pied de page ─────────────────────────────────────────────────────────── */
.lk-bf-hint[b-s5fseewubh] {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin-top: 0.75rem;
    font-size: 0.75rem;
    color: var(--linkooc-text-secondary, #6d6d6d);
}

.lk-bf-hint i[b-s5fseewubh] { margin-top: 1px; }

@keyframes lkBfSpin-b-s5fseewubh {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.lk-bf-spin[b-s5fseewubh] {
    display: inline-block;
    animation: lkBfSpin-b-s5fseewubh 0.8s linear infinite;
}

@media (max-width: 640px) {
    .lk-bf-create-fields[b-s5fseewubh] { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PLAN 471 — LA FLOTTE AU DOIGT
   Trois blocs : la feuille d'édition (téléphone), la confirmation de bascule
   (les DEUX tailles d'écran, exception assumée) et le média mobile qui porte
   l'indice de défilement + le plancher de 44 px.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Feuille d'édition plein écran (rendue seulement si `_isMobile`) ───────── */
.lk-bf-sheet-overlay[b-s5fseewubh],
.lk-bf-confirm-overlay[b-s5fseewubh] {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: rgba(0, 0, 0, 0.45);
}

.lk-bf-sheet[b-s5fseewubh] {
    position: fixed;
    /* 8 px de marge sur les quatre bords = largeur `100vw - 16`, la mesure des
       modales saines de l'audit (role-management : 351 pour 390, `fits: true`). */
    inset: 8px;
    z-index: 1081;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--linkooc-bg, #fff);
    border-radius: var(--linkooc-radius-md, 0.75rem);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.lk-bf-sheet-head[b-s5fseewubh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex: 0 0 auto;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    border-bottom: 1px solid var(--linkooc-border-color, #dee2e6);
}

.lk-bf-sheet-title[b-s5fseewubh] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--linkooc-text, #000601);
}

.lk-bf-sheet-title code[b-s5fseewubh] {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    background: var(--linkooc-surface, #FEFEFE);
    border: 1px solid var(--linkooc-border-color, #e3e6ea);
    border-radius: 0.25rem;
    padding: 1px 6px;
}

.lk-bf-sheet-close[b-s5fseewubh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: var(--linkooc-radius-sm, 0.5rem);
    background: transparent;
    color: var(--linkooc-text-secondary, #6d6d6d);
    cursor: pointer;
}

.lk-bf-sheet-close:hover:not(:disabled)[b-s5fseewubh] {
    background: var(--linkooc-bg-secondary, #f1f3f5);
    color: var(--linkooc-text, #000601);
}

.lk-bf-sheet-body[b-s5fseewubh] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1rem;
    /* Mou de fin de course (règle du plan 455) : sous 40 px le dernier champ est
       inatteignable sur un vrai iPhone (post-mortem 452). */
    padding-bottom: max(24px, env(safe-area-inset-bottom));
}

/* Les champs de la feuille sont ceux du formulaire de création, au plancher
   tactile — pas `lk-bf-input-sm`, qui est la variante serrée d'une cellule. */
.lk-bf-sheet .lk-bf-input[b-s5fseewubh] {
    min-height: 44px;
    width: 100%;
}

.lk-bf-sheet-actions[b-s5fseewubh] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    flex: 0 0 auto;
    padding: 0.75rem 1rem;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
    border-top: 1px solid var(--linkooc-border-color, #dee2e6);
    background: var(--linkooc-bg, #fff);
}

.lk-bf-sheet-actions .lk-bf-btn[b-s5fseewubh] { min-height: 44px; }

/* ── Confirmation de la bascule actif/inactif (mobile ET bureau) ──────────── */
.lk-bf-confirm[b-s5fseewubh] {
    position: fixed;
    z-index: 1081;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(420px, calc(100vw - 16px));
    max-height: calc(100vh - 16px);
    overflow-y: auto;
    padding: 1.25rem;
    background: var(--linkooc-bg, #fff);
    border-radius: var(--linkooc-radius-md, 0.75rem);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.lk-bf-confirm-text[b-s5fseewubh] {
    margin: 0 0 1rem;
    font-size: 0.875rem;
    color: var(--linkooc-text, #000601);
}

.lk-bf-confirm-actions[b-s5fseewubh] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.lk-bf-confirm-actions .lk-bf-btn[b-s5fseewubh] { min-height: 44px; }

/* Une action destructrice ne se peint pas en vert primaire. */
.lk-bf-btn-danger[b-s5fseewubh] {
    background: var(--linkooc-danger, #dc3545);
    border-color: var(--linkooc-danger, #dc3545);
    color: #fff;
}

.lk-bf-btn-danger:hover:not(:disabled)[b-s5fseewubh] { background: #bb2d3b; }

/* ── Régime mobile (même seuil que `IsMobile` : 768 px) ───────────────────── */
@media (max-width: 768px) {

    /* F1 — le tableau montre 356 px sur 939 sans le moindre indice. Procédé R7b
       (plans 393/420, repris tel quel par le 469 sur `.table-responsive`) :
       1-2 sont des couvercles opaques peints dans la couleur de fond et
       accrochés au CONTENU (`local`), donc ils glissent avec lui ; 3-4 sont les
       ombres, accrochées à l'ÉLÉMENT (`scroll`), donc épinglées aux bords. Le
       couvercle recouvre son ombre du côté où il n'y a plus rien à défiler — un
       tableau qui TIENT n'affiche par construction aucune bande. Zéro JS.
       `:hover` / `:focus-within` sont listés parce qu'un tap colle `:focus-within`
       et que rien ne vient le retirer sur un écran tactile. */
    .lk-bf-table-wrap[b-s5fseewubh],
    .lk-bf-table-wrap:hover[b-s5fseewubh],
    .lk-bf-table-wrap:focus-within[b-s5fseewubh] {
        -webkit-overflow-scrolling: touch;
        --lk-tab-scroll-shadow: rgba(0, 0, 0, 0.22);
        --lk-tab-scroll-cover: var(--linkooc-bg, #FFFFFF);
        background-image:
            linear-gradient(to right, var(--lk-tab-scroll-cover) 65%, transparent),
            linear-gradient(to left, var(--lk-tab-scroll-cover) 65%, transparent),
            linear-gradient(to right, var(--lk-tab-scroll-shadow), transparent),
            linear-gradient(to left, var(--lk-tab-scroll-shadow), transparent);
        background-position: 0 0, 100% 0, 0 0, 100% 0;
        background-repeat: no-repeat;
        background-size: 32px 100%, 32px 100%, 20px 100%, 20px 100%;
        background-attachment: local, local, scroll, scroll;
    }

    /* Thème sombre : une ombre noire est invisible sur #0f0f0f. */
    main.dark-theme .lk-bf-table-wrap[b-s5fseewubh],
    main.dark-theme .lk-bf-table-wrap:hover[b-s5fseewubh],
    main.dark-theme .lk-bf-table-wrap:focus-within[b-s5fseewubh] {
        --lk-tab-scroll-shadow: rgba(255, 255, 255, 0.22);
    }

    /* F3 — plancher tactile R12. La zone grandit, l'icône garde sa taille
       optique ; `margin-left` passe de 4 à 8 px pour tenir l'écart minimal
       entre deux actions une fois élargies. */
    .lk-bf-icon-btn[b-s5fseewubh] {
        width: 44px;
        height: 44px;
        margin-left: 0.5rem;
    }

    /* F4 — « Annuler » 79×33 et « Créer la borne » 136×33 dans un panneau dont
       les champs faisaient déjà 44. On ne touche pas à `.lk-bf-btn` partagé. */
    .lk-bf-create-actions .lk-bf-btn[b-s5fseewubh] { min-height: 44px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PLAN 533 — PANNEAU « PRÉPARER » ET BADGES DE PRÉPARATION
   Le panneau réutilise `lk-bf-sheet` (plan 471) tel quel sur téléphone. Au
   BUREAU il ne prend pas tout l'écran : il n'y a rien à saisir, trois lignes de
   lecture et deux boutons — une modale centrée suffit et laisse le tableau
   visible autour.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 769px) {
    .lk-bf-sheet-prep[b-s5fseewubh] {
        inset: auto;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: min(540px, calc(100vw - 32px));
        max-height: calc(100vh - 32px);
    }
}

.lk-bf-prep-id[b-s5fseewubh] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.lk-bf-prep-name[b-s5fseewubh] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--linkooc-text, #000601);
}

.lk-bf-prep-place[b-s5fseewubh] {
    font-size: 0.8125rem;
    color: var(--linkooc-text-secondary, #6d6d6d);
}

.lk-bf-prep-row[b-s5fseewubh] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.lk-bf-prep-label[b-s5fseewubh] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--linkooc-text-secondary, #6d6d6d);
}

.lk-bf-prep-url[b-s5fseewubh] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* L'URL est longue et le panneau étroit : elle se coupe plutôt que d'élargir
   le panneau au-delà de l'écran. */
.lk-bf-prep-url code[b-s5fseewubh] {
    font-size: 0.75rem;
    word-break: break-all;
    background: var(--linkooc-surface, #FEFEFE);
    border: 1px solid var(--linkooc-border-color, #e3e6ea);
    border-radius: 0.25rem;
    padding: 2px 6px;
}

.lk-bf-prep-help[b-s5fseewubh] {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--linkooc-text-secondary, #6d6d6d);
}

/* Les deux actions ont le même poids visuel qu'ailleurs ; le lien « étiquette »
   est un <a> et doit s'aligner comme un bouton. */
.lk-bf-prep-actions .lk-bf-btn[b-s5fseewubh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 44px;
    text-decoration: none;
}

/* ── Badges de préparation (stock uniquement) ─────────────────────────────── */

/* « préparée » : la machine s'est déjà annoncée au serveur. */
.lk-bf-badge-prep[b-s5fseewubh] {
    background: rgba(25, 135, 84, 0.10);
    color: #146c43;
    border: 1px solid rgba(25, 135, 84, 0.25);
}

/* « jamais vue » : elle n'a jamais démarré — à ne pas expédier telle quelle. */
.lk-bf-badge-unseen[b-s5fseewubh] {
    background: rgba(255, 193, 7, 0.14);
    color: #8a6100;
    border: 1px solid rgba(255, 193, 7, 0.35);
}

/* ── Panneau « Journaux » (plan 547) ──────────────────────────────────────── */

/* Le contenu d'un journal peut faire 512 Ko : le panneau est plus large que la
   feuille d'édition, et c'est le CORPS qui défile, jamais la page. */
.lk-bf-sheet-journal[b-s5fseewubh] {
    max-width: 860px;
    width: min(860px, calc(100vw - 16px));
}

.lk-bf-journal-body[b-s5fseewubh] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 0;
}

.lk-bf-journal-error[b-s5fseewubh] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--linkooc-danger, #dc3545);
}

.lk-bf-journal-list[b-s5fseewubh] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    overflow-y: auto;
}

/* Une ligne = un fichier reçu : date de réception + taille, rien d'autre. */
.lk-bf-journal-item[b-s5fseewubh] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    min-height: 44px;
    padding: 0.45rem 0.75rem;
    font-size: 0.875rem;
    text-align: left;
    color: var(--linkooc-text, #000601);
    background: var(--linkooc-surface, #FEFEFE);
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: var(--linkooc-radius-md, 0.75rem);
    cursor: pointer;
}

.lk-bf-journal-item:hover[b-s5fseewubh] {
    background: var(--linkooc-bg-secondary, #f1f3f5);
}

.lk-bf-journal-item .bi-chevron-right[b-s5fseewubh] {
    margin-left: auto;
    color: var(--linkooc-text-secondary, #6d6d6d);
}

.lk-bf-journal-date[b-s5fseewubh] {
    font-variant-numeric: tabular-nums;
}

.lk-bf-journal-size[b-s5fseewubh] {
    color: var(--linkooc-text-secondary, #6d6d6d);
    font-size: 0.8125rem;
}

.lk-bf-journal-viewhead[b-s5fseewubh] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.lk-bf-journal-viewtitle[b-s5fseewubh] {
    font-size: 0.8125rem;
    color: var(--linkooc-text-secondary, #6d6d6d);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Le journal lui-même : monospace, ENCODÉ par Blazor (texte inerte, STOP-4),
   défilement propre au bloc. */
.lk-bf-journal-content[b-s5fseewubh] {
    flex: 1;
    min-height: 120px;
    max-height: 60vh;
    margin: 0;
    padding: 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Courier New", monospace;
    font-size: 0.75rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    overflow: auto;
    color: var(--linkooc-text, #000601);
    background: var(--linkooc-bg-secondary, #f6f8f7);
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: var(--linkooc-radius-md, 0.75rem);
}
/* /Pages/Admin/CmsManager.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   ADMIN PAGE - Uses matrix-record-card from MatrixComponents
   Only page-specific overrides here
   ═══════════════════════════════════════════════════════════════════════════ */

/* Admin cards are clickable */
.matrix-record-card[b-5ihjt7egl9] {
    cursor: pointer;
}

/* Focus state for keyboard navigation */
.matrix-record-card:focus-visible[b-5ihjt7egl9] {
    outline: 2px solid var(--linkooc-primary, #08781B);
    outline-offset: 2px;
}

/* Icon styling */
.linkooc-admin-icon[b-5ihjt7egl9] {
    font-size: 1.25rem;
    color: var(--linkooc-primary-ink, #08781B);
}

/* Card head (icon + title) — was Bootstrap `mb-2`, moved here so the mobile
   block below can tighten it without `!important` (plan 453). */
.linkooc-admin-card-head[b-5ihjt7egl9] {
    margin-bottom: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DENSITÉ MOBILE (plan 453 / constat F1)
   16 destinations de navigation demandaient 2,8 écrans de défilement à 390×844.
   Ces règles sont *scopées* à cette page (attribut b-xxxxx ajouté par Blazor),
   donc elles battent `matrix-components.css` sans `!important` et la densité ne
   fuit PAS vers les autres consommateurs de `.matrix-record-card*`
   (Matrix_Grid, Settings.razor, Subscription.razor).
   Rien n'est retiré, tronqué ni replié : seuls les écarts, les rembourrages et
   l'interligne bougent.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    .matrix-record-cards[b-5ihjt7egl9] {
        gap: 0.5rem;
        padding: 0.75rem;
    }

    .matrix-card-body[b-5ihjt7egl9] {
        padding: 0.75rem;
    }

    .linkooc-admin-card-head[b-5ihjt7egl9] {
        margin-bottom: 0.25rem;
    }

    /* Interligne resserré uniquement — la taille de police reste à 0.875rem
       (14 px) et le texte reste entier. */
    .matrix-card-description[b-5ihjt7egl9] {
        line-height: 1.35;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE HEADER TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════════════ */

[b-5ihjt7egl9] .linkooc-page-title {
    font-size: var(--linkooc-page-title-size, 1.5rem);
    font-weight: var(--linkooc-page-title-weight, 600);
    color: var(--linkooc-text, #000601);
    margin: 0;
}

[b-5ihjt7egl9] .linkooc-page-subtitle {
    font-size: var(--linkooc-page-subtitle-size, 0.875rem);
    color: var(--linkooc-text-secondary, #6d6d6d);
}

[b-5ihjt7egl9] .linkooc-breadcrumb .breadcrumb {
    font-size: var(--linkooc-breadcrumb-size, 0.8125rem);
}

[b-5ihjt7egl9] .linkooc-breadcrumb .breadcrumb-item.active {
    color: var(--linkooc-text, #000601);
    font-weight: 500;
}


/* /Pages/Admin/EstablishmentControlTower.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   TOUR DE CONTRÔLE — Admin platform-wide establishment dashboard
   All colors via --linkooc-* tokens (fallbacks match linkooc-theme.css).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page header (re-assert identity sizing, as UsageDashboard does) ───────── */

[b-9gzj2al12i] .linkooc-page-title {
    font-size: var(--linkooc-page-title-size, 1.5rem);
    font-weight: var(--linkooc-page-title-weight, 600);
    color: var(--linkooc-text, #000601);
    margin: 0;
}

[b-9gzj2al12i] .linkooc-page-subtitle {
    font-size: var(--linkooc-page-subtitle-size, 0.875rem);
    color: var(--linkooc-text-secondary, #6d6d6d);
    max-width: 640px;
}

[b-9gzj2al12i] .linkooc-breadcrumb .breadcrumb {
    font-size: var(--linkooc-breadcrumb-size, 0.8125rem);
}

[b-9gzj2al12i] .linkooc-breadcrumb .breadcrumb-item.active {
    color: var(--linkooc-text, #000601);
    font-weight: 500;
}

/* ── Toolbar : search + segmented tabs ─────────────────────────────────────── */

.lk-ct-toolbar[b-9gzj2al12i] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.lk-ct-search[b-9gzj2al12i] {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
}

.lk-ct-search-icon[b-9gzj2al12i] {
    position: absolute;
    left: 0.875rem;
    color: var(--linkooc-text-secondary, #6d6d6d);
    font-size: 0.875rem;
    pointer-events: none;
}

.lk-ct-search-input[b-9gzj2al12i] {
    width: 100%;
    height: 40px;
    padding: 0 0.875rem 0 2.25rem;
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: var(--linkooc-radius-sm, 0.5rem);
    background: var(--linkooc-bg, #fff);
    color: var(--linkooc-text, #000601);
    font-size: 0.875rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lk-ct-search-input[b-9gzj2al12i]::placeholder {
    color: var(--linkooc-text-secondary, #6d6d6d);
}

.lk-ct-search-input:focus[b-9gzj2al12i] {
    outline: none;
    border-color: var(--linkooc-primary, #08781B);
    box-shadow: 0 0 0 3px rgba(8, 120, 27, 0.12);
}

.lk-ct-tabs[b-9gzj2al12i] {
    display: inline-flex;
    flex-shrink: 0;
    gap: 2px;
    padding: 3px;
    background: var(--linkooc-bg-secondary, #f1f3f5);
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: var(--linkooc-radius-sm, 0.5rem);
}

.lk-ct-tab[b-9gzj2al12i] {
    padding: 0.375rem 0.875rem;
    border: none;
    background: transparent;
    border-radius: calc(var(--linkooc-radius-sm, 0.5rem) - 2px);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--linkooc-text-secondary, #6d6d6d);
    cursor: pointer;
    transition: all 0.15s ease;
}

.lk-ct-tab:hover[b-9gzj2al12i] {
    color: var(--linkooc-text-display, #000601);
}

.lk-ct-tab.active[b-9gzj2al12i] {
    background: var(--linkooc-bg, #fff);
    color: var(--linkooc-text-display, #000601);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* ── Card grid ─────────────────────────────────────────────────────────────── */

.lk-ct-grid[b-9gzj2al12i] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1rem;
}

.lk-ct-card[b-9gzj2al12i] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1rem 1.5rem;
    background: var(--linkooc-bg, #fff);
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: var(--linkooc-radius-md, 0.75rem);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

/* Whole card is clickable → stronger hover affordance than a static card. */
.lk-ct-card:hover[b-9gzj2al12i] {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    border-color: rgba(8, 120, 27, 0.35);
}

/* Full-card click target: a transparent button stretched over the card. It sits
   ABOVE static content (name/metrics → clicks open the card) but BELOW the
   explicitly-elevated interactive bits (kebab, tags). */
.lk-ct-card-open[b-9gzj2al12i] {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--linkooc-radius-md, 0.75rem);
}
.lk-ct-card-open:focus-visible[b-9gzj2al12i] {
    outline: 2px solid var(--linkooc-primary, #08781B);
    outline-offset: -2px;
}

/* Interactive content rides above the stretched click target. */
.lk-ct-menu-wrap[b-9gzj2al12i],
.lk-ct-tags[b-9gzj2al12i] {
    position: relative;
    z-index: 2;
}

/* Bottom band of the card's padding: « Site ↗ » left (under the metric labels),
   the "Ouvrir" hint right. */
.lk-ct-card-foot[b-9gzj2al12i] {
    position: absolute;
    left: 1rem;
    right: 0.85rem;
    bottom: 0.5rem;
    display: flex;
    align-items: center;
    pointer-events: none;
}

/* Real link, above the full-card click target (z-index 1). */
.lk-ct-site-link[b-9gzj2al12i] {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--linkooc-primary-ink, #08781B);
    text-decoration: none;
    opacity: 0;
    pointer-events: auto;
    transition: opacity 0.15s ease;
}
.lk-ct-site-link:hover[b-9gzj2al12i] { text-decoration: underline; }
.lk-ct-card:hover .lk-ct-site-link[b-9gzj2al12i],
.lk-ct-site-link:focus-visible[b-9gzj2al12i] { opacity: 1; }

/* "Ouvrir" hint — fades in on hover; stays right even without a site link. */
.lk-ct-open-hint[b-9gzj2al12i] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--linkooc-primary-ink, #08781B);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
.lk-ct-card:hover .lk-ct-open-hint[b-9gzj2al12i] { opacity: 1; }

/* Attention accent bar (left), as a pseudo so it never fights border/box-shadow. */
.lk-ct-card.attn-warning[b-9gzj2al12i]::before,
.lk-ct-card.attn-danger[b-9gzj2al12i]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 3px;
}
.lk-ct-card.attn-warning[b-9gzj2al12i]::before { background: var(--linkooc-warning, #d29922); }
.lk-ct-card.attn-danger[b-9gzj2al12i]::before { background: var(--linkooc-red-var-1, #BA1919); }

/* Header : status dot + name / id */
.lk-ct-card-head[b-9gzj2al12i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.lk-ct-card-title[b-9gzj2al12i] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.lk-ct-dot[b-9gzj2al12i] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.lk-ct-name[b-9gzj2al12i] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--linkooc-text-display, #000601);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lk-ct-id[b-9gzj2al12i] {
    font-size: 0.8125rem;
    color: var(--linkooc-text-secondary, #6d6d6d);
    flex-shrink: 0;
}

/* ── Id + ⋮ options menu ──────────────────────────────────────────────────────
   The kebab reserves its space always (opacity, not display) so revealing it on
   hover never shifts the id. */
.lk-ct-id-group[b-9gzj2al12i] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.lk-ct-menu-wrap[b-9gzj2al12i] {
    position: relative;
    display: inline-flex;
}

/* z-index: 2 makes the wrap a stacking context, so the menu's own 1050 only
   counts inside it — badges, tags and metrics (also 2, later in the DOM) and the
   next cards painted over the open menu. Lift the whole wrap while it is open. */
.lk-ct-menu-wrap.is-open[b-9gzj2al12i] {
    z-index: 1050;
}

.lk-ct-kebab[b-9gzj2al12i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: var(--linkooc-radius-sm, 0.5rem);
    background: transparent;
    color: var(--linkooc-text-secondary, #6d6d6d);
    font-size: 0.9375rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

/* Reveal on card hover, on keyboard focus, and while the menu is open. */
.lk-ct-card:hover .lk-ct-kebab[b-9gzj2al12i],
.lk-ct-kebab:focus-visible[b-9gzj2al12i],
.lk-ct-kebab.is-open[b-9gzj2al12i] {
    opacity: 1;
}

.lk-ct-kebab:hover[b-9gzj2al12i],
.lk-ct-kebab.is-open[b-9gzj2al12i] {
    color: var(--linkooc-text-display, #000601);
    background: var(--linkooc-bg-secondary, #f1f3f5);
}

/* ── Dropdown menu (mirrors the canonical .linkooc-dropdown pattern) ─────────── */
.lk-ct-menu[b-9gzj2al12i] {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 1050;
    min-width: 220px;
    padding: 0.375rem 0;
    background: var(--linkooc-bg, #fff);
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: var(--linkooc-radius-sm, 0.5rem);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    animation: lkCtMenuIn-b-9gzj2al12i 0.12s ease-out;
}

@keyframes lkCtMenuIn-b-9gzj2al12i {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.lk-ct-menu-header[b-9gzj2al12i] {
    padding: 0.25rem 0.875rem 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--linkooc-text-display, #000601);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid var(--linkooc-border-color, #dee2e6);
    margin-bottom: 0.25rem;
}

.lk-ct-menu-item[b-9gzj2al12i] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.875rem;
    border: none;
    background: transparent;
    text-align: left;
    font-size: 0.8125rem;
    color: var(--linkooc-text-display, #000601);
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.lk-ct-menu-item i[b-9gzj2al12i] {
    flex-shrink: 0;
    width: 1rem;
    text-align: center;
    font-size: 0.9375rem;
    color: var(--linkooc-text-secondary, #6d6d6d);
}

.lk-ct-menu-item:hover:not(:disabled)[b-9gzj2al12i] {
    background: var(--linkooc-bg-secondary, #f1f3f5);
}

.lk-ct-menu-item:disabled[b-9gzj2al12i] {
    cursor: default;
    opacity: 0.65;
}

.lk-ct-menu-item-muted[b-9gzj2al12i] {
    color: var(--linkooc-text-secondary, #6d6d6d);
}

.lk-ct-menu-divider[b-9gzj2al12i] {
    height: 1px;
    margin: 0.25rem 0;
    background: var(--linkooc-border-color, #dee2e6);
}

.lk-ct-menu-overlay[b-9gzj2al12i] {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: transparent;
}

/* ── Pin / note indicators next to the name ─────────────────────────────────── */
.lk-ct-ind[b-9gzj2al12i] {
    flex-shrink: 0;
    font-size: 0.75rem;
}

.lk-ct-ind-pin[b-9gzj2al12i] {
    color: var(--linkooc-primary-ink, #08781B);
}

.lk-ct-ind-note[b-9gzj2al12i] {
    color: var(--linkooc-warning, #d99a00);
}

/* Pin = a calm green tint (the 📌 indicator carries the explicit cue); the left
   accent bar is reserved for "à traiter" anomalies. */
.lk-ct-card.is-pinned[b-9gzj2al12i] {
    border-color: rgba(8, 120, 27, 0.30);
    background: rgba(8, 120, 27, 0.025);
}

.lk-ct-spin[b-9gzj2al12i] {
    display: inline-block;
    animation: lkCtSpin-b-9gzj2al12i 0.8s linear infinite;
}

@keyframes lkCtSpin-b-9gzj2al12i {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Status badge / dot tones */
.lk-ct-badge[b-9gzj2al12i] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.lk-ct-badge.success[b-9gzj2al12i] {
    background: rgba(8, 120, 27, 0.1);
    color: var(--linkooc-primary-ink, #08781B);
}

.lk-ct-badge.danger[b-9gzj2al12i] {
    background: rgba(186, 25, 25, 0.1);
    color: var(--linkooc-red-var-1, #BA1919);
}

/* Neutral states (Gratuit / Essai / Brouillon) are de-emphasised — quiet text, no
   fill — so saturated colour is reserved for anomalies that must catch the eye. */
.lk-ct-badge.neutral[b-9gzj2al12i] {
    background: transparent;
    color: var(--linkooc-text-muted, #9aa0a6);
    font-weight: 500;
    padding-left: 0;
}

.lk-ct-dot.success[b-9gzj2al12i] {
    background: var(--linkooc-primary, #08781B);
}

.lk-ct-dot.danger[b-9gzj2al12i] {
    background: var(--linkooc-red-var-1, #BA1919);
}

.lk-ct-dot.neutral[b-9gzj2al12i] {
    background: #c2c8d0;
}

/* Metrics */
.lk-ct-metrics[b-9gzj2al12i] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* Above the full-card click overlay so per-metric tooltips show on hover. */
    position: relative;
    z-index: 2;
}

.lk-ct-metric[b-9gzj2al12i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.8125rem;
}

.lk-ct-metric-label[b-9gzj2al12i] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--linkooc-text-secondary, #6d6d6d);
}

.lk-ct-metric-label i[b-9gzj2al12i] {
    font-size: 0.875rem;
}

.lk-ct-metric-value[b-9gzj2al12i] {
    color: var(--linkooc-text-display, #000601);
    font-weight: 500;
    text-align: right;
}

/* Actions */
.lk-ct-action-primary[b-9gzj2al12i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 38px;
    padding: 0.4rem 0.6rem;
    line-height: 1.2;
    text-align: center;
    margin-top: 0.25rem;
    border: 1px solid rgba(8, 120, 27, 0.25);
    border-radius: var(--linkooc-radius-sm, 0.5rem);
    background: rgba(8, 120, 27, 0.08);
    color: var(--linkooc-primary-ink, #08781B);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.lk-ct-action-primary:hover[b-9gzj2al12i] {
    background: rgba(8, 120, 27, 0.14);
    border-color: rgba(8, 120, 27, 0.4);
}

.lk-ct-action-row[b-9gzj2al12i] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.lk-ct-action-secondary[b-9gzj2al12i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-height: 36px;
    padding: 0.3rem 0.45rem;
    line-height: 1.15;
    text-align: center;
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: var(--linkooc-radius-sm, 0.5rem);
    background: var(--linkooc-bg, #fff);
    color: var(--linkooc-text-display, #000601);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.lk-ct-action-secondary:hover[b-9gzj2al12i] {
    border-color: var(--linkooc-primary, #08781B);
    color: var(--linkooc-primary-ink, #08781B);
    background: rgba(8, 120, 27, 0.04);
}

/* ── Footer counter ────────────────────────────────────────────────────────── */

.lk-ct-footer[b-9gzj2al12i] {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--linkooc-text-secondary, #6d6d6d);
}

/* ── Empty states (scoped — not inherited from other components) ───────────── */

.linkooc-empty-state[b-9gzj2al12i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--linkooc-text-muted, #6d6d6d);
}

.linkooc-empty-state i[b-9gzj2al12i] {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.linkooc-empty-state p[b-9gzj2al12i] {
    margin: 0 0 0.75rem;
    font-size: 0.9375rem;
}

.lk-ct-clear-btn[b-9gzj2al12i] {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: var(--linkooc-radius-sm, 0.5rem);
    background: var(--linkooc-bg, #fff);
    color: var(--linkooc-text-secondary, #6d6d6d);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.lk-ct-clear-btn:hover[b-9gzj2al12i] {
    border-color: var(--linkooc-primary, #08781B);
    color: var(--linkooc-primary-ink, #08781B);
}

/* ── Mobile (≤ 768px) ──────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .lk-ct-toolbar[b-9gzj2al12i] {
        flex-direction: column;
        align-items: stretch;
    }

    .lk-ct-tabs[b-9gzj2al12i] {
        justify-content: stretch;
    }

    .lk-ct-tab[b-9gzj2al12i] {
        flex: 1;
        text-align: center;
    }

    .lk-ct-grid[b-9gzj2al12i] {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 769px) and (max-width: 1100px) {
    .lk-ct-grid[b-9gzj2al12i] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHARED ADMIN NOTE EDITOR (modal)
   ═══════════════════════════════════════════════════════════════════════════ */
.lk-ct-note-backdrop[b-9gzj2al12i] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 6, 1, 0.35);
    animation: lkCtFadeIn-b-9gzj2al12i 0.12s ease-out;
}

.lk-ct-note-dialog[b-9gzj2al12i] {
    position: fixed;
    z-index: 2001;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(440px, calc(100vw - 2rem));
    padding: 1.25rem;
    background: var(--linkooc-bg, #fff);
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: var(--linkooc-radius-md, 0.75rem);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
    animation: lkCtDialogIn-b-9gzj2al12i 0.14s ease-out;
}

@keyframes lkCtFadeIn-b-9gzj2al12i {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes lkCtDialogIn-b-9gzj2al12i {
    from { opacity: 0; transform: translate(-50%, -48%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

.lk-ct-note-dialog-head[b-9gzj2al12i] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--linkooc-text-display, #000601);
}

.lk-ct-note-dialog-head i[b-9gzj2al12i] {
    color: var(--linkooc-warning, #d99a00);
}

.lk-ct-note-hint[b-9gzj2al12i] {
    margin: 0.375rem 0 0.75rem;
    font-size: 0.75rem;
    color: var(--linkooc-text-secondary, #6d6d6d);
}

.lk-ct-note-textarea[b-9gzj2al12i] {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: var(--linkooc-radius-sm, 0.5rem);
    background: var(--linkooc-bg, #fff);
    color: var(--linkooc-text, #000601);
    font-size: 0.875rem;
    line-height: 1.4;
    resize: vertical;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lk-ct-note-textarea:focus[b-9gzj2al12i] {
    outline: none;
    border-color: var(--linkooc-primary, #08781B);
    box-shadow: 0 0 0 3px rgba(8, 120, 27, 0.12);
}

.lk-ct-note-actions[b-9gzj2al12i] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

.lk-ct-note-btn-secondary[b-9gzj2al12i],
.lk-ct-note-btn-primary[b-9gzj2al12i] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 36px;
    padding: 0 0.875rem;
    border-radius: var(--linkooc-radius-sm, 0.5rem);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.lk-ct-note-btn-secondary[b-9gzj2al12i] {
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    background: var(--linkooc-bg, #fff);
    color: var(--linkooc-text-display, #000601);
}

.lk-ct-note-btn-secondary:hover:not(:disabled)[b-9gzj2al12i] {
    border-color: var(--linkooc-text-secondary, #6d6d6d);
}

.lk-ct-note-btn-primary[b-9gzj2al12i] {
    border: 1px solid var(--linkooc-primary, #08781B);
    background: var(--linkooc-primary, #08781B);
    color: #fff;
    font-weight: 600;
}

.lk-ct-note-btn-primary:hover:not(:disabled)[b-9gzj2al12i] {
    background: #066316;
    border-color: #066316;
}

.lk-ct-note-btn-secondary:disabled[b-9gzj2al12i],
.lk-ct-note-btn-primary:disabled[b-9gzj2al12i] {
    cursor: default;
    opacity: 0.6;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BILLING BADGE · SHARED TAGS · FILTER BAR · TAG EDITOR
   ═══════════════════════════════════════════════════════════════════════════ */

/* Status + billing badges share one wrapping row */
.lk-ct-badges[b-9gzj2al12i] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    /* Above the full-card click overlay (z-index 1) so native title tooltips
       on the badges are reachable on hover. */
    position: relative;
    z-index: 2;
}

/* Billed-this-month badge */
.lk-ct-bill[b-9gzj2al12i] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
}
.lk-ct-bill i[b-9gzj2al12i] { font-size: 0.75rem; }
.lk-ct-bill.ok[b-9gzj2al12i] { background: rgba(8, 120, 27, 0.10); color: var(--linkooc-primary-ink, #08781B); }
.lk-ct-bill.no[b-9gzj2al12i] { background: var(--linkooc-warning-light, rgba(255, 165, 0, 0.10)); color: var(--linkooc-warning-strong, #9a6700); }
/* Solde restant dû (issue 250) — le rouge du solde de l'onglet Factures : de l'argent
   dû n'est pas une simple alerte de process comme le mandat ou le contrat. */
.lk-ct-bill.due[b-9gzj2al12i] { background: rgba(186, 25, 25, 0.10); color: var(--linkooc-red-var-1, #BA1919); }

/* Bornes chip (plan 382) — X/Y bornes en ligne ; clic → /admin/bornes */
.lk-ct-borne[b-9gzj2al12i] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}
.lk-ct-borne i[b-9gzj2al12i] { font-size: 0.75rem; }
.lk-ct-borne.ok[b-9gzj2al12i] { background: rgba(8, 120, 27, 0.10); color: var(--linkooc-primary-ink, #08781B); }
.lk-ct-borne.down[b-9gzj2al12i] { background: rgba(220, 53, 69, 0.10); color: var(--linkooc-danger, #dc3545); }
.lk-ct-borne:hover[b-9gzj2al12i] { text-decoration: none; filter: brightness(0.92); }
.lk-ct-borne.ok:hover[b-9gzj2al12i] { color: var(--linkooc-primary-ink, #08781B); }
.lk-ct-borne.down:hover[b-9gzj2al12i] { color: var(--linkooc-danger, #dc3545); }

/* ── Tag chips on the card ────────────────────────────────────────────────── */
.lk-ct-tags[b-9gzj2al12i] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.lk-ct-chip[b-9gzj2al12i] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.1rem 0.5rem;
    border-radius: 9999px;
    background: var(--linkooc-bg-secondary, #f1f3f5);
    border: 1px solid #e3e6ea;
    color: #41464b;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.5;
}
.lk-ct-chip-add[b-9gzj2al12i] {
    background: #fff;
    border: 1px dashed #c7ccd2;
    color: var(--linkooc-text-secondary, #6d6d6d);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
/* The empty "+ tag" affordance only appears on hover (existing tags stay visible). */
.lk-ct-card:hover .lk-ct-chip-add[b-9gzj2al12i],
.lk-ct-chip-add:focus-visible[b-9gzj2al12i] {
    opacity: 1;
}
.lk-ct-chip-add:hover[b-9gzj2al12i] {
    border-color: var(--linkooc-primary, #08781B);
    color: var(--linkooc-primary-ink, #08781B);
}

/* ── Filter bar (billing + tag chips) ─────────────────────────────────────── */
.lk-ct-filterbar[b-9gzj2al12i] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}
.lk-ct-fchip[b-9gzj2al12i] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.7rem;
    border-radius: 9999px;
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    background: var(--linkooc-bg, #fff);
    color: var(--linkooc-text-secondary, #6d6d6d);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.lk-ct-fchip:hover[b-9gzj2al12i] {
    border-color: var(--linkooc-primary, #08781B);
    color: var(--linkooc-primary-ink, #08781B);
}
.lk-ct-fchip.active[b-9gzj2al12i] {
    background: rgba(8, 120, 27, 0.10);
    border-color: var(--linkooc-primary, #08781B);
    color: var(--linkooc-primary-ink, #08781B);
}
.lk-ct-fchip-bill.active[b-9gzj2al12i] {
    background: var(--linkooc-warning-light, rgba(255, 165, 0, 0.12));
    border-color: var(--linkooc-warning, #d29922);
    color: var(--linkooc-warning-strong, #9a6700);
}
/* "N mandats à traiter" (plan 360) — ambre comme "à facturer" : une action attend. */
.lk-ct-fchip-sepa[b-9gzj2al12i] {
    border-color: var(--linkooc-warning, #d29922);
    color: var(--linkooc-warning-strong, #9a6700);
}
.lk-ct-fchip-sepa i[b-9gzj2al12i] { color: var(--linkooc-warning, #d29922); }
.lk-ct-fchip-sepa:hover[b-9gzj2al12i] {
    border-color: var(--linkooc-warning-strong, #9a6700);
    color: var(--linkooc-warning-strong, #9a6700);
}
.lk-ct-fchip-sepa.active[b-9gzj2al12i] {
    background: var(--linkooc-warning-light, rgba(255, 165, 0, 0.12));
    border-color: var(--linkooc-warning, #d29922);
    color: var(--linkooc-warning-strong, #9a6700);
}

.lk-ct-fchip-clear[b-9gzj2al12i] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.25rem 0.6rem;
    border: none;
    background: transparent;
    color: var(--linkooc-text-secondary, #6d6d6d);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}
.lk-ct-fchip-clear:hover[b-9gzj2al12i] { color: var(--linkooc-red-var-1, #BA1919); }

/* ── Tag editor modal (reuses the .lk-ct-note-* shell) ────────────────────── */
.lk-ct-tageditor-chips[b-9gzj2al12i] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-height: 32px;
    padding: 0.5rem;
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: var(--linkooc-radius-sm, 0.5rem);
    background: var(--linkooc-bg-secondary, #f8f9fa);
    margin-bottom: 0.625rem;
}
.lk-ct-tageditor-empty[b-9gzj2al12i] {
    font-size: 0.8125rem;
    color: var(--linkooc-text-secondary, #6d6d6d);
}
.lk-ct-chip-removable[b-9gzj2al12i] { padding-right: 0.25rem; }
.lk-ct-chip-x[b-9gzj2al12i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--linkooc-text-secondary, #6d6d6d);
    cursor: pointer;
    font-size: 0.7rem;
}
.lk-ct-chip-x:hover[b-9gzj2al12i] { color: var(--linkooc-red-var-1, #BA1919); }
.lk-ct-tageditor-input[b-9gzj2al12i] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.lk-ct-tageditor-input .lk-ct-search-input[b-9gzj2al12i] {
    flex: 1;
    width: auto;
    height: 36px;
    padding-left: 0.875rem;
}
.lk-ct-tageditor-suggest[b-9gzj2al12i] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.625rem;
}
.lk-ct-tageditor-suggest-lbl[b-9gzj2al12i] {
    font-size: 0.75rem;
    color: var(--linkooc-text-secondary, #6d6d6d);
    margin-right: 0.15rem;
}
.lk-ct-chip-suggest[b-9gzj2al12i] {
    cursor: pointer;
    background: #fff;
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    color: var(--linkooc-text-secondary, #6d6d6d);
    transition: border-color 0.15s ease, color 0.15s ease;
}
.lk-ct-chip-suggest:hover[b-9gzj2al12i] {
    border-color: var(--linkooc-primary, #08781B);
    color: var(--linkooc-primary-ink, #08781B);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANOMALY HIERARCHY · SORT PRESETS · CONTROLS BAR
   ═══════════════════════════════════════════════════════════════════════════ */

/* "À traiter" indicator next to the name */
.lk-ct-ind-attn.lk-ct-ind-warning[b-9gzj2al12i] { color: var(--linkooc-warning, #d29922); }
.lk-ct-ind-attn.lk-ct-ind-danger[b-9gzj2al12i] { color: var(--linkooc-red-var-1, #BA1919); }

/* Anomaly metric values (Jamais publié / 0 traduction) pop in warning colour */
.lk-ct-metric-value.is-warning[b-9gzj2al12i] {
    color: var(--linkooc-warning-strong, #9a6700);
    font-weight: 600;
}

/* Controls bar: sort (left) + filters (right) */
.lk-ct-controls[b-9gzj2al12i] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 1rem;
}
.lk-ct-sort[b-9gzj2al12i],
.lk-ct-filters[b-9gzj2al12i] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}
.lk-ct-sort-label[b-9gzj2al12i] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--linkooc-text-secondary, #6d6d6d);
    margin-right: 0.15rem;
}

/* Sort pills (segmented control) */
.lk-ct-pill[b-9gzj2al12i] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    background: var(--linkooc-bg, #fff);
    color: var(--linkooc-text-secondary, #6d6d6d);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.lk-ct-pill:hover[b-9gzj2al12i] {
    border-color: var(--linkooc-primary, #08781B);
    color: var(--linkooc-primary-ink, #08781B);
}
.lk-ct-pill.active[b-9gzj2al12i] {
    background: rgba(8, 120, 27, 0.10);
    border-color: var(--linkooc-primary, #08781B);
    color: var(--linkooc-primary-ink, #08781B);
}
.lk-ct-pill-dir[b-9gzj2al12i] { font-size: 0.7rem; }

/* "N à traiter" filter chip — amber so the actionable count stands out */
.lk-ct-fchip-attn[b-9gzj2al12i] {
    border-color: var(--linkooc-warning, #d29922);
    color: var(--linkooc-warning-strong, #9a6700);
}
.lk-ct-fchip-attn i[b-9gzj2al12i] { color: var(--linkooc-warning, #d29922); }
.lk-ct-fchip-attn:hover[b-9gzj2al12i] {
    border-color: var(--linkooc-warning-strong, #9a6700);
    color: var(--linkooc-warning-strong, #9a6700);
}
.lk-ct-fchip-attn.active[b-9gzj2al12i] {
    background: var(--linkooc-warning-light, rgba(255, 165, 0, 0.12));
    border-color: var(--linkooc-warning, #d29922);
    color: var(--linkooc-warning-strong, #9a6700);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PARTENAIRES tab (plan 097) — Clients ⇄ Partenaires switch + reconciliation
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Top-level Clients ⇄ Partenaires switch (in the header) ─────────────────── */
.lk-ct-toptabs[b-9gzj2al12i] {
    display: inline-flex;
    gap: 2px;
    margin-top: 0.75rem;
    padding: 3px;
    background: var(--linkooc-bg-secondary, #f1f3f5);
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: var(--linkooc-radius-sm, 0.5rem);
}

.lk-ct-toptab[b-9gzj2al12i] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 1rem;
    border: none;
    background: transparent;
    border-radius: calc(var(--linkooc-radius-sm, 0.5rem) - 2px);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--linkooc-text-secondary, #6d6d6d);
    cursor: pointer;
    transition: all 0.15s ease;
}

.lk-ct-toptab:hover[b-9gzj2al12i] {
    color: var(--linkooc-text-display, #000601);
}

.lk-ct-toptab.active[b-9gzj2al12i] {
    background: var(--linkooc-bg, #fff);
    color: var(--linkooc-text-display, #000601);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* ── Period bar ────────────────────────────────────────────────────────────── */
.lk-ct-pt-periodbar[b-9gzj2al12i] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.lk-ct-pt-period-label[b-9gzj2al12i] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--linkooc-text, #000601);
    margin: 0;
}

.lk-ct-pt-month-input[b-9gzj2al12i] {
    height: 36px;
    padding: 0 0.625rem;
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: var(--linkooc-radius-sm, 0.5rem);
    background: var(--linkooc-bg, #fff);
    color: var(--linkooc-text, #000601);
    font-size: 0.875rem;
}

.lk-ct-pt-month-input:focus[b-9gzj2al12i] {
    outline: none;
    border-color: var(--linkooc-primary, #08781B);
    box-shadow: 0 0 0 3px rgba(8, 120, 27, 0.12);
}

.lk-ct-pt-period-hint[b-9gzj2al12i] {
    font-size: 0.8125rem;
    color: var(--linkooc-text-secondary, #6d6d6d);
    text-transform: capitalize;
}

/* ── Aggregate table : all partners + reconciling total ────────────────────── */
.lk-ct-pt-table-wrap[b-9gzj2al12i] {
    background: var(--linkooc-bg, #fff);
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: var(--linkooc-radius-md, 0.75rem);
    overflow: hidden;
}

.lk-ct-pt-table[b-9gzj2al12i] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.lk-ct-pt-table th[b-9gzj2al12i],
.lk-ct-pt-table td[b-9gzj2al12i] {
    padding: 0.75rem 1rem;
    text-align: left;
}

.lk-ct-pt-table thead th[b-9gzj2al12i] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--linkooc-text-secondary, #6d6d6d);
    border-bottom: 1px solid var(--linkooc-border-color, #dee2e6);
    font-weight: 600;
}

.lk-ct-pt-table .num[b-9gzj2al12i] {
    text-align: right;
    white-space: nowrap;
}

.lk-ct-pt-table .num.accent[b-9gzj2al12i] {
    color: var(--linkooc-primary-ink, #08781B);
    font-weight: 600;
}

/* « En attente de versement » : pas encore disponible (aucune donnée réelle). */
.lk-ct-pt-table .num.lk-ct-soon[b-9gzj2al12i] {
    color: var(--linkooc-text-muted, #6b7280);
    font-style: italic;
    font-weight: 400;
}

.lk-ct-soon-tag[b-9gzj2al12i] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: none;
    color: var(--linkooc-text-muted, #6b7280);
    background: var(--linkooc-surface-hover, #f3f4f6);
    border-radius: 0.25rem;
    padding: 0.05rem 0.35rem;
    margin-left: 0.25rem;
}

.lk-ct-pt-table .chev[b-9gzj2al12i] {
    width: 1.5rem;
    text-align: right;
    color: var(--linkooc-text-secondary, #6d6d6d);
}

.lk-ct-pt-row[b-9gzj2al12i] {
    cursor: pointer;
    transition: background 0.15s ease;
    border-bottom: 1px solid var(--linkooc-border-color, #dee2e6);
}

.lk-ct-pt-row:hover[b-9gzj2al12i] {
    background: var(--linkooc-bg-secondary, #f1f3f5);
}

.lk-ct-pt-name[b-9gzj2al12i] {
    font-weight: 600;
    color: var(--linkooc-text, #000601);
}

.lk-ct-pt-code[b-9gzj2al12i] {
    margin-left: 0.5rem;
    font-size: 0.75rem;
    color: var(--linkooc-text-secondary, #6d6d6d);
}

.lk-ct-pt-total td[b-9gzj2al12i] {
    border-top: 2px solid var(--linkooc-border-color, #dee2e6);
    font-weight: 700;
    color: var(--linkooc-text, #000601);
    background: var(--linkooc-bg-secondary, #f1f3f5);
}

.lk-ct-pt-provisional[b-9gzj2al12i] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    font-style: italic;
    color: var(--linkooc-text-secondary, #6d6d6d);
}

/* ── Drill-down : one partner ─────────────────────────────────────────────── */
.lk-ct-pt-drill-head[b-9gzj2al12i] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.lk-ct-pt-back[b-9gzj2al12i] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: var(--linkooc-radius-sm, 0.5rem);
    background: var(--linkooc-bg, #fff);
    color: var(--linkooc-text, #000601);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.lk-ct-pt-back:hover[b-9gzj2al12i] {
    border-color: var(--linkooc-primary, #08781B);
    color: var(--linkooc-primary-ink, #08781B);
}

.lk-ct-pt-drill-name[b-9gzj2al12i] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--linkooc-text, #000601);
}

.lk-ct-pt-drill-code[b-9gzj2al12i] {
    margin-left: 0.5rem;
    font-size: 0.8125rem;
    color: var(--linkooc-text-secondary, #6d6d6d);
}

.lk-ct-pt-grid[b-9gzj2al12i] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1rem;
    align-items: start;
}

.lk-ct-pt-rail[b-9gzj2al12i] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (max-width: 1100px) {
    .lk-ct-pt-grid[b-9gzj2al12i] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Admin/PageForm.razor.rz.scp.css */
/* Styles spécifiques pour la page de formulaire de page */

/* Onglets */
/* Plan 508 F9 : les 2 onglets s'empilaient sur 2 rangées à 390 (le 1er fait
   230 px) et ne lisaient plus comme une bande d'onglets. On en fait un RAIL qui
   défile horizontalement — même geste que /user-edit. À 1440 les 2 onglets
   tiennent largement : `nowrap` ne change rien, rien ne défile. */
.nav-tabs[b-97qzdda5sz] {
    border-bottom: 2px solid var(--matrix-border-color, #e0e0e0);
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.nav-tabs .nav-item[b-97qzdda5sz] {
    flex: 0 0 auto;
}

.nav-tabs .nav-link[b-97qzdda5sz] {
    color: var(--matrix-text-secondary, #6b7280);
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.75rem 1.5rem;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.nav-tabs .nav-link:hover[b-97qzdda5sz] {
    border-bottom-color: var(--matrix-primary-color, #667eea);
    color: var(--matrix-primary-color, #667eea);
}

.nav-tabs .nav-link.active[b-97qzdda5sz] {
    color: var(--matrix-primary-color, #667eea);
    border-bottom-color: var(--matrix-primary-color, #667eea);
    font-weight: 600;
}

/* Sections de formulaire */
.matrix-form-section[b-97qzdda5sz] {
    background-color: var(--matrix-bg-secondary, #ffffff);
    border: 1px solid var(--matrix-border-color, #e0e0e0);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.matrix-section-title[b-97qzdda5sz] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--matrix-text-color, #2c3e50);
    border-bottom: 2px solid var(--matrix-primary-color, #667eea);
    padding-bottom: 0.5rem;
}

/* Groupes de formulaire */
.matrix-form-group[b-97qzdda5sz] {
    margin-bottom: 1.5rem;
}

.matrix-form-label[b-97qzdda5sz] {
    font-weight: 500;
    color: var(--matrix-text-color, #2c3e50);
    margin-bottom: 0.5rem;
    display: block;
}

.matrix-form-label.required[b-97qzdda5sz]::after {
    content: ' *';
    color: var(--matrix-danger, #dc3545);
}

/* Inputs */
.form-control[b-97qzdda5sz] {
    border: 1px solid var(--matrix-border-color, #dee2e6);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus[b-97qzdda5sz] {
    border-color: var(--matrix-primary-color, #667eea);
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    outline: none;
}

.input-group-text[b-97qzdda5sz] {
    background-color: var(--matrix-bg-tertiary, #f8f9fa);
    border: 1px solid var(--matrix-border-color, #dee2e6);
    color: var(--matrix-text-secondary, #6b7280);
}

/* Checkboxes */
.form-check[b-97qzdda5sz] {
    display: flex;
    align-items: center;
}

.form-check-input[b-97qzdda5sz] {
    margin-top: 0;
    margin-right: 0.5rem;
    /* Plan 508 F8b — la CAUSE de l'écrasement : `.form-check` est en `display:
       flex` (règle ci-dessus) et la case en était un enfant rétrécissable. Dans
       une rangée `d-flex` trop étroite, les 3 cases de la matrice tombaient à
       10x14, 11x14 et 12x14. Elles ne rétrécissent plus. Aucune taille n'est
       posée ici : le geste est neutre à 1440. */
    flex: 0 0 auto;
}

.form-check-label[b-97qzdda5sz] {
    margin-bottom: 0;
    cursor: pointer;
}

/* Actions du formulaire */
.matrix-form-actions[b-97qzdda5sz] {
    display: flex;
    gap: 0.75rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--matrix-border-color, #e0e0e0);
}

/* ── Plan 508 F8b — la matrice Voir / Éditer / Supprimer ───────────────────
   Elle rendait `ms-4 d-flex gap-4`, donc `flex-wrap: nowrap` : les 3 cases
   étaient compressées et « Supprimer » se peignait 8 px (à 390) puis 38 px (à
   360) HORS de sa carte. Les deux utilitaires Bootstrap sont repris ici à
   l'identique — `margin-left: 1.5rem` = `ms-4`, `column-gap: 1.5rem` = `gap-4`
   — pour pouvoir les resserrer sous 768 sans lutter contre leurs `!important`.

   ⛔ DÉCISION PROTÉGÉE (plan 474, mobile.css:1979-1980) : cette matrice est
   EXCLUE du plancher `.form-check` de 44 px, qui la triplerait en hauteur.
   L'exclusion tient. Le correctif ne pose AUCUN `min-height` ici : il rend la
   largeur et autorise le retour à la ligne, ce qui suffit. Le `row-gap` est
   volontairement court (0.25rem) pour que la 2e rangée n'enfle pas la carte. */
.perm-matrix[b-97qzdda5sz] {
    margin-left: 1.5rem;
    flex-wrap: wrap;
    column-gap: 1.5rem;
    row-gap: 0.25rem;
}

.perm-matrix > .form-check[b-97qzdda5sz] {
    flex: 0 0 auto;
    padding-left: 0;
}

.perm-matrix > .form-check > .form-check-input[b-97qzdda5sz] {
    margin-left: 0;
}

@media (max-width: 768px) {
    /* Un cran d'indentation et d'écart en moins : c'est ce qui décide si la
       matrice tient sur une rangée à 390 ou retombe proprement sur deux. */
    .perm-matrix[b-97qzdda5sz] {
        margin-left: 1rem;
        column-gap: 1rem;
    }

    /* 16x16 — la taille des autres cases du dépôt, celle que le plan 474 a
       donnée aux cases de /role-management et /user-edit. Aucune case ne
       grossit vers 44 : c'est la RANGÉE extérieure qui porte les 44 px, via
       `lk-touch-check-list`, et elle seule. */
    .perm-matrix > .form-check > .form-check-input[b-97qzdda5sz] {
        width: 1rem;
        height: 1rem;
    }

    /* Le rail d'onglets doit tenir sur UNE rangée : on lui rend 1 rem par
       onglet avant de compter sur le défilement horizontal. */
    .nav-tabs .nav-link[b-97qzdda5sz] {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

/* Cards de permissions */
.roles-permissions-container .card[b-97qzdda5sz] {
    border: 1px solid var(--matrix-border-color, #e0e0e0);
    transition: all 0.2s ease;
}

.roles-permissions-container .card:hover[b-97qzdda5sz] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Messages */
.alert[b-97qzdda5sz] {
    border-radius: 6px;
    padding: 1rem;
}

.alert-danger[b-97qzdda5sz] {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

.alert-success[b-97qzdda5sz] {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

.alert-info[b-97qzdda5sz] {
    background-color: #d1ecf1;
    border-color: #bee5eb;
    color: #0c5460;
}

/* Small text */
small.text-muted[b-97qzdda5sz] {
    font-size: 0.875rem;
    color: var(--matrix-text-secondary, #6b7280);
    display: block;
    margin-top: 0.25rem;
}

/* Validation messages */
.text-danger.small[b-97qzdda5sz] {
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: block;
}

/* /Pages/Admin/Pages.razor.rz.scp.css */
/* Styles spécifiques pour la page de gestion des pages */

/* Table Matrix */
.matrix-table[b-r1c7datqst] {
    margin-bottom: 0;
}

.matrix-table thead th[b-r1c7datqst] {
    background-color: var(--matrix-background-color, #f8f9fa);
    border-bottom: 2px solid var(--matrix-border-color, #e0e0e0);
    font-weight: 600;
    color: var(--matrix-text-color, #2c3e50);
    padding: 1rem;
}

.matrix-table tbody td[b-r1c7datqst] {
    padding: 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--matrix-border-color, #e0e0e0);
}

.matrix-table tbody tr:hover[b-r1c7datqst] {
    background-color: rgba(102, 126, 234, 0.05);
}

/* État vide */
.empty-state-icon[b-r1c7datqst] {
    font-size: 4rem;
    color: var(--matrix-border-color, #e0e0e0);
}

/* Boutons d'action */
.btn-group-sm .btn[b-r1c7datqst] {
    padding: 0.375rem 0.625rem;
}

.btn-group-sm .btn i[b-r1c7datqst] {
    font-size: 0.875rem;
}

/* Modal */
[b-r1c7datqst] .modal-backdrop {
    z-index: 1040;
}

[b-r1c7datqst] .modal {
    z-index: 1050;
}

/* Badge code */
code[b-r1c7datqst] {
    background-color: var(--matrix-background-color, #f8f9fa);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.875rem;
}

/* Plan 401 — regles deplacees depuis le <style> global du .razor vers
   l'isolation CSS Blazor. Les declarations sont inchangees.

   Pourquoi les :where() : le compilateur ajoute [b-xxxxxxxxxx] a la fin du
   selecteur, ce qui lui ajoute le poids d'une classe. Sans compensation, ces
   regles se mettraient a battre des regles globales plus specifiques
   (mobile.css, plans 393/399) qu'elles perdaient jusqu'ici. :where() sur la
   premiere classe rend ce poids : la specificite reste exactement celle du
   <style> d'origine, seule la portee change. */

:where(.linkooc-page-container)[b-r1c7datqst],
[b-r1c7datqst] :where(.linkooc-page-container) {
    background-color: var(--linkooc-second-bg, #FEFEFE);
    min-height: 100%;
}

:where(.linkooc-page-header)[b-r1c7datqst],
[b-r1c7datqst] :where(.linkooc-page-header) {
    background: var(--linkooc-bg, #ffffff);
    flex-shrink: 0;
}

:where(.linkooc-dropdown-menu)[b-r1c7datqst],
[b-r1c7datqst] :where(.linkooc-dropdown-menu) {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1050;
    min-width: 280px;
    padding: 0.5rem 0;
    background: var(--linkooc-bg, #ffffff);
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    margin-top: 4px;
    animation: linkoocDropdownIn 0.15s ease-out;
}

:where(.linkooc-empty-state)[b-r1c7datqst],
[b-r1c7datqst] :where(.linkooc-empty-state) {
    padding: 3rem;
}

:where(.linkooc-empty-state-icon)[b-r1c7datqst],
[b-r1c7datqst] :where(.linkooc-empty-state-icon) {
    opacity: 0.5;
}

:where(.linkooc-filters-panel-wrapper)[b-r1c7datqst],
[b-r1c7datqst] :where(.linkooc-filters-panel-wrapper) {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

:where(.linkooc-filters-panel-wrapper).show[b-r1c7datqst],
[b-r1c7datqst] :where(.linkooc-filters-panel-wrapper).show {
    max-height: 500px;
}

:where(.linkooc-status-badge)[b-r1c7datqst],
[b-r1c7datqst] :where(.linkooc-status-badge) {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: var(--linkooc-tiny-size, 0.65rem);
    font-weight: 500;
    border-radius: 0.25rem;
    white-space: nowrap;
}

:where(.linkooc-status-success)[b-r1c7datqst],
[b-r1c7datqst] :where(.linkooc-status-success) {
    background-color: var(--linkooc-success-light, rgba(8, 120, 27, 0.1));
    color: var(--linkooc-primary-ink, #08781B);
}

:where(.linkooc-status-warning)[b-r1c7datqst],
[b-r1c7datqst] :where(.linkooc-status-warning) {
    background-color: var(--linkooc-warning-light, rgba(255, 165, 0, 0.1));
    color: var(--linkooc-warning, #FFA500);
}

:where(.linkooc-status-info)[b-r1c7datqst],
[b-r1c7datqst] :where(.linkooc-status-info) {
    background-color: var(--linkooc-info-light, rgba(13, 202, 240, 0.1));
    color: var(--linkooc-info, #0dcaf0);
}

:where(.linkooc-status-muted)[b-r1c7datqst],
[b-r1c7datqst] :where(.linkooc-status-muted) {
    background-color: rgba(108, 117, 125, 0.1);
    color: var(--linkooc-text-secondary, #6d6d6d);
}
/* /Pages/Admin/RoleManagement.razor.rz.scp.css */
/* Styles spécifiques pour la page de gestion des rôles (plan 507).

   Ce fichier existe pour DEUX raisons, aucune ne touchant une feuille partagée :

     1. F5 demande une @media sur le cadre de la liste « Utilisateurs du Rôle ».
        Un attribut `style=` ne peut pas en porter une : la géométrie descend
        donc ici, en isolation CSS Blazor (portée [b-xxxxxxxxxx]).
     2. F4 ajoute quatre puces de tri dans la barre d'outils de Matrix_Grid. La
        rangée non compacte ne sait pas se replier ; le filet ci-dessous est
        posé SUR CETTE PAGE seulement.

   Aucune règle d'ici ne réaffiche « Actualiser », la bascule de vue ou la
   pagination : la règle globale de matrix-components.css sous 767 px est
   intacte, on ajoute un chemin, on n'en supprime pas (STOP 1 du plan).

   Pourquoi les `:where()` sur le patron du menu ⋮ : le compilateur ajoute
   [b-xxxxxxxxxx] en fin de sélecteur, ce qui lui donne le poids d'une classe.
   Sans compensation, ces règles battraient des règles globales plus spécifiques
   (mobile.css, linkooc-theme.css, plans 393/399/440) qu'elles doivent perdre.
   La variante `::deep` sert le déclencheur, rendu par Matrix_Button : ce nœud
   ne porte pas l'attribut de portée de cette page.
   Déclarations reprises telles quelles de UserManagement.razor.css (plan 457). */

/* ═══════════════════════════════════════════════════════════════════════════
   F5 — un seul défileur dans le dialogue de rôle

   La liste des utilisateurs était plafonnée à 300 px et contenait 1169 px de
   rangées, à l'intérieur d'un `modal-dialog-scrollable` dont le `.modal-body`
   défile déjà : deux courses concentriques, et au doigt le geste part dans
   l'une ou dans l'autre selon le pixel touché.

   Le cadre de 300 px reste au BUREAU (le dialogue y est haut et large, la liste
   encadrée est lisible). Sous 768 px il est levé : la liste s'étire et c'est le
   corps du dialogue — le seul défileur restant — qui la fait défiler.

   Ce qui n'est PAS touché : `lk-touch-check-list` (rangées 44 px, cases 16×16,
   plan 474) et le `padding-bottom: 1.5rem` de `.modal-body .lk-touch-check-list`
   (plan 455). Les deux vivent dans mobile.css et gardent leur `!important`.
   ═══════════════════════════════════════════════════════════════════════════ */

.role-users-picker[b-swwc74ia7j] {
    max-height: 300px;
    overflow-y: auto;
}

@media (max-width: 767.98px) {
    .role-users-picker[b-swwc74ia7j] {
        max-height: none;
        overflow-y: visible;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   F4 — les puces de tri ne doivent jamais pousser une barre horizontale

   `.linkooc-sort-control` est `flex-shrink: 0` et `.linkooc-sort-pills` est
   `inline-flex` sans repli (matrix-components.css) : hors variante `.compact`,
   quatre puces + le bouton de sens à 44 px dépassent la largeur utile d'un
   téléphone de 360. La variante compacte a son propre `overflow-x: auto` ;
   celle-ci n'en a pas, et cette page ne peut pas basculer en compact (elle n'a
   pas de `CompactRowTemplate` et ses 9 cartes font partie de l'inventaire).

   On laisse donc la rangée SE REPLIER sur cette page : aucune puce n'est
   retirée, rien ne défile de côté. `min-width: 0` est nécessaire pour qu'un
   élément flex puisse descendre sous sa largeur intrinsèque.

   Spécificité : `[b-xxx] .linkooc-grid-toolbar-right .linkooc-sort-control`
   bat le `.linkooc-sort-control` simple de la feuille partagée, sans `!important`.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {
    [b-swwc74ia7j] .linkooc-grid-toolbar-right .linkooc-sort-control {
        flex-shrink: 1;
        flex-wrap: wrap;
        justify-content: flex-end;
        min-width: 0;
        max-width: 100%;
        row-gap: 0.375rem;
    }

    [b-swwc74ia7j] .linkooc-grid-toolbar-right .linkooc-sort-pills {
        flex-wrap: wrap;
        justify-content: flex-end;
        min-width: 0;
        max-width: 100%;
        row-gap: 0.375rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   F4 — menu ⋮ « Options » de l'en-tête

   Seul chemin vers « Actualiser » sous 767 px. Le glyphe ⋮, le carré de 44×44
   et la disparition du libellé viennent de linkooc-theme.css (plans 464 / 476)
   dès que le déclencheur porte `linkooc-dropdown-toggle--options` ; il ne reste
   ici que le patron maison du menu lui-même.
   ═══════════════════════════════════════════════════════════════════════════ */

.linkooc-dropdown[b-swwc74ia7j] {
    position: relative;
}

:where(.linkooc-dropdown-toggle)[b-swwc74ia7j]::after,
[b-swwc74ia7j] :where(.linkooc-dropdown-toggle)::after {
    content: '';
    display: inline-block;
    margin-left: 0.5rem;
    vertical-align: middle;
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-left: 0.3em solid transparent;
}

:where(.linkooc-dropdown-menu)[b-swwc74ia7j],
[b-swwc74ia7j] :where(.linkooc-dropdown-menu) {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 1050;
    min-width: 280px;
    background: var(--linkooc-bg, #fff);
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 0.5rem 0;
    animation: linkoocDropdownIn-b-swwc74ia7j 0.15s ease-out;
}

@keyframes linkoocDropdownIn-b-swwc74ia7j {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.linkooc-dropdown-header[b-swwc74ia7j] {
    padding: var(--linkooc-spacing-sm, 0.5rem) var(--linkooc-spacing-md, 1rem);
    font-size: var(--linkooc-small-size, 0.75rem);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--linkooc-text-muted, #6d6d6d);
    letter-spacing: 0.05em;
}

.linkooc-dropdown-item[b-swwc74ia7j] {
    display: flex;
    align-items: flex-start;
    width: 100%;
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease;
    /* Plancher tactile R12 : chaque entrée du menu est une cible de 44px. */
    min-height: 44px;
}

.linkooc-dropdown-item:hover[b-swwc74ia7j] {
    background-color: var(--linkooc-hover-second-bg, #e7f1e8);
}

.linkooc-dropdown-item i[b-swwc74ia7j] {
    font-size: 1rem;
    margin-top: 2px;
}

.linkooc-dropdown-item-content[b-swwc74ia7j] {
    display: flex;
    flex-direction: column;
}

.linkooc-dropdown-item-content span[b-swwc74ia7j] {
    font-size: var(--linkooc-body-size, 0.875rem);
    font-weight: 500;
    color: var(--linkooc-text-display, #000601);
}

.linkooc-dropdown-item-content small[b-swwc74ia7j] {
    font-size: var(--linkooc-small-size, 0.75rem);
    color: var(--linkooc-text-muted, #6d6d6d);
}

.linkooc-dropdown-overlay[b-swwc74ia7j] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    background: transparent;
}
/* /Pages/Admin/UsageDashboard.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   USAGE DASHBOARD - Admin usage tracking page
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page Header ─────────────────────────────────────────────────────────── */

[b-579oa2bnnb] .linkooc-page-title {
    font-size: var(--linkooc-page-title-size, 1.5rem);
    font-weight: var(--linkooc-page-title-weight, 600);
    color: var(--linkooc-text, #000601);
    margin: 0;
}

[b-579oa2bnnb] .linkooc-page-subtitle {
    font-size: var(--linkooc-page-subtitle-size, 0.875rem);
    color: var(--linkooc-text-secondary, #6d6d6d);
}

[b-579oa2bnnb] .linkooc-breadcrumb .breadcrumb {
    font-size: var(--linkooc-breadcrumb-size, 0.8125rem);
}

[b-579oa2bnnb] .linkooc-breadcrumb .breadcrumb-item.active {
    color: var(--linkooc-text, #000601);
    font-weight: 500;
}

.linkooc-date-range-select[b-579oa2bnnb] {
    border-radius: var(--linkooc-radius-sm, 0.5rem);
    min-width: 180px;
}

/* ── KPI Cards ───────────────────────────────────────────────────────────── */

.linkooc-kpi-row[b-579oa2bnnb] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.linkooc-kpi-card[b-579oa2bnnb] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--linkooc-bg, #fff);
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: var(--linkooc-radius-md, 0.75rem);
    transition: box-shadow 0.15s ease;
}

.linkooc-kpi-card:hover[b-579oa2bnnb] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.linkooc-kpi-icon[b-579oa2bnnb] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--linkooc-radius-sm, 0.5rem);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.linkooc-kpi-icon.sms[b-579oa2bnnb] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.linkooc-kpi-icon.whatsapp[b-579oa2bnnb] {
    background: rgba(37, 211, 102, 0.1);
    color: #25d366;
}

.linkooc-kpi-icon.email[b-579oa2bnnb] {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.linkooc-kpi-icon.ai[b-579oa2bnnb] {
    background: rgba(8, 120, 27, 0.1);
    color: var(--linkooc-primary-ink, #08781B);
}

.linkooc-kpi-content[b-579oa2bnnb] {
    display: flex;
    flex-direction: column;
}

.linkooc-kpi-value[b-579oa2bnnb] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--linkooc-text-display, #000601);
    line-height: 1.2;
}

.linkooc-kpi-label[b-579oa2bnnb] {
    font-size: 0.8125rem;
    color: var(--linkooc-text-secondary, #6d6d6d);
    font-weight: 500;
}

/* ── Tabs ────────────────────────────────────────────────────────────────── */

.linkooc-usage-tabs[b-579oa2bnnb] {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--linkooc-border-color, #dee2e6);
}

.linkooc-usage-tab[b-579oa2bnnb] {
    padding: 0.625rem 1.25rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--linkooc-text-secondary, #6d6d6d);
    cursor: pointer;
    transition: all 0.15s ease;
}

.linkooc-usage-tab:hover[b-579oa2bnnb] {
    color: var(--linkooc-text-display, #000601);
}

.linkooc-usage-tab.active[b-579oa2bnnb] {
    color: var(--linkooc-primary-ink, #08781B);
    border-bottom-color: var(--linkooc-primary-ink, #08781B);
}

/* ── Tables ──────────────────────────────────────────────────────────────── */
/* Tables use global matrix-record-grid + matrix-grid-header classes from linkooc-matrix.css.
   Only scoped overrides here for dashboard-specific badge/badge styling. */

/* Plan 472 (constat F5) — indice de défilement des tables : RIEN À AJOUTER ICI.
   L'audit avait mesuré les cinq .table-responsive de cette page en défilement
   horizontal muet (358/632, 358/707, 358/514 à 390 ; 328/666 à 360). Entre
   l'audit et l'exécution, le plan 469 a posé le patron R7b sur .table-responsive
   pour TOUT le BackOffice (mobile.css, @media max-width: 768px, commit 73184f4f) :
   deux couvercles background-attachment: local + deux ombres scroll, zéro JS,
   thème sombre inclus. Cette page en hérite telle quelle — vérifié en vivant.
   Une règle scopée ici ne serait qu'un doublon inerte. Si un jour la règle
   globale du 469 est retirée, c'est ICI qu'il faudra la reposer, scopée. */

/* ── Count Badges ────────────────────────────────────────────────────────── */

.linkooc-count-badge[b-579oa2bnnb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 600;
}

.linkooc-count-badge.sms[b-579oa2bnnb] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.linkooc-count-badge.whatsapp[b-579oa2bnnb] {
    background: rgba(37, 211, 102, 0.1);
    color: #128c7e;
}

.linkooc-count-badge.email[b-579oa2bnnb] {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.linkooc-count-badge.ai[b-579oa2bnnb] {
    background: rgba(8, 120, 27, 0.1);
    color: var(--linkooc-primary-ink, #08781B);
}

.linkooc-count-badge.failed[b-579oa2bnnb] {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

/* ── Type & Status Badges ────────────────────────────────────────────────── */

.linkooc-type-badge[b-579oa2bnnb] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: var(--linkooc-radius-sm, 0.5rem);
    font-size: 0.75rem;
    font-weight: 500;
}

.linkooc-type-badge.sms[b-579oa2bnnb] {
    background: rgba(59, 130, 246, 0.08);
    color: #3b82f6;
}

.linkooc-type-badge.whatsapp[b-579oa2bnnb] {
    background: rgba(37, 211, 102, 0.08);
    color: #128c7e;
}

.linkooc-type-badge.email[b-579oa2bnnb] {
    background: rgba(139, 92, 246, 0.08);
    color: #8b5cf6;
}

.linkooc-status-badge[b-579oa2bnnb] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: var(--linkooc-radius-sm, 0.5rem);
    font-size: 0.75rem;
    font-weight: 500;
}

.linkooc-status-badge.sent[b-579oa2bnnb] {
    background: rgba(8, 120, 27, 0.08);
    color: var(--linkooc-primary-ink, #08781B);
}

.linkooc-status-badge.failed[b-579oa2bnnb] {
    background: rgba(220, 53, 69, 0.08);
    color: #dc3545;
}

.linkooc-status-badge.pending[b-579oa2bnnb] {
    background: rgba(255, 193, 7, 0.1);
    color: #856404;
}

/* ── Filter Pills ────────────────────────────────────────────────────────── */

.linkooc-filter-pill[b-579oa2bnnb] {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: 9999px;
    background: var(--linkooc-bg, #fff);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--linkooc-text-secondary, #6d6d6d);
    cursor: pointer;
    transition: all 0.15s ease;
}

.linkooc-filter-pill:hover[b-579oa2bnnb] {
    border-color: var(--linkooc-primary, #08781B);
    color: var(--linkooc-primary-ink, #08781B);
}

.linkooc-filter-pill.active[b-579oa2bnnb] {
    background: var(--linkooc-primary, #08781B);
    border-color: var(--linkooc-primary, #08781B);
    color: #fff;
}

/* ── Expanded Message Content ────────────────────────────────────────────── */

.linkooc-expanded-row td[b-579oa2bnnb] {
    background: var(--linkooc-bg-secondary, #f8f9fa);
    padding: 0 !important;
}

.linkooc-message-content[b-579oa2bnnb] {
    max-height: 300px;
    overflow-y: auto;
    background: var(--linkooc-bg, #fff);
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: var(--linkooc-radius-sm, 0.5rem);
    margin: 0.5rem 1rem;
}

/* ── Empty State ─────────────────────────────────────────────────────────── */

.linkooc-empty-state[b-579oa2bnnb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--linkooc-text-muted, #6d6d6d);
}

.linkooc-empty-state i[b-579oa2bnnb] {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.linkooc-empty-state p[b-579oa2bnnb] {
    margin: 0;
    font-size: 0.9375rem;
}

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

@media (max-width: 768px) {
    .linkooc-kpi-row[b-579oa2bnnb] {
        grid-template-columns: repeat(2, 1fr);
    }

    .linkooc-kpi-card[b-579oa2bnnb] {
        padding: 0.875rem;
    }

    .linkooc-kpi-value[b-579oa2bnnb] {
        font-size: 1.25rem;
    }

    .linkooc-kpi-icon[b-579oa2bnnb] {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .linkooc-date-range-select[b-579oa2bnnb] {
        min-width: 140px;
    }

    /* ── Plan 472 (constat F6) : plancher tactile de 44 px ──────────────────
       Mesuré à 390x844 contre la prod : les deux onglets faisaient 147x43 et
       211x43, et la rangée de filtres du détail 34 px de haut. C'est un
       PLANCHER, pas une refonte : 43 -> 44 et 34 -> 44, rien d'autre ne bouge
       (ni la police, ni la couleur, ni la disposition). La rangée reste une
       rangée : pas de <select>, pas de repli (STOP 3 du plan 458).

       min-height plutôt que height : si un jour un libellé passe sur deux
       lignes, le contrôle grandit au lieu d'écraser son texte.
       inline-flex + align-items:center : sans ça, min-height sur un <button>
       laisse le libellé collé en haut.

       Effet de bord mesuré et accepté : passer de inline-block à inline-flex
       fait tomber l'espace blanc entre <i> et le libellé, donc les onglets
       perdent 4 px de LARGEUR (147 -> 143, 211 -> 207 à 390). Aucun libellé
       n'est tronqué, aucune cible ne descend sous 44. */
    .linkooc-usage-tab[b-579oa2bnnb] {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .linkooc-filter-pill[b-579oa2bnnb] {
        min-height: 44px;
        justify-content: center;
    }

    /* Pas de .linkooc-page-title ici : le plan 393 a fixé le titre mobile à
       1.125rem !important dans linkooc-theme.css, pour TOUTES les pages. La règle
       à 1.25rem qui dormait ici derrière une arobase doublée contredisait ce
       choix ; elle était inerte (le !important gagnait) et le serait restée, mais
       la laisser aurait piégé quiconque retire un jour ce !important. */
}
/* /Pages/Admin/UserEdit.razor.rz.scp.css */
/* ═════════════════════════════════════════════════════════════════════
   TABS - Navigation (identique à ItemDetail)
   ═════════════════════════════════════════════════════════════════════ */
.linkooc-page-container .nav-tabs[b-4iddu7qtzs] {
    flex-shrink: 0;
    border-bottom: 1px solid var(--linkooc-border-color, #dee2e6);
    width: 100%;
}

.linkooc-page-container .nav-tabs .nav-link[b-4iddu7qtzs] {
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--linkooc-text-secondary, #6c757d);
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.linkooc-page-container .nav-tabs .nav-link:hover[b-4iddu7qtzs] {
    border-bottom-color: var(--linkooc-border-color, #dee2e6);
    color: var(--linkooc-text-display, #495057);
}

/* ONGLET ACTIF - Barre verte en bas */
.linkooc-page-container .nav-tabs .nav-link.active[b-4iddu7qtzs] {
    color: var(--linkooc-primary-ink, #137825);
    border-bottom-color: var(--linkooc-primary-ink, #137825);
    background-color: transparent;
    font-weight: 500;
}

/* ═════════════════════════════════════════════════════════════════════
   PAGE LAYOUT - Hauteur complète avec save bar fixée en bas
   (même pattern que sidebar-footer dans BackOfficeLayout)
   ═════════════════════════════════════════════════════════════════════ */
.linkooc-page-container[b-4iddu7qtzs] {
    position: relative;
    height: calc(100vh - 80px); /* repli pour les navigateurs sans dvh */
    height: calc(100dvh - 80px); /* viewport dynamique - topbar - padding (piège 452) */
    min-height: 400px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.linkooc-form-content[b-4iddu7qtzs] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* Réserve sous le dernier contrôle. Elle était écrite ici depuis
       toujours, mais l'utilitaire Bootstrap `p-3` du balisage la rendait
       INERTE : Bootstrap écrit ses utilitaires `padding: 1rem !important`,
       et `getComputedStyle(...).paddingBottom` valait donc 16px, pas 70px
       (mesuré, plan 505 — même post-mortem que le plan 459 sur
       EstablishmentEdit). Corrigé côté balisage : `p-3` → `px-3 pt-3`,
       ce qui rend le bord bas au CSS scopé sans avoir à surenchérir en
       `!important`.

       `env(safe-area-inset-bottom)` : au bureau la barre est `absolute` et
       c'est le bas du scrollport qui longe l'encoche. */
    padding-bottom: 70px; /* repli pour les navigateurs sans max()/env() */
    padding-bottom: max(70px, calc(70px + env(safe-area-inset-bottom)));
}

/* Save bar fixée en bas - position absolute */
[b-4iddu7qtzs] .linkooc-sticky-save-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    flex-shrink: 0;
}

/* ═════════════════════════════════════════════════════════════════════
   TÉLÉPHONE — LA BARRE REVIENT DANS LE FLUX

   Pourquoi la seule réserve de 70 px ne suffit PAS ici, en arithmétique :
   sous 576 px `StickySaveBar` passe en colonne et devient `height: auto`
   (StickySaveBar.razor:84-90) — elle mesure alors **105 px**, pas 48.
   Comme elle est HORS FLUX, le scrollport garde toute la hauteur du
   conteneur ; défileur au maximum, le dernier contrôle s'arrête à
   `70 px` du bas et la barre en couvre `105` : il resterait **35 px de
   recouvrement**, et un mou de fin de course NÉGATIF. « Envoyer les
   identifiants » resterait intappable — c'est exactement le F1 du plan 505.

   On ne réserve donc pas un nombre : on remet la barre DANS le flux, et la
   colonne flex rétrécit le scroller de la hauteur EXACTE de la barre,
   quelle qu'elle soit (une ligne d'avertissement en plus ne casse rien).
   C'est le patron déjà éprouvé sur la fiche partenaire
   (Partner.razor.css:110, plans 459/483), et il a le mérite de faire
   tomber le geste qui enregistre sous le pouce.

   Écrit APRÈS la règle de base : une media query n'ajoute aucune
   spécificité, un override placé avant resterait inerte (piège du plan 468).

   `env(safe-area-inset-bottom)` se déplace ici : la barre est désormais le
   dernier élément de la colonne, donc c'est elle qui touche le bord bas.
   ═════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    [b-4iddu7qtzs] .linkooc-sticky-save-bar {
        position: static;
        /* Enfant flex de la colonne : ni grandir ni rétrécir, juste sa
           hauteur naturelle. */
        flex: 0 0 auto;
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    }
}
/* /Pages/Admin/UserManagement.razor.rz.scp.css */
/* Styles spécifiques pour la page de gestion des utilisateurs */

/* Table Matrix */
.matrix-table[b-y6cpsxp7hv] {
    margin-bottom: 0;
}

.matrix-table thead th[b-y6cpsxp7hv] {
    background-color: var(--matrix-background-color, #f8f9fa);
    border-bottom: 2px solid var(--matrix-border-color, #e0e0e0);
    font-weight: 600;
    color: var(--matrix-text-color, #2c3e50);
    padding: 1rem;
}

.matrix-table tbody td[b-y6cpsxp7hv] {
    padding: 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--matrix-border-color, #e0e0e0);
}

.matrix-table tbody tr:hover[b-y6cpsxp7hv] {
    background-color: rgba(102, 126, 234, 0.05);
}

/* Boutons d'action */
.btn-group-sm .btn[b-y6cpsxp7hv] {
    padding: 0.375rem 0.625rem;
}

.btn-group-sm .btn i[b-y6cpsxp7hv] {
    font-size: 0.875rem;
}

/* Modal */
[b-y6cpsxp7hv] .modal-backdrop {
    z-index: 1040;
}

[b-y6cpsxp7hv] .modal {
    z-index: 1050;
}

[b-y6cpsxp7hv] .modal-lg {
    max-width: 800px;
}

[b-y6cpsxp7hv] .modal-dialog-scrollable .modal-body {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

/* Formulaire */
[b-y6cpsxp7hv] .form-label {
    font-weight: 500;
    color: var(--matrix-text-color, #2c3e50);
}

[b-y6cpsxp7hv] .form-control:focus {
    border-color: var(--matrix-primary-color, #667eea);
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

/* Badge rôles */
[b-y6cpsxp7hv] .badge.bg-primary {
    font-size: 0.85rem;
    padding: 0.4em 0.6em;
}

/* Cards utilisateur */
[b-y6cpsxp7hv] .matrix-card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.5rem;
}

[b-y6cpsxp7hv] .matrix-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--matrix-text-color, #2c3e50);
    margin: 0;
}

/* Boutons d'action dans les cartes */
.matrix-action-btn-edit[b-y6cpsxp7hv],
.matrix-action-btn-delete[b-y6cpsxp7hv] {
    transition: all 0.2s ease;
}

.matrix-action-btn-edit:hover[b-y6cpsxp7hv] {
    transform: translateY(-2px);
}

.matrix-action-btn-delete:hover[b-y6cpsxp7hv] {
    transform: translateY(-2px);
}

/* QR Code container */
[b-y6cpsxp7hv] .qr-code-container {
    background-color: white;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Section separator */
[b-y6cpsxp7hv] hr {
    border-color: var(--matrix-border-color, #e0e0e0);
}

/* Checkbox alignment fix */
[b-y6cpsxp7hv] .form-check {
    display: flex;
    align-items: center;
}

[b-y6cpsxp7hv] .form-check-input {
    margin-top: 0;
}

[b-y6cpsxp7hv] .form-check-label {
    margin-bottom: 0;
    margin-left: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   F1 (plan 457) — menu ⋮ de l'en-tête

   Déclarations reprises TELLES QUELLES du patron maison (11 copies existantes,
   référence : ReservationClientsPage.razor.css + son <style>). Aucune valeur
   n'est inventée ici, et surtout aucun `max-width` / `position` / `right` de
   `.linkooc-dropdown-menu` ne diffère de celui des autres pages : l'ancrage
   générique appartient au plan 440, fusionné.

   Les `:where()` : le compilateur ajoute [b-xxxxxxxxxx] en fin de sélecteur,
   ce qui lui ajoute le poids d'une classe. Sans compensation ces règles se
   mettraient à battre des règles globales plus spécifiques (mobile.css,
   linkooc-theme.css, plans 393/399/440) qu'elles doivent perdre. La variante
   `::deep` sert le déclencheur, rendu par Matrix_Button : ce nœud ne porte pas
   l'attribut de portée de cette page.
   ═══════════════════════════════════════════════════════════════════════════ */

.linkooc-dropdown[b-y6cpsxp7hv] {
    position: relative;
}

:where(.linkooc-dropdown-toggle)[b-y6cpsxp7hv]::after,
[b-y6cpsxp7hv] :where(.linkooc-dropdown-toggle)::after {
    content: '';
    display: inline-block;
    margin-left: 0.5rem;
    vertical-align: middle;
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-left: 0.3em solid transparent;
}

:where(.linkooc-dropdown-menu)[b-y6cpsxp7hv],
[b-y6cpsxp7hv] :where(.linkooc-dropdown-menu) {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 1050;
    min-width: 280px;
    background: var(--linkooc-bg, #fff);
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 0.5rem 0;
    animation: linkoocDropdownIn-b-y6cpsxp7hv 0.15s ease-out;
}

@keyframes linkoocDropdownIn-b-y6cpsxp7hv {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.linkooc-dropdown-item[b-y6cpsxp7hv] {
    display: flex;
    align-items: flex-start;
    width: 100%;
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease;
    /* Plancher tactile R12 : chaque entrée du menu est une cible de 44px. */
    min-height: 44px;
}

.linkooc-dropdown-item:hover[b-y6cpsxp7hv] {
    background-color: var(--linkooc-hover-second-bg, #e7f1e8);
}

.linkooc-dropdown-item i[b-y6cpsxp7hv] {
    font-size: 1rem;
    margin-top: 2px;
}

.linkooc-dropdown-item-content[b-y6cpsxp7hv] {
    display: flex;
    flex-direction: column;
}

.linkooc-dropdown-item-content span[b-y6cpsxp7hv] {
    font-size: var(--linkooc-body-size, 0.875rem);
    font-weight: 500;
    color: var(--linkooc-text-display, #000601);
}

.linkooc-dropdown-item-content small[b-y6cpsxp7hv] {
    font-size: var(--linkooc-small-size, 0.75rem);
    color: var(--linkooc-text-muted, #6d6d6d);
}

.linkooc-dropdown-overlay[b-y6cpsxp7hv] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    background: transparent;
}

/* /Pages/AI/AISessions.razor.rz.scp.css */
/* Plan 401 — regles deplacees depuis le <style> global du .razor vers
   l'isolation CSS Blazor. Les declarations sont inchangees.

   Pourquoi les :where() : le compilateur ajoute [b-xxxxxxxxxx] a la fin du
   selecteur, ce qui lui ajoute le poids d'une classe. Sans compensation, ces
   regles se mettraient a battre des regles globales plus specifiques
   (mobile.css, plans 393/399) qu'elles perdaient jusqu'ici. :where() sur la
   premiere classe rend ce poids : la specificite reste exactement celle du
   <style> d'origine, seule la portee change. */

:where(.linkooc-panel-header)[b-ab3kaibizq],
[b-ab3kaibizq] :where(.linkooc-panel-header) {
    height: var(--linkooc-panel-header-height, 56px);
    padding: 0.75rem var(--linkooc-spacing-md, 1rem);
    border-bottom: 1px solid var(--linkooc-border-color, #dee2e6);
    display: flex;
    align-items: center;
    gap: var(--linkooc-spacing-sm, 0.5rem);
    flex-shrink: 0;
    background: var(--linkooc-bg, #fff);
}

:where(.linkooc-detail-title)[b-ab3kaibizq],
[b-ab3kaibizq] :where(.linkooc-detail-title) {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--linkooc-text-display, #000601);
    margin: 0;
}

:where(.linkooc-list-container)[b-ab3kaibizq],
[b-ab3kaibizq] :where(.linkooc-list-container) {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

:where(.linkooc-list-item)[b-ab3kaibizq],
[b-ab3kaibizq] :where(.linkooc-list-item) {
    padding: var(--linkooc-spacing-md, 1rem);
    border-bottom: 1px solid var(--linkooc-border-color, #dee2e6);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: var(--linkooc-spacing-xs, 0.25rem);
    transition: background-color var(--linkooc-transition-fast, 150ms ease);
}

:where(.linkooc-list-item):hover[b-ab3kaibizq],
[b-ab3kaibizq] :where(.linkooc-list-item):hover {
    background-color: var(--linkooc-list-hover-bg, #F7F7F8);
}

:where(.linkooc-empty-state)[b-ab3kaibizq],
[b-ab3kaibizq] :where(.linkooc-empty-state) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: var(--linkooc-spacing-xl, 2rem);
    text-align: center;
    color: var(--linkooc-text-muted, #6d6d6d);
}

:where(.linkooc-mobile-detail)[b-ab3kaibizq],
[b-ab3kaibizq] :where(.linkooc-mobile-detail) {
    background: var(--linkooc-bg, #fff);
}

:where(.linkooc-mobile-detail) .linkooc-detail-content[b-ab3kaibizq],
[b-ab3kaibizq] :where(.linkooc-mobile-detail) .linkooc-detail-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--linkooc-spacing-md, 1rem);
}

:where(.linkooc-dropdown-toggle)[b-ab3kaibizq]::after,
[b-ab3kaibizq] :where(.linkooc-dropdown-toggle)::after {
    content: '';
    display: inline-block;
    margin-left: 0.5rem;
    vertical-align: middle;
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-left: 0.3em solid transparent;
}

:where(.linkooc-dropdown-menu)[b-ab3kaibizq],
[b-ab3kaibizq] :where(.linkooc-dropdown-menu) {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 1050;
    min-width: 280px;
    background: var(--linkooc-bg, #fff);
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 0.5rem 0;
    animation: linkoocDropdownIn 0.15s ease-out;
}

@media (max-width: 768px) {
    /* Plan 440 — la page porte DEUX dropdowns cote a cote (« Utilisation »
       puis « Options »). Le premier n'est pas colle au bord droit : son
       ancrage `right: 0` part du bord droit de SON conteneur, soit ~54px
       avant celui de l'en-tete. Mesure du 2026-08-10 a 390x844 : la carte de
       300px sortait a gauche (left = -26). Le patron `ms-auto` du plan 439 ne
       s'applique pas ici (le dropdown fautif n'est pas le dernier enfant).

       On deplace donc le bloc de reference : `.linkooc-title-right` devient
       le conteneur positionne et les `.linkooc-dropdown` redeviennent
       statiques. `right: 0` vise alors le bord droit de l'en-tete, et
       `top: calc(100% + 4px)` la ligne de boutons — meme rendu qu'avant pour
       « Options », correct pour « Utilisation ». Hors telephone, rien ne
       bouge. */
    :where(.linkooc-title-right)[b-ab3kaibizq],
    [b-ab3kaibizq] :where(.linkooc-title-right) {
        position: relative;
    }

    /* `!important` obligatoire : le markup porte l'utilitaire Bootstrap
       `.position-relative`, qui est lui-meme `!important`. */
    :where(.linkooc-title-right) .linkooc-dropdown[b-ab3kaibizq],
    [b-ab3kaibizq] :where(.linkooc-title-right) .linkooc-dropdown {
        position: static !important;
    }

    :where(.linkooc-list-item)[b-ab3kaibizq],
    [b-ab3kaibizq] :where(.linkooc-list-item) {
        min-height: 44px;
    }

    :where(.linkooc-page-title)[b-ab3kaibizq],
    [b-ab3kaibizq] :where(.linkooc-page-title) {
        font-size: 1.25rem;
    }

    /* ── Plan 464 F11 — 194 px de chrome au-dessus du premier message ────────
       Mesure du 2026-08-12 a 390x844, vue detail (drill-down R14) :

           .linkooc-page-header ....... 61  « Assistant IA (94) » + 2 menus + ⊕
           .linkooc-panel-header ...... 56  UNE fleche 46x44, muette
           .aia-header ................ 77  avatar + nom + date + bouton JSON
           ------------------------------------------------------------------
           total ..................... 194  soit 23 % de l'ecran

       L'en-tete de page decrit la LISTE qu'on vient de quitter : ses trois
       commandes (Utilisation, Options, Nouvelle session) sont a un tap de
       « Retour », et la vue liste les rend intactes — rien n'est retire.
       R14 (« List → Tap → Detail → Back ») ne demande pas de garder l'en-tete
       de la liste au-dessus du detail.

       ECART ASSUME par rapport a la lettre du plan : celui-ci proposait que la
       bande de retour « absorbe l'identite de la session ». Elle ne le fait
       pas, parce que l'inventaire (C7) impose de garder `.aia-header` avec son
       avatar, son nom d'utilisateur et sa date : ecrire « Mathieu Payen ·
       16 juin » deux fois en 125 px serait du bruit. La bande de retour se
       contente donc de ce qui lui manquait — un libelle. La cible mesurable du
       plan (chrome <= 130) est tenue : 0 + 48 + 77 = 125. */
    :where(.linkooc-page-container):has(> .ai-sessions-mobile-detail) > .linkooc-page-header[b-ab3kaibizq],
    [b-ab3kaibizq] :where(.linkooc-page-container):has(> .ai-sessions-mobile-detail) > .linkooc-page-header {
        display: none;
    }

    /* La bande de retour n'a plus a tenir 56 px pour une seule fleche : 44 de
       cible tactile + 2x2 de respiration + 1 de bordure. `height: auto` annule
       le `height: 56px` du .linkooc-panel-header generique plus haut. */
    :where(.ai-sessions-mobile-detail) .ai-sessions-back-bar[b-ab3kaibizq],
    [b-ab3kaibizq] :where(.ai-sessions-mobile-detail) .ai-sessions-back-bar {
        height: auto;
        min-height: 48px;
        padding-top: 0.125rem;
        padding-bottom: 0.125rem;
    }

    /* « ← Retour » : une fleche nue est une affordance muette. Le libelle est
       visible ET double d'un aria-label explicite sur le bouton. */
    :where(.ai-sessions-back-bar) .ai-sessions-back-btn[b-ab3kaibizq],
    [b-ab3kaibizq] :where(.ai-sessions-back-bar) .ai-sessions-back-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        min-height: 44px;
        min-width: 44px;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    :where(.ai-sessions-back-bar) .ai-sessions-back-label[b-ab3kaibizq],
    [b-ab3kaibizq] :where(.ai-sessions-back-bar) .ai-sessions-back-label {
        font-size: 0.875rem;
        font-weight: 500;
        white-space: nowrap;
    }
}

:where(.linkooc-empty-state) i[b-ab3kaibizq],
[b-ab3kaibizq] :where(.linkooc-empty-state) i {
    font-size: var(--linkooc-spacing-2xl, 3rem);
    margin-bottom: var(--linkooc-spacing-md, 1rem);
    opacity: 0.5;
}

:where(.linkooc-empty-state) p[b-ab3kaibizq],
[b-ab3kaibizq] :where(.linkooc-empty-state) p {
    margin: 0;
    font-size: var(--linkooc-list-item-title-size, 0.9375rem);
}
/* /Pages/AI/AISettings.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   /admin/ai-settings — plan 465

   ÉCART ASSUMÉ par rapport à la lettre du plan : celui-ci proposait un bloc
   `<style>` en fin de `.razor`, « comme AISessions.razor et AIAutomations.razor ».
   Ces deux pages ont bien encore un `<style>` — mais AISessions a AUSSI un
   `.razor.css` créé par le plan 401, qui est la direction du dépôt (un
   `<style>` dans un composant Blazor est réémis dans le DOM à chaque rendu et
   fuit hors de la page). Cette page n'avait ni l'un ni l'autre : on part donc
   directement sur l'isolation CSS.

   Pourquoi les `:where()` : le compilateur ajoute `[b-xxxxxxxxxx]` à la fin du
   sélecteur, ce qui lui donne le poids d'une classe en plus. `:where()` sur la
   première classe rend ce poids, pour que ces règles ne se mettent pas à battre
   les filets globaux de `mobile.css` (plans 440 / 464).

   Pourquoi les `::deep` : le déclencheur du menu est rendu par `Matrix_Button`,
   dont le nœud ne porte pas l'attribut de portée de cette page.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── F5 — zone tactile de l'interrupteur « Assistant IA » ──────────────────
   Mesuré le 2026-08-12 à 390×844 : `input.form-check-input[role=switch]` =
   28×14 px, pour la commande qui active ou coupe l'assistant IA de tout
   l'établissement.

   STOP 3 du plan : AUCUNE règle globale `button { min-height: 44px }`, et rien
   sur `.form-check-input` — un `min-height` mal placé avait poussé un champ à
   46 px (post-mortem plan 420). Le plancher va donc sur le conteneur, qui porte
   une classe propre à cette page, et l'`<input>` garde ses 28×14.

   Hors téléphone la règle ne s'applique pas : le bureau ne bouge pas. */
@media (max-width: 768px) {
    :where(.ai-settings-switch)[b-z93vjowvzs],
    [b-z93vjowvzs] :where(.ai-settings-switch) {
        min-height: 44px;
        display: flex;
        align-items: center;
        /* Bootstrap pose le libellé à 2.5em du bord (padding-left du
           `.form-switch` + `float: left` de l'input). En flux flex le float est
           ignoré et le libellé remonte de 0.5em ; ce `gap` le remet exactement
           où il était. Aucun décalage visible par rapport à l'avant. */
        gap: 0.5em;
    }

    /* Ce qui rend la zone réellement actionnable : le libellé `for=` couvre le
       reste de la ligne sur 44 px de haut. Sans lui, un `min-height` sur le
       conteneur n'aurait agrandi qu'un rectangle inerte. */
    :where(.ai-settings-switch) .form-check-label[b-z93vjowvzs],
    [b-z93vjowvzs] :where(.ai-settings-switch) .form-check-label {
        display: flex;
        align-items: center;
        flex: 1;
        min-height: 44px;
        cursor: pointer;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MENU ⋮ OPTIONS — patron canonique du dépôt (R3)
   Déclarations reprises telles quelles de `UserManagement.razor.css`, qui porte
   la version de référence (avec le plancher tactile de 44 px sur les entrées).
   ═══════════════════════════════════════════════════════════════════════════ */

.linkooc-dropdown[b-z93vjowvzs] {
    position: relative;
}

:where(.linkooc-dropdown-toggle)[b-z93vjowvzs]::after,
[b-z93vjowvzs] :where(.linkooc-dropdown-toggle)::after {
    content: '';
    display: inline-block;
    margin-left: 0.5rem;
    vertical-align: middle;
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-left: 0.3em solid transparent;
}

:where(.linkooc-dropdown-menu)[b-z93vjowvzs],
[b-z93vjowvzs] :where(.linkooc-dropdown-menu) {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 1050;
    min-width: 280px;
    background: var(--linkooc-bg, #fff);
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 0.5rem 0;
    animation: linkoocDropdownIn-b-z93vjowvzs 0.15s ease-out;
}

@keyframes linkoocDropdownIn-b-z93vjowvzs {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.linkooc-dropdown-header[b-z93vjowvzs] {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--linkooc-text-muted, #6d6d6d);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.linkooc-dropdown-item[b-z93vjowvzs] {
    display: flex;
    align-items: flex-start;
    width: 100%;
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease;
    /* Plancher tactile R12 : chaque entrée du menu est une cible de 44 px. */
    min-height: 44px;
}

.linkooc-dropdown-item:hover[b-z93vjowvzs] {
    background-color: var(--linkooc-hover-second-bg, #e7f1e8);
}

.linkooc-dropdown-item i[b-z93vjowvzs] {
    font-size: 1rem;
    margin-top: 2px;
}

.linkooc-dropdown-item-content[b-z93vjowvzs] {
    display: flex;
    flex-direction: column;
}

.linkooc-dropdown-item-content span[b-z93vjowvzs] {
    font-size: var(--linkooc-body-size, 0.875rem);
    font-weight: 500;
    color: var(--linkooc-text-display, #000601);
}

.linkooc-dropdown-item-content small[b-z93vjowvzs] {
    font-size: var(--linkooc-small-size, 0.75rem);
    color: var(--linkooc-text-muted, #6d6d6d);
}

.linkooc-dropdown-divider[b-z93vjowvzs] {
    height: 1px;
    margin: 0.25rem 0;
    background-color: var(--linkooc-border-color, #dee2e6);
}

.linkooc-dropdown-overlay[b-z93vjowvzs] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    background: transparent;
}

@media (max-width: 768px) {
    /* Plan 440, repris ici parce que le cas est le même : le ⋮ n'est PAS le
       dernier enfant de l'en-tête (« Enregistrer » le suit), donc son
       `right: 0` s'ancre ~52 px avant le bord droit réel. On déplace le bloc
       de référence sur `.linkooc-title-right` pour que le menu s'aligne sur le
       bord de l'en-tête et reste entièrement dans le viewport à 360 comme à 390.

       `!important` obligatoire : le markup porte l'utilitaire Bootstrap
       `.position-relative`, qui est lui-même `!important`. */
    :where(.linkooc-title-right)[b-z93vjowvzs],
    [b-z93vjowvzs] :where(.linkooc-title-right) {
        position: relative;
    }

    :where(.linkooc-title-right) .linkooc-dropdown[b-z93vjowvzs],
    [b-z93vjowvzs] :where(.linkooc-title-right) .linkooc-dropdown {
        position: static !important;
    }
}
/* /Pages/AutoInsta/Panels/AutoInstaComposerPanel.razor.rz.scp.css */
/* Plan 498 — la galerie de fichiers du compositeur AutoInsta.

   Avant : `style="grid-template-columns: repeat(4, 1fr)"` en dur dans le
   balisage. À 390px les 53 images tombaient à 75×75, sans nom de fichier —
   14 rangées d'un mur de vignettes qu'on ne peut pas lire.

   Après : une grille fluide. Le nombre de colonnes suit la largeur, la vignette
   ne descend jamais sous 96px, et chaque tuile porte le nom du fichier — le
   seul repère quand l'image ne charge pas. Aucune image ne disparaît : la
   disposition change, pas le contenu. */

.ai-picker-grid[b-ul7po0z8ya] {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}

.ai-picker-tile[b-ul7po0z8ya] {
    display: flex;
    flex-direction: column;
    border: var(--linkooc-border-width, 1px) solid var(--linkooc-border-color, #dee2e6);
    border-radius: var(--linkooc-radius-sm, 0.5rem);
    overflow: hidden;
    cursor: pointer;
    background-color: var(--linkooc-surface, #fff);
}

.ai-picker-tile--selected[b-ul7po0z8ya] {
    border-width: 2px;
    border-color: var(--linkooc-button-primary, #08781b);
}

.ai-picker-tile__media[b-ul7po0z8ya] {
    aspect-ratio: 1;
}

/* Le nom du fichier, sur une seule ligne. Il est tronqué par la fin plutôt que
   coupé au milieu comme le faisait l'attribut `alt` débordant de la tuile ;
   l'infobulle de la tuile porte le nom complet. */
.ai-picker-tile__name[b-ul7po0z8ya] {
    padding: 0.125rem 0.25rem;
    font-size: var(--linkooc-small-size, 0.75rem);
    line-height: 1.2;
    color: var(--linkooc-text-secondary, #6c757d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* /Pages/AutoInsta/Panels/AutoInstaDashboardPanel.razor.rz.scp.css */
/* Plan 497 — la bannière de connexion Instagram.
 *
 * Le défaut : le texte et « Reconnecter » sont frères dans un `d-flex` sans
 * retour à la ligne. Le texte prenait la place, le bouton se laissait comprimer
 * (77,3 px à 390, 72,1 à 360, 65,2 à 320) alors que son libellé en réclame 116 —
 * et « Reconnecter » étant UN SEUL MOT, rien ne pouvait le couper : il se
 * peignait hors de la pastille, et la zone cliquable dépassait le bord visible
 * de 16 à 32 px.
 *
 * Ce fichier est le fichier de portée du panneau, PAS `wwwroot/css/mobile.css` :
 * deux plans concurrents s'y sont déjà télescopés le 2026-08-14 en ajoutant
 * chacun leur bloc à la fin du fichier partagé.
 *
 * Toute modification ici oblige à incrémenter l'estampille
 * `LinkoocBackOffice.styles.css?v=` d'`App.razor` — sinon le bundle scoped est
 * resservi depuis le cache et la règle n'arrive jamais.
 */

.lk-ai-banner[b-1xk2x4wowi] {
    /* L'action peut passer à la ligne plutôt que d'écraser le texte. */
    flex-wrap: wrap;
}

/* Seule l'ACTION a le droit de changer de rangée. Sans ces deux règles, le
 * `flex-wrap` ci-dessus renvoyait aussi la phrase à la ligne et laissait le
 * pictogramme seul sur la première rangée : la base `auto` du <span> (sa
 * largeur max-content) ne tenait pas à côté de lui. */
.lk-ai-banner > i[b-1xk2x4wowi] {
    flex-shrink: 0;
}

.lk-ai-banner > span[b-1xk2x4wowi] {
    flex: 1 1 0;
    min-width: 0;
}

.lk-ai-banner__action[b-1xk2x4wowi] {
    /* CE QUI MANQUAIT. Protège aussi le bureau si la phrase s'allonge. */
    flex-shrink: 0;
    /* Le libellé n'a pas à se couper : c'est le bouton qui prend sa largeur. */
    white-space: nowrap;
    /* Remplace le `ms-auto` retiré du balisage : l'action reste collée à droite. */
    margin-left: auto;
}

/* Sous 576 px, le texte garde sa rangée et l'action prend la sienne, pleine
 * largeur. On n'essaie pas de faire tenir les deux côte à côte : à 320 il
 * manquait 50,7 px, aucune compression n'y arrive. */
@media (max-width: 575.98px) {
    .lk-ai-banner__action[b-1xk2x4wowi] {
        flex: 0 0 100%;
        margin-left: 0;
        /* Plancher tactile R12. La règle globale de `mobile.css` le pose déjà
         * pour les `.btn` ; on le redit ici pour que la rangée pleine largeur
         * ne dépende pas d'un fichier partagé. */
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}
/* /Pages/Billing/Billing.razor.rz.scp.css */
/* ============================================
   BILLING GENERATION PAGE - Header Styles
   ============================================ */

/* Header avec fond blanc */
.matrix-header-bar[b-tmjonb2ni4] {
    background-color: #FFFFFF;
}

.matrix-header-content .matrix-header-actions[b-tmjonb2ni4] {
    width: 100%;
}

/* Layout du header */
.billing-generation-header-row[b-tmjonb2ni4] {
    display: flex;
    align-items: center;
    width: 100%;
}

.billing-generation-header-left[b-tmjonb2ni4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Breadcrumb dans le header */
.matrix-header-content .matrix-breadcrumb-item[b-tmjonb2ni4],
.matrix-header-content .matrix-breadcrumb-link[b-tmjonb2ni4],
.matrix-header-content .matrix-breadcrumb-active[b-tmjonb2ni4] {
    font-size: 1.1rem;
    font-weight: 600;
}

/* ============================================
   CONTENU PRINCIPAL
   ============================================ */

/* Réduction des marges du conteneur principal */
.billing-generation-content[b-tmjonb2ni4] {
    padding: 1rem !important;
}

/* ============================================
   CHAMPS DE FORMULAIRE
   ============================================ */

/* ============================================
   DATE DE FACTURATION — bandeau + menu ⋮
   ============================================ */

.billing-refdate-bar[b-tmjonb2ni4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.billing-refdate-chip[b-tmjonb2ni4] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    border-radius: var(--linkooc-radius-lg, 1.5rem);
    background-color: var(--linkooc-hover-bg, #F7F7F8);
    color: var(--linkooc-text, #000601);
    font-size: 0.9rem;
}

/* Une date autre qu'aujourd'hui doit se voir : c'est elle qui datera les factures. */
.billing-refdate-chip--custom[b-tmjonb2ni4] {
    background-color: var(--linkooc-warning-surface, #fff3cd);
    color: var(--linkooc-warning-strong, #9a6700);
}

.billing-refdate-tag[b-tmjonb2ni4] {
    font-size: 0.75rem;
    text-transform: lowercase;
    opacity: 0.75;
}

.billing-refdate-warning[b-tmjonb2ni4] {
    font-size: 0.85rem;
    color: var(--linkooc-warning-strong, #9a6700);
}

.billing-refdate-menu-wrap[b-tmjonb2ni4] {
    position: relative;
}

.billing-refdate-kebab[b-tmjonb2ni4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: transparent;
    color: var(--linkooc-text, #000601);
    transition: background-color var(--linkooc-transition-fast, 0.15s ease);
}

.billing-refdate-kebab:hover[b-tmjonb2ni4],
.billing-refdate-kebab.is-open[b-tmjonb2ni4] {
    background-color: var(--linkooc-hover-bg, #F7F7F8);
}

.billing-refdate-menu[b-tmjonb2ni4] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1000;
    min-width: 230px;
    padding: 0.25rem;
    border: 1px solid var(--linkooc-border-color, #dee2e6bf);
    border-radius: var(--linkooc-radius-sm, 0.5rem);
    background-color: #FFFFFF;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.billing-refdate-menu-item[b-tmjonb2ni4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: none;
    border-radius: var(--linkooc-radius-sm, 0.5rem);
    background-color: transparent;
    color: var(--linkooc-text, #000601);
    font-size: 0.875rem;
    text-align: left;
}

.billing-refdate-menu-item:hover[b-tmjonb2ni4] {
    background-color: var(--linkooc-hover-bg, #F7F7F8);
}

/* Largeur standard pour le DatePicker de date de référence */
.billing-date-picker-wrapper[b-tmjonb2ni4] {
    max-width: 300px;
    width: 100%;
}

.billing-date-picker-wrapper .Matrix_FormField[b-tmjonb2ni4] {
    width: 100%;
}

.billing-date-picker-wrapper .Matrix_DatePicker[b-tmjonb2ni4] {
    width: 100% !important;
    max-width: 100% !important;
}

.billing-date-picker-wrapper .k-datepicker[b-tmjonb2ni4],
.billing-date-picker-wrapper .k-datepicker input[b-tmjonb2ni4] {
    width: 100% !important;
    max-width: 100% !important;
}

/* ============================================
   SÉLECTION DES ABONNEMENTS À FACTURER
   ============================================ */

/* Ce geste-là décide quels abonnements partiront en facture : c'est
   l'interaction centrale de la page, et la seule irréversible en aval.
   Le <label> enveloppe la case pour que la zone touchée soit la sienne, et non
   les 13x13 du widget natif. Sur bureau il ne change rien (il se contente
   d'épouser la case) ; c'est le bloc mobile plus bas qui l'étend à 44x44. */
.billing-select-hit[b-tmjonb2ni4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    cursor: pointer;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    /* ── Constat F6 du plan 485 : ouvrir la facture au doigt ───────────────
       Le lien « N° de facture » de la table « Factures émises à envoyer » est le
       SEUL chemin vers la facture depuis cette section : les deux autres commandes
       de la ligne (« Envoyer », « Marquer comme envoyée ») ÉCRIVENT. Rater la
       cible de quelques pixels, ce n'est donc pas rater une navigation, c'est
       tomber sur une action irréversible.
       Mesuré à 390x844 sur les trois lignes réelles : 47x38, 46x38 et 44x38 —
       sous le plancher R12 de 44 px, et c'est la première colonne, donc la
       première cible qu'un pouce vise.
       Même doctrine que .billing-select-hit ci-dessus : le contenu ne bouge pas
       (ni graisse ni taille de police), c'est la SURFACE TAPABLE qui monte à 44.
       Ici la cible est un <a>, qui — contrairement à l'<input> du plan 469 —
       accepte les pseudo-éléments : une surcouche ::after absolue et centrée ne
       participe à aucun flux, donc la hauteur des lignes du tableau (dictée par
       les boutons de 44 de la colonne Action) ne bouge pas d'un pixel, et aucune
       marge négative n'est à accorder au padding de la cellule (STOP #5).
       Le <strong> reste à l'intérieur du lien (STOP #2) : rien ici ne le touche.
       `width: 100%` + `min-width: 44px` plutôt qu'un 44 fixe : les numéros
       mesurent 44 à 47 px de large, et un carré de 44 posé au centre d'un texte
       de 47 laisserait les deux coins du texte hors de la zone tapable — la
       surcouche épouse donc la largeur du lien et ne monte à 44 que si elle est
       plus étroite. Elle ne déborde ainsi jamais sur « Compte de facturation ». */
    .billing-invoice-hit[b-tmjonb2ni4] {
        position: relative;
    }

    .billing-invoice-hit[b-tmjonb2ni4]::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        min-width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
    }

    /* ── Constat F5 du plan 469 : cocher au doigt ──────────────────────────
       Mesuré à 390x844 : les 6 cases de ligne ET celle de l'en-tête faisaient
       13x13, très loin du plancher R12 de 44 px. On n'agrandit PAS le carré au
       point de transformer le tableau en formulaire (STOP #6) : la case reste un
       widget de 20 px, c'est la SURFACE TAPABLE du <label> qui passe à 44x44.
       Les marges négatives absorbent le padding de la cellule pour que la ligne
       du tableau ne grandisse pas au-delà de ces 44 px. */
    .billing-select-hit[b-tmjonb2ni4] {
        display: flex;
        width: 44px;
        height: 44px;
        margin: -0.5rem;
    }

    .billing-select-hit input[type="checkbox"][b-tmjonb2ni4] {
        width: 20px;
        height: 20px;
        flex: 0 0 auto;
    }

    /* ── Constat F6 du plan 469 : ramener le menu ⋮ dans l'écran ───────────
       Mesuré ouvert : à 390 le menu sortait de 166 px, à 360 il tenait — parce
       que la ligne flex du bandeau ne s'enroule pas au même endroit et que le
       kebab ne se retrouve donc pas au même x. Ancrer le menu sur le kebab
       (à gauche comme à droite) reproduit le bug à l'autre extrémité : le seul
       ancrage qui tienne quel que soit l'enroulement est celui du BANDEAU, qui
       fait toute la largeur du contenu. On neutralise donc le
       `position: relative` du -wrap et on le porte sur le -bar.
       Pas de 100vh ni de 100vw ici : la largeur vient du bandeau lui-même. */
    .billing-refdate-bar[b-tmjonb2ni4] {
        position: relative;
    }

    .billing-refdate-menu-wrap[b-tmjonb2ni4] {
        position: static;
    }

    .billing-refdate-menu[b-tmjonb2ni4] {
        left: 0;
        right: 0;
        min-width: 0;
    }

    /* R12 — le kebab et les entrées du menu passent le plancher des 44 px. */
    .billing-refdate-kebab[b-tmjonb2ni4] {
        width: 44px;
        height: 44px;
    }

    .billing-refdate-menu-item[b-tmjonb2ni4] {
        min-height: 44px;
    }
}

@media (max-width: 576px) {
    .billing-generation-header-row[b-tmjonb2ni4] {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* /Pages/Billing/BillingAccount.razor.rz.scp.css */
/* ═════════════════════════════════════════════════════════════════════
   TABS - Navigation (identique à ItemDetail)
   ═════════════════════════════════════════════════════════════════════ */
.linkooc-page-container .nav-tabs[b-ucf6t5ejgh] {
    flex-shrink: 0;
    border-bottom: 1px solid var(--linkooc-border-color, #dee2e6);
    width: 100%;
}

.linkooc-page-container .nav-tabs .nav-link[b-ucf6t5ejgh] {
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--linkooc-text-secondary, #6c757d);
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.linkooc-page-container .nav-tabs .nav-link:hover[b-ucf6t5ejgh] {
    border-bottom-color: var(--linkooc-border-color, #dee2e6);
    color: var(--linkooc-text-display, #495057);
}

/* ONGLET ACTIF - Barre verte en bas */
.linkooc-page-container .nav-tabs .nav-link.active[b-ucf6t5ejgh] {
    color: var(--linkooc-primary-ink, #137825);
    border-bottom-color: var(--linkooc-primary-ink, #137825);
    background-color: transparent;
    font-weight: 500;
}

/* ═════════════════════════════════════════════════════════════════════
   PAGE LAYOUT - Hauteur complète avec save bar fixée en bas
   (même pattern que sidebar-footer dans BackOfficeLayout)
   ═════════════════════════════════════════════════════════════════════ */
.linkooc-page-container[b-ucf6t5ejgh] {
    position: relative;
    height: calc(100vh - 80px); /* viewport - topbar - padding */
    min-height: 400px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.linkooc-form-content[b-ucf6t5ejgh] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 70px; /* Réserve l'espace pour la barre */
}

/* Save bar fixée en bas - position absolute */
[b-ucf6t5ejgh] .linkooc-sticky-save-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    flex-shrink: 0;
}

/* ═════════════════════════════════════════════════════════════════════
   F1 / F2 (plan 477) — LA BARRE D'ENREGISTREMENT NE PEINT PLUS SUR LE
   FORMULAIRE

   Règle PORTÉE TELLE QUELLE depuis Pages/Billing/EstablishmentEdit.razor.css
   (F5 du plan 459). Le 459 avait diagnostiqué et corrigé le défaut, mais son
   correctif a été écrit SCOPÉ à la fiche établissement, pas en règle globale :
   ce fichier portait donc le même défaut mot pour mot. Le rationnel complet
   est écrit là-bas et reste la référence ; en deux lignes, les deux causes
   empilées :

     1. la barre est `position: absolute` (règle juste au-dessus), donc HORS
        FLUX : la colonne flex ne la voit pas et ne lui réserve rien ;
     2. la réserve censée compenser — `padding-bottom: 70px` ci-dessus — est
        INERTE : l'élément porte aussi l'utilitaire Bootstrap `p-3`, écrit
        `padding: 1rem !important`, qu'un `padding-bottom` sans `!important`
        ne peut pas battre. Mesuré en vivant à 390x844 : 16 px, pas 70.

   Le `70px` inerte est LAISSÉ EN PLACE (choix consigné, cf. tâche F1 du plan) :
   il est sans effet à toutes les largeurs, et c'est la règle `!important`
   ci-dessous qui pose la vraie réserve là où elle sert.

   Le correctif ne réserve PAS un nombre de pixels : il remet la barre DANS le
   flux sous 768 px, et la colonne flex rétrécit alors le scroller de la hauteur
   EXACTE de la barre, quelle qu'elle soit (105 px mesurés à 390, la barre
   s'empilant en colonne sous 576 px — StickySaveBar.razor:84). Rien à
   recalculer si la barre change de contenu. Pas de hauteur en dur, pas de
   `100vh` (pièges des plans 452 / 459 / 461).

   `env(safe-area-inset-bottom)` va sur la barre elle-même : elle est désormais
   le dernier élément de la colonne, donc c'est elle qui touche le bord bas.
   ═════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    [b-ucf6t5ejgh] .linkooc-sticky-save-bar {
        position: static;
        /* Enfant flex de la colonne : ni grandir ni rétrécir, seulement
           occuper sa hauteur naturelle. */
        flex: 0 0 auto;
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    }

    /* Mou de fin de course (tâche optionnelle du plan 477) : mesuré à 17 px sur
       la page de création, 34 px (Général) et 24 px (Banque) sur la fiche —
       sous les 40 px de la règle. `!important` est OBLIGATOIRE ici, sinon `p-3`
       gagne exactement comme il neutralisait déjà les 70 px ci-dessus. Le
       sélecteur scopé (0,2,0) bat `.p-3` (0,1,0) à égalité de `!important`. */
    .linkooc-form-content[b-ucf6t5ejgh] {
        padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* /Pages/Billing/BillingAccounts.razor.rz.scp.css */
/* ============================================
   BILLING ACCOUNTS PAGE - Linkooc Visual Identity
   Uses global styles from linkooc-theme.css
   ============================================ */

/* ── Plan 478 F4 — menu « Options » d'en-tête ────────────────────────────────
   Le patron `.linkooc-dropdown` n'a AUCUNE feuille globale : depuis le plan 401
   chaque page en porte sa copie scoped. Celle-ci est volontairement préfixée
   par `.billing-options-dropdown` — un `.linkooc-dropdown-menu` nu toucherait
   aussi la feuille ⋮ des lignes compactes, qui porte les deux classes
   (`linkooc-dropdown-menu matrix-compact-menu-list`), et la décollerait du bas
   de l'écran : exactement ce que STOP 3 interdit.

   Sous 768px, linkooc-theme.css prend le relais sur le déclencheur (libellé
   masqué, glyphe ⋮ via le doublet `--options`, carré 44×44, caret retiré) :
   rien à répéter ici. */
.billing-options-dropdown .linkooc-dropdown-toggle[b-cmlkafftn5]::after {
    content: '';
    display: inline-block;
    margin-left: 0.5rem;
    vertical-align: middle;
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-left: 0.3em solid transparent;
}

.billing-options-dropdown .linkooc-dropdown-menu[b-cmlkafftn5] {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 1050;
    min-width: 280px;
    background: var(--linkooc-bg, #fff);
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 0.5rem 0;
}

.billing-options-dropdown .linkooc-dropdown-item[b-cmlkafftn5] {
    display: flex;
    align-items: flex-start;
    width: 100%;
    /* R12 — plancher tactile, comme les entrées de la feuille ⋮ de ligne. */
    min-height: 44px;
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.billing-options-dropdown .linkooc-dropdown-item:hover[b-cmlkafftn5] {
    background-color: var(--linkooc-hover-second-bg, #e7f1e8);
}

.billing-options-dropdown .linkooc-dropdown-item i[b-cmlkafftn5] {
    font-size: 1rem;
    margin-top: 2px;
}

.billing-options-dropdown .linkooc-dropdown-item-content[b-cmlkafftn5] {
    display: flex;
    flex-direction: column;
}

.billing-options-dropdown .linkooc-dropdown-item-content span[b-cmlkafftn5] {
    font-size: var(--linkooc-body-size, 0.875rem);
    font-weight: 500;
    color: var(--linkooc-text-display, #000601);
}

.billing-options-dropdown .linkooc-dropdown-item-content small[b-cmlkafftn5] {
    font-size: var(--linkooc-small-size, 0.75rem);
    color: var(--linkooc-text-muted, #6d6d6d);
}

.billing-options-dropdown .linkooc-dropdown-overlay[b-cmlkafftn5] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    background: transparent;
}

/* ── Plan 478 F6 — le titre de la feuille ⋮ de ligne ─────────────────────────
   La feuille s'ouvre en bas de l'écran, à ~465 px de la ligne touchée : elle
   doit dire de quel compte elle parle. Non cliquable (`pointer-events: none`),
   non focusable (aucun `tabindex`, ce n'est pas un contrôle), tronqué sur une
   ligne si le nom déborde.
   Le `::deep` double la règle : le fragment est écrit ici mais rendu dans
   Matrix_Grid — les deux formes couvrent le cas où l'attribut de portée tombe
   sur un ancêtre plutôt que sur l'élément lui-même. */
.matrix-compact-menu-title[b-cmlkafftn5],
[b-cmlkafftn5] .matrix-compact-menu-title {
    padding: 0.5rem 1rem 0.375rem;
    font-size: var(--linkooc-small-size, 0.75rem);
    font-weight: 600;
    line-height: 1.2;
    color: var(--linkooc-text-muted, #6d6d6d);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid var(--linkooc-border-color, #dee2e6);
    pointer-events: none;
}

/* Plan 817 — ce qui retient un compte : une vraie liste à puces (le reset global retire les puces). */
.delete-blockers[b-cmlkafftn5] {
    list-style: disc;
    padding-left: 1.25rem;
}

.delete-blockers li[b-cmlkafftn5] {
    display: list-item;
    list-style: disc;
}
/* /Pages/Billing/Client.razor.rz.scp.css */
/* ============================================
   CLIENT PAGE - Header Styles
   ============================================ */

/* Header avec fond blanc */
.matrix-header-bar[b-je272b2axk] {
    background-color: #FFFFFF;
}

.matrix-header-content .matrix-header-actions[b-je272b2axk] {
    width: 100%;
}

/* Breadcrumb dans le header */
.matrix-header-content .matrix-breadcrumb-item[b-je272b2axk],
.matrix-header-content .matrix-breadcrumb-link[b-je272b2axk],
.matrix-header-content .matrix-breadcrumb-active[b-je272b2axk] {
    font-size: 1.1rem;
    font-weight: 600;
}

/* ============================================
   CONTENU PRINCIPAL
   ============================================ */

/* Réduction des marges du conteneur principal */
.matrix-content[b-je272b2axk] {
    padding: 1rem !important;
}

/* ═════════════════════════════════════════════════════════════════════
   TABS - Navigation (same style as ItemDetail)
   ═════════════════════════════════════════════════════════════════════ */
.linkooc-page-container .nav-tabs[b-je272b2axk] {
    flex-shrink: 0;
    border-bottom: 1px solid var(--linkooc-border-color, #dee2e6);
    width: 100%;
}

.linkooc-page-container .nav-tabs .nav-link[b-je272b2axk] {
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--linkooc-text-secondary, #6c757d);
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.linkooc-page-container .nav-tabs .nav-link:hover[b-je272b2axk] {
    border-bottom-color: var(--linkooc-border-color, #dee2e6);
    color: var(--linkooc-text-display, #495057);
}

.linkooc-page-container .nav-tabs .nav-link.active[b-je272b2axk] {
    color: var(--linkooc-primary-ink, #137825);
    border-bottom-color: var(--linkooc-primary-ink, #137825);
    background-color: transparent;
    font-weight: 500;
}

/* ═════════════════════════════════════════════════════════════════════
   PAGE LAYOUT - Full height with save bar fixed at bottom
   Same pattern as sidebar-footer in BackOfficeLayout
   ═════════════════════════════════════════════════════════════════════ */
.linkooc-page-container[b-je272b2axk] {
    position: relative;
    height: calc(100vh - 80px); /* viewport - topbar (~48px) - content padding (~32px) */
    min-height: 400px; /* Minimum usable height */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Prevent content from pushing out */
}

.linkooc-form-content[b-je272b2axk] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* Reserve space for sticky bar when it's visible */
    padding-bottom: 70px;
}

/* Save bar fixed at bottom - same pattern as sidebar-footer */
[b-je272b2axk] .linkooc-sticky-save-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    flex-shrink: 0;
}

/* ═════════════════════════════════════════════════════════════════════
   F1 / F2 (plan 477) — LA BARRE D'ENREGISTREMENT NE PEINT PLUS SUR LE
   FORMULAIRE

   Règle PORTÉE TELLE QUELLE depuis Pages/Billing/EstablishmentEdit.razor.css
   (F5 du plan 459). Le 459 avait diagnostiqué et corrigé le défaut, mais son
   correctif a été écrit SCOPÉ à la fiche établissement, pas en règle globale :
   ce fichier portait donc le même défaut mot pour mot. Le rationnel complet
   est écrit là-bas et reste la référence ; en deux lignes, les deux causes
   empilées :

     1. la barre est `position: absolute` (règle juste au-dessus), donc HORS
        FLUX : la colonne flex ne la voit pas et ne lui réserve rien ;
     2. la réserve censée compenser — `padding-bottom: 70px` ci-dessus — est
        INERTE : l'élément porte aussi l'utilitaire Bootstrap `p-3`, écrit
        `padding: 1rem !important`, qu'un `padding-bottom` sans `!important`
        ne peut pas battre. Mesuré en vivant à 390x844 : 16 px, pas 70.

   Le `70px` inerte est LAISSÉ EN PLACE (choix consigné, cf. tâche F1 du plan) :
   il est sans effet à toutes les largeurs, et c'est la règle `!important`
   ci-dessous qui pose la vraie réserve là où elle sert.

   Le correctif ne réserve PAS un nombre de pixels : il remet la barre DANS le
   flux sous 768 px, et la colonne flex rétrécit alors le scroller de la hauteur
   EXACTE de la barre, quelle qu'elle soit (105 px mesurés à 390, la barre
   s'empilant en colonne sous 576 px — StickySaveBar.razor:84). Rien à
   recalculer si la barre change de contenu. Pas de hauteur en dur, pas de
   `100vh` (pièges des plans 452 / 459 / 461).

   `env(safe-area-inset-bottom)` va sur la barre elle-même : elle est désormais
   le dernier élément de la colonne, donc c'est elle qui touche le bord bas.
   ═════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    [b-je272b2axk] .linkooc-sticky-save-bar {
        position: static;
        /* Enfant flex de la colonne : ni grandir ni rétrécir, seulement
           occuper sa hauteur naturelle. */
        flex: 0 0 auto;
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    }

    /* Mou de fin de course (tâche optionnelle du plan 477) : mesuré à 17 px sur
       la page de création et 24-34 px sur la fiche — sous les 40 px de la
       règle. `!important` est OBLIGATOIRE ici, sinon `p-3` gagne exactement
       comme il neutralisait déjà les 70 px ci-dessus. Le sélecteur scopé
       (0,2,0) bat `.p-3` (0,1,0) à égalité de `!important`. */
    .linkooc-form-content[b-je272b2axk] {
        padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* /Pages/Billing/Clients.razor.rz.scp.css */
/* ============================================
   CLIENTS PAGE - Linkooc Visual Identity
   Uses global styles from linkooc-theme.css
   ============================================ */

/* ── Plan 478 F4 — menu « Options » d'en-tête ────────────────────────────────
   Copie scoped du patron `.linkooc-dropdown` (plan 401 : il n'existe aucune
   feuille globale pour ce patron). Le préfixe `.billing-options-dropdown` est
   obligatoire : un `.linkooc-dropdown-menu` nu toucherait aussi la feuille ⋮
   des lignes compactes, qui porte les deux classes, et la décollerait du bas
   de l'écran — STOP 3 du plan 478.

   Sous 768px, linkooc-theme.css restyle le déclencheur (libellé masqué, ⋮ via
   le doublet `--options`, carré 44×44, caret retiré). */
.billing-options-dropdown .linkooc-dropdown-toggle[b-v10yazpsd7]::after {
    content: '';
    display: inline-block;
    margin-left: 0.5rem;
    vertical-align: middle;
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-left: 0.3em solid transparent;
}

.billing-options-dropdown .linkooc-dropdown-menu[b-v10yazpsd7] {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 1050;
    min-width: 280px;
    background: var(--linkooc-bg, #fff);
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 0.5rem 0;
}

.billing-options-dropdown .linkooc-dropdown-item[b-v10yazpsd7] {
    display: flex;
    align-items: flex-start;
    width: 100%;
    /* R12 — plancher tactile. */
    min-height: 44px;
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.billing-options-dropdown .linkooc-dropdown-item:hover[b-v10yazpsd7] {
    background-color: var(--linkooc-hover-second-bg, #e7f1e8);
}

.billing-options-dropdown .linkooc-dropdown-item i[b-v10yazpsd7] {
    font-size: 1rem;
    margin-top: 2px;
}

.billing-options-dropdown .linkooc-dropdown-item-content[b-v10yazpsd7] {
    display: flex;
    flex-direction: column;
}

.billing-options-dropdown .linkooc-dropdown-item-content span[b-v10yazpsd7] {
    font-size: var(--linkooc-body-size, 0.875rem);
    font-weight: 500;
    color: var(--linkooc-text-display, #000601);
}

.billing-options-dropdown .linkooc-dropdown-item-content small[b-v10yazpsd7] {
    font-size: var(--linkooc-small-size, 0.75rem);
    color: var(--linkooc-text-muted, #6d6d6d);
}

.billing-options-dropdown .linkooc-dropdown-overlay[b-v10yazpsd7] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    background: transparent;
}

/* ── Plan 478 F6 — le titre de la feuille ⋮ de ligne ─────────────────────────
   Même forme qu'à /billing-accounts : la feuille dit de quel client elle
   parle. Non cliquable, non focusable, tronqué sur une ligne. */
.matrix-compact-menu-title[b-v10yazpsd7],
[b-v10yazpsd7] .matrix-compact-menu-title {
    padding: 0.5rem 1rem 0.375rem;
    font-size: var(--linkooc-small-size, 0.75rem);
    font-weight: 600;
    line-height: 1.2;
    color: var(--linkooc-text-muted, #6d6d6d);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid var(--linkooc-border-color, #dee2e6);
    pointer-events: none;
}
/* /Pages/Billing/Components/AccountDiscountsTab.razor.rz.scp.css */
/* Plan 548 — en-tête de la section « Remises permanentes ».

   Même règle que `.partner-commissions__sechead` (plan 484) : ligne titre +
   bouton au bureau, empilement en dessous de 768px pour que « Ajouter une
   remise » ne s'enroule pas sur quatre lignes à 360px. */

.account-discounts__sechead[b-sddbv73hn7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--linkooc-spacing-md, 1rem);
}

@media (max-width: 767.98px) {
    .account-discounts__sechead[b-sddbv73hn7] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--linkooc-spacing-sm, 0.5rem);
    }
}
/* /Pages/Billing/Components/AccountInvoicesTab.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   Onglet « Factures » d'un compte de facturation (plan 325)
   ═══════════════════════════════════════════════════════════════════════════ */

.account-invoices-summary[b-r8glens6ek] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.account-summary-card[b-r8glens6ek] {
    flex: 1 1 180px;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--linkooc-border, #e5e7eb);
    border-radius: 0.5rem;
    background-color: var(--linkooc-hover-bg, #f7f7f8);
}

.account-summary-card-danger[b-r8glens6ek] {
    border-color: #f5c2c7;
    background-color: #fdf0f1;
}

.account-summary-label[b-r8glens6ek] {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--linkooc-text-secondary, #6d6d6d);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.account-summary-value[b-r8glens6ek] {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--linkooc-text-primary, #212529);
    line-height: 1.2;
}

.account-summary-card-danger .account-summary-value[b-r8glens6ek] {
    color: var(--linkooc-red-var-2, #a11111);
}

.account-summary-hint[b-r8glens6ek] {
    font-size: 0.75rem;
    color: var(--linkooc-text-secondary, #6d6d6d);
}

.account-summary-hint-danger[b-r8glens6ek] {
    color: var(--linkooc-red-var-2, #a11111);
    font-weight: 500;
}

/* ── Table ─────────────────────────────────────────────────────────────────── */

.account-invoices-table[b-r8glens6ek] {
    border: 1px solid var(--linkooc-border, #e5e7eb);
    border-radius: 0.5rem;
    /* ── F10 (plan 477) : LA COLONNE « PAYÉ » N'EST PLUS INATTEIGNABLE ────────
       Ici se trouvait `overflow: hidden`, posé pour arrondir les coins. Il
       arrondissait bien — mais il écrasait aussi l'`overflow-x: auto` que
       Bootstrap pose sur `.table-responsive`, qui est LE MÊME ÉLÉMENT
       (AccountInvoicesTab.razor:63 : `class="table-responsive
       account-invoices-table"`). Le sélecteur scopé Blazor
       `.account-invoices-table[b-xxxxx]` est plus spécifique que `.table-responsive`
       et gagnait donc.

       Mesuré en vivant à 390x844 sur /billing-account/8 : table de 420 px dans
       une boîte de 356, la colonne « Payé » commençant à x=390 et débordant de
       63 px, et un VRAI balayage (mouse.down + 8 move + up) déplaçant
       `scrollLeft` de 0 à 0 pour un maximum de 64. La colonne n'était pas
       « difficile à atteindre », elle était INATTEIGNABLE. Au bureau 1440 la
       boîte fait 1206/1206 : le défaut était purement mobile.

       Le remplacement rend le défilement horizontal SANS perdre l'arrondi :
       c'est `overflow-y` qui rognait verticalement, et un `border-radius` sur
       un conteneur qui défile horizontalement se comporte correctement.
       Aucune colonne retirée, aucune police réduite (STOP 1 du plan).

       L'INDICE de défilement (procédé R7b) n'est délibérément PAS redéposé
       ici : le plan 469 l'a déjà écrit une fois pour tous les
       `.table-responsive` sous 768 px (wwwroot/css/mobile.css, « une table
       large doit DIRE qu'elle continue »), et cet élément EN EST un. Le dupliquer
       scopé aurait donné deux recettes pour un seul effet — le plan demande de
       copier le procédé, pas de le réinventer, et la meilleure copie est ici
       celle qu'on n'écrit pas. Les couches R7b utilisent `background-image`, que
       cette règle ne déclare pas : aucun conflit. */
    overflow-x: auto;
    overflow-y: hidden;
}

.account-invoices-table table[b-r8glens6ek] {
    font-size: 0.875rem;
}

.account-invoices-table thead th[b-r8glens6ek] {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--linkooc-text-secondary, #6d6d6d);
    background-color: var(--linkooc-hover-bg, #f7f7f8);
    white-space: nowrap;
}

.account-invoice-link[b-r8glens6ek] {
    color: var(--linkooc-blue-var-2, #1167a1);
    font-weight: 600;
    text-decoration: none;
}

.account-invoice-link:hover[b-r8glens6ek] {
    text-decoration: underline;
}

.account-invoice-credit[b-r8glens6ek] {
    color: var(--linkooc-red-var-2, #a11111);
}

.account-invoice-paid-date[b-r8glens6ek] {
    display: block;
    font-size: 0.7rem;
    color: var(--linkooc-text-secondary, #6d6d6d);
}

/* Brouillons et factures annulées : atténués, hors totaux. */
.account-invoice-row-muted td[b-r8glens6ek] {
    opacity: 0.55;
}
/* /Pages/Billing/Components/BillingAccountForm.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   Prélèvement SEPA — stepper 3 étapes (plan 360)
   Tokens --linkooc-* uniquement, avec repli pour les thèmes qui ne les portent pas.
   ═══════════════════════════════════════════════════════════════════════════ */

.sepa-stepper[b-wz6gtfsc8z] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.sepa-step[b-wz6gtfsc8z] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    color: var(--linkooc-text-secondary, #6d6d6d);
    white-space: nowrap;
}

.sepa-step-mark[b-wz6gtfsc8z] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 9999px;
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    background: var(--linkooc-surface, #f6f7f8);
    color: var(--linkooc-text-secondary, #6d6d6d);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}

/* Étape franchie */
.sepa-step.done .sepa-step-mark[b-wz6gtfsc8z] {
    border-color: var(--linkooc-primary, #08781B);
    background: var(--linkooc-primary, #08781B);
    color: #fff;
}

.sepa-step.done .sepa-step-title[b-wz6gtfsc8z] {
    color: var(--linkooc-text-secondary, #6d6d6d);
}

/* Parcours terminé : la dernière étape est « done » elle aussi (coche verte),
   mais son titre reste mis en avant — c'est l'état final, pas une étape dépassée.
   Ne s'applique que quand le mandat est actif : sinon la dernière étape est « todo ». */
.sepa-step.done:last-of-type .sepa-step-title[b-wz6gtfsc8z] {
    color: var(--linkooc-text-primary, #212529);
    font-weight: 600;
}

/* Étape courante — la seule mise en avant */
.sepa-step.current .sepa-step-mark[b-wz6gtfsc8z] {
    border-color: var(--linkooc-primary, #08781B);
    background: var(--linkooc-bg, #fff);
    color: var(--linkooc-primary-ink, #08781B);
    box-shadow: 0 0 0 3px rgba(8, 120, 27, 0.12);
}

.sepa-step.current .sepa-step-title[b-wz6gtfsc8z] {
    color: var(--linkooc-text-primary, #212529);
    font-weight: 600;
}

/* Étape à venir : volontairement discrète */
.sepa-step.todo .sepa-step-mark[b-wz6gtfsc8z],
.sepa-step.todo .sepa-step-title[b-wz6gtfsc8z] {
    opacity: 0.6;
}

.sepa-step-line[b-wz6gtfsc8z] {
    flex: 0 1 2.5rem;
    min-width: 1rem;
    height: 1px;
    background: var(--linkooc-border-color, #dee2e6);
}

.sepa-step-line.done[b-wz6gtfsc8z] {
    background: var(--linkooc-primary, #08781B);
}

.sepa-state-sentence[b-wz6gtfsc8z] {
    font-size: 0.875rem;
    color: var(--linkooc-text-secondary, #6d6d6d);
}

/* ═══════════════════════════════════════════════════════════════════════════
   F8 (plan 477) — L'INTERRUPTEUR DES MODALS « Ajouter un partenaire » /
   « Modifier l'association »

   Mesuré en vivant à 390x844 : la cible tactile réelle est le `<label>` de
   `Matrix_Switch` (l'`<input>` fait 0x0, masqué par `.custom-switch`), et il
   mesure 80 x 40 — sous le plancher de 44 px. Et le libellé rendu à côté de
   « Active » est littéralement le mot « Toggle », écrit en dur dans
   Matrix_Switch.razor:18.

   Le composant `Matrix_Switch` est PARTAGÉ bien au-delà de la facturation :
   STOP 5 du plan interdit d'y toucher. Tout se fait donc d'ici, et uniquement
   dans les modals de ce périmètre — la portée `.modal-body` exclut d'office
   l'interrupteur « Actif / Inactif » de la fiche elle-même, qui n'est pas dans
   un modal et n'est pas dans ce périmètre.

   ⚠️ Ce n'est PAS le composant du F5 du plan 465 (`/admin/ai-settings`, un
   `input.form-check-input[role=switch]` Bootstrap nu). Ne pas confondre.
   ═══════════════════════════════════════════════════════════════════════════ */

.modal-body[b-wz6gtfsc8z]  .Matrix_Switch label[for="partnerIsActive"] {
    /* Cible tactile portée à 44 px SANS grossir la pastille : la hauteur de la
       piste reste celle du composant (`height: var(--switch-height)` = 40 px),
       on ajoute 2 px de padding en haut et en bas — donc la boîte de bordure,
       c'est-à-dire la zone réellement cliquable, passe à 44 — et
       `background-clip: content-box` garde le gris peint sur les 40 px.
       `box-sizing` doit être forcé : Bootstrap pose `border-box` sur tout, et
       le padding serait sinon pris DANS les 40 px au lieu de s'y ajouter. */
    box-sizing: content-box;
    padding-top: 2px;
    padding-bottom: 2px;
    /* Le mot « Toggle ». `visibility: hidden` est le SEUL moyen, en CSS pur, de
       sortir un nœud de texte du TEXTE RENDU : `innerText` saute ce qui n'est
       pas rendu, alors qu'il rapporte encore un texte mis à `font-size: 0` ou
       décalé de -9999px comme le fait déjà `.custom-switch label`. Éditer
       Matrix_Switch.razor pour supprimer le mot serait plus simple — STOP 5 du
       plan l'interdit, le composant est partagé bien au-delà de la facturation.
       Le revers : la pastille grise est peinte sur le `<label>` lui-même et
       disparaîtrait avec lui. Elle est donc redessinée sur `::before`, et les
       deux pseudo-éléments repassent en `visible`. Un pseudo-élément visible
       reste cliquable et l'événement vise son élément d'origine : le `<label>`
       continue de basculer la case à cocher. Vérifié en vivant — hit-test au
       centre ET aux deux bords de la bande de 44 px, plus un vrai clic qui fait
       bien basculer la valeur (dans un modal ensuite ANNULÉ). */
    visibility: hidden;
    background: none;
}

/* La piste, redessinée : 40 px de haut CENTRÉS dans les 44 px de la cible,
   donc la pastille ne grandit pas d'un pixel. */
.modal-body[b-wz6gtfsc8z]  .Matrix_Switch label[for="partnerIsActive"]::before {
    content: '';
    visibility: visible;
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 0;
    right: 0;
    background: grey;
    border-radius: calc(20px * var(--size, 2));
    transition: background-color 0.3s;
}

/* État coché : la même couleur que `.custom-switch input:checked + label`. */
.modal-body[b-wz6gtfsc8z]  .Matrix_Switch input:checked + label[for="partnerIsActive"]::before {
    background: var(--linkooc-text-display-second);
}

/* Le bouton rond est positionné depuis la boîte de PADDING : les 2 px ajoutés
   plus haut le décaleraient de 2 px vers le haut de la piste. On le recentre.
   L'état coché ne touche que `left` et `transform` — rien n'est écrasé. */
.modal-body[b-wz6gtfsc8z]  .Matrix_Switch label[for="partnerIsActive"]::after {
    visibility: visible;
    top: calc(1px * var(--size, 2) + 2px);
}

/* Les 4 px gagnés sur la cible sont repris en marge négative : le modal garde
   exactement la hauteur qu'il avait, et la zone cliquable déborde de 2 px sur
   la gouttière du champ, qui est vide (`.mb-3` = 16 px au-dessus). */
.modal-body[b-wz6gtfsc8z]  .Matrix_Switch {
    margin-top: -2px;
    margin-bottom: -2px;
}
/* /Pages/Billing/Components/ClientForm.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   F8 (plan 477) — L'INTERRUPTEUR DES MODALS « Ajouter un partenaire » /
   « Modifier l'association »

   Mesuré en vivant à 390x844 : la cible tactile réelle est le `<label>` de
   `Matrix_Switch` (l'`<input>` fait 0x0, masqué par `.custom-switch`), et il
   mesure 80 x 40 — sous le plancher de 44 px. Et le libellé rendu à côté de
   « Active » est littéralement le mot « Toggle », écrit en dur dans
   Matrix_Switch.razor:18.

   Le composant `Matrix_Switch` est PARTAGÉ bien au-delà de la facturation :
   STOP 5 du plan interdit d'y toucher. Tout se fait donc d'ici, et uniquement
   dans les modals de ce périmètre — la portée `.modal-body` exclut d'office
   l'interrupteur « Actif / Inactif » du client (ClientForm.razor:78), qui est
   dans le formulaire et non dans un modal, et n'est pas dans ce périmètre.

   ⚠️ Ce n'est PAS le composant du F5 du plan 465 (`/admin/ai-settings`, un
   `input.form-check-input[role=switch]` Bootstrap nu). Ne pas confondre.

   Ce fichier est le jumeau exact de BillingAccountForm.razor.css : les deux
   modals partenaire sont deux copies du même balisage dans deux composants
   différents, et le CSS scopé de Blazor ne peut pas être partagé entre eux.
   ═══════════════════════════════════════════════════════════════════════════ */

.modal-body[b-c7y7bzke6e]  .Matrix_Switch label[for="partnerIsActive"] {
    /* Cible tactile portée à 44 px SANS grossir la pastille : la hauteur de la
       piste reste celle du composant (`height: var(--switch-height)` = 40 px),
       on ajoute 2 px de padding en haut et en bas — donc la boîte de bordure,
       c'est-à-dire la zone réellement cliquable, passe à 44 — et
       `background-clip: content-box` garde le gris peint sur les 40 px.
       `box-sizing` doit être forcé : Bootstrap pose `border-box` sur tout, et
       le padding serait sinon pris DANS les 40 px au lieu de s'y ajouter. */
    box-sizing: content-box;
    padding-top: 2px;
    padding-bottom: 2px;
    /* Le mot « Toggle ». `visibility: hidden` est le SEUL moyen, en CSS pur, de
       sortir un nœud de texte du TEXTE RENDU : `innerText` saute ce qui n'est
       pas rendu, alors qu'il rapporte encore un texte mis à `font-size: 0` ou
       décalé de -9999px comme le fait déjà `.custom-switch label`. Éditer
       Matrix_Switch.razor pour supprimer le mot serait plus simple — STOP 5 du
       plan l'interdit, le composant est partagé bien au-delà de la facturation.
       Le revers : la pastille grise est peinte sur le `<label>` lui-même et
       disparaîtrait avec lui. Elle est donc redessinée sur `::before`, et les
       deux pseudo-éléments repassent en `visible`. Un pseudo-élément visible
       reste cliquable et l'événement vise son élément d'origine : le `<label>`
       continue de basculer la case à cocher. Vérifié en vivant — hit-test au
       centre ET aux deux bords de la bande de 44 px, plus un vrai clic qui fait
       bien basculer la valeur (dans un modal ensuite ANNULÉ). */
    visibility: hidden;
    background: none;
}

/* La piste, redessinée : 40 px de haut CENTRÉS dans les 44 px de la cible,
   donc la pastille ne grandit pas d'un pixel. */
.modal-body[b-c7y7bzke6e]  .Matrix_Switch label[for="partnerIsActive"]::before {
    content: '';
    visibility: visible;
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 0;
    right: 0;
    background: grey;
    border-radius: calc(20px * var(--size, 2));
    transition: background-color 0.3s;
}

/* État coché : la même couleur que `.custom-switch input:checked + label`. */
.modal-body[b-c7y7bzke6e]  .Matrix_Switch input:checked + label[for="partnerIsActive"]::before {
    background: var(--linkooc-text-display-second);
}

/* Le bouton rond est positionné depuis la boîte de PADDING : les 2 px ajoutés
   plus haut le décaleraient de 2 px vers le haut de la piste. On le recentre.
   L'état coché ne touche que `left` et `transform` — rien n'est écrasé. */
.modal-body[b-c7y7bzke6e]  .Matrix_Switch label[for="partnerIsActive"]::after {
    visibility: visible;
    top: calc(1px * var(--size, 2) + 2px);
}

/* Les 4 px gagnés sur la cible sont repris en marge négative : le modal garde
   exactement la hauteur qu'il avait, et la zone cliquable déborde de 2 px sur
   la gouttière du champ, qui est vide (`.mb-3` = 16 px au-dessus). */
.modal-body[b-c7y7bzke6e]  .Matrix_Switch {
    margin-top: -2px;
    margin-bottom: -2px;
}
/* /Pages/Billing/Components/LastInvoiceWarningBanner.razor.rz.scp.css */
.last-invoice-warning[b-bs5gbsqi7l] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 1rem 0;
    padding: 1rem 1.25rem;
    border: 2px solid var(--linkooc-warning);
    border-left-width: 6px;
    border-radius: 8px;
    background: var(--linkooc-warning-surface);
    color: var(--linkooc-warning-strong);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.45;
}

.last-invoice-warning i[b-bs5gbsqi7l] {
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--linkooc-warning);
}
/* /Pages/Billing/Components/PartnerCommissionConfig.razor.rz.scp.css */
/* Plan 484 — F2 : l'en-tête des trois sections « commissions ».

   Avant : `d-flex justify-content-between align-items-center`, donc une ligne
   qui ne s'enroule jamais. Le bloc titre + phrase gardait 254-262px et le
   bouton « Ajouter… » se contentait du reste : mesuré 96×79 à 390px (4 lignes
   de libellé enroulé) et 97×100 à 360px (5 lignes) pour « Ajouter un taux
   produit ».

   Après : au-dessus de 768px la ligne est exactement celle d'avant (le bureau
   ne bouge pas) ; en dessous elle s'empile — le titre et sa phrase prennent
   toute la largeur, le bouton passe dessous.

   Bouton PLEINE LARGEUR et non aligné à droite : à 360px la place utile est de
   ~330px et « Ajouter un taux produit » avec son icône en occupe déjà
   l'essentiel ; une largeur naturelle rejouerait l'enroulement au moindre
   libellé plus long, alors que `stretch` garantit une seule ligne quelle que
   soit la largeur, et la hauteur retombe sur le plancher tactile de 44px que
   `mobile.css:1421` donne déjà à `.btn` / `.Matrix_Button`.

   Une seule règle scopée à ce composant plutôt que trois jeux d'utilitaires
   Bootstrap recopiés sur trois lignes différentes. */

.partner-commissions__sechead[b-ipy32aigfh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--linkooc-spacing-md, 1rem);
}

@media (max-width: 767.98px) {
    .partner-commissions__sechead[b-ipy32aigfh] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--linkooc-spacing-sm, 0.5rem);
    }
}
/* /Pages/Billing/Components/SubscriptionEditDialog.razor.rz.scp.css */
/* Grille des articles */
.billing-items-grid[b-itcf26av1p] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 1.5rem;
    column-gap: 1rem;
}

@media (max-width: 991px) {
    .billing-items-grid[b-itcf26av1p] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .billing-items-grid[b-itcf26av1p] {
        grid-template-columns: 1fr;
    }
}

/* Styles pour les cartes d'articles de facturation */
.billing-item-card[b-itcf26av1p] {
    border: 2px solid #dee2e6;
    background-color: #fff;
}

.billing-item-card:hover[b-itcf26av1p] {
    border-color: #adb5bd;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.billing-item-card.selected[b-itcf26av1p] {
    border-color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.03);
    box-shadow: 0 2px 12px rgba(var(--bs-primary-rgb), 0.15);
}

.billing-item-card.selected:hover[b-itcf26av1p] {
    box-shadow: 0 4px 16px rgba(var(--bs-primary-rgb), 0.2);
}

/* Animation du bouton de sélection */
.selection-indicator:hover[b-itcf26av1p] {
    transform: scale(1.05);
}
/* /Pages/Billing/Establishment.razor.rz.scp.css */
/* ============================================
   ESTABLISHMENT PAGE - Header Styles
   ============================================ */

/* Header avec fond blanc */
.matrix-header-bar[b-py5aj6artv] {
    background-color: #FFFFFF;
}

.matrix-header-content .matrix-header-actions[b-py5aj6artv] {
    width: 100%;
}

/* Layout du header */
.establishment-header-row[b-py5aj6artv] {
    display: flex;
    align-items: center;
    width: 100%;
}

.establishment-header-left[b-py5aj6artv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Breadcrumb dans le header */
.matrix-header-content .matrix-breadcrumb-item[b-py5aj6artv],
.matrix-header-content .matrix-breadcrumb-link[b-py5aj6artv],
.matrix-header-content .matrix-breadcrumb-active[b-py5aj6artv] {
    font-size: 1.1rem;
    font-weight: 600;
}

/* Padding pour les onglets */
.matrix-tab-content[b-py5aj6artv] {
    padding: 1rem;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 576px) {
    .establishment-header-row[b-py5aj6artv] {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* /Pages/Billing/EstablishmentEdit.razor.rz.scp.css */
/* ═════════════════════════════════════════════════════════════════════
   TABS - Navigation (identique à ItemDetail)
   ═════════════════════════════════════════════════════════════════════ */
.linkooc-page-container .nav-tabs[b-y5kn1gat23] {
    flex-shrink: 0;
    border-bottom: 1px solid var(--linkooc-border-color, #dee2e6);
    width: 100%;
}

.linkooc-page-container .nav-tabs .nav-link[b-y5kn1gat23] {
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--linkooc-text-secondary, #6c757d);
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.linkooc-page-container .nav-tabs .nav-link:hover[b-y5kn1gat23] {
    border-bottom-color: var(--linkooc-border-color, #dee2e6);
    color: var(--linkooc-text-display, #495057);
}

/* ONGLET ACTIF - Barre verte en bas */
.linkooc-page-container .nav-tabs .nav-link.active[b-y5kn1gat23] {
    color: var(--linkooc-primary-ink, #137825);
    border-bottom-color: var(--linkooc-primary-ink, #137825);
    background-color: transparent;
    font-weight: 500;
}

/* ═════════════════════════════════════════════════════════════════════
   PAGE LAYOUT - Hauteur complète avec save bar fixée en bas
   (même pattern que sidebar-footer dans BackOfficeLayout)
   ═════════════════════════════════════════════════════════════════════ */
.linkooc-page-container[b-y5kn1gat23] {
    position: relative;
    height: calc(100vh - 80px); /* viewport - topbar - padding */
    min-height: 400px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.linkooc-form-content[b-y5kn1gat23] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 70px; /* Réserve l'espace pour la barre */
}

/* Save bar fixée en bas - position absolute */
[b-y5kn1gat23] .linkooc-sticky-save-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    flex-shrink: 0;
}

/* ═════════════════════════════════════════════════════════════════════
   F5 (plan 459) — LA BARRE D'ENREGISTREMENT NE PEINT PLUS SUR LE FORMULAIRE

   Diagnostic (mesuré en vivant à 390x844) de la question que le plan pose :
   pourquoi `.linkooc-form-content.clientHeight` vaut 595 aussi bien à l'état
   propre qu'à l'état modifié. Deux causes, empilées :

     1. la barre est `position: absolute` (règle juste au-dessus), donc HORS
        FLUX : la colonne flex ne la voit pas et ne rend aucune place ;
     2. la réserve censée compenser, `padding-bottom: 70px` ci-dessus, est
        INERTE — l'élément porte aussi la classe utilitaire Bootstrap `p-3`,
        et Bootstrap écrit ses utilitaires `padding: 1rem !important`. Un
        `padding-bottom` sans `!important` ne peut pas gagner.

   Et 70px n'aurait de toute façon pas suffi : sous 576px la barre s'empile en
   colonne (StickySaveBar.razor:84) et mesure 105px.

   Le correctif ne réserve donc PAS un nombre de pixels — il remet la barre
   DANS le flux sous 768px. La colonne flex rétrécit alors réellement le
   scroller de la hauteur exacte de la barre, quelle que soit cette hauteur :
   rien à recalculer si la barre change de contenu, de police ou de largeur
   d'écran. Pas de hauteur en dur, pas de `100vh` (pièges des plans 452/459).

   `env(safe-area-inset-bottom)` est ajouté à la barre elle-même : elle est
   désormais le dernier élément de la colonne, donc c'est elle qui touche le
   bord bas de l'écran.
   ═════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    [b-y5kn1gat23] .linkooc-sticky-save-bar {
        position: static;
        /* La barre est un enfant flex de la colonne : elle ne doit ni grandir
           ni rétrécir, seulement occuper sa hauteur naturelle. */
        flex: 0 0 auto;
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    }
}
/* /Pages/Billing/Establishments.razor.rz.scp.css */
/* ============================================
   ESTABLISHMENTS PAGE - Linkooc Visual Identity
   Uses global styles from linkooc-theme.css
   ============================================ */

/* Page-specific styles if needed */

/* ============================================
   Rangée « filtre actif » — plan 467
   Elle vit dans le flux, au-dessus de la liste : c'est elle qui explique le
   compte du titre. Elle s'ENROULE (flex-wrap) — jamais de débordement
   horizontal à 360 comme à 390. Les couleurs viennent des jetons --linkooc-*
   (LkChip pour les chips), donc le thème sombre suit tout seul.
   ============================================ */

.establishments-active-filters[b-eitz04xhcq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--linkooc-spacing-sm, 0.5rem);
    max-width: 100%;
}

.establishments-active-filters-label[b-eitz04xhcq] {
    color: var(--linkooc-text-secondary);
    font-size: var(--linkooc-small-size, 0.75rem);
}

/* /Pages/Billing/GestionDashboard.razor.rz.scp.css */
.gd-section-label[b-2pe2hma40g] {
    font-size: 0.8rem;
    font-weight: var(--linkooc-font-weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--linkooc-text-muted, #6c757d);
    margin-bottom: 0.5rem;
}

.gd-hint[b-2pe2hma40g] {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    cursor: help;
}

.gd-cards[b-2pe2hma40g] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.gd-card[b-2pe2hma40g] {
    background: var(--linkooc-surface, #fff);
    border: 1px solid var(--linkooc-border, #e5e7eb);
    border-radius: var(--linkooc-radius-lg, 12px);
    padding: 1rem 1.25rem;
    box-shadow: var(--linkooc-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}

.gd-card-accent[b-2pe2hma40g] {
    border-left: 3px solid var(--linkooc-primary, #08781B);
}

.gd-card-label[b-2pe2hma40g] {
    font-size: 0.85rem;
    color: var(--linkooc-text-muted, #6c757d);
    margin-bottom: 0.35rem;
}

.gd-unit[b-2pe2hma40g] {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: var(--linkooc-font-weight-semibold, 600);
    color: var(--linkooc-text-muted, #6c757d);
    border: 1px solid var(--linkooc-border, #e5e7eb);
    border-radius: var(--linkooc-radius-sm, 4px);
    padding: 0 0.3rem;
    margin-left: 0.25rem;
    vertical-align: middle;
}

.gd-card-value[b-2pe2hma40g] {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--linkooc-text, #1a1a1a);
}

.gd-card-sub[b-2pe2hma40g] {
    font-size: 0.8rem;
    color: var(--linkooc-text-muted, #6c757d);
    margin-top: 0.25rem;
}

.gd-chart-card[b-2pe2hma40g] {
    background: var(--linkooc-surface, #fff);
    border: 1px solid var(--linkooc-border, #e5e7eb);
    border-radius: var(--linkooc-radius-lg, 12px);
    padding: 0.75rem 1rem;
    box-shadow: var(--linkooc-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}

.gd-footnote[b-2pe2hma40g] {
    font-size: 0.78rem;
    color: var(--linkooc-text-muted, #6c757d);
    margin-top: 0.5rem;
}
/* /Pages/Billing/InvoiceDetail.razor.rz.scp.css */
/* ============================================
   INVOICE DETAIL PAGE - Header Styles
   ============================================ */

/* Header avec fond blanc */
.matrix-header-bar[b-1o44nzipzp] {
    background-color: #FFFFFF;
}

.matrix-header-content .matrix-header-actions[b-1o44nzipzp] {
    width: 100%;
}

/* Layout du header */
.invoice-detail-header-row[b-1o44nzipzp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 1rem;
}

.invoice-detail-header-left[b-1o44nzipzp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.invoice-detail-header-right[b-1o44nzipzp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Breadcrumb dans le header */
.matrix-header-content .matrix-breadcrumb-item[b-1o44nzipzp],
.matrix-header-content .matrix-breadcrumb-link[b-1o44nzipzp],
.matrix-header-content .matrix-breadcrumb-active[b-1o44nzipzp] {
    font-size: 1.1rem;
    font-weight: 600;
}

/* ============================================
   CONTENU PRINCIPAL
   ============================================ */

/* Réduction des marges du conteneur principal */
.invoice-detail-content[b-1o44nzipzp] {
    padding: 1rem !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 576px) {
    .invoice-detail-header-row[b-1o44nzipzp] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .invoice-detail-header-right[b-1o44nzipzp] {
        width: 100%;
    }

    .invoice-detail-header-right .matrix-btn[b-1o44nzipzp] {
        width: 100%;
    }
}

/* /Pages/Billing/Invoices.razor.rz.scp.css */
/* ============================================
   INVOICES PAGE - Linkooc Visual Identity
   Uses global styles from linkooc-theme.css
   ============================================ */

/* Page-specific styles if needed */

/* /Pages/Billing/Partner.razor.rz.scp.css */
/* ============================================
   PARTNER PAGE - Linkooc Visual Identity
   Uses global styles from linkooc-theme.css
   ============================================ */

/* ═════════════════════════════════════════════════════════════════════
   F1 (plan 483) — « SAUVEGARDER » SANS DÉROULER TOUTE LA PAGE

   Mesuré en vivant sur /billing-partner/4 (390x844) AVANT correctif :
   la barre « Abandon / Sauvegarder » était `position: static`, posée
   après les commissions ET les relevés, à y = 2 508 d'une course de
   2 613 — soit 1 777 px de défilement depuis le champ que l'on vient de
   modifier. Une fois la course finie, son bord bas tombait à 836 pour un
   viewport de 844 : 8 px de mou, très en dessous du seuil de 40 px du
   post-mortem du plan 452 (barres dynamiques iOS).

   La cause n'était PAS le composant (Components/Common/StickySaveBar.razor
   ne déclare aucun `position`, il compte sur la page hôte) mais l'absence
   totale de règle ici : les quatre autres fiches qui montent le même
   composant (Client, BillingAccount, EstablishmentEdit, Admin/UserEdit)
   en ont une, la fiche partenaire est passée entre les mailles.

   Deux choses manquaient, et l'une sans l'autre ne sert à rien :

     1. un VRAI SCROLLPORT. Avant, `.linkooc-page-container` faisait
        2 444 px de haut et `.linkooc-form-content` 2 406 px : aucun des
        deux ne défilait, le vrai scroller était `main .content.py-2`
        (scrollTop 1 777 mesuré). Donner un `position` à la barre sans
        borner le conteneur n'aurait rien changé.
     2. un POSITIONNEMENT pour la barre, en `::deep` — elle est rendue par
        un composant enfant, une règle scopée sans `::deep` ne l'atteint pas.

   `dvh` et non `vh` : piège des plans 452/459. Sur téléphone les barres
   dynamiques du navigateur font varier la hauteur visible ; `vh` fige la
   grande valeur et repousse la barre sous le châssis. (Les quatre fiches
   sœurs portent encore `100vh` — défaut préexistant, hors périmètre ici.)
   ═════════════════════════════════════════════════════════════════════ */
.linkooc-page-container[b-utshbytdhs] {
    position: relative;
    /* 84 px = ce qui est déjà pris AU-DESSUS de la page, mesuré, pas deviné :
       la topbar vaut 56 px sur téléphone et 65 px au bureau, `.content.py-2`
       ajoute 8 px de padding en haut et 8 en bas — soit 81 px au pire, plus
       3 px de marge. Les fiches sœurs écrivent 80 px et débordent `.content`
       d'1 px au bureau (mesuré : scrollTop 1 à 1440x900). */
    height: calc(100dvh - 84px);
    min-height: 400px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.linkooc-form-content[b-utshbytdhs] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Barre d'enregistrement en pied de scrollport — patron des quatre fiches sœurs. */
[b-utshbytdhs] .linkooc-sticky-save-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    flex-shrink: 0;
}

/* ═════════════════════════════════════════════════════════════════════
   RÉSERVE BUREAU — et pourquoi elle porte `!important`

   Au-dessus de 768 px la barre est `absolute`, donc HORS FLUX : la colonne
   flex ne lui rend aucune place et elle peindrait sur la fin de la table
   des relevés. La réserve doit donc être écrite à la main — mais
   `.linkooc-form-content` porte aussi l'utilitaire Bootstrap `p-3`, et
   Bootstrap écrit ses utilitaires `padding: 1rem !important`. C'est
   exactement ce qui rend INERTE le `padding-bottom: 70px` de
   EstablishmentEdit.razor.css (post-mortem du plan 459) : sans
   `!important` la déclaration ne peut pas gagner. Mesuré, pas supposé.

   La hauteur n'est pas en dur : `--linkooc-sticky-bar-height`
   (linkooc-theme.css) est la MÊME variable que celle dont la barre tire sa
   hauteur, donc rien à recalculer si elle change. Le `1rem` restitue le
   `p-3` que l'on écrase.
   ═════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
    .linkooc-form-content[b-utshbytdhs] {
        padding-bottom: calc(1rem + var(--linkooc-sticky-bar-height, 48px)) !important;
    }
}

/* ═════════════════════════════════════════════════════════════════════
   TÉLÉPHONE — LA BARRE REVIENT DANS LE FLUX (arbitrage du plan 459)

   Écrit APRÈS la règle de base : une media query n'ajoute aucune
   spécificité, un override placé avant resterait inerte (piège payé au
   plan 468).

   Sous 768 px on ne réserve PAS un nombre de pixels : sous 576 px la barre
   s'empile en colonne (StickySaveBar.razor:84) et mesure 105 px, pas 48 —
   une réserve de 70 px ne suffirait pas, et une réserve en dur casserait à
   la première ligne de texte en plus. On remet la barre DANS le flux : la
   colonne flex rétrécit alors le scroller de la hauteur exacte de la barre,
   quelle qu'elle soit. C'est le seul geste qui enregistre : il doit tomber
   sous le pouce sans dérouler la page.

   `env(safe-area-inset-bottom)` est posé sur la barre elle-même : elle est
   désormais le dernier élément de la colonne, donc c'est elle qui touche le
   bord bas de l'écran.
   ═════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    [b-utshbytdhs] .linkooc-sticky-save-bar {
        position: static;
        /* Enfant flex de la colonne : ni grandir ni rétrécir, juste sa
           hauteur naturelle. */
        flex: 0 0 auto;
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    }
}
/* /Pages/Billing/Partners.razor.rz.scp.css */
/* ============================================
   PARTNERS PAGE - Linkooc Visual Identity
   Uses global styles from linkooc-theme.css
   ============================================ */

/* Page-specific styles if needed */
/* /Pages/Billing/SubscriptionDocuments.razor.rz.scp.css */
/* Gestion › Dossier d'abonnement (issue 523) */

.subdoc-layout[b-okbpckla41] {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 991px) {
    .subdoc-layout[b-okbpckla41] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.subdoc-list[b-okbpckla41] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.subdoc-list-item[b-okbpckla41] {
    text-align: left;
    border: 0;
    background: transparent;
    color: var(--linkooc-text, inherit);
    padding: 0.55rem 0.75rem;
    border-radius: 0.375rem;
}

.subdoc-list-item:hover[b-okbpckla41] {
    background: var(--linkooc-surface-hover, rgba(0, 0, 0, 0.04));
}

.subdoc-list-item.is-active[b-okbpckla41] {
    background: rgba(8, 120, 27, 0.1);
    color: var(--linkooc-primary-ink, #08781B);
    font-weight: 600;
}

.subdoc-actions[b-okbpckla41] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.75rem;
}

/* Le texte dans l'éditeur ressemble au PDF : cases de tableau visibles, titre
   de section avec le filet vert, titre d'article en vert. */
.subdoc-editor[b-okbpckla41]  .k-editor-content .ProseMirror {
    font-family: Roboto, 'Inter', sans-serif;
    font-size: 14px;
}

.subdoc-editor[b-okbpckla41]  .k-editor-content table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 4px;
}

.subdoc-editor[b-okbpckla41]  .k-editor-content td {
    border: 1px dashed #d0d0d0;
    padding: 4px 6px;
    vertical-align: middle;
}

.subdoc-editor[b-okbpckla41]  .k-editor-content h2 {
    font-size: 1rem;
    font-weight: 700;
    background: #F0F0F0;
    border-left: 3px solid #08781B;
    padding: 0.35rem 0.6rem;
    margin: 1rem 0 0.5rem;
}

.subdoc-editor[b-okbpckla41]  .k-editor-content h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #08781B;
    margin: 0.8rem 0 0.25rem;
}

.subdoc-editor[b-okbpckla41]  .k-editor-content ul {
    list-style: disc;
    padding-left: 1.5rem;
}

.subdoc-editor[b-okbpckla41]  .k-editor-content ol {
    list-style: decimal;
    padding-left: 1.5rem;
}
/* /Pages/Documents/CreateDocumentPage.razor.rz.scp.css */
/* Plan 401 — regles deplacees depuis le <style> global du .razor vers
   l'isolation CSS Blazor. Les declarations sont inchangees.

   Pourquoi les :where() : le compilateur ajoute [b-xxxxxxxxxx] a la fin du
   selecteur, ce qui lui ajoute le poids d'une classe. Sans compensation, ces
   regles se mettraient a battre des regles globales plus specifiques
   (mobile.css, plans 393/399) qu'elles perdaient jusqu'ici. :where() sur la
   premiere classe rend ce poids : la specificite reste exactement celle du
   <style> d'origine, seule la portee change. */

:where(.linkooc-page-subtitle)[b-3zkn0dfnfc],
[b-3zkn0dfnfc] :where(.linkooc-page-subtitle) {
    font-size: var(--linkooc-body-size, 0.875rem);
    color: var(--linkooc-text-muted, #6d6d6d);
}

:where(.linkooc-wizard-footer)[b-3zkn0dfnfc],
[b-3zkn0dfnfc] :where(.linkooc-wizard-footer) {
    flex-shrink: 0;
}
/* /Pages/Documents/DocumentPage.razor.rz.scp.css */
/* Plan 401 — regles deplacees depuis le <style> global du .razor vers
   l'isolation CSS Blazor. Les declarations sont inchangees.

   Pourquoi les :where() : le compilateur ajoute [b-xxxxxxxxxx] a la fin du
   selecteur, ce qui lui ajoute le poids d'une classe. Sans compensation, ces
   regles se mettraient a battre des regles globales plus specifiques
   (mobile.css, plans 393/399) qu'elles perdaient jusqu'ici. :where() sur la
   premiere classe rend ce poids : la specificite reste exactement celle du
   <style> d'origine, seule la portee change. */

:where(.linkooc-page-header)[b-8v45lyg3fz],
[b-8v45lyg3fz] :where(.linkooc-page-header) {
    flex-shrink: 0;
}

:where(.linkooc-dropdown-toggle)[b-8v45lyg3fz]::after,
[b-8v45lyg3fz] :where(.linkooc-dropdown-toggle)::after {
    content: '';
    display: inline-block;
    margin-left: 0.5rem;
    vertical-align: middle;
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-left: 0.3em solid transparent;
}

:where(.linkooc-dropdown-menu)[b-8v45lyg3fz],
[b-8v45lyg3fz] :where(.linkooc-dropdown-menu) {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 1050;
    min-width: 280px;
    background: var(--linkooc-bg, #fff);
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 0.5rem 0;
    animation: linkoocDropdownIn 0.15s ease-out;
}

:where(.linkooc-empty-state) h2[b-8v45lyg3fz],
[b-8v45lyg3fz] :where(.linkooc-empty-state) h2 {
    color: var(--linkooc-text, #000601);
    font-weight: 600;
}
/* /Pages/Documents/Widgets/DocumentMiniature.razor.rz.scp.css */
/* Plan 667 — miniature d'un document. Le papier porte sa propre couleur (celle du document) :
   c'est un objet montré, pas une surface du BackOffice. */
.doc-mini[b-ven1k6m7nb] {
    position: relative;
    width: 100%;
    container-type: inline-size;
    overflow: hidden;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 18px rgba(0, 0, 0, 0.18);
}

/* Dans un cadre de hauteur fixe : la page prend la hauteur, sa largeur suit son format. */
.doc-mini--fit[b-ven1k6m7nb] {
    width: auto;
    height: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.doc-mini__fold[b-ven1k6m7nb] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 1px dashed rgba(0, 0, 0, 0.18);
}

.doc-mini__image[b-ven1k6m7nb],
.doc-mini__text[b-ven1k6m7nb],
.doc-mini__frame[b-ven1k6m7nb],
.doc-mini__category[b-ven1k6m7nb] {
    position: absolute;
    box-sizing: border-box;
}

.doc-mini__image[b-ven1k6m7nb] {
    object-fit: cover;
}

.doc-mini__image--empty[b-ven1k6m7nb] {
    opacity: 0.18;
}

.doc-mini__text[b-ven1k6m7nb] {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.05;
    overflow: hidden;
    white-space: nowrap;
}

.doc-mini__frame[b-ven1k6m7nb] {
    border: 1px solid;
    opacity: 0.7;
}

.doc-mini__category[b-ven1k6m7nb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.5%;
    padding: 2% 4%;
    overflow: hidden;
}

.doc-mini__title[b-ven1k6m7nb] {
    flex: none;
    width: 42%;
    height: 1.4cqw;
    min-height: 2px;
    margin-bottom: 2%;
    border-radius: 1px;
}

.doc-mini__line[b-ven1k6m7nb] {
    flex: none;
    height: 0.7cqw;
    min-height: 1px;
    border-radius: 1px;
    opacity: 0.28;
    align-self: flex-start;
}
/* /Pages/Establishment/AtelierPage.razor.rz.scp.css */
/* Plan 696, issue 625 — L'Atelier du site, épuré. Le CSS du prototype validé
   (plans/696-atelier/prototype.html, variante A), tel quel, posé sur la page : tokens,
   barre de 60px, colonne des mises en page 236px, scène 16/10, planche du bas, menu ⋯,
   place du logo, toasts. Pas de Tailwind, pas de copie de linkooc-theme.css.

   Les classes du prototype sont préfixées `at-` : le BackOffice charge Bootstrap
   (`.toast:not(.show) { display: none }`), le thème (`main { height: 100vh }`,
   `.main`) et le thème legacy (`*:not(.oi):not(.k-icon) { font-family: Inter }`,
   `* { outline: none !important }`) — mesuré sur le banc, chacun cassait une règle.
   Les règles qui atteignent un composant enfant (LkSitePreviewTile, LinkToWiki) passent
   par ::deep. */

.atelier[b-h09xqjofeq] {
    --studio: #ECECE8;      /* le mur de l'atelier : gris-blanc froid, pas crème */
    --paper:  #FBFBFA;      /* les cartes */
    --ink:    #161616;
    --mist:   #8E8E89;      /* texte secondaire, filets */
    --line:   #D9D9D4;
    --linkooc:#117A3A;      /* la seule couleur d'action */
    --linkooc-ink: #0B5A2A;
    --shadow: 0 30px 60px -30px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.06);
    --ease: cubic-bezier(.2,.7,.2,1);
    --bar: 60px;

    position: fixed;
    inset: 0;
    z-index: 1;
    box-sizing: border-box;
    margin: 0;
    font-size: 16px;
    line-height: normal;
    color: var(--ink);
    background: var(--studio);
    -webkit-font-smoothing: antialiased;
    display: grid;
    grid-template-rows: var(--bar) 1fr;
    overflow: hidden;
}

/* Manrope partout — plus spécifique que le `*:not():not()` du thème legacy ; les icônes
   Bootstrap gardent leur fonte. */
.atelier[b-h09xqjofeq],
.atelier *:not(.bi)[b-h09xqjofeq],
.atelier[b-h09xqjofeq]  *:not(.bi) { font-family: Manrope, system-ui, sans-serif; }

.atelier *[b-h09xqjofeq],
.atelier[b-h09xqjofeq]  * { box-sizing: border-box; }

/* La remise à zéro des boutons et des liens, à spécificité nulle (:where) : `.at-publish`
   etc. doivent la battre comme dans le prototype. */
.atelier :where(button)[b-h09xqjofeq] { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; margin: 0; padding: 0; }
.atelier :where(a)[b-h09xqjofeq] { color: inherit; text-decoration: none; }
.atelier button:focus-visible[b-h09xqjofeq],
.atelier a:focus-visible[b-h09xqjofeq],
.atelier[b-h09xqjofeq]  a:focus-visible,
.atelier [tabindex]:not(h1):focus-visible[b-h09xqjofeq] { outline: 2px solid var(--linkooc) !important; outline-offset: 3px; border-radius: 8px; }

/* Le nom, pour les lecteurs d'écran (FocusOnNavigate y pose le focus) : rien à l'écran. */
.at-sr[b-h09xqjofeq] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.at-sr:focus[b-h09xqjofeq] { outline: none !important; }

@media (prefers-reduced-motion: reduce) {
    .atelier[b-h09xqjofeq],
    .atelier *[b-h09xqjofeq],
    .atelier[b-h09xqjofeq]  * { transition: none !important; animation: none !important; }
}

/* ─── La barre : Quitter · Annuler ⋯ Publier ───────────────────────────── */
.at-top[b-h09xqjofeq] { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 0 20px 0 14px; position: relative; z-index: 5; }
.at-quit[b-h09xqjofeq] { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px 8px 10px; border-radius: 999px;
           font-size: 14.5px; font-weight: 500; color: var(--ink); transition: background .2s; }
.at-quit svg[b-h09xqjofeq] { width: 18px; height: 18px; }
.at-quit:hover[b-h09xqjofeq] { background: rgba(255,255,255,.65); color: var(--ink); }
.at-right[b-h09xqjofeq] { justify-self: end; display: flex; align-items: center; gap: 6px; }
.at-quiet[b-h09xqjofeq] { padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--mist); transition: color .2s, background .2s; }
.at-quiet:hover[b-h09xqjofeq] { color: var(--ink); background: rgba(255,255,255,.65); }
.at-quiet[disabled][b-h09xqjofeq] { opacity: .6; cursor: default; }
.at-more[b-h09xqjofeq] { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--mist); transition: color .2s, background .2s; }
.at-more:hover[b-h09xqjofeq], .at-more[aria-expanded="true"][b-h09xqjofeq] { color: var(--ink); background: rgba(255,255,255,.65); }
.at-more svg[b-h09xqjofeq] { width: 20px; height: 20px; }
.at-publish[b-h09xqjofeq] { margin-left: 8px; padding: 10px 22px; border-radius: 999px; background: var(--linkooc); color: #fff; font-weight: 600; font-size: 14.5px;
              transition: background .25s var(--ease), color .25s, transform .2s var(--ease); }
.at-publish:hover:not([disabled])[b-h09xqjofeq] { background: var(--linkooc-ink); }
.at-publish[disabled][b-h09xqjofeq] { background: #DCDCD7; color: #A3A39E; cursor: default; }
.at-publish.at-lit[b-h09xqjofeq] { animation: at-lit-b-h09xqjofeq .6s var(--ease); }
@keyframes at-lit-b-h09xqjofeq { 40% { transform: scale(1.06); } }

/* Le menu ⋯ : ce qui vivait au pied du rail et dans l'étape « En ligne » */
.at-menu[b-h09xqjofeq] { position: absolute; top: calc(var(--bar) - 6px); right: 20px; width: 290px; padding: 6px; border-radius: 14px; background: var(--paper);
           box-shadow: 0 24px 50px -20px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.04); transform-origin: top right;
           opacity: 0; transform: translateY(-4px) scale(.98); pointer-events: none; visibility: hidden;
           transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s .18s; }
.at-menu.at-on[b-h09xqjofeq] { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .18s var(--ease), transform .18s var(--ease); }
.at-menu > button[b-h09xqjofeq],
.at-menu > a[b-h09xqjofeq],
.at-menu[b-h09xqjofeq]  .at-menu-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 11px 12px; border-radius: 9px;
           font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none; text-align: left; }
.at-menu > button:hover:not([disabled])[b-h09xqjofeq],
.at-menu > a:hover[b-h09xqjofeq],
.at-menu[b-h09xqjofeq]  .at-menu-link:hover { background: #F0F0EC; color: var(--ink); }
.at-menu > button[disabled][b-h09xqjofeq] { color: #BDBDB8; cursor: default; }
.at-menu > button.at-armed[b-h09xqjofeq] { color: #9B2C1F; background: #FBEDEA; }
.at-menu hr[b-h09xqjofeq] { border: 0; height: 1px; background: #ECECE8; margin: 5px 8px; opacity: 1; }
.at-menu .at-ext[b-h09xqjofeq],
.at-menu[b-h09xqjofeq]  .at-ext { color: var(--mist); font-size: 13px; }

/* Plan 961 — la fenêtre sous Quitter : le patron du menu ⋯, à gauche. Publier vert comme
   dans la barre, Plus tard discret. */
.at-leave[b-h09xqjofeq] { position: absolute; top: calc(var(--bar) - 6px); left: 14px; width: 300px; padding: 16px 16px 12px; border-radius: 14px; background: var(--paper);
            box-shadow: 0 24px 50px -20px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.04); transform-origin: top left;
            opacity: 0; transform: translateY(-4px) scale(.98); pointer-events: none; visibility: hidden;
            transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s .18s; }
.at-leave.at-on[b-h09xqjofeq] { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .18s var(--ease), transform .18s var(--ease); }
.at-leave p[b-h09xqjofeq] { margin: 0 0 14px; font-size: 14.5px; font-weight: 500; line-height: 1.45; color: var(--ink); }
.at-leave-acts[b-h09xqjofeq] { display: flex; align-items: center; gap: 6px; }
.at-leave-publish[b-h09xqjofeq] { padding: 10px 22px; border-radius: 999px; background: var(--linkooc); color: #fff; font-weight: 600; font-size: 14.5px; transition: background .25s var(--ease); }
.at-leave-publish:hover:not([disabled])[b-h09xqjofeq] { background: var(--linkooc-ink); }
.at-leave-publish[disabled][b-h09xqjofeq] { opacity: .6; cursor: progress; }

/* ─── Le corps : mises en page · site · (vide) ; ambiances en bas ───────── */
.at-body[b-h09xqjofeq] { min-height: 0; display: grid; padding: 0 24px 18px; gap: 14px 22px;
           grid-template-columns: 236px minmax(0, 1fr) 236px; grid-template-rows: minmax(0, 1fr) auto;
           grid-template-areas: "layouts scene ." "strip strip strip"; } /* colonne droite vide : le site reste au centre de l'écran */

/* Les mises en page : deux vignettes, là où était le rail */
.at-layouts[b-h09xqjofeq] { grid-area: layouts; display: flex; flex-direction: column; gap: 16px; padding-top: 44px; min-height: 0; }

/* La scène : le site, grand, posé comme une épreuve. `main` du thème (flex en colonne,
   100vh, overflow hidden) est remis à plat ici. */
.at-scene[b-h09xqjofeq] { grid-area: scene; min-height: 0; height: auto; overflow: visible; display: grid; grid-template-rows: auto minmax(0, 1fr); justify-items: center; }
.at-pages[b-h09xqjofeq] { display: inline-flex; gap: 2px; height: 44px; align-items: center; }
.at-pages button[b-h09xqjofeq] { padding: 6px 12px; font-size: 13.5px; font-weight: 500; color: var(--mist); border-radius: 999px; transition: color .2s, background .2s; }
.at-pages button:hover[b-h09xqjofeq] { color: var(--ink); }
.at-pages button[aria-pressed="true"][b-h09xqjofeq] { color: var(--ink); background: rgba(255,255,255,.7); }
.at-proof[b-h09xqjofeq] { position: relative; width: 100%; min-height: 0; display: grid; place-items: start center; container-type: size; }
.at-frame[b-h09xqjofeq] { position: relative; width: min(100cqw, 100cqh * 16 / 10); aspect-ratio: 16/10; border-radius: 14px; overflow: hidden;
            background: var(--paper); box-shadow: var(--shadow); }
.at-frame iframe[b-h09xqjofeq] { position: absolute; inset: 0; width: 1440px; height: 900px; border: 0; transform-origin: 0 0; opacity: 0; transition: opacity .45s var(--ease); pointer-events: none; background: #fff; }
.at-frame iframe.at-on[b-h09xqjofeq] { opacity: 1; }
.at-veil[b-h09xqjofeq] { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(236,236,232,.55); backdrop-filter: blur(6px); opacity: 0; pointer-events: none;
           transition: opacity .35s var(--ease); z-index: 3; }
.at-veil.at-on[b-h09xqjofeq] { opacity: 1; pointer-events: auto; }

/* Un fichier glissé au-dessus de la fenêtre : le site tout entier reçoit (atelier.js pose
   data-dragging sur la racine). */
.at-frame[b-h09xqjofeq]::after { content: ""; position: absolute; inset: 0; border-radius: 14px; box-shadow: inset 0 0 0 3px var(--linkooc);
                   background: rgba(17,122,58,.06); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 2; }
.atelier[data-dragging] .at-frame[b-h09xqjofeq]::after { opacity: 1; }

/* ─── Issue 625 — la place du logo, posée sur la boîte que le site envoie ─── */
.at-slot[b-h09xqjofeq] { position: absolute; display: none; border-radius: 12px; z-index: 2; transition: background .2s, box-shadow .2s; }
.at-slot[data-placed][b-h09xqjofeq] { display: block; }
.at-slot[b-h09xqjofeq]::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px dashed transparent; transition: border-color .2s; }
.at-slot.at-empty[b-h09xqjofeq] { background: rgba(17,122,58,.10); animation: at-breathe-b-h09xqjofeq 2.4s var(--ease) 2; }
.at-slot.at-empty[b-h09xqjofeq]::before { border-color: var(--linkooc); }
.at-slot.at-empty[b-h09xqjofeq]::after { content: "+"; position: absolute; right: -10px; top: 50%; margin-top: -12px; width: 24px; height: 24px; border-radius: 50%;
                           background: var(--linkooc); color: #fff; font: 600 18px/24px Manrope, sans-serif; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.at-slot:not(.at-empty):hover[b-h09xqjofeq]::before { border-color: var(--linkooc); }
.at-slot:focus-visible[b-h09xqjofeq] { outline-offset: 2px; }
.atelier[data-dragging] .at-slot[b-h09xqjofeq] { background: rgba(17,122,58,.22); box-shadow: 0 0 0 10px rgba(17,122,58,.14); }
.atelier[data-dragging] .at-slot[b-h09xqjofeq]::before { border-color: var(--linkooc); }
.at-slot.at-busy[b-h09xqjofeq] { cursor: progress; animation: at-wait-b-h09xqjofeq 1.2s var(--ease) infinite; }
@keyframes at-breathe-b-h09xqjofeq { 50% { box-shadow: 0 0 0 10px rgba(17,122,58,.14); } }
@keyframes at-wait-b-h09xqjofeq { 50% { box-shadow: 0 0 0 8px rgba(17,122,58,.18); } }
/* ─── Plan 935 — la place de la photo du haut, et son tiroir ────────────────
   Même dessin que la place du logo, posée SOUS elle (z-index 1 < 2) : quand les deux se
   chevauchent, le logo reste dessus et cliquable. Un contour vert au survol (et tant que le
   tiroir est ouvert) ; pointillé vert et « + » quand le haut est sans photo. */
.at-hero-slot[b-h09xqjofeq] { z-index: 1; border-radius: 4px; }
.at-hero-slot[b-h09xqjofeq]::before { border-width: 3px; border-style: solid; }
.at-hero-slot:hover[b-h09xqjofeq]::before,
.at-hero-slot.at-open[b-h09xqjofeq]::before { border-color: var(--linkooc); }
/* Sans photo : le fond de l'ambiance se voit tel quel (aucun voile), seul le pointillé le dit. */
.at-hero-slot.at-empty[b-h09xqjofeq] { background: none; animation: none; }
.at-hero-slot.at-empty[b-h09xqjofeq]::before { border-style: dashed; border-color: var(--linkooc); }
.at-hero-slot.at-empty[b-h09xqjofeq]::after { right: auto; left: 50%; top: auto; bottom: 22px; margin: 0 0 0 -16px; width: 32px; height: 32px; font: 500 24px/32px Manrope, sans-serif; }
.at-hero-slot.at-empty.at-open[b-h09xqjofeq]::after { display: none; }
.atelier[data-dragging] .at-hero-slot[b-h09xqjofeq] { background: none; box-shadow: none; }
.atelier[data-dragging] .at-hero-slot[b-h09xqjofeq]::before { border-color: transparent; }

/* Le tiroir : contre la place, une pointe vers elle (atelier.js donne --hero-bottom, ou
   data-tray-inside quand il n'y a pas la place dessous : il se pose alors en bas du site). */
.at-tray[b-h09xqjofeq] { position: absolute; left: 50%; top: calc(var(--hero-bottom, 60%) + 12px); z-index: 3; display: flex; gap: 10px; padding: 12px;
           max-width: calc(100% - 32px); overflow-x: auto; scrollbar-width: none;
           border-radius: 14px; background: var(--paper); box-shadow: 0 24px 50px -20px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.04);
           opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, -6px);
           transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s .2s; }
.at-tray[b-h09xqjofeq]::-webkit-scrollbar { display: none; }
.at-frame[data-tray-inside] .at-tray[b-h09xqjofeq] { top: auto; bottom: 16px; }
.at-tray.at-on[b-h09xqjofeq] { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition: opacity .2s var(--ease), transform .2s var(--ease); }
/* La pointe : un carré tourné, du même papier, au-dessus du milieu. Hors de la boîte qui
   défile : posée par un filtre d'ombre sur le tiroir, pas par overflow. */
.at-tray-tip[b-h09xqjofeq] { position: absolute; left: 50%; top: calc(var(--hero-bottom, 60%) + 5px); z-index: 4; width: 16px; height: 16px; margin-left: -8px;
               background: var(--paper); transform: rotate(45deg); border-radius: 3px 0 0 0; pointer-events: none;
               opacity: 0; transition: opacity .2s var(--ease); }
.at-tray.at-on + .at-tray-tip[b-h09xqjofeq] { opacity: 1; }
.at-frame[data-tray-inside] .at-tray-tip[b-h09xqjofeq] { display: none; }

.at-tray-add[b-h09xqjofeq],
.at-tray-photo[b-h09xqjofeq] { position: relative; flex: none; width: 112px; height: 80px; border-radius: 9px; }
.at-tray-add[b-h09xqjofeq] { display: grid; place-items: center; border: 1.5px dashed #C9C9C3; color: var(--linkooc); transition: border-color .2s, background .2s; }
.at-tray-add:hover[b-h09xqjofeq], .at-tray-add:focus-within[b-h09xqjofeq] { border-color: var(--linkooc); background: #F3F8F4; }
.at-tray-add svg[b-h09xqjofeq] { width: 26px; height: 26px; }
.at-tray-add[b-h09xqjofeq]  .at-tray-file { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.at-tray.at-busy .at-tray-add[b-h09xqjofeq] { cursor: progress; animation: at-wait-b-h09xqjofeq 1.2s var(--ease) infinite; }

/* Une photo : atténuée tant qu'elle ne défile pas ; encadrée de noir (un liseré de papier
   entre le cadre et la photo) quand elle défile. */
.at-tray-photo[b-h09xqjofeq] { padding: 0; overflow: hidden; opacity: .42; transition: opacity .2s, box-shadow .2s, transform .2s var(--ease); }
.at-tray-photo img[b-h09xqjofeq] { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; background: var(--line); }
.at-tray-photo:hover[b-h09xqjofeq] { opacity: .8; }
.at-tray-photo.at-shown[b-h09xqjofeq] { opacity: 1; box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); cursor: grab; }
.at-tray-photo.at-shown:active[b-h09xqjofeq] { cursor: grabbing; }
.at-tray-photo.at-dragging[b-h09xqjofeq] { opacity: .35; }
.at-tray .at-tray-photo:focus-visible[b-h09xqjofeq] { outline-offset: 5px; border-radius: 9px; }
.at-tray.at-busy .at-tray-photo[b-h09xqjofeq] { cursor: progress; }

/* Sans mouvement : le tiroir apparaît sans glisser. */
@media (prefers-reduced-motion: reduce) {
    .at-tray[b-h09xqjofeq], .at-tray.at-on[b-h09xqjofeq] { transform: translate(-50%, 0); }
}

/* L'input du logo : piloté par atelier.js, jamais vu. */
.at-logo-file[b-h09xqjofeq] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ─── La planche : les ambiances, vraies, muettes ──────────────────────── */
.at-strip[b-h09xqjofeq] { grid-area: strip; display: flex; gap: 14px; overflow-x: auto; padding: 8px 4px 6px; scroll-snap-type: x proximity; scrollbar-width: none;
            mask-image: linear-gradient(90deg, #000 calc(100% - 80px), transparent); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 80px), transparent); }
.at-strip[b-h09xqjofeq]::-webkit-scrollbar { display: none; }
.at-tile[b-h09xqjofeq] { position: relative; flex: none; width: 196px; aspect-ratio: 16/10; border-radius: 10px; overflow: hidden; background: var(--paper);
           box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 8px 20px -14px rgba(0,0,0,.4); scroll-snap-align: start;
           transition: transform .25s var(--ease), box-shadow .25s var(--ease), outline-color .2s;
           /* !important : le thème legacy pose `* { outline: none !important }` */
           outline: 2px solid transparent !important; outline-offset: 3px; }
.at-tile.at-big[b-h09xqjofeq] { width: 100%; }
.at-tile:hover[b-h09xqjofeq] { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 18px 30px -16px rgba(0,0,0,.45); }
.at-tile.at-kept[b-h09xqjofeq] { outline-color: var(--ink) !important; }
.at-tile:focus-within[b-h09xqjofeq] { outline-color: var(--linkooc) !important; }
.at-tile.at-kept:focus-within[b-h09xqjofeq] { outline-color: var(--ink) !important; }

/* La vignette partagée (LkSitePreviewTile) remplit la tuile ; son cadre vert et son
   fond gris n'ont pas cours ici : la tuile porte le bord noir, et c'est tout. */
.at-tile[b-h09xqjofeq]  .lk-site-tile { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--paper); }
.at-tile[b-h09xqjofeq]  .lk-site-tile__hit:focus-visible { box-shadow: none; outline: none !important; }

/* ─── Plan 698 — « Depuis vos photos » : la première tuile de la planche ────
   La tuile d'invitation et la carte de dépôt, le CSS du prototype (`.tile.invite`,
   `.drop`, `.shots`) préfixé `at-`. Après les règles des tuiles : à spécificité égale,
   `.at-tile.at-invite` bat `.at-tile:hover` (pas d'ombre au survol). */
.at-tile.at-invite[b-h09xqjofeq] { background: transparent; border: 1.5px dashed #C9C9C3; box-shadow: none; display: grid; place-items: center; text-align: center; padding: 1px 6px; }
.at-tile.at-invite:hover[b-h09xqjofeq] { border-color: var(--linkooc); background: #F3F8F4; }
/* Un clic de souris ne laisse pas d'anneau ; le clavier, si. */
.at-tile.at-invite:focus-within:not(:focus-visible)[b-h09xqjofeq] { outline-color: transparent !important; }
.at-invite-in[b-h09xqjofeq] { display: grid; gap: 6px; padding: 0 18px; }
.at-invite-in strong[b-h09xqjofeq] { font-size: 13.5px; font-weight: 600; }
.at-invite-in span[b-h09xqjofeq] { font-size: 11.5px; color: var(--mist); line-height: 1.35; }

.at-drop[b-h09xqjofeq] { width: 500px; padding: 32px 34px; border-radius: 18px; background: var(--paper); box-shadow: var(--shadow); text-align: center; }
.at-drop h2[b-h09xqjofeq] { margin: 0 0 8px; font-size: 23px; line-height: normal; font-weight: 300; letter-spacing: -.01em; }
.at-drop p[b-h09xqjofeq] { margin: 0 0 20px; color: var(--mist); font-size: 14.5px; line-height: 1.5; }
.at-zone[b-h09xqjofeq] { position: relative; border: 1.5px dashed var(--line); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; transition: border-color .2s, background .2s; }
.at-zone:hover[b-h09xqjofeq], .at-zone:focus-within[b-h09xqjofeq] { border-color: var(--linkooc); background: #F3F8F4; }
.at-zone.at-busy[b-h09xqjofeq] { cursor: progress; }
.at-zone strong[b-h09xqjofeq] { font-weight: 600; font-size: 15px; }
.at-zone span[b-h09xqjofeq] { color: var(--mist); font-size: 13px; }
/* L'input de fichier (composant InputFile, d'où ::deep) couvre la zone, invisible. */
.at-zone[b-h09xqjofeq]  .at-zone-file { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.at-drop .at-later[b-h09xqjofeq] { margin-top: 14px; font-size: 13px; color: var(--mist); text-decoration: underline; text-underline-offset: 3px; }
.at-shots[b-h09xqjofeq] { display: flex; gap: 8px; margin-top: 14px; justify-content: center; }
.at-shots img[b-h09xqjofeq] { width: 72px; height: 54px; object-fit: cover; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.2); opacity: 0; transform: translateY(6px); animation: at-pop-b-h09xqjofeq .5s var(--ease) forwards; }
.at-shots img:nth-child(2)[b-h09xqjofeq] { animation-delay: .08s; }
.at-shots img:nth-child(3)[b-h09xqjofeq] { animation-delay: .16s; }
.at-shots img:nth-child(4)[b-h09xqjofeq] { animation-delay: .24s; }
.at-shots img:nth-child(5)[b-h09xqjofeq] { animation-delay: .32s; }
.at-shots img:nth-child(6)[b-h09xqjofeq] { animation-delay: .40s; }
@keyframes at-pop-b-h09xqjofeq { to { opacity: 1; transform: none; } }
/* Sans animation, les photos sont là d'emblée. */
@media (prefers-reduced-motion: reduce) {
    .at-shots img[b-h09xqjofeq] { opacity: 1; transform: none; }
}

/* ─── Le message qui suit un geste ─────────────────────────────────────── */
.at-toast[b-h09xqjofeq] { position: fixed; left: 50%; bottom: 186px; transform: translate(-50%, 20px); opacity: 0; display: flex; gap: 14px; align-items: center;
            background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 999px; font-size: 14px; transition: all .35s var(--ease);
            pointer-events: none; white-space: nowrap; z-index: 9; }
.at-toast.at-on[b-h09xqjofeq] { opacity: 1; transform: translate(-50%, 0); }
.at-toast.at-on.at-act[b-h09xqjofeq] { pointer-events: auto; }
.at-toast a[b-h09xqjofeq] { color: #9BE3B4; font-weight: 600; text-decoration: none; }
.at-toast a:hover[b-h09xqjofeq] { color: #C4F0D2; }
/* /Pages/Establishment/EstablishmentDetailPage.razor.rz.scp.css */
/* Plan 401 — regles deplacees depuis le <style> global du .razor vers
   l'isolation CSS Blazor. Les declarations sont inchangees.

   Plan 414 — la barre d'onglets est devenue un LkTabs (Components/Ui) : les
   regles .linkooc-tabs-container / .linkooc-tabs / .linkooc-tab de cette page
   sont mortes et supprimees. La primitive porte le defilement a barre masquee
   et la hauteur 44px (groupes 5 et 20).

   Pourquoi les :where() : le compilateur ajoute [b-xxxxxxxxxx] a la fin du
   selecteur, ce qui lui ajoute le poids d'une classe. Sans compensation, ces
   regles se mettraient a battre des regles globales plus specifiques
   (mobile.css, plans 393/399) qu'elles perdaient jusqu'ici. :where() sur la
   premiere classe rend ce poids : la specificite reste exactement celle du
   <style> d'origine, seule la portee change. */

:where(.linkooc-settings-content)[b-d9xw5osh5v],
[b-d9xw5osh5v] :where(.linkooc-settings-content) {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--linkooc-spacing-lg);
    background: var(--linkooc-surface);
}

:where(.linkooc-dropdown-toggle)[b-d9xw5osh5v]::after,
[b-d9xw5osh5v] :where(.linkooc-dropdown-toggle)::after {
    content: '';
    display: inline-block;
    margin-left: 0.5rem;
    vertical-align: middle;
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-left: 0.3em solid transparent;
}

:where(.linkooc-dropdown-menu)[b-d9xw5osh5v],
[b-d9xw5osh5v] :where(.linkooc-dropdown-menu) {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 1050;
    min-width: 280px;
    background: var(--linkooc-bg, #fff);
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 0.5rem 0;
    animation: linkoocDropdownIn 0.15s ease-out;
}

@media (max-width: 768px) {
    :where(.linkooc-page-header)[b-d9xw5osh5v],
    [b-d9xw5osh5v] :where(.linkooc-page-header) {
        padding: 0.75rem 0.75rem 0.5rem !important;
    }

    :where(.linkooc-settings-content)[b-d9xw5osh5v],
    [b-d9xw5osh5v] :where(.linkooc-settings-content) {
        padding: var(--linkooc-spacing-md);
    }
}
/* /Pages/Establishment/EstablishmentListPage.razor.rz.scp.css */
/* Plan 401 — regles deplacees depuis le <style> global du .razor vers
   l'isolation CSS Blazor. Les declarations sont inchangees.

   Pourquoi les :where() : le compilateur ajoute [b-xxxxxxxxxx] a la fin du
   selecteur, ce qui lui ajoute le poids d'une classe. Sans compensation, ces
   regles se mettraient a battre des regles globales plus specifiques
   (mobile.css, plans 393/399) qu'elles perdaient jusqu'ici. :where() sur la
   premiere classe rend ce poids : la specificite reste exactement celle du
   <style> d'origine, seule la portee change. */

:where(.linkooc-page-header)[b-mptnzmgd32],
[b-mptnzmgd32] :where(.linkooc-page-header) {
    flex-shrink: 0;
}

:where(.linkooc-dropdown-toggle)[b-mptnzmgd32]::after,
[b-mptnzmgd32] :where(.linkooc-dropdown-toggle)::after {
    content: '';
    display: inline-block;
    margin-left: 0.5rem;
    vertical-align: middle;
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-left: 0.3em solid transparent;
}

:where(.linkooc-dropdown-menu)[b-mptnzmgd32],
[b-mptnzmgd32] :where(.linkooc-dropdown-menu) {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 1050;
    min-width: 280px;
    background: var(--linkooc-bg, #fff);
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 0.5rem 0;
    animation: linkoocDropdownIn 0.15s ease-out;
}

:where(.linkooc-empty-state) h2[b-mptnzmgd32],
[b-mptnzmgd32] :where(.linkooc-empty-state) h2 {
    color: var(--linkooc-text, #000601);
    font-weight: 600;
}
/* /Pages/Establishment/Panels/EstablishmentApparencePanel.razor.rz.scp.css */
/* Plan 803 — Apparence › Tags : « Vos tags », la rangée des tags du restaurant.
   Le reste du panneau garde son bloc <style> historique ; ce qui est neuf vit ici, scopé. */

.tag-editor-toolbar__actions[b-tn12b4b90n] {
    display: inline-flex;
    align-items: center;
    gap: var(--linkooc-spacing-sm, 0.5rem);
}

.tag-definition-row[b-tn12b4b90n] {
    display: flex;
    flex-direction: column;
    gap: var(--linkooc-spacing-xs, 0.25rem);
    margin-bottom: var(--linkooc-spacing-md, 1rem);
}

.tag-definition-row__label[b-tn12b4b90n] {
    color: var(--linkooc-text-muted);
    font-size: var(--linkooc-list-item-desc-size, 0.8125rem);
    font-weight: 600;
}

.tag-definition-row__chips[b-tn12b4b90n] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--linkooc-spacing-xs, 0.375rem);
}

/* Le chip est muet sur l'état : c'est l'anneau qui dit « c'est lui que vous habillez ».
   Pas de remplissage plein — un dessin vert sur un fond vert disparaîtrait. */
.tag-definition-chip[b-tn12b4b90n] {
    display: inline-flex;
    align-items: center;
    gap: var(--linkooc-spacing-xs, 0.375rem);
    min-height: var(--linkooc-control-height, 2rem);
    padding: 0 var(--linkooc-spacing-sm, 0.625rem);
    border: var(--linkooc-border-width, 1px) solid var(--linkooc-border-color);
    border-radius: var(--linkooc-control-radius, 1.5rem);
    background: var(--linkooc-surface);
    color: var(--linkooc-text-secondary);
    font-family: var(--linkooc-font-family);
    font-size: var(--linkooc-list-item-desc-size, 0.8125rem);
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color var(--linkooc-transition-fast, 150ms ease),
                color var(--linkooc-transition-fast, 150ms ease),
                box-shadow var(--linkooc-transition-fast, 150ms ease);
}

.tag-definition-chip:hover[b-tn12b4b90n] {
    border-color: var(--linkooc-button-primary);
    color: var(--linkooc-text);
}

.tag-definition-chip:focus-visible[b-tn12b4b90n] {
    outline: 2px solid var(--linkooc-button-primary);
    outline-offset: 2px;
}

.tag-definition-chip--edited[b-tn12b4b90n],
.tag-definition-chip--edited:hover[b-tn12b4b90n] {
    border-color: var(--linkooc-button-primary);
    box-shadow: 0 0 0 1px var(--linkooc-button-primary);
    color: var(--linkooc-text);
}
/* /Pages/Establishment/Panels/EstablishmentGooglePanel.razor.rz.scp.css */
.google-connection-panel[b-uwm74k07ma] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.google-connection-card[b-uwm74k07ma] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: 18px;
    background: var(--linkooc-surface, #ffffff);
}

.google-connection-card__header[b-uwm74k07ma],
.google-management-card__header[b-uwm74k07ma] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.google-connection-card__intro[b-uwm74k07ma],
.google-connection-account__subline[b-uwm74k07ma],
.google-connection-footnote[b-uwm74k07ma],
.google-management-card__text[b-uwm74k07ma] {
    margin: 0;
    color: var(--linkooc-text-muted, #6d6d6d);
    line-height: 1.5;
}

.google-connection-loading[b-uwm74k07ma] {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--linkooc-text-muted, #6d6d6d);
    font-size: 0.95rem;
}

.google-connection-account[b-uwm74k07ma] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.google-connection-account__meta[b-uwm74k07ma] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1 1 280px;
}

.google-connection-account__handle[b-uwm74k07ma],
.google-management-card__title[b-uwm74k07ma],
.google-review-card__author[b-uwm74k07ma] {
    color: var(--linkooc-text-primary, #1c1c1c);
    font-weight: 700;
}

.google-connection-account__handle[b-uwm74k07ma] {
    font-size: 1rem;
}

.google-connection-account__dates[b-uwm74k07ma] {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* Plan 414 : .google-field-label retiré de la liste — les deux libellés de
   champ sont passés à LkLabel (14px/500 canonique, groupe 12). */
.google-connection-account__dates span[b-uwm74k07ma],
.google-place-summary__label[b-uwm74k07ma] {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--linkooc-text-muted, #6d6d6d);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.google-connection-account__dates strong[b-uwm74k07ma],
.google-selection-badge[b-uwm74k07ma],
.google-review-card__meta[b-uwm74k07ma],
.google-review-card__stars[b-uwm74k07ma] {
    color: var(--linkooc-text-primary, #1c1c1c);
}

.google-connection-actions[b-uwm74k07ma],
.google-selection-actions[b-uwm74k07ma] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.google-management-grid[b-uwm74k07ma] {
    display: grid;
    gap: 1rem;
}

.google-management-card[b-uwm74k07ma] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    border-radius: 16px;
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    background: var(--linkooc-surface-hover, #f7f7f8);
}

.google-place-summary[b-uwm74k07ma] {
    padding: 0.9rem 1rem;
    border-radius: 14px;
    background: var(--linkooc-surface, #ffffff);
    border: 1px solid var(--linkooc-border-color, #dee2e6);
}

.google-place-summary code[b-uwm74k07ma] {
    display: inline-block;
    margin-top: 0.35rem;
    word-break: break-all;
}

.google-selection-badge[b-uwm74k07ma] {
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    background: var(--linkooc-surface, #ffffff);
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    font-size: 0.82rem;
    font-weight: 700;
}

.google-review-list[b-uwm74k07ma] {
    display: grid;
    gap: 0.85rem;
}

.google-review-card[b-uwm74k07ma] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.9rem;
    padding: 1rem;
    border-radius: 16px;
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    background: var(--linkooc-surface, #ffffff);
    cursor: pointer;
}

.google-review-card__check[b-uwm74k07ma] {
    padding-top: 0.2rem;
}

.google-review-card__body[b-uwm74k07ma] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.google-review-card__header[b-uwm74k07ma] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.google-review-card__meta[b-uwm74k07ma] {
    font-size: 0.85rem;
    color: var(--linkooc-text-muted, #6d6d6d);
}

.google-review-card__stars[b-uwm74k07ma] {
    font-size: 0.95rem;
    color: #f5b301;
    white-space: nowrap;
}

.google-review-card__comment[b-uwm74k07ma] {
    margin: 0;
    color: var(--linkooc-text-muted, #6d6d6d);
    line-height: 1.55;
}

.google-connection-state[b-uwm74k07ma] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 16px;
    border: 1px solid var(--linkooc-border-color, #dee2e6);
}

.google-connection-state--warning[b-uwm74k07ma] {
    background: var(--linkooc-warning-light, #fff4db);
}

.google-connection-state--muted[b-uwm74k07ma] {
    background: var(--linkooc-surface-hover, #f7f7f8);
}

.google-connection-state--danger[b-uwm74k07ma] {
    background: var(--linkooc-danger-light, #fde7e7);
}

.google-connection-state__icon[b-uwm74k07ma] {
    font-size: 1.05rem;
    line-height: 1;
    margin-top: 0.1rem;
}

.google-connection-state__title[b-uwm74k07ma] {
    color: var(--linkooc-text-primary, #1c1c1c);
    font-weight: 700;
    margin-bottom: 0.2rem;
}

.google-connection-state__text[b-uwm74k07ma] {
    margin: 0;
    color: var(--linkooc-text-muted, #6d6d6d);
    line-height: 1.5;
}

.google-avatar[b-uwm74k07ma] {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    object-fit: cover;
    border: 2px solid var(--linkooc-border-color, #dee2e6);
    background: var(--linkooc-surface-hover, #f7f7f8);
    flex: 0 0 auto;
}

.google-avatar--placeholder[b-uwm74k07ma] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--linkooc-text-muted, #6d6d6d);
    font-size: 1.2rem;
}

@media (max-width: 768px) {
    .google-connection-card[b-uwm74k07ma] {
        padding: 1rem;
    }

    .google-connection-account[b-uwm74k07ma] {
        align-items: flex-start;
    }

    .google-connection-account__dates[b-uwm74k07ma],
    .google-review-card[b-uwm74k07ma],
    .google-management-grid[b-uwm74k07ma] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Establishment/Panels/EstablishmentInstagramPanel.razor.rz.scp.css */
.instagram-connection-panel[b-gsg0tstps3] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.instagram-connection-card[b-gsg0tstps3] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: 18px;
    background: var(--linkooc-surface, #ffffff);
}

.instagram-connection-card__header[b-gsg0tstps3] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.instagram-connection-card__intro[b-gsg0tstps3],
.instagram-connection-account__subline[b-gsg0tstps3],
.instagram-connection-account__id[b-gsg0tstps3],
.instagram-connection-footnote[b-gsg0tstps3] {
    margin: 0;
    color: var(--linkooc-text-muted, #6d6d6d);
    line-height: 1.5;
}

.instagram-connection-loading[b-gsg0tstps3] {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--linkooc-text-muted, #6d6d6d);
    font-size: 0.95rem;
}

.instagram-connection-account[b-gsg0tstps3] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.instagram-connection-account__meta[b-gsg0tstps3] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1 1 280px;
}

.instagram-connection-account__handle[b-gsg0tstps3] {
    color: var(--linkooc-text-primary, #1c1c1c);
    font-size: 1rem;
    font-weight: 700;
}

.instagram-connection-account__dates[b-gsg0tstps3] {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.instagram-connection-account__dates span[b-gsg0tstps3] {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--linkooc-text-muted, #6d6d6d);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.instagram-connection-account__dates strong[b-gsg0tstps3] {
    display: block;
    color: var(--linkooc-text-primary, #1c1c1c);
    font-size: 0.95rem;
    line-height: 1.4;
}

.instagram-connection-actions[b-gsg0tstps3] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.instagram-connection-state[b-gsg0tstps3] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 16px;
    border: 1px solid var(--linkooc-border-color, #dee2e6);
}

.instagram-connection-state--warning[b-gsg0tstps3] {
    background: var(--linkooc-warning-light, #fff4db);
}

.instagram-connection-state--muted[b-gsg0tstps3] {
    background: var(--linkooc-surface-hover, #f7f7f8);
}

.instagram-connection-state--danger[b-gsg0tstps3] {
    background: var(--linkooc-danger-light, #fde7e7);
}

.instagram-connection-state__icon[b-gsg0tstps3] {
    font-size: 1.05rem;
    line-height: 1;
    margin-top: 0.1rem;
}

.instagram-connection-state__title[b-gsg0tstps3] {
    color: var(--linkooc-text-primary, #1c1c1c);
    font-weight: 700;
    margin-bottom: 0.2rem;
}

.instagram-connection-state__text[b-gsg0tstps3] {
    margin: 0;
    color: var(--linkooc-text-muted, #6d6d6d);
    line-height: 1.5;
}

.instagram-avatar[b-gsg0tstps3] {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    object-fit: cover;
    border: 2px solid var(--linkooc-border-color, #dee2e6);
    background: var(--linkooc-surface-hover, #f7f7f8);
    flex: 0 0 auto;
}

.instagram-avatar--placeholder[b-gsg0tstps3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--linkooc-text-muted, #6d6d6d);
    font-size: 1.2rem;
}

@media (max-width: 768px) {
    .instagram-connection-card[b-gsg0tstps3] {
        padding: 1rem;
    }

    .instagram-connection-account[b-gsg0tstps3] {
        align-items: flex-start;
    }

    .instagram-connection-account__dates[b-gsg0tstps3] {
        grid-template-columns: 1fr;
    }
}

.instagram-preview-card__sub[b-gsg0tstps3] {
    color: var(--instagram-muted);
    font-size: 0.9rem;
}

.instagram-preview-card__rows[b-gsg0tstps3],
.instagram-side-stack[b-gsg0tstps3],
.instagram-feature-list[b-gsg0tstps3],
.instagram-checklist[b-gsg0tstps3],
.instagram-step-list[b-gsg0tstps3] {
    display: grid;
    gap: 0.85rem;
}

.instagram-card[b-gsg0tstps3],
.instagram-message[b-gsg0tstps3] {
    background: var(--instagram-card);
    padding: 1.45rem;
}

.instagram-card__header[b-gsg0tstps3] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.15rem;
}

.instagram-card__header h6[b-gsg0tstps3],
.instagram-message h6[b-gsg0tstps3],
.instagram-empty-state h3[b-gsg0tstps3],
.instagram-loading-state h3[b-gsg0tstps3] {
    margin: 0;
    color: var(--instagram-ink);
    font-size: 1.1rem;
    font-weight: 700;
}

.instagram-account-panel__identity[b-gsg0tstps3] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--instagram-border);
}

.instagram-story-note[b-gsg0tstps3] {
    margin-bottom: 1.15rem;
    padding: 1rem 1.1rem;
    border-radius: 20px;
    border: 1px solid var(--instagram-border);
    background: linear-gradient(135deg, color-mix(in srgb, var(--linkooc-surface) 82%, var(--instagram-accent-surface) 18%), color-mix(in srgb, var(--linkooc-surface) 68%, var(--instagram-accent-surface) 32%));
}

.instagram-story-note p[b-gsg0tstps3] {
    margin: 0;
    color: var(--instagram-ink);
    line-height: 1.65;
}

.instagram-avatar[b-gsg0tstps3] {
    width: 4.5rem;
    height: 4.5rem;
    flex: 0 0 4.5rem;
    object-fit: cover;
    border-radius: 999px;
    border: 3px solid rgba(255, 255, 255, 0.92);
    background: linear-gradient(135deg, color-mix(in srgb, var(--linkooc-gradient-1) 18%, transparent), color-mix(in srgb, var(--linkooc-gradient-3) 24%, transparent));
    box-shadow: 0 16px 30px color-mix(in srgb, var(--linkooc-primary) 18%, transparent);
}

.instagram-avatar--compact[b-gsg0tstps3] {
    width: 3.5rem;
    height: 3.5rem;
    flex-basis: 3.5rem;
    border-width: 2px;
}

.instagram-avatar--placeholder[b-gsg0tstps3],
.instagram-empty-state__icon[b-gsg0tstps3],
.instagram-message__icon[b-gsg0tstps3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.instagram-avatar--placeholder[b-gsg0tstps3] {
    color: var(--instagram-accent);
}

.instagram-link-button[b-gsg0tstps3] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--instagram-border-strong);
    padding: 0.75rem 1rem;
    color: var(--instagram-ink);
    background: color-mix(in srgb, var(--linkooc-surface) 88%, var(--linkooc-bg) 12%);
    text-decoration: none;
    font-weight: 600;
}

.instagram-link-button:hover[b-gsg0tstps3] {
    color: var(--instagram-ink);
    background: var(--linkooc-surface-hover);
}

.instagram-empty-state[b-gsg0tstps3],
.instagram-loading-state[b-gsg0tstps3] {
    align-items: flex-start;
}

.instagram-empty-state__icon[b-gsg0tstps3],
.instagram-message__icon[b-gsg0tstps3] {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 18px;
    font-size: 1.35rem;
    color: var(--instagram-accent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--linkooc-primary-light) 72%, var(--linkooc-bg) 28%), color-mix(in srgb, var(--linkooc-primary) 14%, var(--linkooc-bg) 86%));
}

.instagram-empty-state--warning .instagram-empty-state__icon[b-gsg0tstps3] {
    color: var(--linkooc-warning);
    background: linear-gradient(135deg, color-mix(in srgb, var(--linkooc-warning-light) 72%, var(--linkooc-bg) 28%), color-mix(in srgb, var(--linkooc-warning) 18%, var(--linkooc-bg) 82%));
}

.instagram-step-list[b-gsg0tstps3] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.instagram-step-list li[b-gsg0tstps3],
.instagram-feature-list li[b-gsg0tstps3],
.instagram-checklist li[b-gsg0tstps3] {
    display: grid;
    gap: 0.85rem;
    border-radius: 18px;
    border: 1px solid var(--instagram-border);
    background: color-mix(in srgb, var(--linkooc-surface) 86%, var(--linkooc-bg) 14%);
    padding: 0.95rem 1rem;
}

.instagram-step-list li[b-gsg0tstps3] {
    grid-template-columns: 2rem 1fr;
    align-items: start;
}

.instagram-step-list__index[b-gsg0tstps3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    color: var(--instagram-accent-strong);
    background: color-mix(in srgb, var(--linkooc-surface) 84%, var(--instagram-accent-surface) 16%);
    font-weight: 700;
    border: 1px solid var(--instagram-border);
}

.instagram-feature-list[b-gsg0tstps3],
.instagram-checklist[b-gsg0tstps3] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.instagram-feature-list li[b-gsg0tstps3],
.instagram-checklist li[b-gsg0tstps3] {
    grid-template-columns: 1.25rem 1fr;
    align-items: start;
}

.instagram-feature-list i[b-gsg0tstps3],
.instagram-checklist i[b-gsg0tstps3] {
    margin-top: 0.15rem;
    color: var(--instagram-accent);
}

.instagram-feature-list strong[b-gsg0tstps3] {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--instagram-ink);
}

.instagram-message[b-gsg0tstps3] {
    gap: 1rem;
    background: linear-gradient(135deg, var(--instagram-danger-surface), color-mix(in srgb, var(--instagram-danger-surface) 58%, var(--linkooc-surface) 42%));
}

.instagram-message__icon[b-gsg0tstps3] {
    flex: 0 0 3.25rem;
    color: var(--linkooc-danger);
    background: color-mix(in srgb, var(--linkooc-danger-light) 35%, var(--linkooc-surface) 65%);
}

@media (max-width: 991.98px) {
    .instagram-skeleton-grid[b-gsg0tstps3],
    .instagram-layout[b-gsg0tstps3],
    .instagram-hero[b-gsg0tstps3] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .instagram-hero[b-gsg0tstps3],
    .instagram-card[b-gsg0tstps3],
    .instagram-message[b-gsg0tstps3] {
        padding: 1.25rem;
        border-radius: 24px;
    }

    .instagram-hero__facts[b-gsg0tstps3],
    .instagram-stat-grid[b-gsg0tstps3] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .instagram-account-panel__identity[b-gsg0tstps3],
    .instagram-card__header[b-gsg0tstps3],
    .instagram-action-row[b-gsg0tstps3] {
        flex-direction: column;
        align-items: stretch;
    }

    .instagram-link-button[b-gsg0tstps3] {
        justify-content: center;
    }
}

@keyframes instagramShimmer-b-gsg0tstps3 {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}
/* /Pages/Establishment/Panels/FrameDrawing.razor.rz.scp.css */
/* Plan 834 — le cadre, comme sur le site (globals.css, .lk-category-frame__*). */
.bo-frame[b-fga85cb35c] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.bo-frame__corner[b-fga85cb35c] {
    position: absolute;
}

.bo-frame__corner[b-fga85cb35c]  svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.bo-frame__edge[b-fga85cb35c] {
    position: absolute;
    display: flex;
    align-items: center;
}

.bo-frame__edge--h[b-fga85cb35c] {
    height: 0;
}

.bo-frame__edge--v[b-fga85cb35c] {
    width: 0;
}

.bo-frame__segment[b-fga85cb35c] {
    position: relative;
    flex: 1 1 0;
    align-self: stretch;
}

.bo-frame__lines[b-fga85cb35c] {
    position: absolute;
    display: block;
    overflow: visible;
}

.bo-frame__line[b-fga85cb35c] {
    fill: var(--divider-color-primary, #333333);
}

.bo-frame__ornament[b-fga85cb35c] {
    flex: 0 0 auto;
    padding: 0 4px;
}

.bo-frame__ornament[b-fga85cb35c]  svg,
.bo-frame__ornament[b-fga85cb35c]  img {
    display: block;
    width: 100%;
    height: auto;
}

.bo-frame__mid[b-fga85cb35c] {
    flex: 0 0 auto;
    display: block;
    overflow: visible;
}
/* /Pages/Establishment/Panels/MenuFrameAssetsCard.razor.rz.scp.css */
/* Plan 834 — la carte « Autour de la catégorie ». Même gabarit que la carte de
   l'ornement (MenuDividerAssetsCard.razor, plan 800/806), tokens --linkooc-*. */

.frm-toggle-row[b-hg555i8qbe] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: var(--linkooc-spacing-sm, 0.75rem);
    border-radius: var(--linkooc-radius-sm, 0.5rem);
    background-color: var(--linkooc-surface-hover, #f8f9fa);
}

.frm-toggle-icon[b-hg555i8qbe] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--linkooc-radius-sm, 0.5rem);
    background-color: var(--linkooc-primary-subtle, #e8f5e9);
    color: var(--linkooc-primary-ink, #08781B);
    font-size: 1rem;
    flex-shrink: 0;
}

.frm-toggle-label[b-hg555i8qbe] {
    font-size: var(--linkooc-body-size, 0.875rem);
    font-weight: 500;
    color: var(--linkooc-text, #323338);
}

.frm-toggle-desc[b-hg555i8qbe] {
    font-size: var(--linkooc-small-size, 0.75rem);
    color: var(--linkooc-text-muted, #6c757d);
}

.frm-editor-surface[b-hg555i8qbe] {
    margin-top: var(--linkooc-spacing-sm, 0.5rem);
}

/* ── La bande : le cadre autour de « Entrées », sur la carte du site. ── */
.frm-tile[b-hg555i8qbe] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
}

.frm-tile__box[b-hg555i8qbe] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.frm-tile__title[b-hg555i8qbe] {
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
}

/* ── « Côtés » : la grille 3 × 3, la case du centre vide. ── */
.frm-sides__grid[b-hg555i8qbe] {
    display: grid;
    grid-template-columns: repeat(3, 36px);
    grid-template-rows: repeat(3, 36px);
    gap: 4px;
    margin-top: 0.375rem;
}

.frm-sides__cell[b-hg555i8qbe] {
    display: block;
    padding: 0;
    border: var(--linkooc-border-width, 1px) solid var(--linkooc-border-color, #dfe3e0);
    border-radius: 6px;
    background: var(--linkooc-surface, #ffffff);
    cursor: pointer;
    transition: background-color var(--linkooc-transition-fast, 150ms ease),
                border-color var(--linkooc-transition-fast, 150ms ease);
}

.frm-sides__cell:hover[b-hg555i8qbe] {
    border-color: var(--linkooc-button-primary, #08781B);
}

.frm-sides__cell:focus-visible[b-hg555i8qbe] {
    outline: 2px solid var(--linkooc-button-primary, #08781B);
    outline-offset: 2px;
}

.frm-sides__cell.is-on[b-hg555i8qbe] {
    border-color: var(--linkooc-button-primary, #08781B);
    background: var(--linkooc-button-primary, #08781B);
}

.frm-sides__cell--void[b-hg555i8qbe] {
    border: 0;
    background: transparent;
    cursor: default;
}

/* ── L'aperçu : la carte du site, Mobile (358) ou Desktop (704), réduite d'un bloc
   quand la colonne est plus étroite (même zoom que l'ornement, plan 806). ── */
.frm-stage[b-hg555i8qbe] {
    container-type: inline-size;
    display: flex;
    justify-content: center;
    min-height: 420px;
    padding: 1.25rem 0.75rem;
    border-radius: var(--linkooc-radius-sm, 8px);
    background: var(--linkooc-surface-hover, #f4f5f4);
}

.frm-device[b-hg555i8qbe] {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
}

.frm-card[b-hg555i8qbe] {
    flex: 0 0 auto;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 6, 1, 0.12);
    text-align: center;
    zoom: min(1, tan(atan2(100cqw, var(--frm-card-w, 704px))));
}

.frm-box[b-hg555i8qbe] {
    position: relative;
}

.frm-card__title[b-hg555i8qbe] {
    font-weight: 600;
    line-height: 1.2;
}

.frm-card__divider[b-hg555i8qbe] {
    display: flex;
    justify-content: center;
}

.frm-card__drawing[b-hg555i8qbe] {
    width: 78%;
    display: block;
}

.frm-card__drawing[b-hg555i8qbe]  svg,
.frm-edge-ornament[b-hg555i8qbe]  svg {
    display: block;
    width: 100%;
    height: auto;
}

.frm-edge-ornament[b-hg555i8qbe] {
    display: block;
}

.frm-card__item[b-hg555i8qbe] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.35em 0;
    font-weight: 700;
    text-align: left;
}

@media (max-width: 720px) {
    .frm-stage[b-hg555i8qbe] {
        min-height: 0;
    }
}

@media (max-width: 576px) {
    .frm-toggle-row .frm-toggle-icon[b-hg555i8qbe],
    .frm-guide[b-hg555i8qbe]  span,
    .frm-guide[b-hg555i8qbe]  .linkooc-link-wiki-external {
        display: none;
    }

    .frm-toggle-row[b-hg555i8qbe] {
        gap: 0.5rem;
    }
}

.frm-imported[b-hg555i8qbe] {
    color: var(--linkooc-text-muted, #6d6d6d);
    font-size: 0.78rem;
}
/* /Pages/Establishment/Panels/TagsPanel.razor.rz.scp.css */
/* Plan 814 — Apparence › Tags. Jetons --linkooc-* partout (le BackOffice a un thème sombre) ;
   seuls les deux spécimens gardent leurs fonds clairs : ils montrent le site et le papier. */

.tp-loading[b-mdioq35dp8] {
    padding: var(--linkooc-spacing-lg, 1.5rem);
}

.tp-loading__block[b-mdioq35dp8] {
    width: 100%;
    height: 14rem;
    border-radius: var(--linkooc-radius-md, 0.75rem);
}

.tp[b-mdioq35dp8] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(22rem, 31rem);
    gap: var(--linkooc-spacing-lg, 1.5rem);
    align-items: start;
    padding: var(--linkooc-spacing-lg, 1.5rem);
}

.tp-card[b-mdioq35dp8] {
    background: var(--linkooc-surface, #fff);
    border: 1px solid var(--linkooc-border-color, #e6e6e6);
    border-radius: var(--linkooc-radius-md, 0.75rem);
    padding: var(--linkooc-spacing-md, 1rem) var(--linkooc-spacing-lg, 1.25rem);
}

.tp-spec[b-mdioq35dp8] {
    padding-left: var(--linkooc-spacing-md, 1rem);
    padding-right: var(--linkooc-spacing-md, 1rem);
}

/* La liste défile seule : le spécimen reste à l'écran pendant qu'on habille un tag du bas
   de la liste (la page défile dans un ancêtre « overflow: hidden », un sticky n'y tient pas). */
.tp-list[b-mdioq35dp8] {
    max-height: calc(100vh - 21rem);
    min-height: 22rem;
    overflow-y: auto;
}

/* ─── Liste ─── */

.tp-head[b-mdioq35dp8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--linkooc-spacing-sm, 0.5rem);
}

.tp-label[b-mdioq35dp8] {
    margin: 0;
    font-size: var(--linkooc-small-size, 0.75rem);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--linkooc-text-muted, #6d6d6d);
}

[b-mdioq35dp8] .tp-guide {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    color: var(--linkooc-text-muted, #6d6d6d);
    text-decoration: none;
}

[b-mdioq35dp8] .tp-guide:hover {
    background: var(--linkooc-hover-bg);
    color: var(--linkooc-primary-ink);
}

.tp-row[b-mdioq35dp8] {
    display: flex;
    align-items: center;
    gap: var(--linkooc-spacing-sm, 0.5rem);
    border: 1px solid transparent;
    border-radius: var(--linkooc-radius-sm, 0.5rem);
    padding-right: var(--linkooc-spacing-sm, 0.5rem);
}

.tp-row:hover[b-mdioq35dp8] {
    background: var(--linkooc-list-hover-bg, var(--linkooc-hover-bg));
}

.tp-row--open[b-mdioq35dp8],
.tp-row--open:hover[b-mdioq35dp8] {
    background: var(--linkooc-primary-light);
    border-color: var(--linkooc-primary);
}

.tp-row__open[b-mdioq35dp8] {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.875rem;
    padding: 0.5rem 0.5rem;
    background: none;
    border: 0;
    color: var(--linkooc-text);
    text-align: left;
    cursor: pointer;
}

.tp-row--new .tp-row__open[b-mdioq35dp8] {
    cursor: default;
}

.tp-row__open:focus-visible[b-mdioq35dp8] {
    outline: none;
    box-shadow: 0 0 0 0.125rem var(--linkooc-primary-subtle);
    border-radius: var(--linkooc-radius-sm, 0.5rem);
}

.tp-row__ico[b-mdioq35dp8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
}

.tp-row__name[b-mdioq35dp8] {
    overflow: hidden;
    font-size: 0.9375rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tp-row__count[b-mdioq35dp8] {
    font-size: var(--linkooc-small-size, 0.75rem);
    color: var(--linkooc-text-muted, #6d6d6d);
    white-space: nowrap;
}

.tp-row__chosen[b-mdioq35dp8] {
    display: flex;
    align-items: center;
    gap: 0.125rem;
}

.tp-check[b-mdioq35dp8] {
    width: 1.125rem;
    height: 1.125rem;
    margin: 0 0 0 0.375rem;
    cursor: pointer;
}

.tp-add[b-mdioq35dp8] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: var(--linkooc-spacing-sm, 0.5rem) 0 0;
    padding: 0.5rem;
    background: none;
    border: 0;
    border-radius: var(--linkooc-radius-sm, 0.5rem);
    color: var(--linkooc-primary-ink);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.tp-add:hover[b-mdioq35dp8] {
    background: var(--linkooc-hover-bg);
}

/* ─── Éditeur sur place ─── */

.tp-editor[b-mdioq35dp8] {
    display: flex;
    flex-direction: column;
    gap: var(--linkooc-spacing-md, 1rem);
    padding: var(--linkooc-spacing-md, 1rem) var(--linkooc-spacing-sm, 0.5rem) var(--linkooc-spacing-md, 1rem) 4.125rem;
}

.tp-editor__name[b-mdioq35dp8] {
    display: flex;
    align-items: center;
    gap: var(--linkooc-spacing-md, 1rem);
}

.tp-name[b-mdioq35dp8] {
    max-width: 17rem;
    font-size: 0.9375rem;
    font-weight: 600;
}

.tp-delete[b-mdioq35dp8] {
    margin-left: auto;
    padding: 0.25rem 0.5rem;
    background: none;
    border: 0;
    border-radius: var(--linkooc-radius-sm, 0.5rem);
    color: var(--linkooc-danger);
    font-size: 0.8125rem;
    cursor: pointer;
}

.tp-delete:hover[b-mdioq35dp8] {
    background: var(--linkooc-danger-surface, var(--linkooc-hover-bg));
}

.tp-grid[b-mdioq35dp8] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tp-cell-wrap[b-mdioq35dp8] {
    position: relative;
}

.tp-cell[b-mdioq35dp8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    padding: 0;
    background: var(--linkooc-surface, #fff);
    border: 1px solid var(--linkooc-border-color, #ddd);
    border-radius: var(--linkooc-radius-sm, 0.625rem);
    cursor: pointer;
    transition: border-color var(--linkooc-transition-fast, 150ms ease), background-color var(--linkooc-transition-fast, 150ms ease);
}

.tp-cell:hover[b-mdioq35dp8] {
    border-color: var(--linkooc-primary);
}

.tp-cell--on[b-mdioq35dp8],
.tp-cell--on:hover[b-mdioq35dp8] {
    background: var(--linkooc-primary-light);
    border: 2px solid var(--linkooc-primary);
}

.tp-cell--add[b-mdioq35dp8] {
    border-style: dashed;
    color: var(--linkooc-text-muted, #6d6d6d);
    font-size: 1.125rem;
}

.tp-cell__tools[b-mdioq35dp8] {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    display: none;
    gap: 0.125rem;
}

.tp-cell-wrap:hover .tp-cell__tools[b-mdioq35dp8],
.tp-cell-wrap:focus-within .tp-cell__tools[b-mdioq35dp8] {
    display: flex;
}

.tp-cell__tool[b-mdioq35dp8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    padding: 0;
    background: var(--linkooc-surface, #fff);
    border: 1px solid var(--linkooc-border-color, #ddd);
    border-radius: 50%;
    color: var(--linkooc-text-secondary);
    font-size: 0.6875rem;
    cursor: pointer;
}

.tp-cell__tool:hover[b-mdioq35dp8] {
    color: var(--linkooc-primary-ink);
    border-color: var(--linkooc-primary);
}

.tp-cell__tool--danger:hover[b-mdioq35dp8] {
    color: var(--linkooc-danger);
    border-color: var(--linkooc-danger);
}

.tp-editor__ink[b-mdioq35dp8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--linkooc-spacing-md, 1rem) var(--linkooc-spacing-lg, 1.5rem);
}

.tp-swatches[b-mdioq35dp8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tp-swatch[b-mdioq35dp8] {
    width: 1.625rem;
    height: 1.625rem;
    padding: 0;
    border: 2px solid var(--linkooc-surface, #fff);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--linkooc-border-color, #ccc);
    cursor: pointer;
}

.tp-swatch--on[b-mdioq35dp8] {
    box-shadow: 0 0 0 2px var(--linkooc-primary);
}

.tp-swatch--add[b-mdioq35dp8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px dashed var(--linkooc-text-muted, #999);
    box-shadow: none;
    color: var(--linkooc-text-muted, #666);
    font-size: 0.875rem;
}

.tp-picker[b-mdioq35dp8] {
    max-width: 18rem;
}

/* ─── Spécimen ─── */

.tp-spec__title[b-mdioq35dp8] {
    margin: 0 0 0.625rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--linkooc-text-muted, #6d6d6d);
}

.tp-site[b-mdioq35dp8],
.tp-paper[b-mdioq35dp8] {
    margin-bottom: var(--linkooc-spacing-md, 1rem);
    border-radius: var(--linkooc-radius-sm, 0.625rem);
}

/* Plan 842 — le site lui-même (page du plan 841), à la largeur du bloc, à la hauteur que la page
   envoie (tags-panel.js) ; caché tant qu'elle n'a pas répondu : un site muet laisse la place vide. */
.tp-site[b-mdioq35dp8] {
    overflow: hidden;
}

.tp-site__frame[b-mdioq35dp8] {
    display: block;
    width: 100%;
    height: 22rem;
    border: 0;
    visibility: hidden;
}

.tp-paper[b-mdioq35dp8] {
    padding: 1rem 1.125rem;
    background: #fffdf8;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
    color: #3a2a1e;
    font-family: Georgia, "Times New Roman", serif;
}

/* Plan 859 — sur une carte neuve, les dessins vont dans la marge, à gauche du nom : la feuille montre
   cette marge (deux dessins et leur écart y tiennent). */
.tp-paper--marge[b-mdioq35dp8] {
    padding-left: 2.75rem;
}

/* Plan 858 — sur le papier, le trait du dessin a la hauteur des majuscules du nom (« Moyen »),
   son bas sur la ligne de base : la rangée se pose sur la ligne de base de la ligne, chaque dessin
   vaut --lk-tag-box majuscules (1cap) et descend de --lk-tag-drop de son côté (TagPaperSize,
   posées sur .tp-line__tag). Comme MenuElementTagBadge.razor au Designer. */
.tp-line__tags[b-mdioq35dp8] {
    display: inline-flex;
    align-items: baseline;
    align-self: baseline;
    /* Plan 845 — E, posé par le panneau sur .tp-paper ; repli 8 px. */
    gap: var(--tp-tag-gap, 8px);
}

.tp-line__tag[b-mdioq35dp8] {
    display: inline-flex;
}

.tp-line__tag[b-mdioq35dp8]  .lk-inline-tag-visual {
    width: calc(var(--lk-tag-box, 1) * 1cap);
    height: calc(var(--lk-tag-box, 1) * 1cap);
    transform: translateY(calc(var(--lk-tag-box, 1) * var(--lk-tag-drop, 0) * 1cap));
}

/* ─── Réglages du restaurant ─── */

.tp-settings[b-mdioq35dp8] {
    display: grid;
    grid-template-columns: 4.75rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    margin-top: var(--linkooc-spacing-md, 1rem);
    font-size: 0.875rem;
    color: var(--linkooc-text);
}

.tp-settings__label[b-mdioq35dp8] {
    padding-top: 0.375rem;
}

.tp-settings__place[b-mdioq35dp8] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tp-gap[b-mdioq35dp8] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
    font-size: 0.75rem;
    color: var(--linkooc-text-muted, #6d6d6d);
}

.tp-gap input[type="range"][b-mdioq35dp8] {
    flex: 0 1 8rem;
    accent-color: var(--linkooc-primary);
}

/* ─── Import ─── */

.tp-import[b-mdioq35dp8] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tp-import__busy[b-mdioq35dp8] {
    display: flex;
    justify-content: center;
}

.tp-import__error[b-mdioq35dp8] {
    margin: 0;
    color: var(--linkooc-danger);
    font-size: 0.8125rem;
}

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

    .tp-list[b-mdioq35dp8] {
        max-height: none;
        overflow-y: visible;
    }
}

@media (max-width: 768px) {
    .tp[b-mdioq35dp8] {
        padding: var(--linkooc-spacing-md, 1rem);
    }

    .tp-editor[b-mdioq35dp8] {
        padding-left: var(--linkooc-spacing-sm, 0.5rem);
    }
}

/* Thème sombre : les dessins sont montrés sur un papier clair, comme sur une carte — une encre
   sombre (le texte du site, #2B2422 sur 340) disparaîtrait sur la surface sombre. */
main.dark-theme .tp-cell[b-mdioq35dp8],
main.dark-theme .tp-row__ico[b-mdioq35dp8] {
    background: #f6f3ee;
    border-radius: var(--linkooc-radius-sm, 0.5rem);
}

main.dark-theme .tp-cell--on[b-mdioq35dp8] {
    background: #e8f1ea;
}
/* /Pages/Establishment/Panels/TagsSpecimenLine.razor.rz.scp.css */
/* Plan 833 — moved verbatim from TagsPanel.razor.css (the paper line is unchanged).
   Plan 842 — « Sur le site » is the site itself: only the printed line is drawn here. */

.tp-line[b-gunm8x8exz] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.5rem;
    row-gap: 0.125rem;
    margin: 0.4375rem 0;
    font-size: 0.9375rem;
}

.tp-line__name[b-gunm8x8exz] {
    font-weight: 700;
}

.tp-line__desc[b-gunm8x8exz] {
    min-width: 0;
    font-size: 0.75rem;
}

.tp-paper .tp-line__desc[b-gunm8x8exz] {
    color: #7a5a3a;
    font-style: italic;
}

.tp-line__dots[b-gunm8x8exz] {
    flex: 1 1 1.5rem;
    min-width: 1.5rem;
    border-bottom: 1px dotted currentColor;
    opacity: 0.35;
    transform: translateY(-0.25rem);
}

.tp-line__price[b-gunm8x8exz] {
    font-weight: 700;
    white-space: nowrap;
}

/* Plan 845 — l'« Écart » E (--tp-tag-gap, posé par le panneau sur .tp-paper) autour des tags : la ligne
   espace ses éléments de 0,5 rem (column-gap) ; à côté des tags, la marge rend E − 0,5 rem.
   Nom → dessin (« Après le nom ») : le groupe de tags est rendu par le panneau, d'où ::deep. */
.tp-line--ecart > .tp-line__tags + .tp-line__name[b-gunm8x8exz],
.tp-line--ecart > .tp-line__tags + .tp-line__dots[b-gunm8x8exz] {
    margin-left: calc(var(--tp-tag-gap, 8px) - 0.5rem);
}

.tp-line--ecart[b-gunm8x8exz]  .tp-line__name + .tp-line__tags {
    margin-left: calc(var(--tp-tag-gap, 8px) - 0.5rem);
}

/* Plan 859 — « Chevauchant », la place d'une carte neuve : la rangée de dessins a une largeur nulle et
   déborde vers la gauche, dans la marge (comme MenuElementTagBadge.razor au Designer) ; la marge droite
   rend l'espace de colonne de la ligne, si bien que le nom commence où commence celui d'une ligne sans
   tag. Le dessin reste à 0,35 em du nom. */
.tp-line__marge[b-gunm8x8exz] {
    display: inline-flex;
    position: relative;
    right: 0.35em;
    width: 0;
    flex-shrink: 0;
    justify-content: unsafe flex-end;
    align-self: baseline;
    margin-right: -0.5rem;
}
/* /Pages/Establishment/Panels/ThemeDesignPanel.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════
   STYLE DESIGNER — Complete CSS (pixel-perfect mockup match)
   ═══════════════════════════════════════════════════════════════════════ */

.sd-root[b-jl4y2y9qky] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--linkooc-surface, #fff);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    overflow: hidden;
}

.sd-loading-skeleton[b-jl4y2y9qky] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.sd-skeleton-toolbar[b-jl4y2y9qky] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    border-bottom: 1px solid #e5e7eb;
    min-height: 48px;
    flex-shrink: 0;
}

.sd-skeleton-panels[b-jl4y2y9qky] {
    display: grid;
    grid-template-columns: 240px 1fr 320px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.sd-skeleton-left[b-jl4y2y9qky] {
    border-right: 1px solid #e5e7eb;
    background: #fafafa;
    overflow: hidden;
}

.sd-skeleton-center[b-jl4y2y9qky] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #f9fafb;
}

.sd-skeleton-iframe[b-jl4y2y9qky] {
    flex: 1;
    margin: 24px;
    border-radius: 8px;
    overflow: hidden;
}

.sd-skeleton-right[b-jl4y2y9qky] {
    border-left: 1px solid #e5e7eb;
    background: #fafafa;
}

/* ═══════════════════════════════════════════════════════════════════════
   TOP TOOLBAR — matches mockup exactly
   ═══════════════════════════════════════════════════════════════════════ */

/* Plan 921 — quand la barre ne tient pas sur une ligne (elle en demande 1420 px,
   « Revenir à l'ambiance publiée le … » compris), elle passe sur deux : la partie
   droite descend, rangée à droite. Avant, à 1280 « Revenir… » finissait à 1420 px,
   et à 1024 « Publier » à 1319 — hors écran. */
.sd-toolbar[b-jl4y2y9qky] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    row-gap: 8px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--linkooc-border-color, #e5e7eb);
    background: var(--linkooc-surface, #fff);
    flex-shrink: 0;
    gap: 16px;
    min-height: 48px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.sd-toolbar-left[b-jl4y2y9qky] {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Les trois onglets tiennent lieu de titre : le nom interne du style n'a rien
   à faire sous les yeux du restaurateur. */
.sd-toolbar-tabs[b-jl4y2y9qky] {
    display: flex;
    align-items: center;
    gap: 2px;
}

.sd-toolbar-tab[b-jl4y2y9qky] {
    border: none;
    background: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--linkooc-text-secondary, #6b7280);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}

.sd-toolbar-tab:hover[b-jl4y2y9qky] {
    color: var(--linkooc-text, #374151);
    background: var(--linkooc-hover-bg, #f3f4f6);
}

.sd-toolbar-tab.active[b-jl4y2y9qky] {
    color: var(--linkooc-primary-ink, #08781B);
    background: var(--linkooc-primary-light, #e7f1e8);
    font-weight: 600;
}

.sd-template-link[b-jl4y2y9qky] {
    background: none;
    border: none;
    color: #08781B;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
}

.sd-template-link:hover[b-jl4y2y9qky] {
    text-decoration: underline;
}

.sd-toolbar-right[b-jl4y2y9qky] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
}

/* Plan 921 — un libellé ne se coupe jamais en deux lignes (« Ouvrir l'atelier »
   faisait 53 px de haut dès 1366 px) : c'est la barre qui passe à la ligne. */
.sd-toolbar .sd-icon-btn[b-jl4y2y9qky],
.sd-toolbar .sd-preview-toggle[b-jl4y2y9qky] {
    white-space: nowrap;
}

.sd-icon-btn[b-jl4y2y9qky] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #374151;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
}

.sd-icon-btn:hover[b-jl4y2y9qky] {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.sd-icon-btn i[b-jl4y2y9qky] {
    font-size: 14px;
}

.sd-save-btn[b-jl4y2y9qky] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    border: none;
    border-radius: 8px;
    background: #08781B;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.sd-save-btn:hover[b-jl4y2y9qky] {
    background: #066116;
}

.sd-save-btn:disabled[b-jl4y2y9qky] {
    opacity: 0.6;
    cursor: not-allowed;
}

.sd-save-btn.saving[b-jl4y2y9qky] {
    opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════════════════════
   THREE-PANEL LAYOUT
   ═══════════════════════════════════════════════════════════════════════ */

.sd-panels[b-jl4y2y9qky] {
    display: grid;
    grid-template-columns: 240px 1fr 320px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.sd-panel[b-jl4y2y9qky] {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ─── LEFT PANEL ─── */

.sd-panel-left[b-jl4y2y9qky] {
    border-right: 1px solid #e5e7eb;
    background: #fafafa;
}

/* Plan 679 — « Votre ambiance » et « Looks » sont écrits avec les jetons du
   BackOffice (titre en --linkooc-text) : sur le #fafafa figé, le titre du rail était
   blanc sur blanc en thème sombre. Leur fond suit donc le thème. « Retouches » garde
   son fond clair : ses lignes sont encore en couleurs figées. */
.sd-panel-left.sd-panel-left--themed[b-jl4y2y9qky] {
    border-right-color: var(--linkooc-border-color, #e5e7eb);
    background: var(--linkooc-bg, #fafafa);
}

.sd-panel-header[b-jl4y2y9qky] {
    padding: 14px 16px 8px;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.sd-search-box[b-jl4y2y9qky] {
    display: flex;
    align-items: center;
    margin: 0 12px 8px;
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    gap: 8px;
}

.sd-search-box i[b-jl4y2y9qky] {
    color: #9ca3af;
    font-size: 13px;
}

.sd-search-box input[b-jl4y2y9qky] {
    border: none;
    outline: none;
    font-size: 13px;
    width: 100%;
    background: transparent;
    color: #374151;
}

.sd-search-box input[b-jl4y2y9qky]::placeholder {
    color: #9ca3af;
}

.sd-tree-scroll[b-jl4y2y9qky] {
    flex: 1;
    overflow-y: auto;
    padding: 0 0 16px;
}

/* Group */
.sd-group[b-jl4y2y9qky] {
    /* empty on purpose */
}

.sd-group-header[b-jl4y2y9qky] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 8px 16px;
    border: none;
    background: none;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: left;
}

/* ═══════════════════════════════════════════════════════════════════════
   LISTE DES RÔLES — une ligne par rôle
   Un rôle qui suit l'identité n'affiche que son nom : pas de pastille, pas de
   sous-ligne « Suit votre identité ». 49 rôles × (badge + phrase) = 98 lignes
   de texte pour dire « rien de spécial ». Le silence est l'état hérité.
   ═══════════════════════════════════════════════════════════════════════ */

.sd-group-header-static[b-jl4y2y9qky] {
    padding: 8px 12px 2px;
    font-size: 10px;
    letter-spacing: 0.06em;
}

/* 30 px : 49 rôles + leurs 8 en-têtes de groupe tiennent alors sous deux
   hauteurs d'écran à 1440×900, aperçu ouvert. */
.sd-retouche-row[b-jl4y2y9qky] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px 5px 12px;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 6px;
    margin: 0 4px;
}

.sd-retouche-row:hover[b-jl4y2y9qky] {
    background: #f3f4f6;
}

.sd-retouche-row.selected[b-jl4y2y9qky] {
    background: rgba(8, 120, 27, 0.08);
    border-color: rgba(8, 120, 27, 0.30);
}

.sd-retouche-name[b-jl4y2y9qky] {
    font-size: 12px;
    color: #1a1a1a;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Le crochet CSS (« .lk-page-title ») : c'est l'IDENTIFIANT du rôle, donc il ne se
   tronque jamais. Sur une ligne serrée c'est la valeur qui cède (elle est de toute
   façon affichée en entier dans l'inspecteur, le crochet non). */
.sd-retouche-class[b-jl4y2y9qky] {
    flex: 0 0 auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    color: #c3c8cf;
    white-space: nowrap;
}

.sd-retouche-row:hover .sd-retouche-class[b-jl4y2y9qky],
.sd-retouche-row.selected .sd-retouche-class[b-jl4y2y9qky] {
    color: #8b929c;
}

/* Les valeurs, et rien d'autre : « Jost · #5C0E0E ». Elles absorbent l'espace libre
   et cèdent en premier quand la ligne est serrée. */
.sd-retouche-value[b-jl4y2y9qky] {
    flex: 1 1 auto;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    color: #9ca3af;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sd-retouche-badge[b-jl4y2y9qky] {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 600;
    color: #B45309;
    white-space: nowrap;
}

.sd-retouche-chip[b-jl4y2y9qky] {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.sd-retouche-chevron[b-jl4y2y9qky] {
    flex-shrink: 0;
    margin-left: auto;
    font-size: 11px;
    color: #d1d5db;
}

/* Une valeur pousse le chevron au bout ; sans valeur, il s'y colle seul. */
.sd-retouche-value ~ .sd-retouche-chevron[b-jl4y2y9qky] {
    margin-left: 0;
}

.sd-group-name[b-jl4y2y9qky] {
    flex: 1;
}

/* ─── CENTER PANEL ─── */

.sd-panel-center[b-jl4y2y9qky] {
    background: var(--linkooc-bg, #f9fafb);
    display: flex;
    flex-direction: column;
}

/* Plan 921 — aperçu affiché dans une petite fenêtre : les commandes passent à la
   ligne au lieu de se marcher dessus (le zoom couvrait « Menus »). */
.sd-preview-toolbar[b-jl4y2y9qky] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    border-bottom: 1px solid var(--linkooc-border-color, #e5e7eb);
    background: var(--linkooc-surface, #fff);
    flex-shrink: 0;
}

/* Plan 373 — « Aperçu du brouillon », posé juste au-dessus de l'iframe. */
.sd-preview-scope[b-jl4y2y9qky] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--linkooc-text-secondary, #6b7280);
    white-space: nowrap;
}

/* Plan 679 — tue pendant un essai, sans déplacer la barre. */
.sd-preview-scope--silent[b-jl4y2y9qky] {
    visibility: hidden;
}

.sd-preview-scope i[b-jl4y2y9qky] {
    font-size: 13px;
}

/* Plan 679 — « Accueil | Menus » puis la taille d'écran : deux LkSegmented côte à
   côte (les anciens .sd-device-btn sont passés à la primitive). */
.sd-preview-views[b-jl4y2y9qky] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Plan 679 — « Garder cette ambiance », sous l'aperçu, seulement pendant un essai. */
.sd-keep-bar[b-jl4y2y9qky] {
    display: flex;
    justify-content: center;
    padding: 10px 16px;
    border-top: 1px solid var(--linkooc-border-color, #e5e7eb);
    background: var(--linkooc-surface, #fff);
    flex-shrink: 0;
}

.sd-preview-actions[b-jl4y2y9qky] {
    display: flex;
    align-items: center;
    gap: 4px;
    /* Plan 921 — passées à la ligne, elles restent à droite. */
    margin-left: auto;
}

.sd-zoom-label[b-jl4y2y9qky] {
    font-size: 12px;
    color: var(--linkooc-text-secondary, #6b7280);
    min-width: 36px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.sd-icon-btn-sm[b-jl4y2y9qky] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--linkooc-border-color, #e5e7eb);
    border-radius: 6px;
    background: var(--linkooc-surface, #fff);
    color: var(--linkooc-text-secondary, #6b7280);
    cursor: pointer;
    transition: all 0.15s;
    font-size: 14px;
}

.sd-icon-btn-sm:hover[b-jl4y2y9qky] {
    background: var(--linkooc-hover-bg, #f3f4f6);
    border-color: var(--linkooc-text-secondary, #9ca3af);
}

.sd-icon-btn-sm.sd-inspect-active[b-jl4y2y9qky] {
    background: #dbeafe;
    border-color: #3b82f6;
    color: #2563eb;
}

.sd-icon-btn-sm.sd-inspect-active:hover[b-jl4y2y9qky] {
    background: #bfdbfe;
}

.sd-preview-separator[b-jl4y2y9qky] {
    width: 1px;
    height: 20px;
    background: var(--linkooc-border-color, #e5e7eb);
    margin: 0 2px;
}

.sd-preview-container[b-jl4y2y9qky] {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
    padding: 16px;
    background: var(--linkooc-bg, #f0f0f0);
    min-height: 0;
}

.sd-preview-mobile[b-jl4y2y9qky] {
    /* max-width for mobile device */
}

.sd-preview-mobile .sd-preview-iframe[b-jl4y2y9qky] {
    max-width: 375px;
}

.sd-preview-tablet .sd-preview-iframe[b-jl4y2y9qky] {
    max-width: 768px;
}

.sd-preview-desktop .sd-preview-iframe[b-jl4y2y9qky] {
    max-width: 1440px;
}

.sd-preview-scaler[b-jl4y2y9qky] {
    transform-origin: top center;
}

.sd-preview-iframe[b-jl4y2y9qky] {
    width: 100%;
    height: 100%;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ─── RIGHT PANEL ─── */

.sd-panel-right[b-jl4y2y9qky] {
    border-left: 1px solid #e5e7eb;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sd-inspector-header[b-jl4y2y9qky] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}

/* ─── Bandeau « masque votre identité » : une ligne, lien inline ─── */
.sd-role-conflict[b-jl4y2y9qky] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 12px 0;
    padding: 5px 8px;
    border: 1px solid #F59E0B;
    border-radius: 6px;
    background: #FFFBEB;
    color: #92400E;
    font-size: 11px;
    line-height: 1.3;
}

.sd-role-conflict.subtle[b-jl4y2y9qky] {
    border-color: #e5e7eb;
    background: #f9fafb;
    color: #6b7280;
}

.sd-role-revert[b-jl4y2y9qky] {
    margin-left: auto;
    flex-shrink: 0;
    border: 0;
    background: none;
    padding: 0;
    font-size: 11px;
    font-weight: 600;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
}

.sd-role-revert:disabled[b-jl4y2y9qky] {
    opacity: 0.5;
    cursor: default;
}


.sd-inspector-heading[b-jl4y2y9qky] {
    min-width: 0;
}

.sd-inspector-title[b-jl4y2y9qky] {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Le crochet réglé, sous son nom métier : sélectionnable pour être recopié. */
.sd-inspector-class[b-jl4y2y9qky] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    color: #9ca3af;
    user-select: text;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Quick-jump tabs */
.sd-inspector-tabs[b-jl4y2y9qky] {
    display: flex;
    gap: 2px;
    padding: 8px 12px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.sd-tab-btn[b-jl4y2y9qky] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 8px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    color: #6b7280;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.sd-tab-btn:hover[b-jl4y2y9qky] {
    background: #f3f4f6;
    color: #374151;
}

.sd-tab-btn i[b-jl4y2y9qky] {
    font-size: 12px;
}

/* Inspector scroll area */
.sd-inspector-scroll[b-jl4y2y9qky] {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 24px;
}

/* Section */
.sd-section[b-jl4y2y9qky] {
    border-bottom: 1px solid #f3f4f6;
}

.sd-section-header[b-jl4y2y9qky] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: none;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    text-align: left;
}

.sd-section-header:hover[b-jl4y2y9qky] {
    background: #f9fafb;
}

.sd-section-header i[b-jl4y2y9qky] {
    font-size: 10px;
    color: #9ca3af;
}

/* Sub-section header (e.g. "Personnaliser") */
.sd-subsection-header[b-jl4y2y9qky] {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 6px 0;
    border: none;
    background: none;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    text-align: left;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.sd-subsection-header:hover[b-jl4y2y9qky] {
    color: #374151;
}

.sd-subsection-header i[b-jl4y2y9qky] {
    font-size: 9px;
    color: #9ca3af;
}

.sd-section-body[b-jl4y2y9qky] {
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Fields */
.sd-field[b-jl4y2y9qky] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sd-field label[b-jl4y2y9qky] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Champs de l'inspecteur : 32 px de haut, 11 px de texte. Les hauteurs par
   défaut de Telerik font grimper le panneau bien au-delà de l'écran. */
.sd-field .k-input[b-jl4y2y9qky],
.sd-field .k-picker[b-jl4y2y9qky],
.sd-field input.form-control[b-jl4y2y9qky] {
    height: 32px;
    min-height: 32px;
    font-size: 11px;
}

.sd-field .k-input-inner[b-jl4y2y9qky],
.sd-field .k-input-value-text[b-jl4y2y9qky] {
    font-size: 11px;
    padding-top: 0;
    padding-bottom: 0;
}

.sd-field-grid[b-jl4y2y9qky] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sd-field-row[b-jl4y2y9qky] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sd-field-hint[b-jl4y2y9qky] {
    font-size: 11px;
    color: #9ca3af;
    line-height: 1.4;
    margin-top: -4px;
}

.sd-input[b-jl4y2y9qky] {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    color: #374151;
    background: #fff;
    outline: none;
    transition: border-color 0.15s;
}

.sd-input:focus[b-jl4y2y9qky] {
    border-color: #08781B;
    box-shadow: 0 0 0 2px rgba(8, 120, 27, 0.1);
}

.sd-textarea[b-jl4y2y9qky] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 12px;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    color: #374151;
    background: #fafafa;
    outline: none;
    resize: vertical;
    transition: border-color 0.15s;
}

.sd-textarea:focus[b-jl4y2y9qky] {
    border-color: #08781B;
}

/* Color row */
.sd-color-row[b-jl4y2y9qky] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sd-color-swatch[b-jl4y2y9qky] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    flex-shrink: 0;
}

.sd-color-row .sd-input[b-jl4y2y9qky] {
    flex: 1;
}

.sd-color-picker[b-jl4y2y9qky] {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    cursor: pointer;
    background: none;
    flex-shrink: 0;
}

/* Alignment group */
.sd-align-group[b-jl4y2y9qky] {
    display: flex;
    gap: 0;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    overflow: hidden;
}

.sd-align-btn[b-jl4y2y9qky] {
    flex: 1;
    padding: 6px 4px;
    border: none;
    border-right: 1px solid #d1d5db;
    background: #fff;
    color: #6b7280;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}

.sd-align-btn:last-child[b-jl4y2y9qky] {
    border-right: none;
}

.sd-align-btn:hover[b-jl4y2y9qky] {
    background: #f3f4f6;
}

.sd-align-btn.active[b-jl4y2y9qky] {
    background: #08781B;
    color: #fff;
}

/* Empty state */
.sd-inspector-empty[b-jl4y2y9qky] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #9ca3af;
    text-align: center;
    padding: 24px;
    gap: 12px;
}

.sd-inspector-empty i[b-jl4y2y9qky] {
    font-size: 32px;
}

.sd-inspector-empty p[b-jl4y2y9qky] {
    font-size: 13px;
    margin: 0;
    max-width: 200px;
    line-height: 1.5;
}

/* CSS Viewer */
.sd-css-viewer[b-jl4y2y9qky] {
    background: #1e1e1e;
    color: #d4d4d4;
    padding: 16px;
    border-radius: 6px;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 12px;
    line-height: 1.6;
    height: 100%;
    overflow: auto;
    margin: 0;
    white-space: pre-wrap;
}

/* Template switcher */
.sd-template-grid[b-jl4y2y9qky] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 16px;
}

.sd-template-card[b-jl4y2y9qky] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
}

.sd-template-card:hover[b-jl4y2y9qky] {
    border-color: #9ca3af;
    background: #f9fafb;
}

.sd-template-card.selected[b-jl4y2y9qky] {
    border-color: #08781B;
    background: #e7f1e8;
}

.sd-template-preview[b-jl4y2y9qky] {
    width: 100%;
    height: 80px;
    border-radius: 6px;
    overflow: hidden;
    background: #f3f4f6;
}

.sd-template-name[b-jl4y2y9qky] {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}

.sd-template-check[b-jl4y2y9qky] {
    position: absolute;
    top: 8px;
    right: 8px;
    color: #08781B;
    font-size: 16px;
}

/* Mini previews (reused from existing code) */
.mini-preview[b-jl4y2y9qky] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.mini-classic .mp-header[b-jl4y2y9qky] {
    height: 6px;
    background: #374151;
}

.mini-classic .mp-hero[b-jl4y2y9qky] {
    height: 20px;
    background: linear-gradient(135deg, #9ca3af, #6b7280);
}

.mini-classic .mp-content[b-jl4y2y9qky] {
    flex: 1;
    display: flex;
    gap: 3px;
    padding: 3px;
    background: #f3f4f6;
}

.mini-classic .mp-card[b-jl4y2y9qky] {
    flex: 1;
    background: #fff;
    border-radius: 2px;
}

.mini-sidebar[b-jl4y2y9qky] {
    flex-direction: row;
}

.mini-sidebar .mp-sidebar[b-jl4y2y9qky] {
    width: 20px;
    background: #1f2937;
}

.mini-sidebar .mp-main[b-jl4y2y9qky] {
    flex: 1;
    background: #f3f4f6;
    display: flex;
    flex-direction: column;
}

.mini-sidebar .mp-header-sm[b-jl4y2y9qky] {
    height: 6px;
    background: #e5e7eb;
}

.mini-sidebar .mp-list[b-jl4y2y9qky] {
    flex: 1;
    margin: 3px;
    background: #fff;
    border-radius: 2px;
}

.mini-moderne[b-jl4y2y9qky] {
    position: relative;
}

.mini-moderne .mp-hero-full[b-jl4y2y9qky] {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #374151, #1f2937);
}

.mini-moderne .mp-glass-card[b-jl4y2y9qky] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 28px;
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

.mini-default .mp-header[b-jl4y2y9qky] {
    height: 6px;
    background: #6b7280;
}

.mini-default .mp-content[b-jl4y2y9qky] {
    flex: 1;
    padding: 3px;
    background: #f3f4f6;
}

.mini-default .mp-card[b-jl4y2y9qky] {
    height: 100%;
    background: #fff;
    border-radius: 2px;
}

/* ─── Telerik overrides specific to Style Designer ─── */

.sd-panel-right .k-combobox[b-jl4y2y9qky],
.sd-panel-right .k-dropdownlist[b-jl4y2y9qky],
.sd-panel-right .k-numerictextbox[b-jl4y2y9qky],
.sd-panel-right .k-textbox[b-jl4y2y9qky],
.sd-panel-right .k-textarea[b-jl4y2y9qky] {
    font-size: 13px;
}

.sd-panel-right .k-combobox .k-input-inner[b-jl4y2y9qky],
.sd-panel-right .k-dropdownlist .k-input-inner[b-jl4y2y9qky],
.sd-panel-right .k-numerictextbox .k-input-inner[b-jl4y2y9qky],
.sd-panel-right .k-textbox .k-input-inner[b-jl4y2y9qky] {
    padding: 5px 8px;
    min-height: 34px;
}

/* ─── Text decoration checkbox row ─── */

.sd-textdecor-row[b-jl4y2y9qky] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    align-items: center;
}

.sd-check-label[b-jl4y2y9qky] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    margin: 0;
    white-space: nowrap;
}

.sd-check-label span[b-jl4y2y9qky] {
    user-select: none;
}

/* ─── Spacing density presets ─── */

.sd-spacing-presets[b-jl4y2y9qky] {
    display: flex;
    gap: 0;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    overflow: hidden;
}

.sd-preset-btn[b-jl4y2y9qky] {
    flex: 1;
    padding: 7px 4px;
    border: none;
    border-right: 1px solid #d1d5db;
    background: #fff;
    color: #6b7280;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}

.sd-preset-btn:last-child[b-jl4y2y9qky] {
    border-right: none;
}

.sd-preset-btn:hover[b-jl4y2y9qky] {
    background: #f3f4f6;
    color: #374151;
}

.sd-preset-btn.active[b-jl4y2y9qky] {
    background: #08781B;
    color: #fff;
}

/* ─── Free CSS textarea (Telerik override) ─── */

.sd-css-textarea.k-textarea[b-jl4y2y9qky] {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 12px;
    background: #fafafa;
}

.sd-css-textarea .k-input-inner[b-jl4y2y9qky] {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 12px;
    padding: 8px 10px;
}

/* ─── Overflow protection for labels and fields ─── */

.sd-field label[b-jl4y2y9qky] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.sd-field-grid[b-jl4y2y9qky] {
    min-width: 0;
}

.sd-field-grid > .sd-field[b-jl4y2y9qky] {
    min-width: 0;
    overflow: hidden;
}

/* Plan 639 — les rangées de l'inspecteur sont des LkInspectorField (composant
   partagé, hors de cette isolation) : même règle de rétrécissement pour elles. */
.sd-field-grid[b-jl4y2y9qky]  .lk-insp-field {
    min-width: 0;
    overflow: hidden;
}

.sd-section-body[b-jl4y2y9qky] {
    min-width: 0;
    overflow: hidden;
}

.sd-panel-right .k-combobox[b-jl4y2y9qky],
.sd-panel-right .k-dropdownlist[b-jl4y2y9qky],
.sd-panel-right .k-numerictextbox[b-jl4y2y9qky],
.sd-panel-right .k-textbox[b-jl4y2y9qky],
.sd-panel-right .k-textarea[b-jl4y2y9qky] {
    max-width: 100%;
}

/* Telerik checkbox styling in inspector context */
.sd-panel-right .k-checkbox-wrap[b-jl4y2y9qky] {
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   FONT PANEL (Polices — mode avancé)
   ═══════════════════════════════════════════════════════════════════════ */

.sd-font-panel[b-jl4y2y9qky] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.sd-font-filters[b-jl4y2y9qky] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px 4px;
    flex-wrap: wrap;
}

.sd-font-filters-label[b-jl4y2y9qky] {
    font-size: 10px;
    font-weight: 600;
    color: #9ca3af;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sd-font-scope-btn[b-jl4y2y9qky] {
    padding: 3px 10px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    background: #fff;
    font-size: 11px;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.15s;
}

.sd-font-scope-btn:hover[b-jl4y2y9qky] {
    background: #f3f4f6;
}

.sd-font-scope-btn.active[b-jl4y2y9qky] {
    background: #1a1a1a;
    color: #fff;
    border-color: #1a1a1a;
}

.sd-font-actions[b-jl4y2y9qky] {
    display: flex;
    gap: 6px;
    padding: 6px 12px 8px;
    flex-wrap: wrap;
}

.sd-font-action-btn[b-jl4y2y9qky] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: none;
    border-radius: 14px;
    background: #08781B;
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.sd-font-action-btn:hover[b-jl4y2y9qky] {
    background: #066116;
}

.sd-font-action-btn i[b-jl4y2y9qky] {
    font-size: 12px;
}

.sd-font-loading[b-jl4y2y9qky] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
}

.sd-font-scroll[b-jl4y2y9qky] {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Font card */
.sd-font-card[b-jl4y2y9qky] {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px;
    background: #fff;
    transition: border-color 0.15s;
}

.sd-font-card:hover[b-jl4y2y9qky] {
    border-color: #9ca3af;
}

.sd-font-card.attached[b-jl4y2y9qky] {
    border-color: #08781B;
    background: #f0faf1;
}

.sd-font-card-header[b-jl4y2y9qky] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.sd-font-card-name[b-jl4y2y9qky] {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
}

.sd-font-private-icon[b-jl4y2y9qky] {
    color: #9ca3af;
    font-size: 13px;
}

.sd-font-card-preview[b-jl4y2y9qky] {
    font-size: 24px;
    color: #1a1a1a;
    padding: 6px 0;
    line-height: 1.3;
}

.sd-font-card-meta[b-jl4y2y9qky] {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.sd-font-card-meta span[b-jl4y2y9qky] {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    font-size: 11px;
    color: #6b7280;
}

.sd-font-card-actions[b-jl4y2y9qky] {
    display: flex;
    gap: 6px;
}

.sd-font-apply-btn[b-jl4y2y9qky] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid #08781B;
    border-radius: 14px;
    background: #fff;
    color: #08781B;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.sd-font-apply-btn:hover[b-jl4y2y9qky] {
    background: #08781B;
    color: #fff;
}

.sd-font-detach-btn[b-jl4y2y9qky] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid #9ca3af;
    border-radius: 14px;
    background: #fff;
    color: #6b7280;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.sd-font-detach-btn:hover[b-jl4y2y9qky] {
    border-color: #ef4444;
    color: #ef4444;
}

.sd-font-delete-btn[b-jl4y2y9qky] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: none;
    color: #ef4444;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.sd-font-delete-btn:hover[b-jl4y2y9qky] {
    background: #fef2f2;
    border-color: #ef4444;
}

.sd-font-empty[b-jl4y2y9qky] {
    text-align: center;
    color: #9ca3af;
    font-size: 13px;
    padding: 24px 0;
}

/* URL registration form */
.sd-url-form[b-jl4y2y9qky] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 8px;
}

.sd-url-form-actions[b-jl4y2y9qky] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PLAN 355 — « Thème & Design » : rail Identité/Retouches + inspecteur de rôle
   ═══════════════════════════════════════════════════════════════════════════ */

/* Le rail guidé porte tout « Mon identité » : il lui faut de la place. */
.sd-panels-guided[b-jl4y2y9qky] {
    grid-template-columns: 380px 1fr 320px;
}

/* Inspecteur fermé par défaut : la colonne disparaît, elle ne reste pas vide. */
.sd-panels-no-inspector[b-jl4y2y9qky] {
    grid-template-columns: 240px 1fr 0;
}

.sd-panels-guided.sd-panels-no-inspector[b-jl4y2y9qky] {
    grid-template-columns: 380px 1fr 0;
}

/* ─── « Masquer l'aperçu » ───
   L'aperçu disparaît et l'éditeur prend toute la largeur : les réglages, qui
   tenaient dans un rail de 380 px, se répartissent alors sur deux colonnes
   (mi-field-grid est déjà en auto-fill minmax(180px, 1fr)). */
.sd-panels-no-preview[b-jl4y2y9qky] {
    grid-template-columns: 1fr 320px;
}

.sd-panels-no-preview.sd-panels-no-inspector[b-jl4y2y9qky] {
    grid-template-columns: 1fr 0;
}

.sd-panels-no-preview .sd-panel-center[b-jl4y2y9qky] {
    display: none;
}

.sd-panels-no-preview .sd-panel-left[b-jl4y2y9qky] {
    border-right: none;
}

/* Les 49 accroches sur toute la largeur : deux colonnes, sinon chaque ligne
   traîne son chevron à 1 200 px de son libellé. Les groupes (TITRES, CARTE…)
   ne se coupent pas au passage de colonne. */
.sd-panels-no-preview .sd-tree-scroll[b-jl4y2y9qky] {
    columns: 2;
    column-gap: 24px;
    padding-left: 4px;
    padding-right: 4px;
}

.sd-panels-no-preview .sd-tree-scroll .sd-group[b-jl4y2y9qky] {
    break-inside: avoid;
    page-break-inside: avoid;
}

/* Le rembourrage du rail élargi vit dans MonIdentitePanel : sa feuille de style
   est globale, celle-ci est « scoped » et ne porterait pas jusqu'à .mi-root. */

.sd-panel-right.closed[b-jl4y2y9qky] {
    border-left: none;
}

.sd-rail-scroll[b-jl4y2y9qky] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* ─── Retouches ─── */

.sd-retouches[b-jl4y2y9qky] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}

.sd-retouches-head[b-jl4y2y9qky] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 16px 6px;
}

.sd-retouches-title[b-jl4y2y9qky] {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.sd-advanced-toggle[b-jl4y2y9qky] {
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
}

.sd-advanced-toggle:hover:not(:disabled)[b-jl4y2y9qky] {
    background: #f3f4f6;
}

.sd-advanced-toggle:disabled[b-jl4y2y9qky] {
    opacity: 0.5;
    cursor: default;
}

/* ─── « Masquer l'aperçu » — à droite des onglets ─── */
.sd-preview-toggle[b-jl4y2y9qky] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--linkooc-border-color, #e5e7eb);
    background: var(--linkooc-surface, #fff);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--linkooc-text, #374151);
    cursor: pointer;
    white-space: nowrap;
}

.sd-preview-toggle:hover[b-jl4y2y9qky] {
    background: var(--linkooc-hover-bg, #f3f4f6);
}

.sd-preview-toggle i[b-jl4y2y9qky] {
    font-size: 12px;
    color: var(--linkooc-text-secondary, #6b7280);
}

.sd-retouches-empty[b-jl4y2y9qky] {
    padding: 16px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.5;
}

.sd-retouche-filters[b-jl4y2y9qky] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0 12px 8px;
}

.sd-retouche-filter[b-jl4y2y9qky] {
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 11px;
    color: #374151;
    cursor: pointer;
    white-space: nowrap;
}

.sd-retouche-filter.active[b-jl4y2y9qky] {
    background: #e7f1e8;
    border-color: #08781B;
    color: #08781B;
    font-weight: 600;
}

.sd-group-header-static[b-jl4y2y9qky] {
    cursor: default;
}

.sd-group-header-static:hover[b-jl4y2y9qky] {
    background: none;
}











/* Hooks « Mon identité » never drives — they follow the template. Kept visually
   quieter than « Identité » so the eye reads it as "nothing of yours here yet". */








/* ─── Mode avancé ─── */

.sd-advanced-head[b-jl4y2y9qky] {
    padding: 8px 12px 4px;
    border-bottom: 1px solid #e5e7eb;
}

.sd-advanced-back[b-jl4y2y9qky] {
    border: none;
    background: none;
    padding: 2px 0;
    font-size: 11px;
    font-weight: 600;
    color: #08781B;
    cursor: pointer;
}

.sd-advanced-back i[b-jl4y2y9qky] {
    font-size: 10px;
}

/* ─── Aperçu ─── */
/* Plan 373 — .sd-preview-caption retirée : la légende est passée dans la barre d'aperçu
   (.sd-preview-scope), au-dessus de l'iframe. */

/* ─── Inspecteur de rôle ─── */


.sd-role-origin[b-jl4y2y9qky] {
    padding: 10px 16px 0;
}






.sd-inspector-empty-inline[b-jl4y2y9qky] {
    padding: 16px;
    font-size: 12px;
    color: #6b7280;
}

/* /Pages/Establishment/Panels/WebsiteSectionDetailPanel.razor.rz.scp.css */
/* Plan 401 — regles deplacees depuis le <style> global du .razor vers
   l'isolation CSS Blazor. Les declarations sont inchangees.

   Pourquoi les :where() : le compilateur ajoute [b-xxxxxxxxxx] a la fin du
   selecteur, ce qui lui ajoute le poids d'une classe. Sans compensation, ces
   regles se mettraient a battre des regles globales plus specifiques
   (mobile.css, plans 393/399) qu'elles perdaient jusqu'ici. :where() sur la
   premiere classe rend ce poids : la specificite reste exactement celle du
   <style> d'origine, seule la portee change. */

:where(.linkooc-panel-header)[b-akei8ze6av],
[b-akei8ze6av] :where(.linkooc-panel-header) {
    height: var(--linkooc-panel-header-height, 56px);
    padding: 0.75rem var(--linkooc-spacing-md, 1rem);
    border-bottom: 1px solid var(--linkooc-border-color, #dee2e6);
    display: flex;
    align-items: center;
    gap: var(--linkooc-spacing-sm, 0.75rem);
    flex-shrink: 0;
    background: var(--linkooc-bg, #fff);
}

:where(.linkooc-detail-title)[b-akei8ze6av],
[b-akei8ze6av] :where(.linkooc-detail-title) {
    font-size: var(--linkooc-detail-title-size, 1.125rem);
    font-weight: var(--linkooc-detail-title-weight, 600);
    color: var(--linkooc-text-display, #000601);
    line-height: 1.3;
}

:where(.linkooc-detail-content)[b-akei8ze6av],
[b-akei8ze6av] :where(.linkooc-detail-content) {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--linkooc-spacing-lg, 1.5rem);
}

:where(.linkooc-empty-state)[b-akei8ze6av],
[b-akei8ze6av] :where(.linkooc-empty-state) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 0;
    padding: var(--linkooc-spacing-xl, 2rem);
    color: var(--linkooc-text-muted, #6d6d6d);
    text-align: center;
}

:where(.linkooc-empty-state) i[b-akei8ze6av],
[b-akei8ze6av] :where(.linkooc-empty-state) i {
    font-size: var(--linkooc-spacing-2xl, 3rem);
    margin-bottom: var(--linkooc-spacing-md, 1rem);
    opacity: 0.5;
}

:where(.linkooc-empty-state) p[b-akei8ze6av],
[b-akei8ze6av] :where(.linkooc-empty-state) p {
    margin: 0;
    font-size: var(--linkooc-list-item-title-size, 0.9375rem);
}
/* /Pages/Establishment/Panels/WebsiteSectionMasterPanel.razor.rz.scp.css */
/* Plan 401 — regles deplacees depuis le <style> global du .razor vers
   l'isolation CSS Blazor. Les declarations sont inchangees.

   Pourquoi les :where() : le compilateur ajoute [b-xxxxxxxxxx] a la fin du
   selecteur, ce qui lui ajoute le poids d'une classe. Sans compensation, ces
   regles se mettraient a battre des regles globales plus specifiques
   (mobile.css, plans 393/399) qu'elles perdaient jusqu'ici. :where() sur la
   premiere classe rend ce poids : la specificite reste exactement celle du
   <style> d'origine, seule la portee change. */

:where(.linkooc-panel-header)[b-ejhu6axk5h],
[b-ejhu6axk5h] :where(.linkooc-panel-header) {
    height: var(--linkooc-panel-header-height, 56px);
    padding: 0.75rem var(--linkooc-spacing-md, 1rem);
    border-bottom: 1px solid var(--linkooc-border-color, #dee2e6);
    display: flex;
    align-items: center;
    gap: var(--linkooc-spacing-sm, 0.5rem);
    flex-shrink: 0;
    background: var(--linkooc-bg, #fff);
}

:where(.linkooc-list-container)[b-ejhu6axk5h],
[b-ejhu6axk5h] :where(.linkooc-list-container) {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

:where(.linkooc-empty-state)[b-ejhu6axk5h],
[b-ejhu6axk5h] :where(.linkooc-empty-state) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: var(--linkooc-spacing-xl, 2rem);
    color: var(--linkooc-text-muted, #6d6d6d);
    text-align: center;
}

:where(.linkooc-empty-state) i[b-ejhu6axk5h],
[b-ejhu6axk5h] :where(.linkooc-empty-state) i {
    font-size: var(--linkooc-spacing-2xl, 3rem);
    margin-bottom: var(--linkooc-spacing-md, 1rem);
    opacity: 0.5;
}

:where(.linkooc-empty-state) p[b-ejhu6axk5h],
[b-ejhu6axk5h] :where(.linkooc-empty-state) p {
    margin: 0;
    font-size: var(--linkooc-list-item-title-size, 0.9375rem);
}
/* /Pages/Establishment/Widgets/OpeningHoursEditor.razor.rz.scp.css */
/* Plan 953 — l'encadré « Horaires d'ouverture » : même cadre que la carte
   Google Business juste au-dessus (bordure, en-tête gris clair). */
.lk-hours-card[b-ao41tyu16j] {
    border: 1px solid var(--linkooc-border-color);
    border-radius: var(--linkooc-radius-sm, 0.5rem);
    background: var(--linkooc-surface, #fefefe);
    overflow: hidden;
}

.lk-hours-head[b-ao41tyu16j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--linkooc-spacing-sm, 0.75rem);
    flex-wrap: wrap;
    padding: var(--linkooc-spacing-md, 1rem);
    border-bottom: 1px solid var(--linkooc-border-color);
    background: var(--linkooc-surface-hover, #f7f7f8);
}

.lk-hours-head-actions[b-ao41tyu16j] {
    display: flex;
    align-items: center;
    gap: var(--linkooc-spacing-sm, 0.75rem);
}

.lk-hours-body[b-ao41tyu16j] {
    padding: 0.25rem var(--linkooc-spacing-md, 1rem);
}

.lk-hours-row[b-ao41tyu16j] {
    display: flex;
    align-items: center;
    gap: var(--linkooc-spacing-md, 1rem);
    min-height: 52px;
    padding: 0.375rem 0;
    border-bottom: 1px solid var(--linkooc-border-color);
}

.lk-hours-row:last-child[b-ao41tyu16j] {
    border-bottom: 0;
}

/* Le jour et son interrupteur : toute la case bascule le jour. */
.lk-hours-day[b-ao41tyu16j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 8.5rem;
    min-height: 44px;
    flex-shrink: 0;
    cursor: pointer;
    user-select: none;
}

.lk-hours-day-name[b-ao41tyu16j] {
    font-weight: 500;
    color: var(--linkooc-text);
}

.lk-hours-ranges[b-ao41tyu16j] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    flex: 1 1 auto;
    min-width: 0;
}

.lk-hours-closed[b-ao41tyu16j] {
    color: var(--linkooc-text-muted);
}

.lk-hours-range[b-ao41tyu16j] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.lk-hours-time[b-ao41tyu16j] {
    width: 6.75rem;
    min-height: 38px;
    padding: 0.25rem 0.5rem;
    font-variant-numeric: tabular-nums;
}

.lk-hours-dash[b-ao41tyu16j] {
    color: var(--linkooc-text-muted);
}

.lk-hours-icon-btn[b-ao41tyu16j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--linkooc-text-muted);
}

.lk-hours-icon-btn:hover[b-ao41tyu16j] {
    background: var(--linkooc-surface-hover, #f7f7f8);
    color: var(--linkooc-text);
}

.lk-hours-add[b-ao41tyu16j] {
    border: 0;
    background: transparent;
    padding: 0.25rem 0;
    min-height: 32px;
    color: var(--linkooc-primary-ink, #08781B);
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
}

.lk-hours-add:hover[b-ao41tyu16j] {
    text-decoration: underline;
}

.lk-hours-foot[b-ao41tyu16j] {
    display: flex;
    justify-content: flex-start;
    padding: 0.5rem var(--linkooc-spacing-md, 1rem) var(--linkooc-spacing-md, 1rem);
}

/* Mobile : une ligne par jour, cibles de 44 px. Le jour garde sa colonne ; les
   plages passent dessous quand la ligne ne suffit pas. */
@media (max-width: 768px) {
    .lk-hours-row[b-ao41tyu16j] {
        flex-wrap: wrap;
        gap: 0.25rem 0.75rem;
        padding: 0.5rem 0;
    }

    .lk-hours-day[b-ao41tyu16j] {
        width: 8.25rem;
    }

    .lk-hours-time[b-ao41tyu16j] {
        width: 6.75rem;
        min-height: 44px;
    }

    .lk-hours-icon-btn[b-ao41tyu16j],
    .lk-hours-add[b-ao41tyu16j] {
        min-width: 44px;
        min-height: 44px;
    }
}
/* /Pages/Establishment/Widgets/WebsiteSectionCard.razor.rz.scp.css */
/* Plan 401 — regles deplacees depuis le <style> global du .razor vers
   l'isolation CSS Blazor. Les declarations sont inchangees.

   Pourquoi les :where() : le compilateur ajoute [b-xxxxxxxxxx] a la fin du
   selecteur, ce qui lui ajoute le poids d'une classe. Sans compensation, ces
   regles se mettraient a battre des regles globales plus specifiques
   (mobile.css, plans 393/399) qu'elles perdaient jusqu'ici. :where() sur la
   premiere classe rend ce poids : la specificite reste exactement celle du
   <style> d'origine, seule la portee change. */

:where(.linkooc-list-item)[b-ycw1k1sq20],
[b-ycw1k1sq20] :where(.linkooc-list-item) {
    padding: var(--linkooc-spacing-md, 1rem);
    border-bottom: 1px solid var(--linkooc-border-color, #dee2e6);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--linkooc-spacing-sm, 0.75rem);
    transition: background-color var(--linkooc-transition-fast, 150ms ease);
    background-color: var(--linkooc-surface, #fff);
}

:where(.linkooc-list-item):hover[b-ycw1k1sq20],
[b-ycw1k1sq20] :where(.linkooc-list-item):hover {
    background-color: var(--linkooc-list-hover-bg, #F7F7F8);
}

:where(.linkooc-list-item).selected[b-ycw1k1sq20],
[b-ycw1k1sq20] :where(.linkooc-list-item).selected {
    border-left: 4px solid var(--linkooc-list-selection-border-color, #08781B);
    background-color: var(--linkooc-list-selection-bg, #e7f1e8);
}

/* Icon Badge */
:where(.linkooc-list-item-icon)[b-ycw1k1sq20],
[b-ycw1k1sq20] :where(.linkooc-list-item-icon) {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--linkooc-radius-sm, 0.5rem);
    background-color: var(--linkooc-surface-hover, #f0f0f0);
    color: var(--linkooc-text-muted, #6d6d6d);
    font-size: 1rem;
    transition: all var(--linkooc-transition-fast, 150ms ease);
}

:where(.linkooc-list-item-icon).active[b-ycw1k1sq20],
[b-ycw1k1sq20] :where(.linkooc-list-item-icon).active {
    background-color: var(--linkooc-primary, #08781B);
    color: var(--linkooc-on-solid, #ffffff);
}

/* Content */
:where(.linkooc-list-item-content)[b-ycw1k1sq20],
[b-ycw1k1sq20] :where(.linkooc-list-item-content) {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--linkooc-spacing-xs, 0.25rem);
}

:where(.linkooc-list-item-title)[b-ycw1k1sq20],
[b-ycw1k1sq20] :where(.linkooc-list-item-title) {
    font-size: var(--linkooc-list-item-title-size, 0.9375rem);
    font-weight: var(--linkooc-list-item-title-weight, 600);
    color: var(--linkooc-text-display, #000601);
}

:where(.linkooc-list-item-desc)[b-ycw1k1sq20],
[b-ycw1k1sq20] :where(.linkooc-list-item-desc) {
    font-size: var(--linkooc-list-item-desc-size, 0.8125rem);
    color: var(--linkooc-text-muted, #6d6d6d);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Status Badge */
/* Plan 414 — la pastille « Désactivé » est devenue LkBadge (Tone=Muted) :
   la redéfinition locale de .linkooc-status-badge est supprimée, la primitive
   porte le style (groupe 9, « celle de site.css »). */

/* Plan 983 — monter, descendre, supprimer.
   Avec une souris : les commandes apparaissent sur la carte survolée, ouverte
   ou parcourue au clavier, à la place de la pastille « Désactivé » (la section
   ouverte montre déjà son interrupteur : une info, une fois). La pastille et les
   commandes partagent la même place à droite, réservée en permanence : le texte
   ne passe jamais dessous, et rien ne bouge au survol.
   Au doigt (pas de survol) : toujours visibles, à leur place dans la ligne. */
.linkooc-section-card[b-ycw1k1sq20] {
    position: relative;
}

.linkooc-section-card-actions[b-ycw1k1sq20] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.linkooc-section-card-actions-slot[b-ycw1k1sq20] {
    display: inline-block;
    width: var(--linkooc-control-height, 2rem);
}

@media (hover: hover) {
    .linkooc-section-card .linkooc-list-item-content[b-ycw1k1sq20] {
        margin-right: 6.5rem;
    }

    .linkooc-section-card[b-ycw1k1sq20]  .lk-badge {
        position: absolute;
        top: 50%;
        right: var(--linkooc-spacing-md, 1rem);
        transform: translateY(-50%);
    }

    .linkooc-section-card-actions[b-ycw1k1sq20] {
        position: absolute;
        top: 50%;
        right: var(--linkooc-spacing-md, 1rem);
        transform: translateY(-50%);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--linkooc-transition-fast, 150ms ease);
    }

    .linkooc-section-card:hover .linkooc-section-card-actions[b-ycw1k1sq20],
    .linkooc-section-card.selected .linkooc-section-card-actions[b-ycw1k1sq20],
    .linkooc-section-card:focus-within .linkooc-section-card-actions[b-ycw1k1sq20] {
        opacity: 1;
        pointer-events: auto;
    }

    .linkooc-section-card:hover[b-ycw1k1sq20]  .lk-badge,
    .linkooc-section-card.selected[b-ycw1k1sq20]  .lk-badge,
    .linkooc-section-card:focus-within[b-ycw1k1sq20]  .lk-badge {
        visibility: hidden;
    }
}
/* /Pages/GalleryRow.razor.rz.scp.css */
/* Plan 413 — l'enveloppe à deux largeurs. Chrome de la galerie uniquement :
   rien ici ne style une primitive. */

.grow[b-1dke7s6t2q] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

.grow__cells[b-1dke7s6t2q] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: start;
}

.grow__cell[b-1dke7s6t2q] {
    position: relative;
    min-width: 0;
    padding: 1.25rem 0.75rem 0.75rem;
    border: 1px dashed var(--linkooc-border-color, #dee2e6);
    border-radius: 8px;
    background: var(--linkooc-bg, #fff);
}

.grow__tag[b-1dke7s6t2q] {
    position: absolute;
    top: 0.25rem;
    right: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--linkooc-text-muted, #6d6d6d);
}

.grow__content[b-1dke7s6t2q] {
    min-width: 0;
}

/* La colonne 390 : un conteneur étroit bordé. `max-width: 100%` évite que la
   boîte de 390px déborde elle-même un viewport de 390. */
.grow__content--narrow[b-1dke7s6t2q] {
    width: 390px;
    max-width: 100%;
}

/* Sous 900px les deux cellules s'empilent — le chrome de la galerie ne doit
   jamais être lui-même la cause d'un débordement. */
@media (max-width: 900px) {
    .grow__cells[b-1dke7s6t2q] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Pages/Google/Panels/GoogleReviewsPanel.razor.rz.scp.css */
/* Plan 495 — R9 : la recherche compacte prend toute la place disponible.

   Avant, le champ vivait dans un `.text-end` d'un `d-flex justify-content-between` :
   il se dimensionnait sur son contenu et mesurait 241 px à 390 comme à 1440,
   laissant 98 px morts à sa droite sur un téléphone.

   Bootstrap 5.1 n'a pas d'utilitaire de largeur au point de rupture
   (`w-md-auto` n'existe pas), d'où ces deux règles plutôt qu'un `w-100` qui
   étirerait aussi le bureau. Le point de rupture est celui du produit : 768. */

.google-reviews-search[b-iodlym28si] {
    flex: 0 0 auto;
    width: 15rem;
}

@media (max-width: 768px) {
    .google-reviews-search[b-iodlym28si] {
        flex: 1 1 100%;
        width: auto;
    }
}
/* /Pages/Index.razor.rz.scp.css */
/* Plan 401 — regles deplacees depuis le <style> global du .razor vers
   l'isolation CSS Blazor. Les declarations sont inchangees.

   Pourquoi les :where() : le compilateur ajoute [b-xxxxxxxxxx] a la fin du
   selecteur, ce qui lui ajoute le poids d'une classe. Sans compensation, ces
   regles se mettraient a battre des regles globales plus specifiques
   (mobile.css, plans 393/399) qu'elles perdaient jusqu'ici. :where() sur la
   premiere classe rend ce poids : la specificite reste exactement celle du
   <style> d'origine, seule la portee change. */

:where(.linkooc-refresh-btn)[b-i7xlmo1dzo],
[b-i7xlmo1dzo] :where(.linkooc-refresh-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--linkooc-border-color, #e5e7eb);
    border-radius: var(--linkooc-radius-sm, 0.25rem);
    background: var(--linkooc-surface, #ffffff);
    color: var(--linkooc-text-secondary, #6d6d6d);
    cursor: pointer;
    font-size: 0.875rem;
    transition: border-color 0.15s ease, color 0.15s ease;
}

:where(.linkooc-refresh-btn):hover:not(:disabled)[b-i7xlmo1dzo],
[b-i7xlmo1dzo] :where(.linkooc-refresh-btn):hover:not(:disabled) {
    border-color: var(--linkooc-button-primary, #08781B);
    color: var(--linkooc-primary-ink, #08781B);
}

:where(.linkooc-refresh-btn):disabled[b-i7xlmo1dzo],
[b-i7xlmo1dzo] :where(.linkooc-refresh-btn):disabled {
    cursor: not-allowed;
    opacity: 0.6;
}
/* /Pages/Item/ItemList.razor.rz.scp.css */
/* Plan 401 — regles deplacees depuis le <style> global du .razor vers
   l'isolation CSS Blazor. Les declarations sont inchangees.

   Pourquoi les :where() : le compilateur ajoute [b-xxxxxxxxxx] a la fin du
   selecteur, ce qui lui ajoute le poids d'une classe. Sans compensation, ces
   regles se mettraient a battre des regles globales plus specifiques
   (mobile.css, plans 393/399) qu'elles perdaient jusqu'ici. :where() sur la
   premiere classe rend ce poids : la specificite reste exactement celle du
   <style> d'origine, seule la portee change. */

:where(.linkooc-page-container)[b-tckk8g27dz],
[b-tckk8g27dz] :where(.linkooc-page-container) {
    /* 48px topbar + ~25px content padding (1.1rem + py-2) + safety margin */
    /* height: calc(100vh - 90px); */
    max-height: calc(100vh - 75px);
    overflow: hidden;
}

:where(.linkooc-page-header)[b-tckk8g27dz],
[b-tckk8g27dz] :where(.linkooc-page-header) {
    flex-shrink: 0;
}

:where(.linkooc-page-count)[b-tckk8g27dz],
[b-tckk8g27dz] :where(.linkooc-page-count) {
    font-size: var(--linkooc-page-count-size, 1rem);
    font-weight: 400;
    color: var(--linkooc-text-muted, #6d6d6d);
}

:where(.linkooc-page-subtitle)[b-tckk8g27dz],
[b-tckk8g27dz] :where(.linkooc-page-subtitle) {
    font-size: var(--linkooc-page-subtitle-size, 0.875rem);
    color: var(--linkooc-text-muted, #6d6d6d);
}

:where(.linkooc-dropdown-toggle)[b-tckk8g27dz]::after,
[b-tckk8g27dz] :where(.linkooc-dropdown-toggle)::after {
    content: '';
    display: inline-block;
    margin-left: 0.5rem;
    vertical-align: middle;
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-left: 0.3em solid transparent;
}

:where(.linkooc-dropdown-menu)[b-tckk8g27dz],
[b-tckk8g27dz] :where(.linkooc-dropdown-menu) {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 1050;
    min-width: 280px;
    background: var(--linkooc-bg, #fff);
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 0.5rem 0;
    animation: linkoocDropdownIn 0.15s ease-out;
}

:where(.linkooc-panel-header)[b-tckk8g27dz],
[b-tckk8g27dz] :where(.linkooc-panel-header) {
    height: var(--linkooc-panel-header-height, 56px);
    padding: 0.75rem var(--linkooc-spacing-md, 1rem);
    border-bottom: 1px solid var(--linkooc-border-color, #dee2e6);
    display: flex;
    align-items: center;
    gap: var(--linkooc-spacing-sm, 0.5rem);
    flex-shrink: 0;
    background: var(--linkooc-bg, #fff);
}

:where(.linkooc-detail-container) .linkooc-panel-header[b-tckk8g27dz],
[b-tckk8g27dz] :where(.linkooc-detail-container) .linkooc-panel-header {
    min-height: 56px;
    height: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Plan 438 / F5 — le header de la LISTE mobile (recherche + Filtres)

   Deux défauts se combinaient à 390px :

   1. La fente était FIGÉE (`height: 56px` ci-dessus, moins 0.75rem de padding
      haut et bas = 32px utiles) alors que ses deux contrôles sont au plancher
      tactile de 44px (plan 420). Un bouton dont le libellé passe à deux lignes
      dépasse alors franchement sa fente et se peint par-dessus ses voisins.
      La variante « détail » juste au-dessus savait déjà faire : min-height +
      height auto. C'est la même recette, appliquée à la liste.
   2. Le partage de largeur allait à l'envers. Le conteneur du champ est
      `flex-grow-1` avec `min-width: auto` : sa largeur min-content inclut celle
      de l'<input> Telerik, il refuse donc de se comprimer, et TOUT le
      rétrécissement retombait sur le bouton — qui, réduit à ~48px, repliait
      « Filtres » sous son icône.

   Le jeton --linkooc-panel-header-height n'est PAS touché (il est partagé avec
   AISessions, WebsiteSection* et LkActionBar) et le bouton n'est pas réduit :
   la fente s'adapte à lui, pas l'inverse.

   Pas de variante ::deep ici, contrairement aux règles ci-dessus : ce header
   est écrit dans ItemList.razor, il porte donc l'attribut de portée lui-même.
   ═══════════════════════════════════════════════════════════════════════════ */

:where(.linkooc-mobile-list) > .linkooc-panel-header[b-tckk8g27dz] {
    min-height: var(--linkooc-panel-header-height, 56px);
    height: auto;
}

/* min-width: 0 lève la largeur min-content : c'est la recherche qui cède la
   place, elle en a de reste. */
:where(.linkooc-panel-header) .linkooc-panel-header__search[b-tckk8g27dz] {
    min-width: 0;
}

/* flex-shrink: 0 réserve au bouton sa largeur naturelle. Le nowrap est la
   ceinture : même sur un écran plus étroit que 390, « Filtres » reste sur la
   ligne de son icône au lieu de doubler la hauteur du bouton. */
:where(.linkooc-panel-header) .linkooc-panel-header__action[b-tckk8g27dz] {
    flex-shrink: 0;
    white-space: nowrap;
}

:where(.linkooc-detail-container) .linkooc-panel-header--two-rows[b-tckk8g27dz],
[b-tckk8g27dz] :where(.linkooc-detail-container) .linkooc-panel-header--two-rows {
    flex-direction: column;
    align-items: stretch;
    gap: 0.1rem;
    padding: 0.35rem 1rem 0.5rem;
}

:where(.linkooc-detail-header-row1)[b-tckk8g27dz],
[b-tckk8g27dz] :where(.linkooc-detail-header-row1) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

:where(.linkooc-detail-title)[b-tckk8g27dz],
[b-tckk8g27dz] :where(.linkooc-detail-title) {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--linkooc-text-display, #000601);
    margin: 0;
}

:where(.linkooc-list-container)[b-tckk8g27dz],
[b-tckk8g27dz] :where(.linkooc-list-container) {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

:where(.linkooc-list-item)[b-tckk8g27dz],
[b-tckk8g27dz] :where(.linkooc-list-item) {
    padding: var(--linkooc-spacing-md, 1rem);
    border-bottom: 1px solid var(--linkooc-border-color, #dee2e6);
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--linkooc-spacing-sm, 0.5rem);
    transition: background-color var(--linkooc-transition-fast, 150ms ease);
}

:where(.linkooc-list-item):hover[b-tckk8g27dz],
[b-tckk8g27dz] :where(.linkooc-list-item):hover {
    background-color: var(--linkooc-list-hover-bg, #F7F7F8);
}

:where(.linkooc-empty-state)[b-tckk8g27dz],
[b-tckk8g27dz] :where(.linkooc-empty-state) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: var(--linkooc-spacing-xl, 2rem);
    text-align: center;
    color: var(--linkooc-text-muted, #6d6d6d);
}

:where(.linkooc-empty-state) i[b-tckk8g27dz],
[b-tckk8g27dz] :where(.linkooc-empty-state) i {
    font-size: var(--linkooc-spacing-2xl, 3rem);
    margin-bottom: var(--linkooc-spacing-md, 1rem);
    opacity: 0.5;
}

:where(.linkooc-empty-state) p[b-tckk8g27dz],
[b-tckk8g27dz] :where(.linkooc-empty-state) p {
    margin: 0;
    font-size: var(--linkooc-list-item-title-size, 0.9375rem);
}
/* /Pages/Menu/Components/MenuHistoryPanel.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════════════
   MENU HISTORY PANEL - Slide-over styles
   ═══════════════════════════════════════════════════════════════════════════════════ */

/* Backdrop */
.history-panel-backdrop[b-cuwnjcc7y3] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: var(--linkooc-transition-normal);
    z-index: 1000;
}

.history-panel-backdrop.open[b-cuwnjcc7y3] {
    opacity: 1;
    visibility: visible;
}

/* Panel */
.history-panel[b-cuwnjcc7y3] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 380px;
    max-width: 100vw;
    background: var(--linkooc-bg);
    box-shadow: var(--linkooc-shadow-lg);
    transform: translateX(100%);
    transition: transform var(--linkooc-transition-normal);
    z-index: 1001;
    display: flex;
    flex-direction: column;
}

.history-panel.open[b-cuwnjcc7y3] {
    transform: translateX(0);
}

/* Header */
.history-panel-header[b-cuwnjcc7y3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--linkooc-spacing-md);
    border-bottom: 1px solid var(--linkooc-border-color);
    background: var(--linkooc-surface);
}

.history-panel-title[b-cuwnjcc7y3] {
    display: flex;
    align-items: center;
    gap: var(--linkooc-spacing-sm);
    margin: 0;
    font-size: var(--linkooc-page-subtitle-size);
    font-weight: 600;
    color: var(--linkooc-text-primary);
}

.history-panel-title i[b-cuwnjcc7y3] {
    color: var(--linkooc-primary-ink);
}

.history-panel-close[b-cuwnjcc7y3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--linkooc-text-muted);
    border-radius: var(--linkooc-radius-sm);
    cursor: pointer;
    transition: var(--linkooc-transition-fast);
}

.history-panel-close:hover[b-cuwnjcc7y3] {
    background: var(--linkooc-surface-hover);
    color: var(--linkooc-text-primary);
}

/* Content */
.history-panel-content[b-cuwnjcc7y3] {
    flex: 1;
    overflow-y: auto;
    padding: var(--linkooc-spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--linkooc-spacing-lg);
}

/* ═══════════════════════════════════════════════════════════════════════════════════
   SECTIONS
   ═══════════════════════════════════════════════════════════════════════════════════ */

.history-section[b-cuwnjcc7y3] {
    display: flex;
    flex-direction: column;
    gap: var(--linkooc-spacing-sm);
}

.history-section-header[b-cuwnjcc7y3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--linkooc-spacing-xs);
    border-bottom: 1px solid var(--linkooc-border-color);
}

.history-section-title[b-cuwnjcc7y3] {
    display: flex;
    align-items: center;
    gap: var(--linkooc-spacing-xs);
    margin: 0;
    font-size: var(--linkooc-section-title-size);
    font-weight: 600;
    color: var(--linkooc-text-primary);
}

.history-section-title i[b-cuwnjcc7y3] {
    font-size: 14px;
    color: var(--linkooc-text-muted);
}

.history-section-action[b-cuwnjcc7y3] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border: none;
    background: var(--linkooc-primary);
    color: white;
    font-size: var(--linkooc-small-size);
    font-weight: 500;
    border-radius: var(--kendo-border-radius-md, 0.375rem);
    cursor: pointer;
    transition: var(--linkooc-transition-fast);
}

.history-section-action:hover[b-cuwnjcc7y3] {
    background: var(--linkooc-green-var-2);
}

.history-section-content[b-cuwnjcc7y3] {
    display: flex;
    flex-direction: column;
    gap: var(--linkooc-spacing-sm);
}

/* Loading & Empty States */
.history-loading[b-cuwnjcc7y3] {
    display: flex;
    justify-content: center;
    padding: var(--linkooc-spacing-lg);
}

.history-empty[b-cuwnjcc7y3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--linkooc-spacing-xs);
    padding: var(--linkooc-spacing-lg);
    color: var(--linkooc-text-muted);
    text-align: center;
    font-size: var(--linkooc-small-size);
}

.history-empty i[b-cuwnjcc7y3] {
    font-size: 24px;
    opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════════════════════════════════
   SCHEDULE CARDS
   ═══════════════════════════════════════════════════════════════════════════════════ */

.schedule-card[b-cuwnjcc7y3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--linkooc-spacing-sm) var(--linkooc-spacing-md);
    background: var(--linkooc-surface);
    border: 1px solid var(--linkooc-border-color);
    border-radius: var(--linkooc-radius-md);
    transition: var(--linkooc-transition-fast);
}

.schedule-card:hover[b-cuwnjcc7y3] {
    background: var(--linkooc-hover-bg);
    border-color: var(--linkooc-primary);
}

.schedule-info[b-cuwnjcc7y3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.schedule-date[b-cuwnjcc7y3] {
    display: flex;
    align-items: center;
    gap: var(--linkooc-spacing-xs);
    font-size: var(--linkooc-body-size);
    font-weight: 500;
    color: var(--linkooc-text-primary);
}

.schedule-date i[b-cuwnjcc7y3] {
    color: var(--linkooc-primary-ink);
}

.schedule-recurrence[b-cuwnjcc7y3] {
    font-size: var(--linkooc-small-size);
    color: var(--linkooc-text-muted);
}

.schedule-delete[b-cuwnjcc7y3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: var(--linkooc-danger-light);
    color: var(--linkooc-danger);
    border-radius: var(--linkooc-radius-sm);
    cursor: pointer;
    transition: var(--linkooc-transition-fast);
}

.schedule-delete:hover:not(:disabled)[b-cuwnjcc7y3] {
    background: var(--linkooc-danger);
    color: white;
}

.schedule-delete:disabled[b-cuwnjcc7y3] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════════════════════
   VERSION CARDS
   ═══════════════════════════════════════════════════════════════════════════════════ */

.version-card[b-cuwnjcc7y3] {
    display: flex;
    flex-direction: column;
    gap: var(--linkooc-spacing-xs);
    padding: var(--linkooc-spacing-sm) var(--linkooc-spacing-md);
    background: var(--linkooc-surface);
    border: 1px solid var(--linkooc-border-color);
    border-radius: var(--linkooc-radius-md);
    transition: var(--linkooc-transition-fast);
}

.version-card:hover[b-cuwnjcc7y3] {
    border-color: var(--linkooc-primary);
}

.version-card.version-live[b-cuwnjcc7y3] {
    border-color: var(--linkooc-success);
    background: var(--linkooc-success-light);
}

.version-card.version-preview[b-cuwnjcc7y3] {
    border-style: dashed;
}

.version-header[b-cuwnjcc7y3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.version-type[b-cuwnjcc7y3] {
    font-size: var(--linkooc-body-size);
    font-weight: 600;
    color: var(--linkooc-text-primary);
}

.version-live-badge[b-cuwnjcc7y3] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--linkooc-success);
    color: white;
    font-size: var(--linkooc-tiny-size);
    font-weight: 700;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.live-dot[b-cuwnjcc7y3] {
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    animation: live-pulse-b-cuwnjcc7y3 1.5s ease-in-out infinite;
}

@keyframes live-pulse-b-cuwnjcc7y3 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.version-stats[b-cuwnjcc7y3] {
    display: flex;
    gap: var(--linkooc-spacing-md);
}

.version-stat[b-cuwnjcc7y3] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--linkooc-small-size);
    color: var(--linkooc-text-muted);
}

.version-stat i[b-cuwnjcc7y3] {
    font-size: 12px;
}

.version-footer[b-cuwnjcc7y3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--linkooc-spacing-xs);
    border-top: 1px solid var(--linkooc-border-color);
}

.version-date[b-cuwnjcc7y3] {
    font-size: var(--linkooc-small-size);
    color: var(--linkooc-text-muted);
}

.version-actions[b-cuwnjcc7y3] {
    display: flex;
    gap: var(--linkooc-spacing-xs);
}

.version-action-btn[b-cuwnjcc7y3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--linkooc-radius-sm);
    cursor: pointer;
    transition: var(--linkooc-transition-fast);
}

.version-action-btn:disabled[b-cuwnjcc7y3] {
    opacity: 0.6;
    cursor: not-allowed;
}

.version-action-view[b-cuwnjcc7y3] {
    background: var(--linkooc-info-light);
    color: var(--linkooc-info);
}

.version-action-view:hover:not(:disabled)[b-cuwnjcc7y3] {
    background: var(--linkooc-info);
    color: white;
}

.version-action-restore[b-cuwnjcc7y3] {
    background: var(--linkooc-primary-subtle);
    color: var(--linkooc-primary-ink);
}

.version-action-restore:hover:not(:disabled)[b-cuwnjcc7y3] {
    background: var(--linkooc-primary);
    color: white;
}

/* ═══════════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════════════ */

/* ── Téléphone ──────────────────────────────────────────────────────────────────────
   La barre supérieure mobile vit dans `.sidebar` (position: fixed; top: 0;
   z-index: 1040 — BackOfficeLayout.razor:379, hauteur mesurée 60 px) et se peignait
   AU-DESSUS de l'en-tête du panneau (z-index: 1001) : la croix de fermeture était
   invisible ET inatteignable (elementFromPoint rendait « user-avatar-initials »).

   On ne remonte PAS le z-index du panneau : 1045 est l'offcanvas de navigation mobile
   et 1055 la modale ; passer devant mettrait le panneau devant le menu de navigation.
   On décale donc le panneau (et son fond) SOUS la barre. */
@media (max-width: 767.98px) {
    .history-panel[b-cuwnjcc7y3],
    .history-panel-backdrop[b-cuwnjcc7y3] {
        top: 60px;
    }

    /* Cibles tactiles ≥ 44 px (la croix mesurait 32×32, « + Ajouter » 86×30) */
    .history-panel-close[b-cuwnjcc7y3] {
        min-width: 44px;
        min-height: 44px;
    }

    .history-section-action[b-cuwnjcc7y3] {
        min-height: 44px;
    }

    /* « Charger cette version » (et « Voir l'aperçu ») mesuraient 28×28 : c'est
       l'action PRIMAIRE du panneau, et la seule qui restait sous le plancher.
       Même discipline que .k-clear-value (mobile.css) : border-box pour que la
       taille déclarée SOIT la surface tactile, et on ne touche pas au glyphe —
       l'icône est un <i> enfant dont la taille ne suit pas son conteneur, donc
       aucun font-size n'est modifié ici. La rangée peut passer à la ligne
       plutôt que rétrécir : deux boutons de 44 tiennent largement dans la carte
       (panneau 334), mais wrap garantit qu'aucun bouton n'est jamais comprimé.
       Bureau intouché : au-dessus de 768 px les deux règles restent à 28. */
    .version-actions[b-cuwnjcc7y3] {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .version-action-btn[b-cuwnjcc7y3] {
        box-sizing: border-box;
        min-width: 44px;
        min-height: 44px;
        flex-shrink: 0;
    }
}

@media (max-width: 480px) {
    /* Le panneau occupait 100vw : le fond n'avait plus aucune zone libre, donc plus
       aucune fermeture par le fond. On laisse une bande de 56 px à gauche. */
    .history-panel[b-cuwnjcc7y3] {
        width: calc(100vw - 56px);
    }
}
/* /Pages/Menu/MenuPage.razor.rz.scp.css */
/* Plan 401 — regles deplacees depuis le <style> global du .razor vers
   l'isolation CSS Blazor. Les declarations sont inchangees.

   Pourquoi les :where() : le compilateur ajoute [b-xxxxxxxxxx] a la fin du
   selecteur, ce qui lui ajoute le poids d'une classe. Sans compensation, ces
   regles se mettraient a battre des regles globales plus specifiques
   (mobile.css, plans 393/399) qu'elles perdaient jusqu'ici. :where() sur la
   premiere classe rend ce poids : la specificite reste exactement celle du
   <style> d'origine, seule la portee change. */

:where(.linkooc-page-header)[b-4mvpiir3lg],
[b-4mvpiir3lg] :where(.linkooc-page-header) {
    flex-shrink: 0;
}

:where(.linkooc-page-title)[b-4mvpiir3lg],
[b-4mvpiir3lg] :where(.linkooc-page-title) {
    font-size: var(--linkooc-page-title-size, 1.5rem);
    font-weight: var(--linkooc-page-title-weight, 600);
    color: var(--linkooc-text-display, #000601);
    margin: 0;
    line-height: 1.2;
}

:where(.linkooc-status-success)[b-4mvpiir3lg],
[b-4mvpiir3lg] :where(.linkooc-status-success) {
    color: var(--linkooc-success, #197C28);
    background-color: var(--linkooc-success-light, #e7f5e9);
}

:where(.linkooc-status-warning)[b-4mvpiir3lg],
[b-4mvpiir3lg] :where(.linkooc-status-warning) {
    color: var(--linkooc-warning, #B8860B);
    background-color: var(--linkooc-warning-light, #fff8e6);
}

:where(.linkooc-status-info)[b-4mvpiir3lg],
[b-4mvpiir3lg] :where(.linkooc-status-info) {
    color: var(--linkooc-info, #197CBA);
    background-color: var(--linkooc-info-light, #e7f3fa);
}

:where(.linkooc-status-muted)[b-4mvpiir3lg],
[b-4mvpiir3lg] :where(.linkooc-status-muted) {
    color: var(--linkooc-text-muted, #6d6d6d);
    background-color: var(--linkooc-hover-bg, #F7F7F8);
}

:where(.linkooc-status-neutral)[b-4mvpiir3lg],
[b-4mvpiir3lg] :where(.linkooc-status-neutral) {
    color: var(--linkooc-text-muted, #6d6d6d);
    background-color: transparent;
    border: 1px solid var(--linkooc-border-color, #dee2e6);
}

:where(.linkooc-tabs-container)[b-4mvpiir3lg],
[b-4mvpiir3lg] :where(.linkooc-tabs-container) {
    background-color: var(--linkooc-surface);
    flex-shrink: 0;
    padding: 0 var(--linkooc-spacing-md);
}

:where(.linkooc-tabs)[b-4mvpiir3lg],
[b-4mvpiir3lg] :where(.linkooc-tabs) {
    display: flex;
    gap: 0;
}

:where(.linkooc-tab)[b-4mvpiir3lg],
[b-4mvpiir3lg] :where(.linkooc-tab) {
    display: inline-flex;
    align-items: center;
    padding: var(--linkooc-spacing-sm) var(--linkooc-spacing-md);
    font-size: var(--linkooc-body-size);
    font-weight: 500;
    color: var(--linkooc-text-muted);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    transition: all var(--linkooc-transition-fast) ease;
}

:where(.linkooc-tab):hover[b-4mvpiir3lg],
[b-4mvpiir3lg] :where(.linkooc-tab):hover {
    color: var(--linkooc-text-primary);
    background-color: var(--linkooc-surface-hover);
}

:where(.linkooc-settings-content)[b-4mvpiir3lg],
[b-4mvpiir3lg] :where(.linkooc-settings-content) {
    padding: var(--linkooc-spacing-lg);
    background-color: var(--linkooc-surface);
}

:where(.linkooc-dropdown-toggle)[b-4mvpiir3lg]::after,
[b-4mvpiir3lg] :where(.linkooc-dropdown-toggle)::after {
    content: '';
    display: inline-block;
    margin-left: 0.5rem;
    vertical-align: middle;
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-left: 0.3em solid transparent;
}

:where(.linkooc-dropdown-menu)[b-4mvpiir3lg],
[b-4mvpiir3lg] :where(.linkooc-dropdown-menu) {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 1050;
    min-width: 280px;
    background: var(--linkooc-bg, #fff);
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 0.5rem 0;
    animation: linkoocDropdownIn 0.15s ease-out;
}

:where(.linkooc-refresh-btn)[b-4mvpiir3lg],
[b-4mvpiir3lg] :where(.linkooc-refresh-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--linkooc-border-color, #e5e7eb);
    border-radius: var(--linkooc-radius-sm, 0.25rem);
    background: var(--linkooc-surface, #ffffff);
    color: var(--linkooc-text-secondary, #6d6d6d);
    cursor: pointer;
    font-size: 0.875rem;
    transition: border-color 0.15s ease, color 0.15s ease;
}

:where(.linkooc-refresh-btn):hover:not(:disabled)[b-4mvpiir3lg],
[b-4mvpiir3lg] :where(.linkooc-refresh-btn):hover:not(:disabled) {
    border-color: var(--linkooc-button-primary, #08781B);
    color: var(--linkooc-primary-ink, #08781B);
}

:where(.linkooc-refresh-btn):disabled[b-4mvpiir3lg],
[b-4mvpiir3lg] :where(.linkooc-refresh-btn):disabled {
    cursor: not-allowed;
    opacity: 0.6;
}
/* /Pages/Menu/Panels/ListMenu.razor.rz.scp.css */
/* Plan 401 — regles deplacees depuis le <style> global du .razor vers
   l'isolation CSS Blazor. Les declarations sont inchangees.

   Pourquoi les :where() : le compilateur ajoute [b-xxxxxxxxxx] a la fin du
   selecteur, ce qui lui ajoute le poids d'une classe. Sans compensation, ces
   regles se mettraient a battre des regles globales plus specifiques
   (mobile.css, plans 393/399) qu'elles perdaient jusqu'ici. :where() sur la
   premiere classe rend ce poids : la specificite reste exactement celle du
   <style> d'origine, seule la portee change. */

:where(.linkooc-page-header)[b-us6qlmifp4],
[b-us6qlmifp4] :where(.linkooc-page-header) {
    flex-shrink: 0;
}

:where(.linkooc-dropdown-toggle)[b-us6qlmifp4]::after,
[b-us6qlmifp4] :where(.linkooc-dropdown-toggle)::after {
    content: '';
    display: inline-block;
    margin-left: 0.5rem;
    vertical-align: middle;
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-left: 0.3em solid transparent;
}

:where(.linkooc-dropdown-menu)[b-us6qlmifp4],
[b-us6qlmifp4] :where(.linkooc-dropdown-menu) {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 1050;
    min-width: 280px;
    background: var(--linkooc-bg, #fff);
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 0.5rem 0;
    animation: linkoocDropdownIn 0.15s ease-out;
}

:where(.linkooc-refresh-btn)[b-us6qlmifp4],
[b-us6qlmifp4] :where(.linkooc-refresh-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--linkooc-border-color, #e5e7eb);
    border-radius: var(--linkooc-radius-sm, 0.25rem);
    background: var(--linkooc-surface, #ffffff);
    color: var(--linkooc-text-secondary, #6d6d6d);
    cursor: pointer;
    font-size: 0.875rem;
    transition: border-color 0.15s ease, color 0.15s ease;
}

:where(.linkooc-refresh-btn):hover:not(:disabled)[b-us6qlmifp4],
[b-us6qlmifp4] :where(.linkooc-refresh-btn):hover:not(:disabled) {
    border-color: var(--linkooc-button-primary, #08781B);
    color: var(--linkooc-primary-ink, #08781B);
}

:where(.linkooc-refresh-btn):disabled[b-us6qlmifp4],
[b-us6qlmifp4] :where(.linkooc-refresh-btn):disabled {
    cursor: not-allowed;
    opacity: 0.6;
}
/* /Pages/PartnerSpace/EspacePartenairePage.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   Espace partenaire (plan 096) — layout de page. Les cartes KPI, la liste des
   restaurants, le palier et le détail commission vivent désormais dans des
   composants partagés (Components/Common/Partner/, classes .pdash-*) réutilisés
   par la tour de contrôle « Partenaires » (plan 097). Linkooc tokens only.
   ═══════════════════════════════════════════════════════════════════════════ */

.ep-partner-id[b-bihumzssyh] {
    color: var(--linkooc-text-muted);
    font-weight: 500;
}

/* ── Sélecteur partenaire (Admin / SuperAdmin uniquement) ────────────────── */
.ep-admin-picker[b-bihumzssyh] {
    display: flex;
    align-items: center;
    gap: var(--linkooc-spacing-xs);
}

.ep-admin-picker-label[b-bihumzssyh] {
    margin: 0;
    font-size: var(--linkooc-small-size);
    color: var(--linkooc-text-muted);
    white-space: nowrap;
}

.ep-admin-select[b-bihumzssyh] {
    min-width: 220px;
}

/* Bandeau : l'admin consulte l'espace d'un partenaire (impersonation). */
.ep-admin-banner[b-bihumzssyh] {
    display: flex;
    align-items: center;
    gap: var(--linkooc-spacing-sm);
    margin-bottom: var(--linkooc-spacing-md);
    padding: var(--linkooc-spacing-sm) var(--linkooc-spacing-md);
    background: var(--linkooc-primary-subtle);
    color: var(--linkooc-text-primary);
    border: 1px solid var(--linkooc-border-color);
    border-radius: var(--linkooc-radius-md);
    font-size: var(--linkooc-small-size);
}

.ep-admin-banner i[b-bihumzssyh] {
    color: var(--linkooc-primary-ink);
}

/* ── Empty / loading states (page-level) ─────────────────────────────────── */
.ep-empty[b-bihumzssyh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--linkooc-spacing-sm);
    padding: var(--linkooc-spacing-2xl) var(--linkooc-spacing-md);
    text-align: center;
    color: var(--linkooc-text-muted);
}

.ep-empty > i[b-bihumzssyh] {
    font-size: 2rem;
    color: var(--linkooc-primary-ink);
}

.ep-empty-title[b-bihumzssyh] {
    font-size: var(--linkooc-detail-title-size);
    font-weight: var(--linkooc-detail-title-weight);
    color: var(--linkooc-text-primary);
    margin: 0;
}

.ep-empty-text[b-bihumzssyh] {
    max-width: 420px;
}

/* ── Main grid : list + rail ─────────────────────────────────────────────── */
.ep-main-grid[b-bihumzssyh] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--linkooc-spacing-md);
    align-items: start;
}

.ep-rail[b-bihumzssyh] {
    display: flex;
    flex-direction: column;
    gap: var(--linkooc-spacing-md);
}

/* ── Mes relevés (plan 316) — relevés validés, lecture seule ─────────────── */
.ep-statements[b-bihumzssyh] {
    margin-top: var(--linkooc-spacing-md);
    background: var(--linkooc-surface);
    border: 1px solid var(--linkooc-border-color);
    border-radius: var(--linkooc-radius-md);
    padding: var(--linkooc-spacing-md);
    box-shadow: var(--linkooc-shadow-sm);
}

.ep-statements-title[b-bihumzssyh] {
    font-size: var(--linkooc-section-title-size);
    font-weight: var(--linkooc-section-title-weight);
    color: var(--linkooc-text-primary);
    margin-bottom: var(--linkooc-spacing-xs);
}

.ep-statements-hint[b-bihumzssyh] {
    font-size: var(--linkooc-small-size);
    color: var(--linkooc-text-muted);
    margin-bottom: var(--linkooc-spacing-md);
}

.ep-statements-empty[b-bihumzssyh] {
    color: var(--linkooc-text-muted);
}

.ep-statements-table-wrap[b-bihumzssyh] {
    overflow-x: auto;
}

.ep-statements-table[b-bihumzssyh] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--linkooc-body-size);
}

.ep-statements-table th[b-bihumzssyh] {
    text-align: left;
    font-size: var(--linkooc-small-size);
    font-weight: 600;
    color: var(--linkooc-text-muted);
    padding: var(--linkooc-spacing-xs) var(--linkooc-spacing-sm);
    border-bottom: 1px solid var(--linkooc-border-color);
}

.ep-statements-table td[b-bihumzssyh] {
    padding: var(--linkooc-spacing-sm);
    border-bottom: 1px solid var(--linkooc-border-color);
    color: var(--linkooc-text-primary);
    vertical-align: middle;
}

.ep-statements-table tbody tr:last-child td[b-bihumzssyh] {
    border-bottom: none;
}

.ep-statements-table .num[b-bihumzssyh] {
    text-align: right;
    font-weight: 600;
    white-space: nowrap;
}

.ep-statement-period[b-bihumzssyh] {
    display: block;
    font-weight: 500;
}

.ep-statement-dates[b-bihumzssyh] {
    display: block;
    font-size: var(--linkooc-small-size);
    color: var(--linkooc-text-muted);
}

/* ── Téléchargement PDF d'un relevé (plan 318) ───────────────────────────── */
.ep-statement-actions[b-bihumzssyh] {
    text-align: right;
    white-space: nowrap;
}

.ep-statement-pdf-btn[b-bihumzssyh] {
    display: inline-flex;
    align-items: center;
    gap: var(--linkooc-spacing-xs);
    padding: var(--linkooc-spacing-xs) var(--linkooc-spacing-sm);
    background: var(--linkooc-surface);
    color: var(--linkooc-text-primary);
    border: 1px solid var(--linkooc-border-color);
    border-radius: var(--linkooc-radius-sm);
    font-size: var(--linkooc-small-size);
    cursor: pointer;
}

.ep-statement-pdf-btn:hover:not(:disabled)[b-bihumzssyh] {
    border-color: var(--linkooc-primary);
    color: var(--linkooc-primary-ink);
}

.ep-statement-pdf-btn:disabled[b-bihumzssyh] {
    opacity: 0.6;
    cursor: default;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .ep-main-grid[b-bihumzssyh] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Profile.razor.rz.scp.css */
/* Plan 401 — regles deplacees depuis le <style> global du .razor vers
   l'isolation CSS Blazor. Les declarations sont inchangees.

   Pourquoi les :where() : le compilateur ajoute [b-xxxxxxxxxx] a la fin du
   selecteur, ce qui lui ajoute le poids d'une classe. Sans compensation, ces
   regles se mettraient a battre des regles globales plus specifiques
   (mobile.css, plans 393/399) qu'elles perdaient jusqu'ici. :where() sur la
   premiere classe rend ce poids : la specificite reste exactement celle du
   <style> d'origine, seule la portee change. */

:where(.linkooc-page-header)[b-2jftgjo6w7],
[b-2jftgjo6w7] :where(.linkooc-page-header) {
    flex-shrink: 0;
}

:where(.linkooc-page-title)[b-2jftgjo6w7],
[b-2jftgjo6w7] :where(.linkooc-page-title) {
    font-size: var(--linkooc-page-title-size, 1.5rem);
    font-weight: var(--linkooc-page-title-weight, 600);
    color: var(--linkooc-text-display, #000601);
    margin: 0;
    line-height: 1.2;
}

:where(.linkooc-page-subtitle)[b-2jftgjo6w7],
[b-2jftgjo6w7] :where(.linkooc-page-subtitle) {
    font-size: var(--linkooc-body-size, 0.875rem);
    color: var(--linkooc-text-muted, #6d6d6d);
    margin: 0;
}

/* La surcharge `.linkooc-status-success` a ete retiree (plan 417, arbitrage de
   l'operateur du 2026-08-07) : /profile adopte le vert de `site.css:418`, pour
   qu'une seule apparence de ce badge existe dans tout le produit.            */
/* /Pages/Reservation/ReservationClientsPage.razor.rz.scp.css */
/* Plan 401 — regles deplacees depuis le <style> global du .razor vers
   l'isolation CSS Blazor. Les declarations sont inchangees.

   Pourquoi les :where() : le compilateur ajoute [b-xxxxxxxxxx] a la fin du
   selecteur, ce qui lui ajoute le poids d'une classe. Sans compensation, ces
   regles se mettraient a battre des regles globales plus specifiques
   (mobile.css, plans 393/399) qu'elles perdaient jusqu'ici. :where() sur la
   premiere classe rend ce poids : la specificite reste exactement celle du
   <style> d'origine, seule la portee change. */

:where(.linkooc-dropdown-toggle)[b-gt2qa5e4wa]::after,
[b-gt2qa5e4wa] :where(.linkooc-dropdown-toggle)::after {
    content: '';
    display: inline-block;
    margin-left: 0.5rem;
    vertical-align: middle;
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-left: 0.3em solid transparent;
}

:where(.linkooc-dropdown-menu)[b-gt2qa5e4wa],
[b-gt2qa5e4wa] :where(.linkooc-dropdown-menu) {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 1050;
    min-width: 280px;
    background: var(--linkooc-bg, #fff);
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 0.5rem 0;
    animation: linkoocDropdownIn 0.15s ease-out;
}
/* /Pages/Reservation/ReservationPage.razor.rz.scp.css */
/* Plan 401 — regles deplacees depuis le <style> global du .razor vers
   l'isolation CSS Blazor. Les declarations sont inchangees.

   Pourquoi les :where() : le compilateur ajoute [b-xxxxxxxxxx] a la fin du
   selecteur, ce qui lui ajoute le poids d'une classe. Sans compensation, ces
   regles se mettraient a battre des regles globales plus specifiques
   (mobile.css, plans 393/399) qu'elles perdaient jusqu'ici. :where() sur la
   premiere classe rend ce poids : la specificite reste exactement celle du
   <style> d'origine, seule la portee change. */

:where(.linkooc-dropdown-toggle)[b-12nljvfyf0]::after,
[b-12nljvfyf0] :where(.linkooc-dropdown-toggle)::after {
    content: '';
    display: inline-block;
    margin-left: 0.5rem;
    vertical-align: middle;
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-left: 0.3em solid transparent;
}

:where(.linkooc-dropdown-menu)[b-12nljvfyf0],
[b-12nljvfyf0] :where(.linkooc-dropdown-menu) {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 1050;
    min-width: 280px;
    /* Plan 439 — filet de securite : meme repliee a gauche, une carte de 280px
       ne doit jamais deborder du viewport telephone (constat operateur a ~353px). */
    max-width: calc(100vw - 1.5rem);
    background: var(--linkooc-bg, #fff);
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 0.5rem 0;
    animation: linkoocDropdownIn 0.15s ease-out;
}
/* /Pages/Reservation/ReservationSettingsPage.razor.rz.scp.css */
/* Plan 401 — regles deplacees depuis le <style> global du .razor vers
   l'isolation CSS Blazor. Les declarations sont inchangees.

   Pourquoi les :where() : le compilateur ajoute [b-xxxxxxxxxx] a la fin du
   selecteur, ce qui lui ajoute le poids d'une classe. Sans compensation, ces
   regles se mettraient a battre des regles globales plus specifiques
   (mobile.css, plans 393/399) qu'elles perdaient jusqu'ici. :where() sur la
   premiere classe rend ce poids : la specificite reste exactement celle du
   <style> d'origine, seule la portee change. */

:where(.linkooc-tabs-container)[b-c5u2io3869],
[b-c5u2io3869] :where(.linkooc-tabs-container) {
    background-color: var(--linkooc-surface, #FFFFFF);
    flex-shrink: 0;
    padding: 0 var(--linkooc-spacing-md, 1rem);
}

:where(.linkooc-tabs)[b-c5u2io3869],
[b-c5u2io3869] :where(.linkooc-tabs) {
    display: flex;
    gap: 0;
}

:where(.linkooc-tab)[b-c5u2io3869],
[b-c5u2io3869] :where(.linkooc-tab) {
    display: inline-flex;
    align-items: center;
    padding: var(--linkooc-spacing-sm, 0.5rem) var(--linkooc-spacing-md, 1rem);
    font-size: var(--linkooc-body-size, 0.875rem);
    font-weight: 500;
    color: var(--linkooc-text-muted, #6c757d);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

:where(.linkooc-tab):hover[b-c5u2io3869],
[b-c5u2io3869] :where(.linkooc-tab):hover {
    color: var(--linkooc-text-primary, #212529);
    background-color: var(--linkooc-surface-hover, #F7F7F8);
}

:where(.linkooc-settings-content)[b-c5u2io3869],
[b-c5u2io3869] :where(.linkooc-settings-content) {
    background-color: var(--linkooc-bg, #FFFFFF);
}

@media (max-width: 767.98px) {
    :where(.linkooc-tabs-container)[b-c5u2io3869],
    [b-c5u2io3869] :where(.linkooc-tabs-container) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    :where(.linkooc-tabs-container)[b-c5u2io3869]::-webkit-scrollbar,
    [b-c5u2io3869] :where(.linkooc-tabs-container)::-webkit-scrollbar {
        display: none;
    }

    :where(.linkooc-tab)[b-c5u2io3869],
    [b-c5u2io3869] :where(.linkooc-tab) {
        padding: 0.375rem 0.625rem;
        font-size: 0.8125rem;
    }

    :where(.linkooc-page-title)[b-c5u2io3869],
    [b-c5u2io3869] :where(.linkooc-page-title) {
        font-size: 1.125rem;
    }

    :where(.linkooc-settings-content)[b-c5u2io3869],
    [b-c5u2io3869] :where(.linkooc-settings-content) {
        padding: 0.75rem !important;
    }
}
/* /Pages/Reservation/ReservationSetupWizard.razor.rz.scp.css */
/* Plan 401 — regles deplacees depuis le <style> global du .razor vers
   l'isolation CSS Blazor. Les declarations sont inchangees.

   Pourquoi les :where() : le compilateur ajoute [b-xxxxxxxxxx] a la fin du
   selecteur, ce qui lui ajoute le poids d'une classe. Sans compensation, ces
   regles se mettraient a battre des regles globales plus specifiques
   (mobile.css, plans 393/399) qu'elles perdaient jusqu'ici. :where() sur la
   premiere classe rend ce poids : la specificite reste exactement celle du
   <style> d'origine, seule la portee change. */

:where(.linkooc-page-subtitle)[b-6u9wug7bi6],
[b-6u9wug7bi6] :where(.linkooc-page-subtitle) {
    font-size: var(--linkooc-body-size, 0.875rem);
    color: var(--linkooc-text-muted, #6d6d6d);
}

:where(.linkooc-wizard-footer)[b-6u9wug7bi6],
[b-6u9wug7bi6] :where(.linkooc-wizard-footer) {
    flex-shrink: 0;
}
/* /Pages/Reservation/Widgets/ReservationShowcase.razor.rz.scp.css */
/* Plan 965 — la vitrine des réservations : le vrai site dans un téléphone, quatre lignes à côté. */

.resa-showcase[b-bo912zhti4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3.5rem;
    min-height: calc(100vh - 8rem);
    padding: 2rem 1.5rem;
}

/* Le cadre seul est dessiné ; l'écran est la photo du site. */
.resa-showcase__phone[b-bo912zhti4] {
    flex: 0 0 auto;
    width: 300px;
    padding: 11px;
    border-radius: 46px;
    background: #111;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.35), 0 12px 24px -12px rgba(0, 0, 0, 0.25);
}

.resa-showcase__screen[b-bo912zhti4] {
    overflow: hidden;
    border-radius: 35px;
    background: #f0f0f0;
}

.resa-showcase__text[b-bo912zhti4] {
    flex: 0 1 26rem;
    max-width: 26rem;
}

.resa-showcase__title[b-bo912zhti4] {
    margin: 0 0 0.75rem;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.15;
    color: var(--linkooc-text, #1a1a1a);
}

.resa-showcase__sentence[b-bo912zhti4] {
    margin: 0 0 1.5rem;
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--linkooc-text-muted, #6b7280);
}

.resa-showcase--text-only .resa-showcase__title[b-bo912zhti4] {
    margin-bottom: 1.5rem;
}

.resa-showcase__action[b-bo912zhti4] {
    border-radius: 6px;
    font-weight: 600;
}

/* Plan 966 — après l'envoi : un bouton secondaire, cadré, jamais pris pour un libellé. */
.resa-showcase__action--secondary[b-bo912zhti4] {
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    background: #fff;
    color: var(--linkooc-text, #1a1a1a);
}

.resa-showcase__action--secondary:hover[b-bo912zhti4],
.resa-showcase__action--secondary:focus-visible[b-bo912zhti4] {
    border-color: var(--linkooc-primary, #1b7a3e);
    color: var(--linkooc-primary-ink, #1b7a3e);
    background: #fff;
}

.resa-showcase__note[b-bo912zhti4] {
    margin: 0.75rem 0 0;
    font-size: 0.85rem;
    color: var(--linkooc-text-muted, #6b7280);
}

/* Plan 967 — l'encart de l'équipe Linkooc (Admin, SuperAdmin), sous le bouton du restaurateur. */
.resa-showcase__team[b-bo912zhti4] {
    margin-top: 2rem;
    padding: 0.85rem 1rem 1rem;
    border: 1px dashed var(--linkooc-border-color, #d1d5db);
    border-radius: 8px;
}

.resa-showcase__team-title[b-bo912zhti4] {
    margin: 0 0 0.6rem;
    font-size: 0.8rem;
    color: var(--linkooc-text-muted, #6b7280);
}

.resa-showcase__team-action[b-bo912zhti4] {
    border-radius: 6px;
    font-weight: 600;
    background: #1a1a1a;
    border: 1px solid #1a1a1a;
    color: #fff;
}

.resa-showcase__team-action:hover[b-bo912zhti4],
.resa-showcase__team-action:focus-visible[b-bo912zhti4] {
    background: #000;
    border-color: #000;
    color: #fff;
}

/* Téléphone : le téléphone au-dessus du texte, plus petit ; rien ne déborde. */
@media (max-width: 767.98px) {
    .resa-showcase[b-bo912zhti4] {
        flex-direction: column;
        gap: 1.75rem;
        min-height: 0;
        padding: 1.5rem 1rem 2rem;
        text-align: center;
    }

    .resa-showcase__phone[b-bo912zhti4] {
        width: min(220px, 70vw);
        padding: 8px;
        border-radius: 34px;
    }

    .resa-showcase__screen[b-bo912zhti4] {
        border-radius: 26px;
    }

    .resa-showcase__text[b-bo912zhti4] {
        flex: 0 0 auto;
        max-width: 100%;
    }

    .resa-showcase__title[b-bo912zhti4] {
        font-size: 1.5rem;
    }
}
/* /Pages/Settings.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   SETTINGS PAGE - Uses matrix-record-card from MatrixComponents
   Only page-specific overrides here
   ═══════════════════════════════════════════════════════════════════════════ */

/* Settings cards are clickable */
.matrix-record-card[b-plnusqh53j] {
    cursor: pointer;
}

/* Focus state for keyboard navigation */
.matrix-record-card:focus-visible[b-plnusqh53j] {
    outline: 2px solid var(--linkooc-primary, #08781B);
    outline-offset: 2px;
}

/* Icon styling */
.linkooc-admin-icon[b-plnusqh53j] {
    font-size: 1.25rem;
    color: var(--linkooc-primary-ink, #08781B);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABS NAVIGATION — classes standard du dépôt (plan 481, constat F7)

   La page avait inventé `.linkooc-settings-tabs` / `.linkooc-tab-button`.
   Conséquence mesurée en prod le 2026-08-13 à 390x844 : les deux onglets
   faisaient 40 px de haut, parce que les SEULES règles qui les atteignaient
   étaient celles de ce fichier. Toute la mécanique mobile du dépôt (R7b :
   plancher 44 px, ombres de défilement, onglet actif ramené à l'écran par
   `wwwroot/js/mobile-detect.js`) est écrite pour
   `.linkooc-tabs-container` / `.linkooc-tabs` / `.linkooc-tab` et ne pouvait
   donc pas s'appliquer. Ce bloc est la copie du patron de
   `ReservationSettingsPage.razor.css` / `MenuPage.razor.css` : la page rejoint
   le patron, le patron ne bouge pas (STOP 4 — rien n'est modifié dans
   `mobile.css` ni dans `linkooc-theme.css`).

   Les `:where()` ne sont pas décoratifs : le compilateur Blazor suffixe le
   sélecteur par `[b-xxxxxxxxxx]`, ce qui lui ajoute le poids d'une classe.
   Sans compensation ces règles locales battraient les règles globales de
   mobile.css — exactement la panne que ce plan corrige. `:where()` sur la
   première classe rend ce poids ; le plancher 44 px de mobile.css, lui, est en
   `!important` et gagne dans tous les cas.
   ═══════════════════════════════════════════════════════════════════════════ */

:where(.linkooc-tabs-container)[b-plnusqh53j],
[b-plnusqh53j] :where(.linkooc-tabs-container) {
    background-color: var(--linkooc-surface, #FFFFFF);
    flex-shrink: 0;
    padding: 0 var(--linkooc-spacing-md, 1rem);
}

:where(.linkooc-tabs)[b-plnusqh53j],
[b-plnusqh53j] :where(.linkooc-tabs) {
    display: flex;
    gap: 0;
}

:where(.linkooc-tab)[b-plnusqh53j],
[b-plnusqh53j] :where(.linkooc-tab) {
    display: inline-flex;
    align-items: center;
    padding: var(--linkooc-spacing-sm, 0.5rem) var(--linkooc-spacing-md, 1rem);
    font-size: var(--linkooc-body-size, 0.875rem);
    font-weight: 500;
    color: var(--linkooc-text-muted, #6c757d);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

/* `@media (hover: hover)` : sur écran tactile un appui colle `:hover` et rien
   ne vient le retirer — l'ancien `.linkooc-tab-button:hover` laissait donc un
   onglet grisé après chaque changement d'onglet. Le survol reste au pointeur
   fin, où il a un sens. */
@media (hover: hover) {
    :where(.linkooc-tab):hover[b-plnusqh53j],
    [b-plnusqh53j] :where(.linkooc-tab):hover {
        color: var(--linkooc-text-primary, #212529);
        background-color: var(--linkooc-surface-hover, #F7F7F8);
    }
}

:where(.linkooc-tab).active[b-plnusqh53j],
[b-plnusqh53j] :where(.linkooc-tab).active {
    color: var(--linkooc-primary-ink, #08781B);
    border-bottom-color: var(--linkooc-primary-ink, #08781B);
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BILLING SETTINGS CONTENT
   ═══════════════════════════════════════════════════════════════════════════ */

.linkooc-settings-content[b-plnusqh53j] {
    background-color: var(--linkooc-bg, #FFFFFF);
}

/* Retrait du cadre arrondi de la section entités */
.matrix-settings-entities-section[b-plnusqh53j] {
    background-color: transparent !important;
    border-radius: 0 !important;
    border: none !important;
    padding: 0 !important;
    height: auto;
}

/* Réduction des marges du header de section */
.matrix-section-header[b-plnusqh53j] {
    margin-bottom: 0.75rem !important;
}

/* Liste des entités */
.matrix-entity-list .list-group-item[b-plnusqh53j] {
    border: 1px solid var(--linkooc-border-light, #E0E0E0);
    margin-bottom: 0.5rem;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
}

.matrix-entity-list .list-group-item:hover[b-plnusqh53j] {
    transform: none !important;
    border-color: var(--linkooc-border-light, #E0E0E0) !important;
    background-color: var(--linkooc-bg-light, #F5F5F5);
}

/* Couleur de fond pour l'élément actif */
.matrix-entity-list .list-group-item.active[b-plnusqh53j] {
    background-color: #E7F1E9 !important;
    border-color: var(--linkooc-border-light, #E0E0E0) !important;
    color: var(--linkooc-text-primary, #333333) !important;
}

.matrix-entity-list .list-group-item.active:hover[b-plnusqh53j] {
    background-color: #dceadf !important;
}

.matrix-entity-list .list-group-item.active h6[b-plnusqh53j],
.matrix-entity-list .list-group-item.active small[b-plnusqh53j] {
    color: var(--linkooc-text-primary, #333333) !important;
}

/* Section détail */
.matrix-settings-detail-section[b-plnusqh53j] {
    background-color: var(--linkooc-bg, #FFFFFF);
    border-radius: 0.5rem;
    padding: 1.5rem;
    min-height: 400px;
}

.matrix-detail-empty-state[b-plnusqh53j] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE HEADER TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════════════ */

[b-plnusqh53j] .linkooc-page-title {
    font-size: var(--linkooc-page-title-size, 1.5rem);
    font-weight: var(--linkooc-page-title-weight, 600);
    color: var(--linkooc-text, #000601);
    margin: 0;
}

[b-plnusqh53j] .linkooc-page-subtitle {
    font-size: var(--linkooc-page-subtitle-size, 0.875rem);
    color: var(--linkooc-text-secondary, #6d6d6d);
}

[b-plnusqh53j] .linkooc-breadcrumb .breadcrumb {
    font-size: var(--linkooc-breadcrumb-size, 0.8125rem);
}

[b-plnusqh53j] .linkooc-breadcrumb .breadcrumb-item.active {
    color: var(--linkooc-text, #000601);
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE

   Seuil 767.98 px — le jeton du dépôt (768 px, R7b / mobile.css / Bootstrap md).
   L'ancien bloc était à 991.98 px et ne servait qu'aux onglets maison : sur une
   tablette de 800 px, les onglets rétrécissaient seuls pendant que le reste de
   la page restait en bureau (plan 481, constat F7b). Il a disparu avec eux ;
   la taille des onglets vient désormais de mobile.css, à 768 px, comme partout.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {
    /* F9 — l'onglet Facturation réservait 448 px d'écran vide sous la liste des
       entités : liste finissant à y=482, détail de y=506 à y=954, mesuré en prod
       le 2026-08-13 à 390x844. Les 400 px de `min-height` servent au BUREAU, où
       la liste et le détail sont côte à côte (`col-lg-4` / `col-lg-8`) et où la
       colonne de droite doit tenir la hauteur de celle de gauche. Sur téléphone
       les deux colonnes sont EMPILÉES : il n'y a plus rien à aligner, la hauteur
       réservée ne fait que pousser le contenu hors de l'écran.

       L'état vide « Aucune entité sélectionnée » n'est PAS masqué (STOP 2) : il
       cesse de réserver un demi-écran, il reste affiché et lisible.

       PAS de `:where()` ici, contrairement au bloc des onglets plus haut — et ce
       n'est pas une inconséquence, c'est une mesure. Ces deux classes sont
       PRIVÉES à cette page (aucune autre feuille du dépôt ne les nomme) : il n'y
       a aucune règle globale à ménager. En revanche il y a les deux règles de
       bureau ci-dessus, que le compilateur écrit
       `.matrix-settings-detail-section[b-xxxxx]`, soit deux classes. Avec
       `:where()` l'override n'en pèserait qu'une et PERDRAIT : mesuré en
       simulation de cascade sur la prod le 2026-08-13, `min-height` restait à
       400px et le bloc réservé à 448px. Les sélecteurs nus rendent le poids
       exactement égal ; l'override gagne parce qu'il vient plus loin. */
    .matrix-settings-detail-section[b-plnusqh53j] {
        min-height: 0;
    }

    .matrix-detail-empty-state[b-plnusqh53j] {
        min-height: 0;
    }
}
/* /Pages/Tariff/ListTarif.razor.rz.scp.css */
/* Plan 401 — regles deplacees depuis le <style> global du .razor vers
   l'isolation CSS Blazor. Les declarations sont inchangees.

   Pourquoi les :where() : le compilateur ajoute [b-xxxxxxxxxx] a la fin du
   selecteur, ce qui lui ajoute le poids d'une classe. Sans compensation, ces
   regles se mettraient a battre des regles globales plus specifiques
   (mobile.css, plans 393/399) qu'elles perdaient jusqu'ici. :where() sur la
   premiere classe rend ce poids : la specificite reste exactement celle du
   <style> d'origine, seule la portee change. */

:where(.linkooc-page-header)[b-gv1l20jfib],
[b-gv1l20jfib] :where(.linkooc-page-header) {
    flex-shrink: 0;
}

:where(.linkooc-status-info)[b-gv1l20jfib],
[b-gv1l20jfib] :where(.linkooc-status-info) {
    background-color: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
}

:where(.linkooc-input)[b-gv1l20jfib],
[b-gv1l20jfib] :where(.linkooc-input) {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: 6px;
    transition: border-color 0.15s;
}

:where(.linkooc-input):focus[b-gv1l20jfib],
[b-gv1l20jfib] :where(.linkooc-input):focus {
    border-color: var(--linkooc-button-primary, #08781B);
    outline: none;
    box-shadow: 0 0 0 3px rgba(8, 120, 27, 0.15);
}
/* /Pages/Translation/EstablishmentTranslationHistoryPage.razor.rz.scp.css */
/* Plan 401 — regles deplacees depuis le <style> global du .razor vers
   l'isolation CSS Blazor. Les declarations sont inchangees.

   Pourquoi les :where() : le compilateur ajoute [b-xxxxxxxxxx] a la fin du
   selecteur, ce qui lui ajoute le poids d'une classe. Sans compensation, ces
   regles se mettraient a battre des regles globales plus specifiques
   (mobile.css, plans 393/399) qu'elles perdaient jusqu'ici. :where() sur la
   premiere classe rend ce poids : la specificite reste exactement celle du
   <style> d'origine, seule la portee change. */

:where(.linkooc-page-header)[b-eixyt4xzr1],
[b-eixyt4xzr1] :where(.linkooc-page-header) {
    flex-shrink: 0;
}

:where(.linkooc-flag-icon)[b-eixyt4xzr1],
[b-eixyt4xzr1] :where(.linkooc-flag-icon) {
    width: 28px;
    height: 21px;
    object-fit: contain;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
/* /Pages/Translation/ItemTranslationHistoryPage.razor.rz.scp.css */
/* Plan 401 — regles deplacees depuis le <style> global du .razor vers
   l'isolation CSS Blazor. Les declarations sont inchangees.

   Pourquoi les :where() : le compilateur ajoute [b-xxxxxxxxxx] a la fin du
   selecteur, ce qui lui ajoute le poids d'une classe. Sans compensation, ces
   regles se mettraient a battre des regles globales plus specifiques
   (mobile.css, plans 393/399) qu'elles perdaient jusqu'ici. :where() sur la
   premiere classe rend ce poids : la specificite reste exactement celle du
   <style> d'origine, seule la portee change. */

:where(.linkooc-page-header)[b-ttbz6j68ro],
[b-ttbz6j68ro] :where(.linkooc-page-header) {
    flex-shrink: 0;
}

:where(.linkooc-flag-icon)[b-ttbz6j68ro],
[b-ttbz6j68ro] :where(.linkooc-flag-icon) {
    width: 28px;
    height: 21px;
    object-fit: contain;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
/* /Pages/Translation/TranslationDetailPage.razor.rz.scp.css */
/* Plan 401 — regles deplacees depuis le <style> global du .razor vers
   l'isolation CSS Blazor. Les declarations sont inchangees.

   Pourquoi les :where() : le compilateur ajoute [b-xxxxxxxxxx] a la fin du
   selecteur, ce qui lui ajoute le poids d'une classe. Sans compensation, ces
   regles se mettraient a battre des regles globales plus specifiques
   (mobile.css, plans 393/399) qu'elles perdaient jusqu'ici. :where() sur la
   premiere classe rend ce poids : la specificite reste exactement celle du
   <style> d'origine, seule la portee change. */

:where(.linkooc-page-header)[b-to85t2lqpp],
[b-to85t2lqpp] :where(.linkooc-page-header) {
    flex-shrink: 0;
}
/* /Pages/Translation/TranslationHistoryPage.razor.rz.scp.css */
/* Plan 401 — regles deplacees depuis le <style> global du .razor vers
   l'isolation CSS Blazor. Les declarations sont inchangees.

   Pourquoi les :where() : le compilateur ajoute [b-xxxxxxxxxx] a la fin du
   selecteur, ce qui lui ajoute le poids d'une classe. Sans compensation, ces
   regles se mettraient a battre des regles globales plus specifiques
   (mobile.css, plans 393/399) qu'elles perdaient jusqu'ici. :where() sur la
   premiere classe rend ce poids : la specificite reste exactement celle du
   <style> d'origine, seule la portee change. */

:where(.linkooc-page-header)[b-6eov4petd9],
[b-6eov4petd9] :where(.linkooc-page-header) {
    flex-shrink: 0;
}
/* /Pages/Translation/TranslationPage.razor.rz.scp.css */
/* Plan 401 — regles deplacees depuis le <style> global du .razor vers
   l'isolation CSS Blazor. Les declarations sont inchangees.

   Pourquoi les :where() : le compilateur ajoute [b-xxxxxxxxxx] a la fin du
   selecteur, ce qui lui ajoute le poids d'une classe. Sans compensation, ces
   regles se mettraient a battre des regles globales plus specifiques
   (mobile.css, plans 393/399) qu'elles perdaient jusqu'ici. :where() sur la
   premiere classe rend ce poids : la specificite reste exactement celle du
   <style> d'origine, seule la portee change. */

:where(.linkooc-page-header)[b-37rohqj8vc],
[b-37rohqj8vc] :where(.linkooc-page-header) {
    flex-shrink: 0;
}

:where(.linkooc-dropdown-toggle)[b-37rohqj8vc]::after,
[b-37rohqj8vc] :where(.linkooc-dropdown-toggle)::after {
    content: '';
    display: inline-block;
    margin-left: 0.5rem;
    vertical-align: middle;
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-left: 0.3em solid transparent;
}

:where(.linkooc-dropdown-menu)[b-37rohqj8vc],
[b-37rohqj8vc] :where(.linkooc-dropdown-menu) {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 1050;
    min-width: 280px;
    background: var(--linkooc-bg, #fff);
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 0.5rem 0;
    animation: linkoocDropdownIn 0.15s ease-out;
}
/* /Pages/UiGallery.razor.rz.scp.css */
/* Plan 413 — le chrome de /ui-gallery. Grille, cellules, étiquettes, colonne
   390 (GalleryRow.razor.css) : tout est ici, aucun <style> inline.

   Rien ne style une primitive : les seules règles qui touchent un composant
   démontré neutralisent un positionnement viewport (FAB fixe, voile de la
   feuille d'action) qui n'a pas de sens dans une page de catalogue. */

.ui-gallery[b-dve7n7i9uh] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}

.ui-gallery__header h1[b-dve7n7i9uh] {
    font-size: 1.375rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: var(--linkooc-text, #212529);
}

.ui-gallery__header p[b-dve7n7i9uh] {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    color: var(--linkooc-text-secondary, #495057);
}

.ui-gallery__section[b-dve7n7i9uh] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--linkooc-bg, #fff);
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: 12px;
    min-width: 0;
}

.ui-gallery__section-title[b-dve7n7i9uh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--linkooc-text, #212529);
}

.ui-gallery__section-title i[b-dve7n7i9uh] {
    color: var(--linkooc-text-muted, #6d6d6d);
}

/* L'étiquette d'un état. Sa couleur est mesurée par le gate (contraste ≥ 4,5:1
   sur fond blanc : #595f66 = 5,9:1). */
.ui-gallery__label[b-dve7n7i9uh] {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #595f66;
}

/* La règle, pas la description. */
.ui-gallery__hint[b-dve7n7i9uh] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--linkooc-text-secondary, #495057);
}

/* Cellules écrites directement dans la page (sections C, D et rangées « en
   attente »). Les cellules de GalleryRow portent leur propre style scoped. */
.ui-gallery__cell[b-dve7n7i9uh] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px dashed var(--linkooc-border-color, #dee2e6);
    border-radius: 8px;
    min-width: 0;
}

/* ── agencements de démonstration ─────────────────────────────────────── */

.ui-gallery__row[b-dve7n7i9uh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.ui-gallery__row--stretch[b-dve7n7i9uh] {
    align-items: stretch;
}

.ui-gallery__row--stretch > *[b-dve7n7i9uh] {
    flex: 1 1 220px;
    min-width: 0;
}

.ui-gallery__stack[b-dve7n7i9uh] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.ui-gallery__cardtext[b-dve7n7i9uh] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--linkooc-text-secondary, #495057);
}

.ui-gallery__listrow[b-dve7n7i9uh] {
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    color: var(--linkooc-text, #212529);
}

.ui-gallery__listrow + .ui-gallery__listrow[b-dve7n7i9uh] {
    border-top: 1px solid var(--linkooc-border-color, #dee2e6);
}

.ui-gallery__ambwrap[b-dve7n7i9uh] {
    max-width: 300px;
}

.ui-gallery__toastwrap[b-dve7n7i9uh] {
    max-width: 360px;
}

/* ── section C : la colonne téléphone ─────────────────────────────────── */

.ui-gallery__phone[b-dve7n7i9uh] {
    width: 390px;
    max-width: 100%;
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: 8px;
    overflow: hidden;
    background: var(--linkooc-bg, #fff);
}

/* Le FAB est `position: fixed` en production — dans un catalogue il flotterait
   sur la page entière. Ici il redevient un objet posé dans sa cellule. */
.ui-gallery__fabframe[b-dve7n7i9uh] {
    display: flex;
    justify-content: flex-end;
    padding: 1rem;
}

.ui-gallery__fabframe .mobile-fab[b-dve7n7i9uh] {
    position: static;
}

/* Le voile de la feuille d'action couvre le viewport en production ; ici il
   couvre sa vitrine. */
.ui-gallery__sheetframe[b-dve7n7i9uh] {
    position: relative;
    min-height: 300px;
}

.ui-gallery__sheetframe .mobile-action-sheet-overlay[b-dve7n7i9uh] {
    position: absolute;
}

/* ── Plan 438 / F6 — deux vitrines qui mentaient ───────────────────────────

   `.ui-gallery__phone` est un CONTENEUR de 390px dans un viewport bureau : les
   `@media (max-width: 768px)` ne s'y allument pas. Deux démos montraient donc un
   rendu qu'aucun téléphone ne produit. Le remède est celui que le FAB et le voile
   de la feuille d'action utilisent déjà juste au-dessus : re-décrire le
   comportement POUR LA VITRINE, dans ce fichier scoped. On n'élargit pas la media
   query de mobile.css et on n'y copie rien : la production n'a aucun bug ici.

   Le prix de ce choix est une duplication de règles avec mobile.css, assumée : la
   galerie est un contrat de régression, pas la source de vérité du style. Source :
   mobile.css, bloc « Mobile Tabs: horizontal scroll » (@media max-width 768px). */

.ui-gallery__phone .linkooc-tabs-container[b-dve7n7i9uh] {
    overflow-x: auto;
    scrollbar-width: none;
    /* Ombres de défilement (technique de Roman Komarov, reprise verbatim de
       mobile.css) : les deux premiers dégradés sont des « caches » peints dans la
       couleur de fond de la barre et attachés au CONTENU (local), ils glissent
       avec lui ; les deux suivants sont les ombres, attachées à l'ÉLÉMENT
       (scroll), elles restent aux bords. Sans elles la barre défile en silence —
       la barre native est masquée — et la vitrine dirait « défilant » sans le
       montrer. */
    --lk-tab-scroll-shadow: rgba(0, 0, 0, 0.22);
    --lk-tab-scroll-cover: var(--linkooc-surface, #FEFEFE);
    background-image:
        linear-gradient(to right, var(--lk-tab-scroll-cover) 65%, transparent),
        linear-gradient(to left, var(--lk-tab-scroll-cover) 65%, transparent),
        linear-gradient(to right, var(--lk-tab-scroll-shadow), transparent),
        linear-gradient(to left, var(--lk-tab-scroll-shadow), transparent);
    background-position: 0 0, 100% 0, 0 0, 100% 0;
    background-repeat: no-repeat;
    background-size: 32px 100%, 32px 100%, 20px 100%, 20px 100%;
    background-attachment: local, local, scroll, scroll;
}

.ui-gallery__phone .linkooc-tabs-container[b-dve7n7i9uh]::-webkit-scrollbar {
    display: none;
}

/* `display: flex` est ici pour une raison distincte des deux autres déclarations :
   il n'existe AUCUNE règle globale pour .linkooc-tabs / .linkooc-tab — chaque page
   qui porte une barre d'onglets la redéfinit dans son propre CSS isolé
   (ReservationSettingsPage.razor.css:18, MenuPage.razor.css:63, …). Cette vitrine
   n'hérite donc de rien, ce qui est la vraie raison de son empilement.
   Ce plan rétablit le COMPORTEMENT de rail, pas l'apparence : recopier ici la
   quatrième version des styles d'onglets ne ferait qu'ajouter une source de
   dérive. La bonne réponse — remonter le socle .linkooc-tab dans une feuille
   partagée — est un autre plan. */
.ui-gallery__phone .linkooc-tabs[b-dve7n7i9uh] {
    display: flex;
    flex-wrap: nowrap;
    min-width: max-content;
}

.ui-gallery__phone .linkooc-tab[b-dve7n7i9uh] {
    white-space: nowrap;
    /* Le plancher tactile R12 fait partie de ce que la vitrine doit montrer :
       sans lui les onglets se dessinent 10px plus courts qu'en vrai. */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    /* Le fond gris que le navigateur donne à un <button> nu (voir le commentaire
       ci-dessus : la vitrine n'hérite d'aucun style d'onglet) est OPAQUE et masque
       intégralement les ombres de défilement peintes sur le conteneur. Le vrai
       `.linkooc-tab` est transparent partout ; le redire ici n'est pas de
       l'habillage, c'est ce qui rend l'indice de défilement visible. */
    background: transparent;
}

/* La StickySaveBar est rendue par son vrai composant : son balisage ne porte pas
   l'attribut de portée de cette page, d'où ::deep. Sa propre media query ≤576px
   la met en colonne ; dans la colonne « 390 » de GalleryRow elle restait en
   rangée bureau, message écrasé sur trois lignes. Source : StickySaveBar.razor,
   bloc @media (max-width: 576px). */
.ui-gallery__savebarshowcase[b-dve7n7i9uh]  .grow__content--narrow .linkooc-sticky-save-bar {
    flex-direction: column;
    height: auto;
    padding: 0.75rem 1rem;
    gap: 0.75rem;
}

.ui-gallery__savebarshowcase[b-dve7n7i9uh]  .grow__content--narrow .linkooc-sticky-bar-actions {
    width: 100%;
    justify-content: flex-end;
}

.ui-gallery__draglist[b-dve7n7i9uh] {
    display: flex;
    flex-direction: column;
}

.ui-gallery__dragrow[b-dve7n7i9uh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.75rem;
    min-height: 52px;
    font-size: 0.9375rem;
    color: var(--linkooc-text, #212529);
}

.ui-gallery__dragrow + .ui-gallery__dragrow[b-dve7n7i9uh] {
    border-top: 1px solid var(--linkooc-border-color, #dee2e6);
}

.ui-gallery__paneldemo[b-dve7n7i9uh] {
    height: 180px;
}

.ui-gallery__paneldemo .linkooc-list-item[b-dve7n7i9uh] {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--linkooc-border-color, #dee2e6);
    font-size: 0.9375rem;
}

/* ── section D : le nuancier ──────────────────────────────────────────── */

.ui-gallery__tokens[b-dve7n7i9uh] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.375rem 1rem;
}

.ui-gallery__token[b-dve7n7i9uh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.ui-gallery__swatch[b-dve7n7i9uh] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: 4px;
}

.ui-gallery__swatch--nocolor[b-dve7n7i9uh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    color: var(--linkooc-text-muted, #6d6d6d);
    background: var(--linkooc-hover-bg, #F7F7F8);
}

.ui-gallery__tokenname[b-dve7n7i9uh] {
    font-size: 0.75rem;
    color: var(--linkooc-text, #212529);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-gallery__tokenvalue[b-dve7n7i9uh] {
    margin-left: auto;
    font-size: 0.75rem;
    color: #595f66;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 40%;
}

/* ── étroit : la galerie ne doit jamais être elle-même la cause d'un
      débordement ─────────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .ui-gallery[b-dve7n7i9uh] {
        padding: 1rem 0.5rem 3rem;
    }

    .ui-gallery__section[b-dve7n7i9uh] {
        padding: 0.75rem;
    }
}
/* /Shared/MainLayout.razor.rz.scp.css */
.page[b-842ao8tdbt] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-842ao8tdbt] {
    flex: 1;
}

.sidebar[b-842ao8tdbt] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-842ao8tdbt] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

.top-row[b-842ao8tdbt]  a,
.top-row .btn-link[b-842ao8tdbt] {
    white-space: nowrap;
    margin-left: 1.5rem;
}

.top-row a:first-child[b-842ao8tdbt] {
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 640.98px) {
    .top-row:not(.auth)[b-842ao8tdbt] {
        display: none;
    }

    .top-row.auth[b-842ao8tdbt] {
        justify-content: space-between;
    }

    .top-row a[b-842ao8tdbt],
    .top-row .btn-link[b-842ao8tdbt] {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-842ao8tdbt] {
        flex-direction: row;
    }

    .sidebar[b-842ao8tdbt] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-842ao8tdbt] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row[b-842ao8tdbt],
    article[b-842ao8tdbt] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Shared/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-jk58usiceu] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-jk58usiceu] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-jk58usiceu] {
    font-size: 1.1rem;
}

.oi[b-jk58usiceu] {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

.nav-item[b-jk58usiceu] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-jk58usiceu] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-jk58usiceu] {
        padding-bottom: 1rem;
    }

    .nav-item[b-jk58usiceu]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item[b-jk58usiceu]  a.active {
    background-color: rgba(255,255,255,0.25);
    color: white;
}

.nav-item[b-jk58usiceu]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

@media (min-width: 641px) {
    .navbar-toggler[b-jk58usiceu] {
        display: none;
    }

    .collapse[b-jk58usiceu] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
    
    .nav-scrollable[b-jk58usiceu] {
        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}