/* /Components/AccountProfileInfo.razor.rz.scp.css */
.account-profile-info[b-4rj2nnssqm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1.5rem;
    padding: 0.8rem 0.9rem;
    color: rgba(255, 255, 255, 0.74);
    background: rgba(255, 255, 255, 0.035);
    border-left: 2px solid rgba(240, 180, 0, 0.75);
}

.account-profile-info > i[b-4rj2nnssqm] {
    color: var(--sh-gold, #f0b400);
    font-size: 1.1rem;
}

.account-profile-info > div[b-4rj2nnssqm] {
    display: grid;
    min-width: 0;
    flex: 1;
    gap: 0.12rem;
}

.account-profile-info strong[b-4rj2nnssqm] {
    color: #fff;
    font-size: 0.84rem;
}

.account-profile-info span[b-4rj2nnssqm],
.account-profile-info a[b-4rj2nnssqm] {
    font-size: 0.78rem;
}

.account-profile-info a[b-4rj2nnssqm] {
    color: var(--sh-gold, #f0b400);
    text-decoration: none;
    white-space: nowrap;
}

.account-profile-info a:hover[b-4rj2nnssqm],
.account-profile-info a:focus-visible[b-4rj2nnssqm] {
    color: #fff;
    text-decoration: underline;
}

@media (max-width: 576px) {
    .account-profile-info[b-4rj2nnssqm] {
        align-items: flex-start;
    }
}
/* /Components/Admin/AdminSessionDetail.razor.rz.scp.css */
/* Une séance vue par l'équipe. Deux colonnes sur la fiche pleine page (la séance, l'argent), une
   seule dans le panneau central ; les paiements et le journal financier prennent toujours toute la
   largeur, parce qu'ils se lisent en ligne. */

.asd[b-wlu51wnb9f] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.asd-notices[b-wlu51wnb9f] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.asd-grid[b-wlu51wnb9f] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.asd--compact .asd-grid[b-wlu51wnb9f] { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 1000px) {
    .asd-grid[b-wlu51wnb9f] { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- bloc */

.asd-block[b-wlu51wnb9f] {
    min-width: 0;
    padding: 1rem 1.1rem;
    background: var(--sh-glass-bg);
    border: 1px solid var(--sh-glass-border);
    border-radius: var(--sh-radius-aero-sm);
}

.asd-block--flush[b-wlu51wnb9f] { padding: 0; }
.asd-block--flush .asd-block__head[b-wlu51wnb9f] { padding: 1rem 1.1rem 0.75rem; margin: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }

.asd--compact .asd-block[b-wlu51wnb9f] {
    padding: 0.9rem 0.95rem;
    background: rgba(255, 255, 255, 0.025);
}

.asd-block__head[b-wlu51wnb9f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.asd-block__head h3[b-wlu51wnb9f] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.asd-block__head h3 i[b-wlu51wnb9f] { color: var(--sh-gold, #f0b400); font-size: 0.9rem; }

.asd-count[b-wlu51wnb9f] {
    min-width: 1.5rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.72rem;
    font-weight: 800;
    text-align: center;
}

.asd-empty[b-wlu51wnb9f] {
    margin: 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
}

.asd-muted[b-wlu51wnb9f] { color: rgba(255, 255, 255, 0.5); }
.asd-break[b-wlu51wnb9f] { display: block; font-size: 0.78rem; overflow-wrap: anywhere; }

.asd-link[b-wlu51wnb9f] {
    color: var(--sh-gold, #f0b400);
    font-weight: 700;
    text-decoration: none;
}

.asd-link:hover[b-wlu51wnb9f],
.asd-link:focus-visible[b-wlu51wnb9f] { text-decoration: underline; }

.asd-quote[b-wlu51wnb9f] {
    display: block;
    margin-top: 0.2rem;
    color: rgba(255, 255, 255, 0.65);
    font-style: italic;
}

/* Un identifiant Stripe se lit caractère par caractère. */
.asd-id[b-wlu51wnb9f] {
    display: inline-block;
    max-width: 100%;
    padding: 0.05rem 0.4rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.78);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* ---------------------------------------------------------------- faits */

.asd-facts[b-wlu51wnb9f] {
    display: grid;
    grid-template-columns: minmax(7.5rem, max-content) minmax(0, 1fr);
    gap: 0.55rem 1rem;
    margin: 0;
    font-size: 0.86rem;
}

.asd-facts dt[b-wlu51wnb9f] {
    color: rgba(255, 255, 255, 0.48);
    font-weight: 600;
}

.asd-facts dd[b-wlu51wnb9f] {
    margin: 0;
    color: #fff;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- argent */

.asd-money[b-wlu51wnb9f] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.asd-money__row[b-wlu51wnb9f] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.65);
}

.asd-money__row strong[b-wlu51wnb9f] {
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.asd-money__row--sub[b-wlu51wnb9f] {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
}

.asd-progress[b-wlu51wnb9f] {
    height: 6px;
    margin-top: 0.3rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
}

.asd-progress__bar[b-wlu51wnb9f] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--sh-green, #4ade80);
    transition: width 240ms ease;
}

/* Tenu, pas encaissé : l'ambre en rayures, qui ne se confond pas avec une barre pleine. */
.asd-progress__bar.is-held[b-wlu51wnb9f] {
    background: repeating-linear-gradient(135deg,
        var(--sh-amber, #f59e0b) 0 6px,
        rgba(245, 158, 11, 0.35) 6px 12px);
}

.asd-net[b-wlu51wnb9f] {
    display: flex;
    flex-direction: column;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.asd-net__row[b-wlu51wnb9f] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.2rem 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.84rem;
    font-variant-numeric: tabular-nums;
}

.asd-net__row.is-out[b-wlu51wnb9f] { color: rgba(255, 255, 255, 0.55); }

.asd-net__row.is-total[b-wlu51wnb9f] {
    margin-top: 0.35rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--sh-gold, #f0b400);
    font-size: 0.95rem;
    font-weight: 800;
}

.asd-net__row.is-loss[b-wlu51wnb9f] { color: #ff8b8b; }

/* ---------------------------------------------------------------- paiements */

.asd-payments[b-wlu51wnb9f] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.asd-pay[b-wlu51wnb9f] {
    padding: 0.85rem 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left-width: 3px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.18);
}

.asd-pay.tone-warning[b-wlu51wnb9f] { border-left-color: var(--sh-amber, #f59e0b); }
.asd-pay.tone-danger[b-wlu51wnb9f] { border-left-color: #ff4747; }

.asd-pay__head[b-wlu51wnb9f] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.asd-pay__what[b-wlu51wnb9f] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.55rem;
    min-width: 0;
}

.asd-pay__what strong[b-wlu51wnb9f] {
    color: #fff;
    font-size: 0.95rem;
}

.asd-pay__what .status-pill[b-wlu51wnb9f] {
    padding: 3px 10px;
    font-size: 0.64rem;
    gap: 6px;
}

.asd-pay__amount[b-wlu51wnb9f] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    text-align: right;
}

.asd-pay__amount strong[b-wlu51wnb9f] {
    color: var(--sh-gold, #f0b400);
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}

.asd-pay__amount span[b-wlu51wnb9f] {
    color: #c4a1ff;
    font-size: 0.74rem;
}

.asd-steps[b-wlu51wnb9f] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.7rem 0 0;
    padding: 0;
    list-style: none;
}

.asd-steps li[b-wlu51wnb9f] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.72rem;
}

.asd-steps li span[b-wlu51wnb9f] {
    color: rgba(255, 255, 255, 0.45);
    font-weight: 700;
}

.asd-failure[b-wlu51wnb9f] {
    display: flex;
    gap: 0.45rem;
    margin: 0.6rem 0 0;
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
    background: rgba(255, 71, 71, 0.08);
    color: #ff8b8b;
    font-size: 0.8rem;
}

.asd-pay__facts[b-wlu51wnb9f] {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.35rem 0.85rem;
    margin: 0.7rem 0 0;
    font-size: 0.78rem;
}

.asd-pay__facts dt[b-wlu51wnb9f] { color: rgba(255, 255, 255, 0.45); font-weight: 600; }
.asd-pay__facts dd[b-wlu51wnb9f] { margin: 0; min-width: 0; color: rgba(255, 255, 255, 0.85); font-variant-numeric: tabular-nums; }

.asd-pay__actions[b-wlu51wnb9f] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
    margin-top: 0.75rem;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.asd-pay__actions .sh-action[b-wlu51wnb9f] {
    padding: 0.38rem 0.8rem;
    font-size: 0.78rem;
}

/* ---------------------------------------------------------------- journal financier */

.asd-ledger[b-wlu51wnb9f] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.asd-ledger__row[b-wlu51wnb9f] {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: baseline;
    padding: 0.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.82rem;
}

.asd-ledger__row:first-child[b-wlu51wnb9f] { border-top: 0; padding-top: 0; }

.asd-ledger__when[b-wlu51wnb9f] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.asd-ledger__what[b-wlu51wnb9f] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.5rem;
    min-width: 0;
}

.asd-ledger__what strong[b-wlu51wnb9f] { color: #fff; font-weight: 700; }
.asd-ledger__what .asd-muted[b-wlu51wnb9f] { font-size: 0.76rem; }

.asd-ledger__amount[b-wlu51wnb9f] {
    color: #fff;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

/* Une étape porte un montant indicatif : barré de rien, simplement éteint, et jamais additionné. */
.asd-ledger__row.is-milestone strong[b-wlu51wnb9f] { color: rgba(255, 255, 255, 0.65); font-weight: 600; }
.asd-ledger__row.is-milestone .asd-ledger__amount[b-wlu51wnb9f] { color: rgba(255, 255, 255, 0.35); font-weight: 500; }

@media (max-width: 560px) {
    .asd-ledger__row[b-wlu51wnb9f] {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .asd-ledger__when[b-wlu51wnb9f] { grid-column: 1 / -1; }

    .asd-pay__head[b-wlu51wnb9f] { flex-direction: column; }
    .asd-pay__amount[b-wlu51wnb9f] { align-items: flex-start; text-align: left; }
}
/* /Components/Admin/AdminSessionPanel.razor.rz.scp.css */
/* Le panneau central de l'administration : la géométrie commune (.sh-sidepanel, app.css), élargie
   pour les paiements et le journal financier, qui se lisent en ligne. */

.admin-session-panel[b-5hc3hztf87] {
    width: min(52rem, calc(100vw - 4rem));
}

@media (max-width: 720px) {
    .admin-session-panel[b-5hc3hztf87] { width: auto; }
}

.asp-head[b-5hc3hztf87] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.asp-head__names[b-5hc3hztf87] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.asp-head__ref[b-5hc3hztf87] {
    color: var(--sh-gold, #f0b400);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.asp-head h2[b-5hc3hztf87] {
    margin: 0;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.asp-head__sub[b-5hc3hztf87] {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.82rem;
}

.asp-head__end[b-5hc3hztf87] {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
}

.asp-foot[b-5hc3hztf87] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}
/* /Components/Admin/AdminShell.razor.rz.scp.css */
/* L'administration, sur la géométrie des espaces de /app : une colonne de rubriques repliable et
   une zone de contenu (voir RoleWorkspaceShell.razor.css, dont ce fichier reprend la grille, le
   repli et le comportement mobile). Les surfaces communes aux écrans — recherche, filtres,
   fiches, journal — restent décrites une fois ici, atteintes par ::deep puisque les écrans sont
   rendus dans la coquille. */

.admin-workspace[b-aux3d9ag7f] {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    min-height: calc(100vh - 110px);
    align-items: stretch;
    transition: grid-template-columns 180ms ease;
}
.admin-workspace--collapsed[b-aux3d9ag7f] { grid-template-columns: 68px minmax(0, 1fr); }

/* La colonne n'existe comme colonne qu'au-delà de 900 px. En dessous, c'est le tiroir commun
   (.sh-workspace-drawer, app.css) qui la place — partagé avec les espaces propriétaire, ingénieur
   et artiste. */
@media (min-width: 901px) {
    .admin-workspace-sidebar[b-aux3d9ag7f] {
        position: sticky;
        top: 0;
        align-self: start;
        height: calc(100vh - 110px);
        overflow-y: auto;
        padding: 0.75rem 0.65rem 1rem;
        border-right: 1px solid rgba(255, 255, 255, 0.08);
        scrollbar-width: thin;
    }
}

.admin-workspace-header[b-aux3d9ag7f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 36px;
    padding: 0 0.45rem 0.55rem;
}
.admin-workspace--collapsed .admin-workspace-header[b-aux3d9ag7f] { justify-content: center; padding-inline: 0; }

.admin-workspace-role[b-aux3d9ag7f] {
    padding: 0.15rem 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}
.admin-workspace-role.is-admin[b-aux3d9ag7f] {
    border-color: rgba(240, 180, 0, 0.4);
    color: var(--sh-gold, #f0b400);
}

.admin-workspace-collapse[b-aux3d9ag7f] {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: rgba(255, 255, 255, 0.58);
    background: transparent;
    border: 0;
    border-radius: 6px;
}
.admin-workspace-collapse:hover[b-aux3d9ag7f],
.admin-workspace-collapse:focus-visible[b-aux3d9ag7f] { color: var(--sh-white); background: rgba(255, 255, 255, 0.06); }

.admin-workspace-nav[b-aux3d9ag7f] { display: grid; gap: 0.2rem; }
.admin-workspace-link[b-aux3d9ag7f] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 38px;
    padding: 0.55rem 0.65rem;
    color: rgba(255, 255, 255, 0.64);
    border-radius: 7px;
    font-size: 0.86rem;
    font-weight: 650;
    text-decoration: none;
}
.admin-workspace--collapsed .admin-workspace-link[b-aux3d9ag7f] { justify-content: center; padding-inline: 0; }
.admin-workspace-link:hover[b-aux3d9ag7f],
.admin-workspace-link:focus-visible[b-aux3d9ag7f] { color: var(--sh-white); background: rgba(255, 255, 255, 0.055); }
.admin-workspace-link.active[b-aux3d9ag7f] { color: var(--sh-white); background: rgba(255, 255, 255, 0.075); }
.admin-workspace-link.active i[b-aux3d9ag7f] { color: var(--sh-gold, #f0b400); }
.admin-workspace-link i[b-aux3d9ag7f] { color: rgba(240, 180, 0, 0.75); }
.admin-workspace-link.active i[b-aux3d9ag7f] { color: var(--sh-gold, #f0b400); }
.admin-workspace-link span[b-aux3d9ag7f] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-workspace-badge[b-aux3d9ag7f] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #ff4747;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    flex-shrink: 0;
    margin-left: auto;
}

.admin-workspace-content[b-aux3d9ag7f] { min-width: 0; width: 100%; padding: 0.9rem 1.25rem 4rem; }

/* La barre qui ouvre le tiroir, sur écran étroit seulement : même bouton que /app
   (.sh-workspace-menu, app.css), même place, au-dessus de l'en-tête de page. */
.admin-workspace-bar[b-aux3d9ag7f] { display: none; }

@media (prefers-reduced-motion: reduce) {
    .admin-workspace[b-aux3d9ag7f] { transition: none; }
}

/* Sous 900 px, la colonne devient le tiroir commun (.sh-workspace-drawer, app.css) — même
   comportement que les espaces de /app, voir RoleWorkspaceShell.razor.css pour le détail de ce
   choix. */
@media (max-width: 900px) {
    .admin-workspace[b-aux3d9ag7f],
    .admin-workspace--collapsed[b-aux3d9ag7f] { display: block; }

    .admin-workspace-header[b-aux3d9ag7f] { display: none; }

    .admin-workspace-link[b-aux3d9ag7f] { min-height: 44px; }

    .admin-workspace-bar[b-aux3d9ag7f] {
        display: flex;
        align-items: flex-start;
        margin-bottom: 0.6rem;
    }

    .admin-workspace-content[b-aux3d9ag7f] { padding: 0.8rem 0.85rem 3rem; }
}

/* ------------------------------------------------------------------ surfaces des écrans */

/* Recherche et filtres, au-dessus d'une liste. */
[b-aux3d9ag7f] .adm-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

[b-aux3d9ag7f] .adm-toolbar--inset {
    margin: 0;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

[b-aux3d9ag7f] .adm-search {
    position: relative;
    flex: 1 1 18rem;
    min-width: 0;
}

[b-aux3d9ag7f] .adm-search i {
    position: absolute;
    top: 50%;
    left: 0.8rem;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.4);
}

[b-aux3d9ag7f] .adm-search input {
    width: 100%;
    padding: 0.6rem 0.8rem 0.6rem 2.2rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
    font-size: 0.9rem;
}

[b-aux3d9ag7f] .adm-search input:focus {
    outline: none;
    border-color: rgba(240, 180, 0, 0.5);
}

[b-aux3d9ag7f] .adm-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

[b-aux3d9ag7f] .adm-chip {
    padding: 0.35rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.7);
    background: transparent;
    font-size: 0.78rem;
    font-weight: 700;
}

[b-aux3d9ag7f] .adm-chip.is-on {
    border-color: rgba(240, 180, 0, 0.5);
    color: var(--sh-gold, #f0b400);
    background: rgba(240, 180, 0, 0.08);
}

/* Une liste de fiches (ItemCard) : l'espacement entre elles, rien de plus — la fiche elle-même
   porte sa propre surface. */
[b-aux3d9ag7f] .admin-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

[b-aux3d9ag7f] .adm-muted {
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.78rem;
}

/* Un identifiant Stripe se lit caractère par caractère : chasse fixe, coupé plutôt que débordant. */
[b-aux3d9ag7f] .adm-mono {
    overflow: hidden;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.74rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Faits d'une fiche, intitulé à gauche et valeur à droite. */
[b-aux3d9ag7f] .adm-facts {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
    gap: 0.45rem 1.25rem;
    margin: 0;
    font-size: 0.86rem;
}

[b-aux3d9ag7f] .adm-facts dt {
    color: rgba(255, 255, 255, 0.48);
    font-weight: 600;
}

[b-aux3d9ag7f] .adm-facts dd {
    margin: 0;
    color: #fff;
    overflow-wrap: anywhere;
}

[b-aux3d9ag7f] .adm-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

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

[b-aux3d9ag7f] .adm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Le motif d'une décision, dans la boîte de confirmation. */
[b-aux3d9ag7f] .adm-reason {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.9rem;
}

[b-aux3d9ag7f] .adm-reason label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.78rem;
    font-weight: 700;
}

[b-aux3d9ag7f] .adm-reason textarea,
[b-aux3d9ag7f] .adm-reason input {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    color: #fff;
    background: rgba(0, 0, 0, 0.35);
    font-size: 0.88rem;
    resize: vertical;
}

[b-aux3d9ag7f] .adm-reason small {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.72rem;
}

[b-aux3d9ag7f] .adm-error {
    margin: 0.5rem 0 0;
    color: #ff8b8b;
    font-size: 0.8rem;
}

/* Une ligne de journal : l'icône du geste, ce qui s'est passé, qui et quand. */
[b-aux3d9ag7f] .adm-journal {
    display: flex;
    flex-direction: column;
}

[b-aux3d9ag7f] .adm-journal__item {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: start;
    padding: 0.75rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.85rem;
}

[b-aux3d9ag7f] .adm-journal__item:first-child {
    border-top: 0;
}

[b-aux3d9ag7f] .adm-journal__icon {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
}

[b-aux3d9ag7f] .adm-journal__icon.tone-danger { color: #ff8b8b; }
[b-aux3d9ag7f] .adm-journal__icon.tone-success { color: var(--sh-green, #4ade80); }
[b-aux3d9ag7f] .adm-journal__icon.tone-info { color: var(--sh-blue, #4dabf7); }

[b-aux3d9ag7f] .adm-journal__when {
    text-align: right;
    white-space: nowrap;
}

[b-aux3d9ag7f] .adm-journal__what strong {
    color: #fff;
}

[b-aux3d9ag7f] .adm-journal__reason {
    display: block;
    margin-top: 0.2rem;
    color: rgba(255, 255, 255, 0.62);
    font-style: italic;
}

[b-aux3d9ag7f] .adm-quote {
    margin: 0.35rem 0 0;
    padding-left: 0.7rem;
    border-left: 2px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.78);
    white-space: pre-line;
}

[b-aux3d9ag7f] .adm-stars {
    margin-right: 0.35rem;
    color: var(--sh-gold, #f0b400);
    letter-spacing: 0.05em;
}

[b-aux3d9ag7f] .adm-link {
    color: var(--sh-gold, #f0b400);
    font-weight: 700;
    text-decoration: none;
}

[b-aux3d9ag7f] .adm-link:hover {
    text-decoration: underline;
}
/* /Components/AlertPrompt.razor.rz.scp.css */
/* La bande qui propose les alertes, en tête de l'application.

   Elle passe avant le contenu sans le recouvrir : une couche flottante se ferait balayer d'un
   revers de pouce, et l'information avec elle. */
.alert-prompt[b-i5g7spr12c] {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    margin: 0 0 1rem 0;
    padding: 0.85rem 1rem;
    background: linear-gradient(135deg, rgba(240, 180, 0, 0.14) 0%, rgba(240, 180, 0, 0.05) 100%);
    border: 1px solid rgba(240, 180, 0, 0.3);
    border-radius: 12px;
}

.alert-prompt > i[b-i5g7spr12c] {
    color: var(--sh-gold);
    font-size: 1.15rem;
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.alert-prompt-texte[b-i5g7spr12c] { flex: 1; min-width: 0; }

.alert-prompt-texte strong[b-i5g7spr12c] {
    display: block;
    color: var(--sh-gold);
    font-size: 0.88rem;
    margin-bottom: 3px;
}

.alert-prompt-texte p[b-i5g7spr12c] {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
    line-height: 1.5;
}

/* Le geste à faire, détaché de ce qui le motive : on doit pouvoir le suivre sans relire. */
.alert-prompt-geste[b-i5g7spr12c] {
    margin-top: 0.5rem !important;
    padding: 0.45rem 0.6rem;
    background: rgba(0, 0, 0, 0.25);
    border-left: 2px solid var(--sh-gold);
    border-radius: 0 6px 6px 0;
    color: rgba(255, 255, 255, 0.85) !important;
}

.alert-prompt-gestes[b-i5g7spr12c] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.alert-prompt-oui[b-i5g7spr12c] {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 9px;
    background: var(--sh-gold);
    color: #111;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.alert-prompt-oui:hover[b-i5g7spr12c] { background: #ffc61a; }

/* Écarter reste possible sans être mis en avant : c'est une proposition, pas une demande. */
.alert-prompt-non[b-i5g7spr12c] {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

.alert-prompt-non:hover[b-i5g7spr12c] {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

/* Sur téléphone, les boutons passent sous le texte : côte à côte, il ne restait ni assez de
   largeur pour lire la raison, ni assez pour viser le bouton. */
@media (max-width: 640px) {
    .alert-prompt[b-i5g7spr12c] {
        flex-wrap: wrap;
        padding: 0.75rem 0.85rem;
    }

    .alert-prompt-gestes[b-i5g7spr12c] {
        width: 100%;
        justify-content: flex-end;
        margin-top: 0.5rem;
    }

    .alert-prompt-oui[b-i5g7spr12c] { flex: 1; }
}
/* /Components/Artist/ArtistPayments.razor.rz.scp.css */
/* Ce qui reste en propre à l'onglet « Mes paiements » : sa largeur dans la coquille.

   Le reste — le rang d'un paiement, ses colonnes, son repli sur téléphone — a disparu avec la
   liste maison qu'il habillait. L'historique passe par ReservationTable, le tableau du gérant et
   de l'onglet « Mes sessions » : les mêmes séances y sont listées de la même façon dans les trois
   écrans, avec la référence, la salle et le reste dû que ce rang-ci ne montrait pas. */

.artist-payments-page--embedded[b-zgv36omyo5] {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0.25rem 0 0;
}

/* Le journal.

   Même dessin que le carnet du studio — mêmes rangs, mêmes pastilles de période, mêmes chiffres
   en tête. Deux points de vue sur le même journal financier méritent la même forme : ce qui
   change d'un côté à l'autre, c'est le sens des sommes, pas la façon de les lire.

   Les classes ne sont pas partagées : elles vivent dans deux feuilles de portée, et un composant
   commun pour deux écrans qui n'ont ni les mêmes colonnes ni les mêmes intitulés coûterait plus
   qu'il ne rendrait. */

.pay-book-periods[b-zgv36omyo5] {
    display: flex;
    gap: 0.25rem;
}

.pay-book-period[b-zgv36omyo5] {
    padding: 0.25rem 0.6rem;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
}

.pay-book-period:hover[b-zgv36omyo5] { color: rgba(255, 255, 255, 0.85); }

.pay-book-period.is-active[b-zgv36omyo5] {
    color: #000;
    background: var(--sh-amber, #f0b429);
    border-color: transparent;
}

.pay-book-totals[b-zgv36omyo5] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
    padding: 0 0 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.pay-book-total[b-zgv36omyo5] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.pay-book-total-value[b-zgv36omyo5] {
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* Ce qui revient à l'artiste est la bonne nouvelle de cet écran : c'est lui qui porte le vert. */
.pay-book-total--in .pay-book-total-value[b-zgv36omyo5] { color: var(--sh-green, #2fbf71); }
.pay-book-total--out .pay-book-total-value[b-zgv36omyo5] { color: rgba(255, 255, 255, 0.75); }

.pay-book-total-label[b-zgv36omyo5] {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.pay-book-month[b-zgv36omyo5] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.9rem 0 0.35rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.pay-book-month-sum[b-zgv36omyo5] {
    color: rgba(255, 255, 255, 0.6);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

.pay-book-row[b-zgv36omyo5] {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.55rem 0.4rem;
    color: inherit;
    text-align: left;
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
}

.pay-book-row:hover[b-zgv36omyo5] { background: rgba(255, 255, 255, 0.03); }

.pay-book-day[b-zgv36omyo5] {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.pay-book-what[b-zgv36omyo5] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.pay-book-label[b-zgv36omyo5] {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.82rem;
    font-weight: 650;
}

.pay-book-label--in[b-zgv36omyo5] { color: var(--sh-green, #2fbf71); }
.pay-book-label--out[b-zgv36omyo5] { color: rgba(255, 255, 255, 0.85); }

/* La séance à laquelle la ligne se rattache : utile pour la retrouver, jamais pour la lire. */
.pay-book-who[b-zgv36omyo5] {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.74rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pay-book-amount[b-zgv36omyo5] {
    font-size: 0.88rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pay-book-amount.is-in[b-zgv36omyo5] { color: var(--sh-green, #2fbf71); }
.pay-book-amount.is-out[b-zgv36omyo5] { color: rgba(255, 255, 255, 0.6); }

@media (max-width: 575.98px) {
    .pay-book-row[b-zgv36omyo5] {
        grid-template-columns: 2.6rem minmax(0, 1fr) auto;
        gap: 0.5rem;
    }

    .pay-book-totals[b-zgv36omyo5] { gap: 1rem; }
}
/* /Components/Artist/BalancePaymentPanel.razor.rz.scp.css */
/* Le règlement du solde, dans le panneau de détail d'une séance. */

.bpp[b-g8q3cdd500] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.75rem;
}

/* Le formulaire Stripe est monté ici. Fond clair et rayon adoucis : les champs Stripe portent
   leur propre thème, un fond trop sombre les laisserait flotter sans cadre. */
.bpp-card[b-g8q3cdd500] {
    padding: 0.9rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--sh-radius-aero-sm);
}

.bpp-error[b-g8q3cdd500] {
    margin: 0;
    color: #ff8b8b;
    font-size: 0.8rem;
    font-weight: 600;
}

.bpp-done[b-g8q3cdd500] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    color: #67cf91;
    font-size: 0.85rem;
    font-weight: 700;
}
/* /Components/Booking/BookingGrid.razor.rz.scp.css */
/* La grille de réservation, partagée par le calendrier public et par celui du studio.

   Elle vivait dans la page publique, en style en ligne. Le studio avait la sienne, dessinée
   autrement : le gérant et l'artiste regardaient les mêmes créneaux sur deux calendriers qui ne
   se ressemblaient pas, et le gérant ne pouvait pas se fier à ce qu'il voyait pour savoir ce que
   l'artiste voyait. Une seule grille, deux usages : réserver, ou bloquer. */

.horizontal-calendar-wrapper[b-znbfckky33] {
    /* Largeur de la colonne d'étiquettes, partagée par l'angle de la frise et par chaque rang :
       les deux doivent commencer à la même abscisse, sinon l'axe des heures ment d'un cran. */
    --grid-label-w: 76px;

    /* Hauteur d'un rang. Une seule valeur pour le rang, son étiquette, ses cases et le voile de
       sélection : elle était recopiée quatre fois, et le mode dense n'en changeait qu'une — le
       voile de sélection gardait ses 44 px dans un rang qui en mesurait 74. */
    --grid-row-h: 50px;

    /* Nombre d'heures affichées, posé par le composant. Les traits verticaux sont tracés à partir
       de cette valeur plutôt que par les bordures des cases : voir .slots-row::after. */
    --grid-hours: 24;

    --grid-line: rgba(255,255,255,0.10);

    background: rgba(255,255,255,0.02);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;
    margin-bottom: 1rem;
    user-select: none; /* Prevent text selection for smoother swipe */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Time Header

   La frise vit désormais *dans* le conteneur qui défile, collée en haut. Elle était posée au-dessus,
   dans une boîte à elle : dès que la pile de jours dépassait sa hauteur maximale, la barre de
   défilement verticale rétrécissait la grille d'une quinzaine de pixels — et pas la frise. L'axe
   annonçait donc une abscisse que les cases n'avaient plus, et le décalage grandissait vers la
   droite jusqu'à valoir la moitié d'une heure. Même boîte, même largeur, plus rien à accorder. */
.time-header[b-znbfckky33] {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    background: #0a0a0a;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.time-header-corner[b-znbfckky33] {
    width: var(--grid-label-w);
    flex-shrink: 0;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.4);
    border-right: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.4);
    font-size: 1rem;
}

.time-header-scroll[b-znbfckky33] {
    flex: 1;
    overflow: hidden;
}

.time-header-inner[b-znbfckky33] {
    position: relative;
    display: flex;
    width: 100%;
    height: 40px;
}

/* Les traits de l'axe, tracés d'un seul geste sur toute la largeur — voir .slots-row::after. La
   frise et les rangs mesurent la même largeur et se partagent le même nombre d'heures : leurs
   traits tombent donc au même pixel, par construction. */
.time-header-inner[b-znbfckky33]::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        to right,
        rgba(255,255,255,0.15) 0 1px,
        transparent 1px calc(100% / var(--grid-hours)));
}

/* Les heures se partagent la largeur, à parts égales, exactement comme les cases en dessous.
   Elles mesuraient 50 px en dur : l'axe débordait donc du cadre, et rien ne le faisait défiler
   avec la grille — il annonçait 00 h là où la grille montrait 14 h. */
.time-label[b-znbfckky33] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 0.7rem;
    color: rgba(255,255,255,0.5);
    font-weight: 500;
    overflow: visible; /* Pour permettre le débordement de l'heure */
}

.time-label span[b-znbfckky33] {
    position: absolute;
    left: 0;
    transform: translateX(-50%); /* Centre le texte sur le trait de gauche */
    background: #0a0a0a; /* Même fond que le calendrier pour masquer le trait sous le texte */
    padding: 0 4px;
    /* Au-dessus du calque des traits, qu'il masque là où il s'écrit. */
    z-index: 1;
}

.time-label.now[b-znbfckky33] {
    color: #dc3545;
    font-weight: 700;
    background: rgba(220, 53, 69, 0.1);
}

/* Days Grid Container

   Plus de défilement horizontal : la grille tient dans sa largeur, quelle qu'elle soit. C'est ce
   défilement qui rendait le calendrier inutilisable sous une certaine résolution — on partait à
   droite chercher l'après-midi, et l'axe des heures restait au matin. */
.days-grid-container[b-znbfckky33] {
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 60vh;
    position: relative;
}

.days-grid-inner[b-znbfckky33] {
    position: relative;
    width: 100%;
}

/* Day Row

   Hauteur fixe, jamais « au moins » : un rang qui s'étire d'un pixel parce que son étiquette
   déborde décale tous les suivants, et la grille cesse d'être une grille. */
.day-row[b-znbfckky33] {
    display: flex;
    /* Le trait de séparation est une ombre, pas une bordure : une bordure mange un pixel de
       hauteur, que le dernier rang — qui n'en portait pas — ne perdait pas. Tous les rangs
       mesurent maintenant exactement la même chose. */
    box-shadow: inset 0 -1px 0 rgba(255,255,255,0.06);
    height: var(--grid-row-h);
    flex: 0 0 auto;
    /* La frise est collée en haut du même conteneur : un rang amené à l'écran doit s'arrêter
       sous elle, pas dessous. */
    scroll-margin-top: 41px;
}

.day-row:last-child[b-znbfckky33] {
    box-shadow: none;
}

.day-label[b-znbfckky33] {
    width: var(--grid-label-w);
    flex-shrink: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0 0.35rem;
    background: rgba(0,0,0,0.3);
    border-right: 1px solid rgba(255,255,255,0.08);
    gap: 2px;
    z-index: 5;
}

.day-label.today[b-znbfckky33] {
    background: rgba(220, 53, 69, 0.15);
}

/* En peinture, l'étiquette prend la journée entière. Elle devient un bouton, et doit se voir
   comme tel — sans quoi personne ne songerait à cliquer un intitulé de ligne. */
.day-label--paint[b-znbfckky33] {
    border-top: 0;
    border-bottom: 0;
    border-left: 0;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.day-label--paint:hover[b-znbfckky33],
.day-label--paint:focus-visible[b-znbfckky33] { background: rgba(79, 209, 232, 0.14); }

/* Journée entière déclarée : l'étiquette porte la couleur de ses cases, et le clic l'efface. */
.day-label--paint.is-full[b-znbfckky33] {
    color: var(--sh-aqua);
    background: rgba(79, 209, 232, 0.18);
}

.day-label--paint.is-full:hover[b-znbfckky33] { background: rgba(79, 209, 232, 0.26); }

/* Le nom d'une ligne : « LUN », ou celui d'une salle.

   Il se coupait à la première ligne : « Studio A » devenait « STUDI… », et la vue par salle ne
   disait plus quelle salle. Il tient sur deux lignes — la colonne ne peut pas s'élargir sans
   décaler l'axe des heures, qui part de la même abscisse sur toutes les lignes. */
.day-label .day-name[b-znbfckky33] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-width: 100%;
    /* Le rang est blockifié par le conteneur flex qui le porte : le clamp fonctionne quand même
       sur les navigateurs qui l'implémentent hors de -webkit-box, mais pas sur les autres. La
       hauteur borne le résultat dans tous les cas — deux lignes, jamais trois, sinon le rang
       s'étire et la grille se désaligne. */
    max-height: 2.3em;
    overflow: hidden;
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    line-height: 1.15;
    overflow-wrap: anywhere;
    text-align: center;
    text-transform: uppercase;
}

.day-label.today .day-name[b-znbfckky33] {
    color: #dc3545;
}

.day-label .day-number[b-znbfckky33] {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}

.day-label.today .day-number[b-znbfckky33] {
    color: #dc3545;
}

/* Slots Row */
.slots-row[b-znbfckky33] {
    position: relative;
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    height: 100%;

    /* Le glissement horizontal appartient à la grille, le défilement vertical reste au
       navigateur. Sans cette ligne, poser le doigt et le déplacer faisait défiler la page : le
       geste de sélection n'atteignait jamais la grille, et la session restait d'une heure. */
    touch-action: pan-y;
}

/* Les traits verticaux de la grille, tracés en une fois par-dessus les cases.

   Chaque case portait sa propre bordure droite. Une case libre en avait une, une case réservée en
   avait quatre — le voisinage de deux réservations doublait donc l'épaisseur du trait, et la
   frontière entre une heure libre et une séance bloquée l'épaississait de moitié : c'est là que la
   grille se décalait, exactement sur les « sessions hors StudioHub ». S'y ajoutait l'arrondi
   subpixel des vingt-quatre cases élastiques, qui rendait un trait sur deux flou.

   Un dégradé répété ne dépend d'aucune case : il divise la largeur mesurée par le nombre d'heures,
   et pose un trait d'un pixel à chaque frontière, toujours au même endroit quel que soit l'état des
   créneaux. Il passe au-dessus des aplats pour rester visible sur une séance réservée. */
.slots-row[b-znbfckky33]::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        to right,
        var(--grid-line) 0 1px,
        transparent 1px calc(100% / var(--grid-hours)));
}

/* Slot Cell — une heure prend sa part de la largeur, jamais 50 px en dur.

   Aucune bordure ici, ni sur aucun de ses états : c'est le calque de traits qui dessine la grille,
   et une bordure d'état la déformerait. Les états ne changent que la couleur. */
.slot-cell[b-znbfckky33] {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    font-size: 0.9rem;
}

/* Une heure peinte, en mode peinture : l'aqua de ce qui est actif, comme partout ailleurs. Elle
   ne se confond avec aucun des six états d'un créneau — ceux-là disent ce qu'une heure vaut à la
   réservation, celle-ci dit qu'on l'a choisie. */
.slot-cell.is-painted[b-znbfckky33] {
    background: var(--sh-aqua);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

@media (hover: hover) {
    .slot-cell.is-painted:hover[b-znbfckky33] { background: #7ee0f2; }
}

/* Sur téléphone, une heure vaut une quinzaine de pixels : le signe et les icônes descendent avec
   elle plutôt que de déborder sur les cases voisines. La case reste tapable — c'est la ligne
   entière qui reçoit le geste de glissement, pas la seule case. */
@media (max-width: 640px) {
    /* Assez large pour « Studio A » sur deux lignes, assez étroit pour laisser vingt-quatre
       heures respirer : à 68 px, une heure vaut encore une douzaine de pixels. */
    .horizontal-calendar-wrapper[b-znbfckky33] { --grid-label-w: 68px; }

    /* C'est ici, et seulement ici, que l'axe s'éclaircit : une heure vaut douze pixels, deux
       nombres voisins se chevaucheraient. Les traits de séparation restent sur chaque heure —
       on ne perd que le nombre, jamais le repère. Au-delà de cette largeur, les vingt-quatre
       nombres sont écrits. */
    .axis-dense .time-label:nth-child(even) span[b-znbfckky33] { display: none; }

    .axis-packed .time-label:not(:nth-child(3n + 1)) span[b-znbfckky33] { display: none; }
    .slot-cell[b-znbfckky33] { font-size: 0.72rem; }
    .slot-cell .plus[b-znbfckky33] { font-size: 0.9rem; }
}

/* ── Des heures à taille fixe, et la journée qui défile ───────────────────────────────────────

   Vingt-quatre heures partagées entre 325 px donnaient des colonnes de treize pixels : des
   traits, pas des cases. Rien ne s'y visait au doigt, et l'appui atterrissait une heure à côté.

   Ces traits viennent du partage à parts égales, qui tient lui-même à ce que la journée entière
   doive rentrer dans l'écran. Elle n'a pas à y rentrer. Une heure vaut ici la largeur et la
   hauteur que l'appelant lui donne, et la journée se parcourt, du pouce ou de la souris.

   Ces règles vivaient sous « max-width: 768px » : la grille décidait donc elle-même, à partir de
   la largeur de l'écran, quand des heures méritaient une taille fixe. C'était vrai du calendrier
   public, où l'étroitesse est le seul motif — et faux des disponibilités de l'ingénieur, où
   l'heure est ce qu'on vient viser, à n'importe quelle largeur : peindre 8 h–12 h dans des
   colonnes de quarante pixels demande une main sûre, sur un écran de bureau comme ailleurs.

   La question « ces heures doivent-elles avoir une taille fixe ? » appartient donc à l'appelant,
   qui la pose par « HourScroll ». Le calendrier public la pose sur sa propre mesure d'étroitesse
   — la même que celle-ci, au pixel près (StudioBookingCalendar, « _isMobile ») — et rien n'y
   change pour les deux autres écrans qui partagent ce composant : ni l'onglet du studio ni celui
   de l'ingénieur ne passent jamais HourScroll, leur rendu reste donc identique à toute largeur.

   Quarante pixels sur quarante-six, contre les 56 × 56 carrés d'un essai antérieur : la maquette
   validée par le studio demande ces deux mesures précises, pas un carré. La bordure franche de la
   carte et de ses arêtes internes cède aussi la place au relief que .daw-pad / .daw-transport
   emploient déjà (daw.css) — une arête claire en creux, jamais un trait plein. */
.horizontal-calendar-wrapper.hour-scroll[b-znbfckky33] {
    --grid-row-h: 46px;
    --grid-cell-w: 40px;

    border: 0;
    box-shadow: var(--sh-glass-specular), inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}

.hour-scroll .time-header[b-znbfckky33] {
    border-bottom: 0;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.hour-scroll .time-header-corner[b-znbfckky33],
.hour-scroll .day-label[b-znbfckky33] {
    border-right: 0;
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.45), inset 1px 0 0 rgba(255, 255, 255, 0.05);
}

/* Aucun libellé dans la case : l'état ne se lit plus qu'à la teinte de fond (déjà posée par
   .slot-cell.reserved / .past / .closed / .too-soon / .blocked / .selected), la légende sous la
   grille servant de clé — c'est elle qui nomme chaque couleur, pas l'icône qu'on retire ici. Le
   voile de sélection (.selection-content, sur plusieurs cases) n'est pas concerné : il ne répète
   aucun des six états, il annonce la durée choisie. */
.hour-scroll .slot-cell i[b-znbfckky33],
.hour-scroll .slot-cell .plus[b-znbfckky33],
.hour-scroll .slot-cell .dash[b-znbfckky33] {
    display: none;
}

/* Le marqueur « maintenant » devient une arête claire posée dans sa case, pas une ligne rouge
   surmontée d'une étiquette flottante : la case qui porte l'heure courante se suffit, l'étiquette
   n'ajoutait qu'un second indicateur du même instant. */
.hour-scroll .now-marker[b-znbfckky33] {
    top: 3px;
    bottom: 3px;
    width: 2px;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 1px 0 0 rgba(0, 0, 0, 0.4);
}

.hour-scroll .now-marker[b-znbfckky33]::before,
.hour-scroll .now-marker-label[b-znbfckky33] {
    display: none;
}

.hour-scroll .days-grid-container[b-znbfckky33] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* La barre horizontale mangerait un rang sur deux à ce format ; le geste se voit à ce
       qu'il déplace. */
    scrollbar-width: none;
}

.hour-scroll .days-grid-container[b-znbfckky33]::-webkit-scrollbar { display: none; }

/* Tout ce qui se mesurait en « 100 % » se mesure maintenant en heures : c'est le contenu qui
   donne sa largeur au conteneur, et non l'inverse. Les traits verticaux, eux, ne changent
   pas de règle — « 100 % / heures » vaut toujours une case, quelle que soit sa largeur. */
.hour-scroll .days-grid-inner[b-znbfckky33] { width: max-content; min-width: 100%; }
.hour-scroll .day-row[b-znbfckky33] { width: max-content; }
.hour-scroll .time-header[b-znbfckky33] { width: max-content; min-width: 100%; }
.hour-scroll .time-header-scroll[b-znbfckky33] { overflow: visible; }

.hour-scroll .time-header-inner[b-znbfckky33],
.hour-scroll .slots-row[b-znbfckky33] {
    width: calc(var(--grid-hours) * var(--grid-cell-w));
    flex: 0 0 auto;
}

.hour-scroll .time-label[b-znbfckky33],
.hour-scroll .slot-cell[b-znbfckky33] { flex: 0 0 var(--grid-cell-w); }

/* Le glissement horizontal redevient celui du pouce sur la journée : la grille rend la main
   au navigateur. Les deux gestes sont le même, il faut bien que l'un des deux le reçoive. */
.hour-scroll .slots-row[b-znbfckky33] { touch-action: auto; }

/* L'axe s'écrit en entier : c'est l'étroitesse qui l'effaçait, et elle n'existe plus ici. */
.hour-scroll.axis-dense .time-label span[b-znbfckky33],
.hour-scroll.axis-packed .time-label span[b-znbfckky33] { display: inline; }

/* Le nombre reste posé sur le trait, comme partout ailleurs : c'est le trait qui marque
   l'heure, et un nombre centré dans sa case désignerait l'heure écoulée entre deux traits,
   pas l'instant où elle commence. Il est seulement plus gros, la place ne manque plus. */
.hour-scroll .time-label span[b-znbfckky33] { font-size: 0.78rem; }

/* Sauf le premier : centré sur le trait de départ, sa moitié gauche passe sous la colonne
   des jours, qui reste collée là pendant qu'on parcourt les heures. Il se range du côté où
   il y a la place — même règle que l'étiquette de l'heure courante aux deux bords. */
.hour-scroll .time-label:first-child span[b-znbfckky33] {
    left: 0;
    transform: none;
    padding-left: 2px;
}

.hour-scroll .slot-cell[b-znbfckky33] { font-size: 1rem; }
.hour-scroll .slot-cell .plus[b-znbfckky33] { font-size: 1.4rem; }

/* La colonne des jours et l'angle de la frise restent à gauche pendant qu'on parcourt les
   heures : sans eux, on ne sait plus quel jour on regarde. Fond opaque — celui d'origine est
   translucide, et la journée défilerait au travers. */
.hour-scroll .day-label[b-znbfckky33],
.hour-scroll .time-header-corner[b-znbfckky33] {
    position: sticky;
    left: 0;
    z-index: 9;
    background: #0d0d0d;
}

.hour-scroll .day-label.today[b-znbfckky33] { background: #241318; }

/* Le survol ne recouvre pas une case peinte, et n'existe que là où un pointeur survole.

   Deux défauts d'une même règle. Sa teinte dorée l'emportait sur le bleu d'une disponibilité
   déclarée — elle est plus spécifique — et sur un écran tactile le survol reste collé après la
   touche : la case qu'on venait de déclarer disponible gardait la couleur du survol au lieu de la
   sienne. On touchait une heure, elle s'enregistrait bien, et elle restait jaune.

   « hover: hover » écarte les écrans qui n'ont pas de pointeur : là, il n'y a rien à survoler, et
   ce qui reste après le doigt n'est pas un survol mais une trace. */
@media (hover: hover) {
    .slot-cell:hover:not(.reserved):not(.past):not(.closed):not(.is-painted)[b-znbfckky33] {
        background: rgba(217, 166, 83, 0.25);
    }
}

.slot-cell.selected[b-znbfckky33] {
    background: rgba(217, 166, 83, 0.4);
    box-shadow: inset 0 0 0 2px var(--sh-gold);
}

.slot-cell.slot-ghost[b-znbfckky33] {
    background: transparent;
    box-shadow: none;
    pointer-events: auto;
}

/* Merged selection overlay */
.selection-overlay[b-znbfckky33] {
    position: absolute;
    top: 3px;
    /* Trois pixels de marge en haut comme en bas, quelle que soit la hauteur du rang : le voile
       gardait 44 px dans un rang dense de 74, et flottait en haut de la séance qu'il désignait. */
    height: calc(var(--grid-row-h) - 6px);
    background: linear-gradient(135deg, rgba(217, 166, 83, 0.5) 0%, rgba(217, 166, 83, 0.3) 100%);
    border: 2px solid var(--sh-gold);
    border-radius: 8px;
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    backdrop-filter: blur(8px) saturate(180%);
    box-shadow: 0 4px 15px rgba(217, 166, 83, 0.3), inset 0 0 20px rgba(255,255,255,0.1);
}

.selection-overlay:hover[b-znbfckky33] {
    background: linear-gradient(135deg, rgba(217, 166, 83, 0.6) 0%, rgba(217, 166, 83, 0.4) 100%);
}

/* Pendant un tracé ou un étirement, le voile laisse passer le pointeur : c'est la case survolée
   qui dit jusqu'où va la plage, et le voile par-dessus l'aurait cachée à la souris. Il ne suit
   plus le doigt en animant sa largeur — une plage qui arrive en retard sur le doigt se lit comme
   un geste qui n'a pas pris. */
.selection-overlay.is-dragging[b-znbfckky33] {
    pointer-events: none;
    transition: none;
}

/* ── Les poignées ─────────────────────────────────────────────────────────────────────────────

   Un bord qu'on tire doit se voir comme tel : un trait vertical, au milieu du bord, sur le modèle
   des agendas de téléphone. La zone qui reçoit le doigt est bien plus large que le trait —
   vingt-huit pixels à cheval sur le bord — parce qu'un pouce ne vise pas un trait de quatre. */
.selection-handle[b-znbfckky33] {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 28px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: ew-resize;
    touch-action: pan-x pan-y;
    -webkit-touch-callout: none;
}

.selection-handle--start[b-znbfckky33] { left: -15px; }
.selection-handle--end[b-znbfckky33] { right: -15px; }

.selection-handle__grip[b-znbfckky33] {
    width: 6px;
    height: 58%;
    min-height: 18px;
    border-radius: 999px;
    background: var(--sh-gold);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);
    transition: transform 140ms ease, box-shadow 140ms ease;
}

@media (hover: hover) {
    .selection-handle:hover .selection-handle__grip[b-znbfckky33] {
        transform: scaleX(1.35);
    }
}

/* Saisie : la poignée grossit et s'éclaire. Au doigt, c'est le signe que l'appui maintenu a pris
   — le doigt la couvre, elle doit déborder de lui pour se voir. */
.selection-handle.is-active .selection-handle__grip[b-znbfckky33] {
    transform: scale(1.6, 1.15);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.55), 0 0 16px var(--sh-gold);
}

/* La poignée reçoit encore le contact qui l'a saisie : le voile, lui, laisse passer le reste. */
.selection-overlay.is-dragging .selection-handle[b-znbfckky33] { pointer-events: none; }

/* Sur téléphone, les heures sont carrées et le pouce plus large que le curseur : la zone de
   saisie s'élargit avec. */
.hour-scroll .selection-handle[b-znbfckky33] { width: 32px; }
.hour-scroll .selection-handle--start[b-znbfckky33] { left: -17px; }
.hour-scroll .selection-handle--end[b-znbfckky33] { right: -17px; }

.selection-content[b-znbfckky33] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--sh-gold);
    font-weight: 700;
}

.selection-content i[b-znbfckky33] {
    font-size: 1.1rem;
}

.selection-duration[b-znbfckky33] {
    font-size: 0.9rem;
    background: var(--sh-gold);
    color: #000;
    padding: 2px 8px;
    border-radius: 4px;
}

.slot-cell.reserved[b-znbfckky33] {
    background: rgba(220, 53, 69, 0.4);
    cursor: not-allowed;
    color: rgba(220, 53, 69, 0.8);
}

.slot-cell.past[b-znbfckky33] {
    background: rgba(108, 117, 125, 0.1);
    cursor: not-allowed;
    color: rgba(255,255,255,0.2);
}

.slot-cell.closed[b-znbfckky33] {
    background: rgba(0, 0, 0, 0.3);
    cursor: not-allowed;
    color: rgba(255,255,255,0.3);
}

.slot-cell .plus[b-znbfckky33] {
    color: rgba(255,255,255,0.3);
    font-size: 1.2rem;
    font-weight: 300;
}

.slot-cell:hover:not(.reserved):not(.past):not(.closed) .plus[b-znbfckky33] {
    color: var(--sh-gold);
}

.slot-cell .dash[b-znbfckky33] {
    color: rgba(255,255,255,0.15);
}

.slot-cell.selected i[b-znbfckky33] {
    color: var(--sh-gold);
}

/* Now Marker (Red Vertical Line) */
.now-marker[b-znbfckky33] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, #dc3545 0%, rgba(220, 53, 69, 0.3) 100%);
    z-index: 10;
    pointer-events: none;
}

.now-marker[b-znbfckky33]::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -4px;
    width: 10px;
    height: 10px;
    background: #dc3545;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(220, 53, 69, 0.5);
}

/* Aux deux bords, l'étiquette se range du côté où il reste de la place plutôt que de se faire
   couper par le cadre. La grille ne défile plus latéralement : ce qui dépasse est perdu. */
.now-marker--end .now-marker-label[b-znbfckky33] {
    left: auto;
    right: 0;
    transform: none;
}

.now-marker--start .now-marker-label[b-znbfckky33] {
    left: 0;
    right: auto;
    transform: none;
}

.now-marker-label[b-znbfckky33] {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    background: rgba(220, 53, 69, 0.95);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.2);
    line-height: 1;
    white-space: nowrap;
    box-shadow: var(--sh-elev-2-shadow);
}

/* La sentinelle de chargement. Elle attendait au bout d'un défilement horizontal qui n'existe
   plus : elle attend maintenant au bas de la pile de jours, et c'est en descendant qu'on charge
   la suite — le geste que fait déjà le pouce. */
.horizontal-sentinel[b-znbfckky33] {
    width: 100%;
    height: 1px;
    flex-shrink: 0;
}

/* Trop proche : la case existe, elle est simplement hors d'atteinte. Elle ne ressemble donc pas
   à une heure passée — ambre et cadenas plutôt que gris et tiret. */
.slot-cell.too-soon[b-znbfckky33] {
    background: rgba(212, 165, 116, 0.07);
    color: rgba(212, 165, 116, 0.55);
    cursor: not-allowed;
}

/* Indisponible sans être réservé : le studio a retiré ces heures de la vente. Gris plutôt que
   rouge — il n'y a pas de séance derrière, et rien ne dit à l'artiste qu'il y en a une. */
.slot-cell.blocked[b-znbfckky33] {
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.35);
    cursor: not-allowed;
}

/* Calendrier « dense » : uniquement quand l'appelant fournit ReservedContent, donc jamais côté
   calendrier public. Une case un peu plus haute laisse la place à l'artiste, la salle et les
   pastilles sans empiéter sur les cases voisines.

   Elle mesurait 74 px, contre 50 côté artiste : la semaine du studio dépassait son écran et se
   parcourait au défilement, alors que le même planning tenait d'un seul tenant chez l'artiste.
   58 px suffisent au contenu du bloc et rendent au gérant la vue d'ensemble qu'il regarde. */
/* Le mode dense : les rangs portent un bloc de réservation, pas seulement un aplat.

   Cinquante-huit pixels laissaient quarante-quatre pixels utiles, une fois retirés les deux du
   voile de chaque côté et son rembourrage. Le contenu — nom de l'artiste, salle, état — en
   demandait cinquante-sept, et jusqu'à quatre-vingt-six quand les deux pastilles passaient à la
   ligne. La troisième ligne se faisait donc couper en deux sur toute séance d'au moins trois
   heures, c'est-à-dire sur la plupart.

   Le retour à la ligne des pastilles est traité à sa source — elles se réduisent à leur point,
   voir StudioTabCalendar — et il ne reste ici qu'à donner au bloc la hauteur qu'il occupe
   réellement : cinquante-sept, mesurés dans la page. Soixante-quatorze lui en laissent
   cinquante-huit.

   Le rembourrage du voile et les interlignes du bloc se sont resserrés avec, plutôt que de tout
   demander au rang : sept jours sont à l'écran, et chaque pixel de rang y est multiplié par
   sept. */
.horizontal-calendar-wrapper.dense[b-znbfckky33] {
    --grid-row-h: 74px;
}

/* Le bloc respire à l'intérieur, il n'a pas besoin de marges d'aplat. */
.dense .reserved-overlay[b-znbfckky33] { padding: 0.25rem 0.45rem; }

/* Le passé, en sourdine. Une séance révolue reste lisible — c'est ce qui permet au studio de
   relire sa semaine — mais elle ne doit pas attirer l'œil autant que celle de cet après-midi. */
.slot-cell.is-past[b-znbfckky33] { opacity: 0.5; }

.reserved-overlay.is-past[b-znbfckky33] {
    opacity: 0.55;
    filter: saturate(0.7);
}

/* Le bloc d'une réservation : l'aplat rouge existant reste dessiné dessous (une case par heure,
   pour le clic et le survol) ; ce voile porte le contenu que l'appelant lui confie, sur toute la
   largeur mesurée par la réservation plutôt que répété heure par heure. */
.reserved-overlay[b-znbfckky33] {
    position: absolute;
    top: 2px;
    bottom: 2px;
    z-index: 6;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding: 0.3rem 0.45rem;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.55) 0%, rgba(220, 53, 69, 0.35) 100%);
    border: 1px solid rgba(220, 53, 69, 0.5);
    cursor: pointer;
    color: #fff;
    transition: background 140ms ease;
}

.reserved-overlay:hover[b-znbfckky33] {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.68) 0%, rgba(220, 53, 69, 0.45) 100%);
}
/* /Components/Booking/CalendarPeriodBar.razor.rz.scp.css */
/* La barre d'un calendrier : la portée à gauche, la période à droite.

   Ces règles vivaient dans le planning du studio. Elles sont ici parce que le balisage y est :
   l'isolation CSS de Blazor attache une règle au fichier qui écrit l'élément, et les laisser
   derrière aurait rendu la barre nue partout ailleurs. */

.cal-bar[b-blaczr6oy2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.7rem;
}

/* Les portées : un basculeur plein, pas des liens — on change de lunette, on ne navigue pas
   ailleurs. Les boutons eux-mêmes sont écrits par l'appelant : leur style vit chez lui. */
.cal-scales[b-blaczr6oy2] {
    display: inline-flex;
    padding: 3px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
}

/* La période, et de quoi en changer. Le calendrier montrait sept jours à partir d'aujourd'hui,
   sans aucun moyen d'aller voir la semaine suivante — un planning qu'on ne peut pas parcourir ne
   sert qu'à constater le présent. */
.cal-period[b-blaczr6oy2] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
}

.cal-step[b-blaczr6oy2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
}

.cal-step:hover[b-blaczr6oy2] { color: #fff; background: rgba(255, 255, 255, 0.1); }

.cal-period-label[b-blaczr6oy2] {
    min-width: 9rem;
    color: #fff;
    font-size: 0.86rem;
    font-weight: 750;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.cal-today[b-blaczr6oy2] {
    padding: 0.32rem 0.7rem;
    color: var(--sh-gold);
    background: rgba(240, 180, 0, 0.1);
    border: 1px solid rgba(240, 180, 0, 0.28);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Sur 390 px, les portées et la période côte à côte réduisaient « Semaine » à trois lettres et
   le libellé de période à un tronçon. Deux rangs : les portées d'abord, la période dessous. */
@media (max-width: 640px) {
    .cal-bar[b-blaczr6oy2] { gap: 0.5rem; }

    .cal-scales[b-blaczr6oy2] { width: 100%; }

    .cal-period[b-blaczr6oy2] { width: 100%; margin-left: 0; }

    /* Le libellé prend ce qui reste entre les deux flèches plutôt que de leur voler leur place. */
    .cal-period-label[b-blaczr6oy2] { flex: 1 1 auto; min-width: 0; }
}
/* /Components/Booking/MonthGrid.razor.rz.scp.css */
/* La trame d'un mois : sept colonnes de journées.

   Ces règles vivaient dans le planning du studio. Elles suivent le balisage : l'isolation CSS de
   Blazor attache une règle au fichier qui écrit l'élément, et les laisser derrière aurait rendu
   la trame nue partout ailleurs.

   Ce que l'appelant écrit *dans* une journée garde son style chez lui — la barre de densité du
   studio, l'état d'une exception chez l'ingénieur — et l'atteint en « ::deep ». */

.cal-month[b-6ojd93kweb] {
    padding: 0.6rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
}

.cal-month-head[b-6ojd93kweb],
.cal-month-grid[b-6ojd93kweb] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.cal-month-head[b-6ojd93kweb] {
    margin-bottom: 4px;
}

.cal-month-head span[b-6ojd93kweb] {
    padding: 0.25rem 0;
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
}

.cal-day[b-6ojd93kweb] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.2rem;
    min-height: 3.4rem;
    padding: 0.35rem 0.2rem 0.45rem;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    transition: background 140ms ease, border-color 140ms ease;
}

.cal-day:hover[b-6ojd93kweb] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
}

/* Les journées des mois voisins complètent les semaines entières : présentes pour que la grille
   ne soit pas trouée, en retrait pour qu'on ne les compte pas dans le mois. */
.cal-day.is-outside[b-6ojd93kweb] {
    color: rgba(255, 255, 255, 0.28);
    background: transparent;
    border-color: transparent;
}

.cal-day.is-today[b-6ojd93kweb] {
    border-color: var(--sh-gold);
    color: #fff;
}

.cal-day-number[b-6ojd93kweb] {
    font-size: 0.86rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* Sur un téléphone, six rangs de journées à 3,4 rem dépassent l'écran : elles se resserrent. */
@media (max-width: 640px) {
    .cal-day[b-6ojd93kweb] { min-height: 2.9rem; }
}
/* /Components/Booking/RoomPickerSheet.razor.rz.scp.css */
/* La feuille de choix de salle. Préfixe « rps » : vérifier qu'aucune de ces classes n'existe
   ailleurs (grep "rps__" sur src/StudioHub.Client) avant de considérer la tâche finie. */

.rps[b-sx6timefwf] {
    position: fixed;
    inset: 0;
    z-index: var(--sh-z-modal);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(5, 5, 5, 0.7);
}

.rps__sheet[b-sx6timefwf] {
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    background: var(--sh-gray-900);
    border-top: 1px solid var(--sh-glass-border);
    border-radius: 0.9rem 0.9rem 0 0;
    padding-bottom: env(safe-area-inset-bottom);
}

.rps__head[b-sx6timefwf] {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    background: var(--sh-gray-900);
    border-bottom: 1px solid var(--sh-glass-border);
}

.rps__title[b-sx6timefwf] { margin: 0; font-size: 1.05rem; font-weight: 700; }

.rps__close[b-sx6timefwf] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
}

.rps__list[b-sx6timefwf] { list-style: none; margin: 0; padding: 0.5rem 0; }

/* 64 px : la ligne se vise au doigt, et la vignette y tient sans écraser le texte. */
.rps__room[b-sx6timefwf] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    min-height: 64px;
    padding: 0.5rem 1rem;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    text-align: left;
}

.rps__room.is-current[b-sx6timefwf] { background: rgba(240, 180, 0, 0.1); }

.rps__photo[b-sx6timefwf] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 48px;
    border-radius: 0.4rem;
    background-color: var(--sh-black);
    background-size: cover;
    background-position: center;
    color: rgba(255, 255, 255, 0.3);
}

.rps__meta[b-sx6timefwf] { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.rps__name[b-sx6timefwf] { font-weight: 600; }
.rps__rate[b-sx6timefwf] { color: var(--sh-semantic-gold); font-size: 0.9rem; }
.rps__tick[b-sx6timefwf] { margin-left: auto; color: var(--sh-semantic-gold); }

/* Au-delà du téléphone, une feuille collée au bas d'un écran large est un geste de téléphone
   joué sur un bureau : elle devient une modale centrée. */
@media (min-width: 768px) {
    .rps[b-sx6timefwf] { align-items: center; padding: 2rem; }

    .rps__sheet[b-sx6timefwf] {
        max-width: 520px;
        border-radius: 0.9rem;
        border: 1px solid var(--sh-glass-border);
    }
}
/* /Components/Breadcrumbs.razor.rz.scp.css */
/* Styles du composant. Étaient un <style> en ligne, donc globaux et présents dans le DOM tant que le composant était affiché ; scopés ici, ils ne visent plus que son propre balisage.\n\n   Vérifié avant le déplacement : aucune de ces classes n'est posée ni redéfinie dans un autre fichier, et aucun sélecteur ne vise un élément rendu par un composant enfant — ::deep est donc inutile. */

.breadcrumb-container[b-4in19pk6a3] {
    padding: 10px 0;
}
.breadcrumb-link[b-4in19pk6a3] {
    color: rgba(255, 255, 255, 0.38);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    transition: color 0.2s ease;
}
.breadcrumb-link:hover[b-4in19pk6a3] {
    color: rgba(255, 255, 255, 0.72);
}
.breadcrumb-text[b-4in19pk6a3] {
    color: rgba(255, 255, 255, 0.62);
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
}
.breadcrumb-separator[b-4in19pk6a3] {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.6rem;
}
/* /Components/Common/Pager.razor.rz.scp.css */
/* La pagination d'une liste : même dessin que celle de ReservationTable, pour que tourner une page
   ait la même forme partout. */

.pager[b-zscgfrfern] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 1.25rem;
    padding: 0.9rem 0 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.78rem;
}

.pager-size[b-zscgfrfern] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.pager-select[b-zscgfrfern] {
    padding: 0.25rem 0.5rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
}

.pager-nav[b-zscgfrfern] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.pager-btn[b-zscgfrfern] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
}

.pager-btn:disabled[b-zscgfrfern] {
    color: rgba(255, 255, 255, 0.3);
    cursor: not-allowed;
}

.pager-status[b-zscgfrfern] {
    min-width: 5.5rem;
    text-align: center;
}
/* /Components/Common/PeriodPicker.razor.rz.scp.css */
/* Les pastilles de période : un basculeur de lecture, pas une navigation. */

.periods[b-zt7ejyqtgt] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.period[b-zt7ejyqtgt] {
    padding: 0.25rem 0.6rem;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
}

.period:hover[b-zt7ejyqtgt] { color: rgba(255, 255, 255, 0.85); }

.period.is-active[b-zt7ejyqtgt] {
    color: #000;
    background: var(--sh-amber, #f0b429);
    border-color: transparent;
}
/* /Components/CountryDropdown.razor.rz.scp.css */
.country-dropdown[b-5blnaaolbe] {
    position: relative;
    width: 100%;
    min-width: 0;
    /* Pas « height: 100% » : dans une colonne de grille étirée par sa ligne, le sélecteur
       prenait toute la hauteur de la colonne et poussait dehors le libellé au-dessus et la
       remarque en dessous — le texte du fuseau se superposait au champ « Email ». Un contrôle
       de formulaire se dimensionne par son contenu. */
    min-height: 52px;
}

.country-dropdown__trigger[b-5blnaaolbe] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    /* Même raison que ci-dessus. La hauteur et les retraits sont ceux de « .form-control » :
       ces sélecteurs voisinent avec des champs de texte dans les mêmes lignes de formulaire, et
       dix pixels d'écart entre deux contrôles côte à côte se voient. */
    min-height: 52px;
    padding: 0.8rem 1rem;
    color: var(--sh-white, #fff);
    text-align: left;
    background: var(--sh-gray-950, #101010);
    border: 1px solid var(--sh-gray-800, #343434);
    border-radius: 8px;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.country-dropdown__trigger:hover:not(:disabled)[b-5blnaaolbe] {
    border-color: rgba(255, 255, 255, 0.28);
}

.country-dropdown__trigger:focus-visible[b-5blnaaolbe],
.country-dropdown__trigger[aria-expanded="true"][b-5blnaaolbe] {
    border-color: var(--sh-gold, #ffcc00);
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(255, 204, 0, 0.14);
}

.country-dropdown__trigger:disabled[b-5blnaaolbe] {
    cursor: not-allowed;
    opacity: 0.55;
}

[b-5blnaaolbe] .country-dropdown__flag {
    width: 18px;
    height: 13px;
    flex: 0 0 18px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.country-dropdown__selection[b-5blnaaolbe] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
    flex: 1;
}

.country-dropdown__primary[b-5blnaaolbe] {
    overflow: hidden;
    font-size: 0.92rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.country-dropdown__secondary[b-5blnaaolbe],
.country-dropdown__placeholder[b-5blnaaolbe] {
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.75rem;
}

.country-dropdown__chevron[b-5blnaaolbe] {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.72rem;
    transition: transform 140ms ease;
}

.country-dropdown__trigger[aria-expanded="true"] .country-dropdown__chevron[b-5blnaaolbe] {
    transform: rotate(180deg);
}

.country-dropdown__backdrop[b-5blnaaolbe] {
    position: fixed;
    z-index: var(--sh-z-dropdown);
    inset: 0;
    padding: 0;
    background: transparent;
    border: 0;
}

.country-dropdown__menu[b-5blnaaolbe] {
    position: absolute;
    z-index: calc(var(--sh-z-dropdown) + 1);
    top: calc(100% + 0.45rem);
    left: 0;
    width: 100%;
    min-width: min(320px, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    overflow: hidden;
    background: var(--sh-elev-3-bg);
    border: 1px solid var(--sh-elev-3-border);
    border-radius: 0.65rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), var(--sh-elev-3-shadow);
    animation: country-dropdown-enter-b-5blnaaolbe 120ms ease-out;
}

.country-dropdown__search[b-5blnaaolbe] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.country-dropdown__search i[b-5blnaaolbe] {
    color: rgba(255, 255, 255, 0.42);
}

.country-dropdown__search input[b-5blnaaolbe] {
    width: 100%;
    min-width: 0;
    padding: 0.45rem 0.55rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid transparent;
    border-radius: 0.4rem;
    outline: none;
}

.country-dropdown__search input:focus[b-5blnaaolbe] {
    border-color: rgba(255, 204, 0, 0.7);
}

.country-dropdown__options[b-5blnaaolbe] {
    max-height: 290px;
    padding: 0.35rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.country-dropdown__option[b-5blnaaolbe] {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto 18px;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.62rem 0.65rem;
    color: rgba(255, 255, 255, 0.88);
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 0.4rem;
}

.country-dropdown__option:hover[b-5blnaaolbe],
.country-dropdown__option:focus-visible[b-5blnaaolbe] {
    color: #fff;
    background: rgba(255, 255, 255, 0.075);
    outline: none;
}

.country-dropdown__option--selected[b-5blnaaolbe] {
    color: #fff;
    background: rgba(255, 204, 0, 0.1);
}

.country-dropdown__option--selected > i[b-5blnaaolbe] {
    color: var(--sh-gold, #ffcc00);
}

.country-dropdown__option-name[b-5blnaaolbe] {
    overflow: hidden;
    font-size: 0.88rem;
    font-weight: 550;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.country-dropdown__option-code[b-5blnaaolbe] {
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.76rem;
    font-variant-numeric: tabular-nums;
}

.country-dropdown__empty[b-5blnaaolbe] {
    margin: 0;
    padding: 1rem;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    font-size: 0.85rem;
}

/* En mode compact le déclencheur ne porte qu'un drapeau et un indicatif — « +262 » au plus
   long. Les 145px fixes d'avant réservaient le double du nécessaire et poussaient le champ
   téléphone hors de sa colonne. La largeur suit désormais le contenu, avec un plancher qui
   garde les indicatifs courts alignés entre eux. */
.country-dropdown--compact[b-5blnaaolbe] {
    width: auto;
    flex: 0 0 auto;
    min-width: 5.75rem;
}

.country-dropdown--compact .country-dropdown__trigger[b-5blnaaolbe] {
    border-radius: 0.5rem 0 0 0.5rem;
    /* Sans quoi le bouton hérite du padding généreux du mode plein et regagne
       la largeur qu'on vient de lui retirer. */
    padding-inline: 0.6rem;
}

/* Le menu reste large — il liste des pays, pas des indicatifs — mais il est désormais borné :
   ancré sous un déclencheur étroit dans une colonne étroite, il débordait de la page. */
.country-dropdown--compact .country-dropdown__menu[b-5blnaaolbe] {
    width: 330px;
    max-width: calc(100vw - 2rem);
}

@keyframes country-dropdown-enter-b-5blnaaolbe {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 576px) {
    .country-dropdown--compact[b-5blnaaolbe] {
        width: 100%;
        flex-basis: 100%;
    }

    .country-dropdown--compact .country-dropdown__trigger[b-5blnaaolbe] {
        border-radius: 0.5rem;
    }

    .country-dropdown__menu[b-5blnaaolbe],
    .country-dropdown--compact .country-dropdown__menu[b-5blnaaolbe] {
        width: min(100%, calc(100vw - 2rem));
        min-width: min(300px, calc(100vw - 2rem));
    }
}

@media (prefers-reduced-motion: reduce) {
    .country-dropdown__menu[b-5blnaaolbe] {
        animation: none;
    }
}
/* /Components/DashboardSection.razor.rz.scp.css */
/* La surface de section, unique dans l'application.

   Cent cinquante lignes vivaient ici : un dégradé maison, un halo en pseudo-élément, et six
   variantes colorées — or, vert, bleu, orange, rouge — dont cinq n'étaient employées nulle part.
   Une couleur de bordure ne dit rien de plus que le contenu de la section ; c'est le rôle des
   pastilles de statut, qui portent déjà cinq tons sémantiques.

   Ce qui reste s'appuie sur les jetons de la charte : même verre, même rayon, même bordure que
   les autres surfaces. Une section ressemble à une section, où qu'elle soit. */

.dashboard-section[b-v7b13qk6n0] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin-bottom: 1.25rem;
    padding: 1.25rem;
    background: var(--sh-glass-bg);
    border: 1px solid var(--sh-glass-border);
    border-radius: var(--sh-radius-aero-sm);
    backdrop-filter: var(--sh-glass-blur);
    -webkit-backdrop-filter: var(--sh-glass-blur);
}

.dashboard-section--full[b-v7b13qk6n0] { width: 100%; }

.dashboard-section__header[b-v7b13qk6n0] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Titre et sous-titre forment une colonne : sans elle, le sous-titre se rangeait à côté du titre,
   la tête étant une rangée. Les gestes restent à droite de la colonne, à sa hauteur. */
.dashboard-section__heading[b-v7b13qk6n0] {
    min-width: 0;
}

.dashboard-section:has(.dashboard-section__subtitle) > .dashboard-section__header[b-v7b13qk6n0] {
    align-items: flex-start;
}

/* Le titre de section a le même poids partout : petites capitales espacées, comme les en-têtes
   de file d'attente et de tableau. Il en existait quatre graisses différentes. */
/* Le point d'aide suit le titre sans le pousser : il fait partie de la ligne, pas de sa mesure. */
.dashboard-section__title[b-v7b13qk6n0]  .sh-help-dot { margin-left: 0.35rem; vertical-align: middle; }

/* Sous le titre, une ligne. Effacée comme le sous-titre d'une page, à la même échelle : les
   deux disent la même sorte de chose, un rang plus bas. */
.dashboard-section__subtitle[b-v7b13qk6n0] {
    margin: 0.2rem 0 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.85rem;
    line-height: 1.4;
}

.dashboard-section__title[b-v7b13qk6n0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.dashboard-section__title i[b-v7b13qk6n0] {
    color: var(--sh-gold);
    font-size: 0.95rem;
}

.dashboard-section__actions[b-v7b13qk6n0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

/* Un tableau touche les bords de sa section : le rembourrage couperait ses lignes du cadre. */
.dashboard-section:has(> .table-responsive)[b-v7b13qk6n0],
.dashboard-section:has(> table)[b-v7b13qk6n0] {
    padding-inline: 0;
    padding-bottom: 0;
}

.dashboard-section:has(> .table-responsive) > .dashboard-section__header[b-v7b13qk6n0],
.dashboard-section:has(> table) > .dashboard-section__header[b-v7b13qk6n0] {
    padding-inline: 1.25rem;
}

@media (max-width: 640px) {
    .dashboard-section[b-v7b13qk6n0] { padding: 1rem; }
}

/* Une liste qui touche les bords. Le paramètre existait, documenté, sans jamais rien produire :
   le rembourrage restait, et une liste pleine largeur s'en trouvait rentrée de tous côtés. Le
   titre, lui, garde sa marge — sans quoi il collerait au bord. */
.dashboard-section--flush[b-v7b13qk6n0] {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
}

.dashboard-section--flush .dashboard-section__header[b-v7b13qk6n0] {
    padding: 0 1.25rem;
}
/* /Components/DisputeBanner.razor.rz.scp.css */
/* Le bandeau de litige.

   Rouge franc et pleine largeur : ce n'est pas un avertissement parmi d'autres, c'est la raison
   pour laquelle le bouton « Réserver » a disparu. Un ton discret l'aurait fait manquer, et
   l'artiste aurait cherché la panne du côté de l'application. */

.dispute-banner[b-s9jpg2ugju] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    padding: 0.8rem 1.15rem;
    color: #fff;
    background: rgba(255, 71, 71, 0.12);
    border: 1px solid rgba(255, 71, 71, 0.45);
    border-radius: var(--sh-radius-aero-sm);
    margin-bottom: 1rem;
    box-shadow: inset 3px 0 0 #ff4747;
}

.dispute-banner-tag[b-s9jpg2ugju] {
    flex: 0 0 auto;
    padding: 0.2rem 0.55rem;
    color: #fff;
    background: #ff4747;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.dispute-banner-text[b-s9jpg2ugju] {
    flex: 1 1 auto;
    font-size: 0.85rem;
    line-height: 1.35;
}

.dispute-banner-action[b-s9jpg2ugju] {
    flex: 0 0 auto;
    padding: 0.5rem 0.95rem;
    color: #fff;
    background: #ff4747;
    border: none;
    border-radius: 9px;
    font-size: 0.8rem;
    font-weight: 750;
    white-space: nowrap;
    transition: background 160ms ease;
}

.dispute-banner-action:hover[b-s9jpg2ugju] { background: #ff6060; }

@media (max-width: 640px) {
    .dispute-banner[b-s9jpg2ugju] { flex-wrap: wrap; }
    .dispute-banner-text[b-s9jpg2ugju] { flex-basis: 100%; }
    .dispute-banner-action[b-s9jpg2ugju] { width: 100%; }
}
/* /Components/Feedback/ConfirmDialog.razor.rz.scp.css */
/* La surface de confirmation. Étroite : une question fermée n'a pas besoin de largeur. */

.confirm-overlay[b-o95oodfi8j] {
    position: fixed;
    inset: 0;
    z-index: var(--sh-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: confirm-fade-b-o95oodfi8j 0.15s ease-out;
}

.confirm-dialog[b-o95oodfi8j] {
    width: min(26rem, 100%);
    padding: 1.4rem 1.4rem 1.1rem;
    background: var(--sh-elev-4-bg);
    border: 1px solid var(--sh-elev-4-border);
    border-radius: var(--sh-radius-aero-sm, 14px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), var(--sh-elev-4-shadow);
    animation: confirm-rise-b-o95oodfi8j 0.18s cubic-bezier(0.22, 1, 0.36, 1);

    /* Cette boîte porte aussi du contenu libre — le choix des raccourcis, la saisie d'un tarif —
       et pouvait donc dépasser l'écran. Centrée en flex sans borne, son débordement était coupé
       en haut comme en bas, boutons compris, sans aucun moyen de l'atteindre. */
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

@supports (height: 100dvh) {
    .confirm-dialog[b-o95oodfi8j] { max-height: calc(100dvh - 2rem); }
}

/* Ce qui ne se défait pas se signale par un filet, pas par un fond rouge : l'alarme doit rester
   proportionnée à un geste qu'on a demandé soi-même. */
.confirm-dialog--danger[b-o95oodfi8j] {
    border-top: 2px solid #ff4747;
}

.confirm-title[b-o95oodfi8j] {
    margin: 0;
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
}

.confirm-message[b-o95oodfi8j] {
    margin: 0.5rem 0 0;
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.86rem;
    line-height: 1.5;
}

/* Les deux réponses restent visibles pendant que la question défile au-dessus d'elles. */
.confirm-actions[b-o95oodfi8j] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.2rem;
    position: sticky;
    bottom: calc(-1.1rem - 1px);
    margin-inline: -1.4rem;
    padding: 0.8rem 1.4rem calc(0.8rem + env(safe-area-inset-bottom, 0px));
    background: var(--sh-glass-bg-raised, rgba(20, 20, 20, 0.98));
}

@keyframes confirm-fade-b-o95oodfi8j {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes confirm-rise-b-o95oodfi8j {
    from { transform: translateY(8px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .confirm-overlay[b-o95oodfi8j],
    .confirm-dialog[b-o95oodfi8j] { animation: none; }
}
/* /Components/Feedback/EmptyState.razor.rz.scp.css */
/* Les états d'écran : vide, erreur, refus. Même forme, seul le ton change. */

.state[b-qkjrame3u4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 2.5rem 1.25rem;
    text-align: center;
}

.state-icon[b-qkjrame3u4] {
    font-size: 1.75rem;
    color: rgba(255, 255, 255, 0.28);
}

.state-text[b-qkjrame3u4] {
    max-width: 46ch;
    margin: 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.9rem;
    line-height: 1.5;
}

.state-hint[b-qkjrame3u4] {
    max-width: 52ch;
    margin: 0;
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.82rem;
    line-height: 1.5;
}

/* Un vide propose parfois deux gestes — réessayer et rentrer, par exemple. */
.state-action[b-qkjrame3u4] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

/* Une attente n'est pas un échec : ambre, comme partout ailleurs. */
.state.tone-warning .state-icon[b-qkjrame3u4] { color: var(--sh-amber); }
.state.tone-warning .state-text[b-qkjrame3u4] { color: rgba(255, 255, 255, 0.72); }

.state.tone-danger .state-icon[b-qkjrame3u4] { color: #ff8b8b; }
.state.tone-danger .state-text[b-qkjrame3u4] { color: #ffb3b3; }

.state.tone-info .state-icon[b-qkjrame3u4] { color: var(--sh-blue); }

.state.tone-purple .state-icon[b-qkjrame3u4] { color: #c88ee0; }
/* /Components/Feedback/InlineNotice.razor.rz.scp.css */
/* La bande de remarque. Sobre par construction : elle accompagne un écran qui marche, elle ne
   le remplace pas. D'où un fond teinté à peine, et la couleur portée par la bordure gauche et
   l'icône plutôt que par un aplat. */

.notice[b-tze1fob0wr] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--sh-glass-border);
    border-left-width: 3px;
    border-radius: var(--sh-radius-aero-sm);
    background: rgba(255, 255, 255, 0.03);
}

.notice__icon[b-tze1fob0wr] {
    flex-shrink: 0;
    font-size: 1.05rem;
    line-height: 1.5;
}

.notice__body[b-tze1fob0wr] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.notice__title[b-tze1fob0wr] {
    margin: 0;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
}

.notice__text[b-tze1fob0wr],
.notice__body[b-tze1fob0wr]  p {
    margin: 0;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.85rem;
    line-height: 1.5;
}

.notice__body[b-tze1fob0wr]  strong { color: #fff; }

/* Les mêmes cinq tons que les pastilles de statut. */
.notice.tone-success[b-tze1fob0wr] { border-left-color: var(--sh-green); }
.notice.tone-success .notice__icon[b-tze1fob0wr] { color: var(--sh-green); }

.notice.tone-warning[b-tze1fob0wr] { border-left-color: var(--sh-amber); }
.notice.tone-warning .notice__icon[b-tze1fob0wr] { color: var(--sh-amber); }

.notice.tone-danger[b-tze1fob0wr] { border-left-color: #ff4747; }
.notice.tone-danger .notice__icon[b-tze1fob0wr] { color: #ff8b8b; }

.notice.tone-info[b-tze1fob0wr] { border-left-color: var(--sh-blue); }
.notice.tone-info .notice__icon[b-tze1fob0wr] { color: var(--sh-blue); }

.notice.tone-neutral[b-tze1fob0wr] { border-left-color: rgba(255, 255, 255, 0.3); }
.notice.tone-neutral .notice__icon[b-tze1fob0wr] { color: rgba(255, 255, 255, 0.45); }

.notice.tone-purple[b-tze1fob0wr] { border-left-color: var(--sh-purple); }
.notice.tone-purple .notice__icon[b-tze1fob0wr] { color: #c88ee0; }
/* /Components/Feedback/InvitationDetailsModal.razor.rz.scp.css */
/* Styles du composant. Étaient un <style> en ligne, donc globaux et présents dans le DOM tant que le composant était affiché ; scopés ici, ils ne visent plus que son propre balisage.\n\n   Vérifié avant le déplacement : aucune de ces classes n'est posée ni redéfinie dans un autre fichier, et aucun sélecteur ne vise un élément rendu par un composant enfant — ::deep est donc inutile. */

.invite-modal-overlay[b-81uf3znhdz] {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: var(--sh-overlay-bg, rgba(0, 0, 0, 0.65));
    backdrop-filter: var(--sh-overlay-blur, blur(6px));
    z-index: var(--sh-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.invite-modal-container[b-81uf3znhdz] {
    position: relative;
    background: var(--sh-elev-4-bg);
    border: 1px solid var(--sh-elev-4-border);
    border-radius: 28px;
    width: 100%;
    max-width: 460px;
    padding: 2.5rem 2rem 2rem;
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), var(--sh-elev-4-shadow);
}

.invite-modal-close[b-81uf3znhdz] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.invite-modal-close:hover[b-81uf3znhdz] {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.invite-modal-icon[b-81uf3znhdz] {
    width: 72px;
    height: 72px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--sh-gold, #ffcc00);
}

.invite-modal-title[b-81uf3znhdz] {
    font-weight: 900;
    color: white;
    margin-bottom: 0.25rem;
}

.invite-modal-studio[b-81uf3znhdz] {
    color: var(--sh-gold, #ffcc00);
    font-weight: 800;
    font-size: 1.15rem;
    margin-bottom: 0.75rem;
}

.invite-modal-desc[b-81uf3znhdz] {
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 0;
}

.invite-modal-message[b-81uf3znhdz] {
    margin-top: 1rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    text-align: left;
}

.invite-modal-meta[b-81uf3znhdz] {
    margin-top: 1rem;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 600;
}

.invite-modal-error[b-81uf3znhdz] {
    margin-top: 1rem;
    color: #ff6b6b;
    font-size: 0.85rem;
    font-weight: 600;
}

.invite-modal-actions[b-81uf3znhdz] {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.75rem;
}

.invite-modal-actions .btn-elite-gold[b-81uf3znhdz],
.invite-modal-actions .btn-elite-danger-outline[b-81uf3znhdz] {
    flex: 1;
    justify-content: center;
}

.btn-elite-gold[b-81uf3znhdz] {
    background: var(--sh-gold, #ffcc00);
    color: black;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 800;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.btn-elite-gold:hover:not(:disabled)[b-81uf3znhdz] {
    background: #e6c200;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

.btn-elite-gold:disabled[b-81uf3znhdz] { opacity: 0.6; }

.btn-elite-danger-outline[b-81uf3znhdz] {
    background: transparent;
    color: #ff6b6b;
    border: 1px solid rgba(220, 53, 69, 0.3);
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 800;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.btn-elite-danger-outline:hover:not(:disabled)[b-81uf3znhdz] {
    background: rgba(220, 53, 69, 0.1);
    border-color: #dc3545;
}

.btn-elite-danger-outline:disabled[b-81uf3znhdz] { opacity: 0.6; }
/* /Components/Feedback/LoadingState.razor.rz.scp.css */
/* L'attente : le tourniquet centré, et rien d'autre tant qu'il n'y a rien à dire. */

.state--loading[b-o00yoqnegn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    padding: 2.5rem 1.25rem;
    text-align: center;
}

.state--loading .state-text[b-o00yoqnegn] {
    margin: 0;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.85rem;
}
/* /Components/Feedback/PinValidationModal.razor.rz.scp.css */
/* La saisie du code PIN qui confirme un encaissement en espèces. */

.pin-modal-overlay[b-kw6rf413cl] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;

    /* Sur iOS, 100vh vaut la hauteur *barres masquées* : tant que la barre d'adresse de Safari
       est visible — c'est-à-dire presque toujours — le bas de la modale tombe dessous. Le pavé
       de saisie n'ayant ni borne ni défilement, la touche verte de confirmation se retrouvait
       hors de l'écran : le code se tapait, la validation était injoignable. */
    height: 100vh;

    background: var(--sh-overlay-bg);
    backdrop-filter: var(--sh-overlay-blur);
    z-index: var(--sh-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

@supports (height: 100dvh) {
    .pin-modal-overlay[b-kw6rf413cl] { height: 100dvh; }
}

.pin-modal-container[b-kw6rf413cl] {
    background: var(--sh-elev-4-bg);
    border: 1px solid var(--sh-elev-4-border);
    border-radius: 32px;
    width: 100%;
    max-width: 400px;
    padding: 2rem;
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), var(--sh-elev-4-shadow);

    /* Bornée à l'écran, et le pavé défile si la hauteur manque. Sans ces trois lignes, le
       débordement d'un conteneur centré en flex est coupé des deux côtés à la fois, et rien
       ne permet de l'atteindre — pas même en faisant défiler. */
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 2rem);
    overflow: hidden;
}

@supports (height: 100dvh) {
    .pin-modal-container[b-kw6rf413cl] { max-height: calc(100dvh - 2rem); }
}

.pin-modal-header[b-kw6rf413cl] { flex: 0 0 auto; }

.pin-modal-body[b-kw6rf413cl] {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* « Annuler » reste en pied, au-dessus de la barre d'accueil de l'iPhone. */
.pin-modal-footer[b-kw6rf413cl] {
    flex: 0 0 auto;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.pin-display[b-kw6rf413cl] {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}
.pin-digit[b-kw6rf413cl] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    border: 2px solid rgba(255,255,255,0.1);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.pin-digit.filled[b-kw6rf413cl] {
    background: var(--sh-gold);
    border-color: var(--sh-gold);
    transform: scale(1.2);
    box-shadow: 0 0 15px var(--sh-gold-glow);
}

.pin-keypad[b-kw6rf413cl] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    max-width: 280px;
    margin: 0 auto;
}
.keypad-btn[b-kw6rf413cl] {
    aspect-ratio: 1;
    border-radius: 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 900;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.keypad-btn:hover[b-kw6rf413cl] { background: rgba(255,255,255,0.08); transform: translateY(-2px); }
.keypad-btn:active[b-kw6rf413cl] { transform: scale(0.95); }
.keypad-btn.danger[b-kw6rf413cl] { color: #ff4747; background: rgba(255, 71, 71, 0.05); }
.keypad-btn.success[b-kw6rf413cl] { color: #00ff80; background: rgba(0, 255, 128, 0.1); border-color: rgba(0, 255, 128, 0.2); }
.keypad-btn.success:disabled[b-kw6rf413cl] { opacity: 0.3; transform: none; }

.fw-900[b-kw6rf413cl] { font-weight: 900; }
.x-small[b-kw6rf413cl] { font-size: 0.7rem; }
/* /Components/Feedback/ReviewModal.razor.rz.scp.css */
/* Styles du composant. Étaient un <style> en ligne, donc globaux et présents dans le DOM tant que le composant était affiché ; scopés ici, ils ne visent plus que son propre balisage.\n\n   Vérifié avant le déplacement : aucune de ces classes n'est posée ni redéfinie dans un autre fichier, et aucun sélecteur ne vise un élément rendu par un composant enfant — ::deep est donc inutile. */

.review-modal[b-pligckkmsf] {
    position: fixed;
    inset: 0;
    z-index: var(--sh-z-modal);
    display: grid;
    place-items: center;
    padding: 1rem;
    background: var(--sh-overlay-bg);
    backdrop-filter: var(--sh-overlay-blur);
}
.review-modal__dialog[b-pligckkmsf] { width: min(100%, 500px); }
.review-modal__content[b-pligckkmsf] {
    overflow: hidden;
    color: var(--sh-white);
    background: var(--sh-elev-4-bg);
    border: 1px solid var(--sh-elev-4-border);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), var(--sh-elev-4-shadow);
}
.review-modal__header[b-pligckkmsf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.review-modal__title[b-pligckkmsf] { margin: 0; font-size: 1rem; font-weight: 800; }
.review-modal__body[b-pligckkmsf] { padding: 1.5rem; }

.review-modal__rating[b-pligckkmsf] {
    margin: 0 0 1.5rem;
    padding: 0;
    border: 0;
    text-align: center;
}
.review-modal__legend[b-pligckkmsf] {
    float: none;
    width: auto;
    margin: 0 0 0.6rem;
    padding: 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.review-modal__stars[b-pligckkmsf] {
    display: flex;
    justify-content: center;
    gap: 0.45rem;
}
.review-modal__star[b-pligckkmsf] {
    position: relative;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.28);
    font-size: 1.35rem;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.review-modal__star:hover[b-pligckkmsf] { background: rgba(255, 255, 255, 0.07); transform: translateY(-2px); }
.review-modal__star.is-active[b-pligckkmsf] {
    color: var(--sh-gold);
    background: var(--sh-gold-glow);
    border-color: rgba(240, 180, 0, 0.35);
}
/* L'input reste focusable au clavier (navigation par flèches native) mais invisible */
.review-modal__star-input[b-pligckkmsf] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.review-modal__star-input:focus-visible + i[b-pligckkmsf] {
    outline: 2px solid var(--sh-gold);
    outline-offset: 4px;
    border-radius: 4px;
}
.review-modal__rating-hint[b-pligckkmsf] {
    margin: 0.65rem 0 0;
    min-height: 1.2rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.82rem;
}

.review-modal__field[b-pligckkmsf] { margin-bottom: 1.25rem; }
.review-modal__label[b-pligckkmsf] {
    display: block;
    margin-bottom: 0.4rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.review-modal__optional[b-pligckkmsf] { font-weight: 600; letter-spacing: 0; text-transform: none; }
.review-modal__textarea[b-pligckkmsf] { resize: vertical; }
.review-modal__counter[b-pligckkmsf] {
    margin-top: 0.3rem;
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.72rem;
    text-align: right;
}

.review-modal__error[b-pligckkmsf] {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin-bottom: 1rem;
    padding: 0.75rem 0.9rem;
    color: #ffb4b4;
    background: rgba(255, 71, 71, 0.08);
    border: 1px solid rgba(255, 71, 71, 0.28);
    border-radius: 10px;
    font-size: 0.85rem;
    line-height: 1.45;
}
.review-modal__error i[b-pligckkmsf] { margin-top: 0.1rem; }

.review-modal__success[b-pligckkmsf] { padding: 0.5rem 0 1.5rem; text-align: center; }
.review-modal__success i[b-pligckkmsf] {
    display: block;
    margin-bottom: 0.85rem;
    color: #00d976;
    font-size: 2.6rem;
}
.review-modal__success-title[b-pligckkmsf] { margin: 0 0 0.35rem; font-size: 1.05rem; font-weight: 800; }
.review-modal__success-text[b-pligckkmsf] { margin: 0; color: rgba(255, 255, 255, 0.55); font-size: 0.88rem; }

@media (max-width: 576px) {
    .review-modal[b-pligckkmsf] { align-items: end; padding: 0; }
    .review-modal__dialog[b-pligckkmsf] { width: 100%; }
    .review-modal__content[b-pligckkmsf] { border-right: 0; border-bottom: 0; border-left: 0; border-radius: 18px 18px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .review-modal__star[b-pligckkmsf] { transition: none; }
    .review-modal__star:hover[b-pligckkmsf] { transform: none; }
}
/* /Components/Feedback/WordLoader.razor.rz.scp.css */
/* Ronde de mots, d'après Uiverse (kennyotsu), réécrite avec nos jetons.

   Trois écarts avec l'original, tous délibérés :

   - la couleur du mot vient du thème (--sh-gold) au lieu du violet #956afa ;
   - la police est celle de l'application, héritée, plutôt que Poppins qu'on ne charge pas — la
     déclarer produirait une substitution silencieuse par la police système ;
   - le fond du dégradé qui rogne le haut et le bas est une variable. L'original le fige sur
     #111 : posé sur une surface d'une autre teinte, le composant y laisse deux bandes. */

.wl[b-znipeep7q6] {
    --wl-bg: var(--sh-glass-bg, rgba(12, 13, 16, 0.78));
    --wl-line: 1.6rem;

    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: var(--wl-line);
}

.wl-prefix[b-znipeep7q6] { white-space: nowrap; }

.wl-words[b-znipeep7q6] {
    position: relative;
    height: var(--wl-line);
    overflow: hidden;
}

/* Le voile qui adoucit l'entrée et la sortie. Sans lui les mots apparaissent et disparaissent
   d'un coup au ras du cadre. */
.wl-words[b-znipeep7q6]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
        var(--wl-bg) 6%,
        transparent 34%,
        transparent 66%,
        var(--wl-bg) 94%
    );
}

.wl-word[b-znipeep7q6] {
    display: block;
    height: var(--wl-line);
    padding-left: 0.35rem;
    color: var(--sh-gold);
    font-weight: 750;
    white-space: nowrap;
}

/* Chaque mot glisse puis s'arrête : c'est la pause qui rend la ronde lisible. Un défilement
   continu obligerait à lire en mouvement. */
.wl-words--3 .wl-word[b-znipeep7q6] { animation: wl-roll-3-b-znipeep7q6 3.6s infinite; }
.wl-words--4 .wl-word[b-znipeep7q6] { animation: wl-roll-4-b-znipeep7q6 4.8s infinite; }
.wl-words--5 .wl-word[b-znipeep7q6] { animation: wl-roll-5-b-znipeep7q6 6s infinite; }

@keyframes wl-roll-3-b-znipeep7q6 {
    16%  { transform: translateY(-102%); }
    33%  { transform: translateY(-100%); }
    50%  { transform: translateY(-202%); }
    66%  { transform: translateY(-200%); }
    83%  { transform: translateY(-302%); }
    100% { transform: translateY(-300%); }
}

@keyframes wl-roll-4-b-znipeep7q6 {
    12%  { transform: translateY(-102%); }
    25%  { transform: translateY(-100%); }
    37%  { transform: translateY(-202%); }
    50%  { transform: translateY(-200%); }
    62%  { transform: translateY(-302%); }
    75%  { transform: translateY(-300%); }
    87%  { transform: translateY(-402%); }
    100% { transform: translateY(-400%); }
}

@keyframes wl-roll-5-b-znipeep7q6 {
    10%  { transform: translateY(-102%); }
    20%  { transform: translateY(-100%); }
    30%  { transform: translateY(-202%); }
    40%  { transform: translateY(-200%); }
    50%  { transform: translateY(-302%); }
    60%  { transform: translateY(-300%); }
    70%  { transform: translateY(-402%); }
    80%  { transform: translateY(-400%); }
    90%  { transform: translateY(-502%); }
    100% { transform: translateY(-500%); }
}

/* Sans mouvement, on garde le premier mot : la phrase reste complète et lisible. */
@media (prefers-reduced-motion: reduce) {
    .wl-word[b-znipeep7q6] { animation: none; }
}
/* /Components/Finance/AmountBreakdown.razor.rz.scp.css */
.amount-breakdown[b-b2mpuqqrij] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.amount-line[b-b2mpuqqrij] {
    display: grid;
    /* Le libellé prend ce qu'il faut et enveloppe ; le montant garde sa colonne
       et reste aligné à droite quelle que soit la longueur du libellé. C'est ce
       que TwoTonePill ne sait pas faire. */
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.4rem 0;
    font-size: 0.86rem;
}

.amount-line__label[b-b2mpuqqrij] {
    display: flex;
    align-items: baseline;
    gap: 0.42rem;
    min-width: 0;
    color: rgba(255, 255, 255, 0.62);
    line-height: 1.35;
}

.amount-line__label i[b-b2mpuqqrij] {
    flex: 0 0 auto;
    font-size: 0.82em;
    opacity: 0.75;
}

.amount-line__value[b-b2mpuqqrij] {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Sous-ligne : détaille la ligne du dessus, jamais additionnée séparément. */
.amount-line--sub[b-b2mpuqqrij] {
    padding-block: 0.22rem;
    font-size: 0.79rem;
}

.amount-line--sub .amount-line__label[b-b2mpuqqrij] {
    padding-left: 0.95rem;
    color: rgba(255, 255, 255, 0.44);
    position: relative;
}

.amount-line--sub .amount-line__label[b-b2mpuqqrij]::before {
    content: "";
    position: absolute;
    left: 0.3rem;
    top: 0.52em;
    width: 0.35rem;
    height: 1px;
    background: rgba(255, 255, 255, 0.22);
}

.amount-line--sub .amount-line__value[b-b2mpuqqrij] {
    color: rgba(255, 255, 255, 0.62);
    font-weight: 600;
}

/* Sémantique des couleurs, revue.
   L'ambre signalait les déductions et se lisait comme une alerte : une commission
   contractuelle n'est pas un incident. Le signe moins porte désormais seul le sens,
   dans un ton neutre atténué. Le vert est réservé à ce que le studio conserve — la
   seule ligne qu'un gérant cherche vraiment — et l'ambre à ce qui appelle une action. */
.amount-line--base .amount-line__value[b-b2mpuqqrij] { color: var(--sh-white); }
.amount-line--deduction .amount-line__value[b-b2mpuqqrij] { color: rgba(255, 255, 255, 0.58); }
.amount-line--credit .amount-line__value[b-b2mpuqqrij] { color: #67d99a; }

.amount-line--total[b-b2mpuqqrij] {
    margin-top: 0.35rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.amount-line--total .amount-line__label[b-b2mpuqqrij] {
    color: rgba(255, 255, 255, 0.82);
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.72rem;
}

/* Vert : c'est la ligne que le gérant cherche, ce qu'il conserve. */
.amount-line--total .amount-line__value[b-b2mpuqqrij] {
    color: #67d99a;
    font-size: 1.08rem;
    font-weight: 850;
}

.amount-mismatch[b-b2mpuqqrij] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.7rem 0 0;
    padding: 0.55rem 0.7rem;
    border: 1px solid rgba(242, 133, 133, 0.28);
    border-radius: var(--sh-radius-aero-sm);
    background: rgba(220, 75, 75, 0.09);
    color: #f0a5a5;
    font-size: 0.76rem;
    line-height: 1.4;
}

.amount-mismatch i[b-b2mpuqqrij] {
    flex: 0 0 auto;
    margin-top: 0.1em;
}
/* /Components/Finance/NetTrend.razor.rz.scp.css */
/* L'évolution du net : une ligne, deux bornes, rien d'autre.

   Discrète par construction — elle accompagne les chiffres des vignettes, elle ne les remplace
   pas. Un graphique qui attire l'œil plus que le montant qu'il détaille est un ornement. */

.net-trend[b-rk094oshhp] {
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.net-trend-head[b-rk094oshhp] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.net-trend-title[b-rk094oshhp] {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.net-trend-range[b-rk094oshhp] {
    color: rgba(255, 255, 255, 0.38);
    font-size: 0.72rem;
}

/* La hauteur est fixe et la largeur suit le conteneur : preserveAspectRatio="none" étire le tracé,
   ce qui est exactement ce qu'on veut d'une courbe de tendance — la forme compte, pas l'échelle. */
.net-trend-chart[b-rk094oshhp] {
    display: block;
    width: 100%;
    height: 56px;
    overflow: visible;
}

.net-trend-line[b-rk094oshhp] {
    fill: none;
    stroke: var(--sh-gold, #f0b429);
    stroke-width: 1.4;
    stroke-linejoin: round;
    stroke-linecap: round;

    /* Le trait garde son épaisseur quelle que soit la déformation imposée par le viewBox étiré. */
    vector-effect: non-scaling-stroke;
}

.net-trend-foot[b-rk094oshhp] {
    display: flex;
    justify-content: space-between;
    margin-top: 0.35rem;
    color: rgba(255, 255, 255, 0.38);
    font-size: 0.72rem;
}
/* /Components/Finance/ReservationFinancialDetail.razor.rz.scp.css */
/* Pilote Dark Aero. Les surfaces viennent de .sh-aero-surface (app.css) ; ce fichier
   ne porte que la mise en page propre à l'écran. */

.rfd[b-4he4x57759] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    width: 100%;
    max-width: 760px;
    /* Le shell /app fournit une colonne pleine largeur : sans centrage explicite, la
       page se collait au bord gauche. */
    margin-inline: auto;
    padding-bottom: 3rem;
}

.rfd-header[b-4he4x57759] { margin-bottom: 0.35rem; }

.rfd-head-row[b-4he4x57759] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Sélecteur d'angle de lecture. Aqua : c'est de la navigation, pas de l'argent. */
.rfd-lens[b-4he4x57759] {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--sh-glass-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.035);
    box-shadow: var(--sh-glass-specular);
}

.rfd-lens-btn[b-4he4x57759] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.42rem 0.85rem;
    color: rgba(255, 255, 255, 0.55);
    background: transparent;
    border: 0;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 750;
    white-space: nowrap;
    transition: color var(--sh-duration-aero) var(--sh-ease-liquid),
                background var(--sh-duration-aero) var(--sh-ease-liquid);
}

.rfd-lens-btn:hover:not(.is-active)[b-4he4x57759] { color: rgba(255, 255, 255, 0.85); }

.rfd-lens-btn.is-active[b-4he4x57759] {
    color: var(--sh-aqua);
    background: var(--sh-aqua-soft);
    box-shadow: var(--sh-glass-specular);
}

/* Pastille de messages non lus, alignée sur les badges du sidemenu owner. */
.rfd-lens-badge[b-4he4x57759] {
    display: inline-grid;
    place-items: center;
    min-width: 17px;
    height: 17px;
    padding-inline: 4px;
    border-radius: 999px;
    background: #dc3545;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 850;
    line-height: 1;
}

@media (max-width: 520px) {
    .rfd-lens[b-4he4x57759] { width: 100%; }
    .rfd-lens-btn[b-4he4x57759] { flex: 1; justify-content: center; }
}

.rfd-back[b-4he4x57759] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.9rem;
    padding: 0.35rem 0.7rem 0.35rem 0.5rem;
    color: rgba(255, 255, 255, 0.6);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 650;
    transition: color var(--sh-duration-aero) var(--sh-ease-liquid),
                background var(--sh-duration-aero) var(--sh-ease-liquid),
                border-color var(--sh-duration-aero) var(--sh-ease-liquid);
}

.rfd-back:hover[b-4he4x57759],
.rfd-back:focus-visible[b-4he4x57759] {
    color: var(--sh-aqua);
    background: var(--sh-aqua-soft);
    border-color: var(--sh-aqua-glow);
}

.rfd-eyebrow[b-4he4x57759] {
    margin: 0;
    color: var(--sh-aqua);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.rfd-title[b-4he4x57759] {
    margin: 0.2rem 0 0;
    color: var(--sh-white);
    font-size: 1.5rem;
    font-weight: 850;
    letter-spacing: -0.02em;
}

.rfd-sub[b-4he4x57759] {
    margin: 0.25rem 0 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
}

/* Cet écran posait dix surfaces de verre — rayon de 28 px, flou, double ombre — dont une par
   encaissement. Une séance réglée en trois fois empilait donc trois bulles pour trois lignes de
   montants, et l'écran ne ressemblait à aucun autre du produit.

   Il n'en reste que DashboardSection, la surface commune : même verre, même rayon, même titre en
   petites capitales que la vue d'ensemble du propriétaire. Ce qui suit ne décrit plus que ce qui
   vit *dans* une section. */

/* Un encaissement : une ligne dans la section, pas une carte à lui. Le trait le sépare du
   précédent — c'est tout ce qu'il faut pour lire une pile de deux ou trois. */
.rfd-txn + .rfd-txn[b-4he4x57759],
.rfd-txn:not(:first-child)[b-4he4x57759] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.rfd-txn-title[b-4he4x57759] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.15rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.rfd-txn-title > i[b-4he4x57759] { color: var(--sh-aqua); }

.rfd-card-meta[b-4he4x57759] {
    margin: 0 0 0.85rem;
    color: rgba(255, 255, 255, 0.44);
    font-size: 0.76rem;
}

.rfd-chip[b-4he4x57759] {
    margin-left: auto;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.rfd-chip--ok[b-4he4x57759]   { color: #67d99a; background: rgba(63, 190, 120, 0.14); }
.rfd-chip--wait[b-4he4x57759] { color: #f2c66d; background: rgba(242, 198, 109, 0.14); }
.rfd-chip--bad[b-4he4x57759]  { color: #ef8585; background: rgba(220, 75, 75, 0.14); }

/* Les six vignettes maison ont laissé la place à FigureRow — le rang de chiffres de la vue
   d'ensemble du propriétaire, qui existait déjà et que cet écran redessinait pour son compte. */

.rfd-note[b-4he4x57759] {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.75rem;
    line-height: 1.4;
}

.rfd-note--block[b-4he4x57759] { margin-top: 0.7rem; }
.rfd-note--error[b-4he4x57759] { color: #ef8585; }
.rfd-note i[b-4he4x57759] { flex: 0 0 auto; margin-top: 0.12em; }

.rfd-note-inline[b-4he4x57759] {
    margin-left: 0.5rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: rgba(242, 198, 109, 0.12);
    color: #f2c66d;
    font-size: 0.68rem;
    font-weight: 650;
}

/* Statistiques de session : grille de paires libellé/valeur. */
.rfd-stats[b-4he4x57759] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.7rem;
    margin-top: 0.9rem;
}

.rfd-stat[b-4he4x57759] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.rfd-stat-label[b-4he4x57759] {
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.67rem;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.rfd-stat-value[b-4he4x57759] {
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.9rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* En bas à droite du bloc Déroulé de session, pour laisser la colonne de gauche aux
   informations de la séance plutôt qu'aux pastilles. */
.rfd-badges[b-4he4x57759] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem;
    margin-top: 1rem;
}

/* Pastille REC : même coquille que .status-pill (app.css), avec un point qui bat — la
   séance est la seule chose qui bouge en ce moment sur cet écran. */
.rfd-rec-dot[b-4he4x57759] {
    animation: rfd-rec-pulse-b-4he4x57759 2s ease-in-out infinite;
}

@keyframes rfd-rec-pulse-b-4he4x57759 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
    .rfd-rec-dot[b-4he4x57759] { animation: none; }
}

/* Ce qu'il reste à solder, sous la jauge : le même ambre que sa part hachurée
   (SessionMoneyGauge, .smg-fill--held), pour qu'un seul regard relie le chiffre à la barre
   qui l'explique. */
.rfd-outstanding[b-4he4x57759] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    margin: 0.9rem 0 0;
}

.rfd-outstanding-label[b-4he4x57759] {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.rfd-outstanding-value[b-4he4x57759] {
    color: var(--sh-semantic-gold);
    font-size: 1.7rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}

/* Séance close : rien n'est dû, mais le solde contracté traîne encore en base. Un tiret
   neutre, pas un montant ambre qui laisserait croire à une dette encore vivante. */
.rfd-outstanding-value--none[b-4he4x57759] { color: rgba(255, 255, 255, 0.4); }


/* Passerelle d'un angle vers l'autre. */
.rfd-jump[b-4he4x57759] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    margin-top: 1rem;
    padding: 0.62rem 0.85rem;
    color: var(--sh-aqua);
    background: var(--sh-aqua-soft);
    border: 1px solid var(--sh-aqua-glow);
    border-radius: var(--sh-radius-aero-sm);
    font-size: 0.8rem;
    font-weight: 750;
    transition: background var(--sh-duration-aero) var(--sh-ease-liquid),
                transform var(--sh-duration-aero) var(--sh-ease-liquid);
}

.rfd-jump > span[b-4he4x57759] { margin-right: auto; text-align: left; }

.rfd-jump:hover[b-4he4x57759],
.rfd-jump:focus-visible[b-4he4x57759] {
    background: rgba(79, 209, 232, 0.24);
    transform: translateY(-1px);
}

/* Le calcul écrit en toutes lettres, sous le décompte. Vérifiable d'un coup d'œil. */
/* Ce qui compte d'un coup d'œil : payé, versé au studio. Le calcul qui l'explique — quatre
   lignes de plus, une par encaissement — ne s'ouvre qu'à la demande, juste en dessous. */
.rfd-txn-summary[b-4he4x57759] {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.rfd-txn-summary-net[b-4he4x57759] { color: #67d99a; }
.rfd-txn-summary-net[b-4he4x57759]::before { content: "→"; margin-right: 0.4rem; color: rgba(255, 255, 255, 0.35); }

.rfd-txn-detail summary[b-4he4x57759] {
    margin-top: 0.5rem;
    color: var(--sh-aqua);
    font-size: 0.74rem;
    font-weight: 700;
    cursor: pointer;
}

.rfd-txn-detail[open] summary[b-4he4x57759] { margin-bottom: 0.4rem; }

.rfd-formula[b-4he4x57759] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
    margin: 0.75rem 0 0;
    padding: 0.55rem 0.75rem;
    border-radius: var(--sh-radius-aero-sm);
    background: rgba(255, 255, 255, 0.03);
    box-shadow: var(--sh-glass-specular);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

.rfd-formula strong[b-4he4x57759] { color: #67d99a; font-weight: 800; }

.rfd-formula > span[b-4he4x57759] {
    flex-basis: 100%;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.72rem;
    font-variant-numeric: normal;
}

.rfd-status[b-4he4x57759] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 1.5rem 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
}

/* Deux replis en bas d'écran : le journal des événements, la vue interne StudioHub. Ils
   empruntaient la surface de verre des cartes — un repli fermé n'est qu'une ligne de titre, et
   une bulle de 28 px de rayon autour d'une ligne se voyait plus que ce qu'elle contenait. Même
   cadre sobre que les sections, en plus discret. */
.rfd-details[b-4he4x57759] {
    margin-bottom: 1.25rem;
    padding: 0.9rem 1.25rem;
    background: var(--sh-glass-bg);
    border: 1px solid var(--sh-glass-border);
    border-radius: var(--sh-radius-aero-sm);
}

.rfd-details > summary[b-4he4x57759] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.76rem;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
}

.rfd-details > summary:hover[b-4he4x57759] { color: rgba(255, 255, 255, 0.88); }
.rfd-details[open] > summary[b-4he4x57759] { margin-bottom: 0.85rem; }
.rfd-details--internal[b-4he4x57759] { border-color: rgba(79, 209, 232, 0.22); }
.rfd-details--internal > summary > i[b-4he4x57759] { color: var(--sh-aqua); }

.rfd-ledger[b-4he4x57759] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.rfd-ledger li[b-4he4x57759] {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.3rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.75rem;
}

.rfd-ledger li:first-child[b-4he4x57759] { border-top: 0; }
.rfd-ledger-date[b-4he4x57759] { color: rgba(255, 255, 255, 0.4); font-variant-numeric: tabular-nums; }
.rfd-ledger-type[b-4he4x57759] { color: var(--sh-aqua); font-weight: 700; }
.rfd-ledger-desc[b-4he4x57759] { color: rgba(255, 255, 255, 0.55); overflow-wrap: anywhere; }
.rfd-ledger-amount[b-4he4x57759] { color: rgba(255, 255, 255, 0.85); font-weight: 700; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
    .rfd-ledger li[b-4he4x57759] { grid-template-columns: auto minmax(0, 1fr); }
    .rfd-ledger-amount[b-4he4x57759] { grid-column: 2; text-align: right; }
}

/* ---- Actions du détail -------------------------------------------------------
   En haut, contre l'identité de la session : on décide en ayant sous les yeux de
   qui et de quand il s'agit. Même jeu et même ordre que le panneau rapide. */

/* La ligne de l'ingénieur porte un geste : elle a besoin d'une colonne de plus. */
.rfd-stat--engineer[b-4he4x57759] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
}

.rfd-stat-rate[b-4he4x57759] {
    margin-left: 0.35rem;
    color: var(--sh-gold);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Discret : c'est une correction, pas l'action principale de la page. */
.rfd-stat-action[b-4he4x57759] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--sh-glass-border);
    border-radius: 999px;
    font-size: 0.74rem;
    cursor: pointer;
}

.rfd-stat-action:hover:not(:disabled)[b-4he4x57759] {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.rfd-stat-action:disabled[b-4he4x57759] { opacity: 0.45; cursor: not-allowed; }


/* Les règles de l'empilement brut → net (.rfd-money-*, .rfd-fees-*, .rfd-net-detail) et celles
   de la négociation de tarif (.rfd-engineer-proposal, .rfd-rate-*) sont parties avec leur
   balisage, dans StudioNetStack et EngineerRateNegotiation : ces deux blocs étaient recopiés à
   l'identique dans le récapitulatif de séance, style compris. */
/* /Components/Finance/ReservationThread.razor.rz.scp.css */
.thread[b-nvc605tsqn] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.thread-status[b-nvc605tsqn] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 1.25rem 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
}

.thread-participants[b-nvc605tsqn] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.thread-chip[b-nvc605tsqn] {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: var(--sh-glass-specular);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.7rem;
    font-weight: 700;
}

/* Chaque acteur garde sa couleur de rôle d'un bout à l'autre de l'application. */
.thread-chip--artist[b-nvc605tsqn] { color: var(--sh-purple); background: rgba(155, 89, 182, 0.14); }
.thread-chip--engineer[b-nvc605tsqn] { color: var(--sh-blue); background: rgba(77, 171, 247, 0.14); }
.thread-chip--studioteam[b-nvc605tsqn] { color: var(--sh-gold); background: rgba(240, 180, 0, 0.13); }

.thread-chip-you[b-nvc605tsqn] {
    padding-left: 0.32rem;
    color: rgba(255, 255, 255, 0.42);
    font-weight: 600;
}

.thread-list[b-nvc605tsqn] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 46vh;
    overflow-y: auto;
    scrollbar-width: thin;
}

.thread-empty[b-nvc605tsqn] {
    padding: 1.1rem;
    border: 1px dashed var(--sh-glass-border);
    border-radius: var(--sh-radius-aero-sm);
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.8rem;
    line-height: 1.5;
}

.thread-message[b-nvc605tsqn] {
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--sh-glass-border);
    border-radius: var(--sh-radius-aero-sm);
    background: rgba(255, 255, 255, 0.028);
    box-shadow: var(--sh-glass-specular);
}

/* Ses propres messages sont décalés et teintés : on retrouve son fil d'un coup d'œil
   sans avoir à lire les noms. */
.thread-message.is-mine[b-nvc605tsqn] {
    margin-left: 1.75rem;
    background: var(--sh-aqua-soft);
    border-color: var(--sh-aqua-glow);
}

.thread-message-head[b-nvc605tsqn] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.42rem;
    margin-bottom: 0.32rem;
}

.thread-message-author[b-nvc605tsqn] {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8rem;
    font-weight: 750;
}

.thread-message-head time[b-nvc605tsqn] {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.38);
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
}

.thread-internal[b-nvc605tsqn] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.14rem 0.45rem;
    border-radius: 999px;
    background: rgba(242, 198, 109, 0.14);
    color: #f2c66d;
    font-size: 0.66rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.thread-message-body[b-nvc605tsqn] {
    margin: 0;
    color: rgba(255, 255, 255, 0.84);
    font-size: 0.86rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.thread-composer[b-nvc605tsqn] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.thread-input[b-nvc605tsqn] {
    width: 100%;
    padding: 0.7rem 0.85rem;
    color: var(--sh-white);
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid var(--sh-glass-border);
    border-radius: var(--sh-radius-aero-sm);
    font-size: 0.86rem;
    line-height: 1.5;
    resize: vertical;
}

.thread-input:focus-visible[b-nvc605tsqn] {
    outline: none;
    border-color: var(--sh-aqua-glow);
    box-shadow: 0 0 0 3px var(--sh-aqua-soft);
}

.thread-composer-actions[b-nvc605tsqn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.thread-toggle[b-nvc605tsqn] {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0.45rem 0.75rem;
    color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--sh-glass-border);
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    transition: color var(--sh-duration-aero) var(--sh-ease-liquid),
                background var(--sh-duration-aero) var(--sh-ease-liquid),
                border-color var(--sh-duration-aero) var(--sh-ease-liquid);
}

.thread-toggle.is-active[b-nvc605tsqn] {
    color: #f2c66d;
    background: rgba(242, 198, 109, 0.14);
    border-color: rgba(242, 198, 109, 0.3);
}

.thread-send[b-nvc605tsqn] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-left: auto;
    padding: 0.5rem 1.1rem;
    color: var(--sh-aqua);
    background: var(--sh-aqua-soft);
    border: 1px solid var(--sh-aqua-glow);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 800;
    transition: background var(--sh-duration-aero) var(--sh-ease-liquid),
                transform var(--sh-duration-aero) var(--sh-ease-liquid);
}

.thread-send:hover:not(:disabled)[b-nvc605tsqn],
.thread-send:focus-visible:not(:disabled)[b-nvc605tsqn] {
    background: rgba(79, 209, 232, 0.24);
    transform: translateY(-1px);
}

.thread-send:disabled[b-nvc605tsqn] { opacity: 0.45; }

@media (max-width: 520px) {
    .thread-message.is-mine[b-nvc605tsqn] { margin-left: 0.75rem; }
    .thread-send[b-nvc605tsqn] { margin-left: 0; width: 100%; justify-content: center; }
}
/* /Components/Forms/AvatarField.razor.rz.scp.css */
/* La photo de profil : un disque, et les gestes à côté. */

.avf[b-u3pomyg51c] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.avf-preview[b-u3pomyg51c] {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 88px;
    width: 88px;
    aspect-ratio: 1;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid var(--sh-gold, #f0b400);
    border-radius: 50%;
    font-size: 2rem;
}

.avf-preview img[b-u3pomyg51c] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avf-busy[b-u3pomyg51c] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--sh-gold, #f0b400);
    background: rgba(0, 0, 0, 0.55);
}

.avf-side[b-u3pomyg51c] {
    display: flex;
    flex: 1 1 14rem;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
}

.avf-actions[b-u3pomyg51c] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* Le vrai champ de fichier est invisible et couvre le bouton : il ne s'ouvre que là, jamais sur un
   toucher ailleurs dans l'écran. */
.avf-pick[b-u3pomyg51c] {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.avf-pick[b-u3pomyg51c]  .avf-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.avf-note[b-u3pomyg51c] {
    margin: 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
}

.avf-error[b-u3pomyg51c] {
    margin: 0;
    color: #ff8b8b;
    font-size: 0.8rem;
}
/* /Components/Forms/ImageUploadField.razor.rz.scp.css */
/* Le champ d'image : un aperçu, et les deux gestes à côté. */

.iuf[b-4ux9htl35k] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.iuf-label[b-4ux9htl35k] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.iuf-body[b-4ux9htl35k] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.iuf-preview[b-4ux9htl35k] {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    font-size: 1.4rem;
}

.iuf-preview--wide[b-4ux9htl35k] { width: 9.5rem; aspect-ratio: 16 / 9; }
.iuf-preview--square[b-4ux9htl35k] { width: 4.5rem; aspect-ratio: 1; }

.iuf-preview img[b-4ux9htl35k] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.iuf-actions[b-4ux9htl35k] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* Le vrai champ de fichier est invisible et couvre le bouton : un clic n'importe où l'ouvre. */
.iuf-pick[b-4ux9htl35k] {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.iuf-pick.is-busy[b-4ux9htl35k] { cursor: progress; }

.iuf-pick[b-4ux9htl35k]  .iuf-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.iuf-hint[b-4ux9htl35k] { color: rgba(255, 255, 255, 0.45); }

.iuf-error[b-4ux9htl35k] { color: #ff8b8b; }
/* /Components/Help/HelpHubNav.razor.rz.scp.css */
/* Trois portes en pastilles, centrées : elles se lisent comme un sommaire, pas comme des onglets
   d'application. Défilent seules sur un téléphone étroit plutôt que de passer à la ligne. */

.hub-nav[b-vz2rr9boen] {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    margin: 0 auto 2rem;
    padding: 0.3rem;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    scrollbar-width: none;
}

.hub-nav[b-vz2rr9boen]::-webkit-scrollbar {
    display: none;
}

.hub-nav__item[b-vz2rr9boen] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.hub-nav__item:hover[b-vz2rr9boen] {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.hub-nav__item.is-on[b-vz2rr9boen] {
    color: #111;
    background: var(--sh-gold, #f0b400);
}

.hub-nav__item i[b-vz2rr9boen] {
    font-size: 0.95rem;
}
/* /Components/Help/HelpMock.razor.rz.scp.css */
/* Des écrans en miniature. Une fenêtre sombre, une barre à trois points, et dedans l'idée à
   montrer. La couleur d'accent vient du parcours (--hc-accent), celle de l'espace concerné. */

.hm[b-mbi698f1vj] {
    --a: var(--hc-accent, var(--sh-gold, #f0b400));
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    background: #0d0d10;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.8);
    user-select: none;
}

.hm-bar[b-mbi698f1vj] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.03);
}

.hm-bar span[b-mbi698f1vj] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
}

.hm-bar em[b-mbi698f1vj] {
    margin-left: 0.5rem;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.hm-screen[b-mbi698f1vj] {
    padding: 0.9rem;
}

b[b-mbi698f1vj], strong[b-mbi698f1vj] {
    color: #fff;
}

/* ------------------------------------------------------------------ recherche */

.hm-search[b-mbi698f1vj] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.hm-input[b-mbi698f1vj] {
    padding: 0.45rem 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9px;
    color: rgba(255, 255, 255, 0.55);
}

.hm-studio[b-mbi698f1vj] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
}

.hm-thumb[b-mbi698f1vj] {
    display: grid;
    flex: 0 0 2.2rem;
    place-items: center;
    height: 2.2rem;
    border-radius: 8px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--a) 45%, transparent), rgba(155, 89, 182, 0.35));
    color: #fff;
}

.hm-studio__main[b-mbi698f1vj] {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.hm-studio__main span[b-mbi698f1vj] {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.7rem;
}

.hm-studio__side[b-mbi698f1vj] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
}

.hm-price[b-mbi698f1vj] {
    color: var(--sh-gold, #f0b400);
    font-weight: 800;
    font-size: 0.72rem;
}

.hm-pill[b-mbi698f1vj] {
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    font-size: 0.64rem;
    font-weight: 800;
}

.hm-pill--ok[b-mbi698f1vj] {
    background: rgba(74, 222, 128, 0.14);
    color: var(--sh-green, #4ade80);
}

.hm-pill--muted[b-mbi698f1vj] {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
}

/* ------------------------------------------------------------------ calendrier */

.hm-cal[b-mbi698f1vj] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.hm-cal__head[b-mbi698f1vj],
.hm-cal__row[b-mbi698f1vj] {
    display: grid;
    grid-template-columns: 2rem repeat(3, 1fr);
    gap: 3px;
}

.hm-cal__head span[b-mbi698f1vj] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.68rem;
    font-weight: 700;
    text-align: center;
}

.hm-cal__h[b-mbi698f1vj] {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.66rem;
}

.hm-cell[b-mbi698f1vj] {
    height: 1.15rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
}

.hm-cell.is-busy[b-mbi698f1vj],
.hm-sw.is-busy[b-mbi698f1vj] {
    background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.08) 0 4px, transparent 4px 8px);
}

.hm-cell.is-picked[b-mbi698f1vj],
.hm-sw.is-picked[b-mbi698f1vj] {
    background: var(--a);
    box-shadow: 0 0 12px color-mix(in srgb, var(--a) 45%, transparent);
}

.hm-cal__legend[b-mbi698f1vj] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.4rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.68rem;
}

.hm-sw[b-mbi698f1vj] {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 3px;
    margin-left: 0.4rem;
}

/* ------------------------------------------------------------------ étapes */

.hm-flow[b-mbi698f1vj] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hm-flow[b-mbi698f1vj]::before {
    content: "";
    position: absolute;
    left: 0.85rem;
    top: 0.8rem;
    bottom: 0.8rem;
    width: 2px;
    background: rgba(255, 255, 255, 0.08);
}

.hm-flow li[b-mbi698f1vj] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.hm-flow i[b-mbi698f1vj] {
    display: grid;
    flex: 0 0 1.75rem;
    place-items: center;
    height: 1.75rem;
    border-radius: 50%;
    background: #1b1b20;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.5);
}

.hm-flow span[b-mbi698f1vj] {
    display: flex;
    flex-direction: column;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.72rem;
}

.hm-flow .is-done i[b-mbi698f1vj] {
    border-color: rgba(74, 222, 128, 0.5);
    color: var(--sh-green, #4ade80);
}

.hm-flow .is-now i[b-mbi698f1vj] {
    border-color: var(--sh-amber, #d4a574);
    color: var(--sh-amber, #d4a574);
    animation: hm-pulse-b-mbi698f1vj 1.8s ease-in-out infinite;
}

.hm-flow .is-money i[b-mbi698f1vj] {
    border-color: var(--sh-gold, #f0b400);
    background: rgba(240, 180, 0, 0.14);
    color: var(--sh-gold, #f0b400);
}

/* ------------------------------------------------------------------ annulation */

.hm-policy__track[b-mbi698f1vj] {
    position: relative;
    display: grid;
    grid-template-columns: 3fr 1.3fr;
    height: 2rem;
    overflow: hidden;
    border-radius: 9px;
}

.hm-policy__free[b-mbi698f1vj],
.hm-policy__fee[b-mbi698f1vj] {
    display: grid;
    place-items: center;
    font-size: 0.7rem;
    font-weight: 800;
}

.hm-policy__free[b-mbi698f1vj] {
    background: rgba(74, 222, 128, 0.16);
    color: var(--sh-green, #4ade80);
}

.hm-policy__fee[b-mbi698f1vj] {
    background: rgba(255, 139, 139, 0.14);
    color: #ff8b8b;
}

.hm-policy__start[b-mbi698f1vj] {
    position: absolute;
    right: 0.3rem;
    top: 50%;
    transform: translateY(-50%);
    color: #ff4747;
}

.hm-policy__scale[b-mbi698f1vj] {
    display: flex;
    justify-content: space-between;
    margin-top: 0.3rem;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.64rem;
}

.hm-policy__scale span:nth-child(2)[b-mbi698f1vj] {
    margin-left: 30%;
}

.hm-policy__note[b-mbi698f1vj] {
    margin-top: 0.7rem;
    padding: 0.45rem 0.55rem;
    border-radius: 8px;
    background: rgba(77, 171, 247, 0.08);
    color: rgba(255, 255, 255, 0.7);
}

.hm-policy__note i[b-mbi698f1vj] {
    color: var(--sh-blue, #4dabf7);
}

/* ------------------------------------------------------------------ REC */

.hm-rec__bar[b-mbi698f1vj] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.65rem;
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(255, 71, 71, 0.22), rgba(255, 71, 71, 0.06));
    color: #ff6b6b;
    font-weight: 900;
    letter-spacing: 0.05em;
}

.hm-rec__dot[b-mbi698f1vj] {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: #ff4747;
    box-shadow: 0 0 10px #ff4747;
    animation: hm-blink-b-mbi698f1vj 1.2s steps(2, jump-none) infinite;
}

.hm-rec__time[b-mbi698f1vj] {
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.hm-rec__room[b-mbi698f1vj] {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 600;
    letter-spacing: 0;
}

.hm-bubbles[b-mbi698f1vj] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.7rem;
}

.hm-bubble[b-mbi698f1vj] {
    align-self: flex-start;
    max-width: 85%;
    padding: 0.35rem 0.55rem;
    border-radius: 10px 10px 10px 3px;
    background: rgba(255, 255, 255, 0.06);
}

.hm-bubble b[b-mbi698f1vj] {
    display: block;
    color: var(--sh-gold, #f0b400);
    font-size: 0.64rem;
}

.hm-bubble.is-mine[b-mbi698f1vj] {
    align-self: flex-end;
    border-radius: 10px 10px 3px 10px;
    background: color-mix(in srgb, var(--a) 22%, transparent);
}

.hm-bubble.is-mine b[b-mbi698f1vj] {
    color: var(--a);
}

/* ------------------------------------------------------------------ avis et journal */

.hm-stars[b-mbi698f1vj] {
    color: var(--sh-gold, #f0b400);
    font-size: 0.95rem;
    letter-spacing: 0.1em;
}

.hm-review p[b-mbi698f1vj] {
    margin: 0.3rem 0 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
}

.hm-ledger[b-mbi698f1vj] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.35rem 0.5rem;
    padding-top: 0.6rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.hm-ledger span[b-mbi698f1vj] {
    color: rgba(255, 255, 255, 0.55);
}

.hm-ledger .is-out[b-mbi698f1vj] {
    color: #fff;
}

.hm-ledger .is-in[b-mbi698f1vj] {
    color: var(--sh-green, #4ade80);
}

/* ------------------------------------------------------------------ horaires */

.hm-hours[b-mbi698f1vj] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.hm-hours__row[b-mbi698f1vj] {
    display: grid;
    grid-template-columns: 2rem 1fr;
    align-items: center;
    gap: 0.4rem;
}

.hm-hours__row > span[b-mbi698f1vj] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.7rem;
}

.hm-hours__track[b-mbi698f1vj] {
    position: relative;
    height: 0.8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
}

.hm-hours__track i[b-mbi698f1vj] {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--a) 70%, transparent), var(--a));
}

/* Les repères sont posés à leur heure (style « left » en ligne), centrés sur elle. La marge suit
   la colonne des jours : 2rem de libellé et 0.4rem d'écart, comme .hm-hours__row. */
.hm-hours__scale[b-mbi698f1vj] {
    position: relative;
    height: 0.9rem;
    margin-left: 2.4rem;
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.62rem;
}

.hm-hours__scale span[b-mbi698f1vj] {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    white-space: nowrap;
}

.hm-hours__scale span:first-child[b-mbi698f1vj] {
    transform: none;
}

.hm-hours__scale span:last-child[b-mbi698f1vj] {
    transform: translateX(-100%);
}

/* ------------------------------------------------------------------ formulaire */

.hm-form[b-mbi698f1vj] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.hm-field[b-mbi698f1vj] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.hm-field > span[b-mbi698f1vj] {
    color: rgba(255, 255, 255, 0.6);
}

.hm-field--row[b-mbi698f1vj] {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.hm-slider[b-mbi698f1vj] {
    position: relative;
    display: flex;
    align-items: center;
    height: 1.2rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
}

.hm-slider i[b-mbi698f1vj] {
    height: 100%;
    border-radius: 999px;
    background: var(--sh-gold, #f0b400);
}

.hm-slider b[b-mbi698f1vj] {
    position: absolute;
    right: 0.5rem;
    color: var(--sh-gold, #f0b400);
    font-size: 0.7rem;
}

.hm-toggle[b-mbi698f1vj] {
    position: relative;
    width: 2.1rem;
    height: 1.15rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
}

.hm-toggle i[b-mbi698f1vj] {
    position: absolute;
    top: 0.15rem;
    left: 0.15rem;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    background: #fff;
}

.hm-toggle.is-on[b-mbi698f1vj] {
    background: var(--sh-green, #4ade80);
}

.hm-toggle.is-on i[b-mbi698f1vj] {
    left: auto;
    right: 0.15rem;
}

.hm-val[b-mbi698f1vj] {
    color: var(--sh-gold, #f0b400);
}

/* ------------------------------------------------------------------ net */

.hm-net[b-mbi698f1vj] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.hm-net > div[b-mbi698f1vj] {
    display: flex;
    justify-content: space-between;
}

.hm-net span[b-mbi698f1vj] {
    color: rgba(255, 255, 255, 0.6);
}

.hm-net .is-minus b[b-mbi698f1vj] {
    color: #ff9c9c;
    font-weight: 600;
}

.hm-net .is-total[b-mbi698f1vj] {
    margin-top: 0.3rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.hm-net .is-total span[b-mbi698f1vj] {
    color: #fff;
    font-weight: 800;
}

.hm-net .is-total b[b-mbi698f1vj] {
    color: var(--sh-green, #4ade80);
    font-size: 0.95rem;
}

/* ------------------------------------------------------------------ équipe */

.hm-team[b-mbi698f1vj] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.hm-member[b-mbi698f1vj] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.hm-member strong[b-mbi698f1vj] {
    flex: 1;
}

.hm-avatar[b-mbi698f1vj] {
    display: grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-weight: 800;
}

/* ------------------------------------------------------------------ visibilité */

.hm-check[b-mbi698f1vj] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hm-check li[b-mbi698f1vj] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.hm-check .is-ok i[b-mbi698f1vj] {
    color: var(--sh-green, #4ade80);
}

.hm-check .is-ko[b-mbi698f1vj] {
    color: #fff;
}

.hm-check .is-ko i[b-mbi698f1vj] {
    color: #ff6b6b;
}

.hm-check__verdict[b-mbi698f1vj] {
    margin-top: 0.3rem;
    padding: 0.4rem 0.55rem;
    border-radius: 8px;
    background: rgba(212, 165, 116, 0.12);
    color: var(--sh-amber, #d4a574);
    font-weight: 700;
}

/* ------------------------------------------------------------------ formules */

/* La commission par formule : des barres qui descendent, et la courbe qui relie leurs sommets. */
.hm-plans-wrap[b-mbi698f1vj] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.hm-plans__caption[b-mbi698f1vj] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hm-plans__caption i[b-mbi698f1vj] {
    color: var(--sh-gold, #f0b400);
}

.hm-plans[b-mbi698f1vj] {
    --hm-plans-bar-h: 7rem;
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 0;
}

/* Même hauteur que la zone des barres, pour que le tracé et les hauteurs partagent un repère. */
.hm-plans__curve[b-mbi698f1vj] {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: var(--hm-plans-bar-h);
    overflow: visible;
    pointer-events: none;
}

.hm-plans__curve polyline[b-mbi698f1vj] {
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-dasharray: 5 4;
    opacity: 0.7;
    vector-effect: non-scaling-stroke;
}

.hm-plan[b-mbi698f1vj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0 0.22rem;
}

.hm-plan__bar[b-mbi698f1vj] {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: var(--hm-plans-bar-h);
}

.hm-plan i[b-mbi698f1vj] {
    width: 100%;
    border-radius: 6px 6px 2px 2px;
    background: linear-gradient(180deg, var(--sh-gold, #f0b400), rgba(240, 180, 0, 0.25));
}

/* Le taux flotte au-dessus de sa barre sans lui prendre de hauteur : la barre garde exactement
   le pourcentage que la courbe suppose. */
.hm-plan__bar .hm-plan__rate[b-mbi698f1vj] {
    position: absolute;
    bottom: calc(var(--h, 0%) + 0.2rem);
}

.hm-plan__rate[b-mbi698f1vj] {
    color: var(--sh-gold, #f0b400);
    font-weight: 900;
}

.hm-plan strong[b-mbi698f1vj] {
    font-size: 0.68rem;
}

.hm-plan span:last-child[b-mbi698f1vj] {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.64rem;
}

/* ------------------------------------------------------------------ disponibilités */

.hm-avail[b-mbi698f1vj] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.hm-avail__row[b-mbi698f1vj] {
    display: grid;
    grid-template-columns: 3rem 1fr;
    align-items: center;
}

.hm-avail__row > span[b-mbi698f1vj] {
    color: rgba(255, 255, 255, 0.5);
}

.hm-avail em[b-mbi698f1vj] {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--a) 18%, transparent);
    color: var(--a);
    font-style: normal;
    font-weight: 700;
}

.hm-avail em.is-off[b-mbi698f1vj] {
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.5);
    text-decoration: line-through;
}

/* ------------------------------------------------------------------ annonce */

.hm-invite[b-mbi698f1vj] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.hm-invite__tag[b-mbi698f1vj] {
    width: fit-content;
    margin-bottom: 0.3rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--a) 16%, transparent);
    color: var(--a);
    font-size: 0.68rem;
    font-weight: 800;
}

.hm-invite strong[b-mbi698f1vj] {
    font-size: 0.9rem;
}

.hm-invite > span[b-mbi698f1vj] {
    color: rgba(255, 255, 255, 0.55);
}

.hm-invite .hm-invite__rate[b-mbi698f1vj] {
    color: var(--sh-gold, #f0b400);
    font-weight: 700;
}

.hm-invite__actions[b-mbi698f1vj] {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.55rem;
}

.hm-btn[b-mbi698f1vj] {
    padding: 0.35rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    font-weight: 700;
}

.hm-btn--go[b-mbi698f1vj] {
    border-color: transparent;
    background: var(--a);
    color: #0b0b0b;
}

/* ------------------------------------------------------------------ code */

.hm-pin[b-mbi698f1vj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

.hm-pin__label[b-mbi698f1vj] {
    color: rgba(255, 255, 255, 0.6);
}

.hm-pin__dots[b-mbi698f1vj] {
    display: flex;
    gap: 0.55rem;
}

.hm-pin__dots i[b-mbi698f1vj] {
    width: 0.7rem;
    height: 0.7rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
}

.hm-pin__dots i.is-on[b-mbi698f1vj] {
    border-color: var(--a);
    background: var(--a);
}

.hm-pin__pad[b-mbi698f1vj] {
    display: grid;
    grid-template-columns: repeat(3, 2.2rem);
    gap: 0.35rem;
}

.hm-pin__pad span[b-mbi698f1vj] {
    display: grid;
    place-items: center;
    height: 1.9rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-weight: 700;
}

@keyframes hm-pulse-b-mbi698f1vj {
    0%, 100% { box-shadow: 0 0 0 0 rgba(212, 165, 116, 0.45); }
    50% { box-shadow: 0 0 0 6px rgba(212, 165, 116, 0); }
}

@keyframes hm-blink-b-mbi698f1vj {
    50% { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
    .hm-flow .is-now i[b-mbi698f1vj],
    .hm-rec__dot[b-mbi698f1vj] {
        animation: none;
    }
}
/* /Components/Help/LegalDocument.razor.rz.scp.css */
/* Un texte juridique : une colonne de lecture confortable, un sommaire collé à côté, des articles
   numérotés qu'on repère d'un coup d'œil. */

.legal[b-caekfigybw] {
    max-width: 70rem;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 4rem;
}

.legal-docs[b-caekfigybw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 2rem;
}

.legal-docs__item[b-caekfigybw] {
    padding: 0.4rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
}

.legal-docs__item:hover[b-caekfigybw] {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
}

.legal-docs__item.is-on[b-caekfigybw] {
    border-color: var(--sh-gold, #f0b400);
    background: rgba(240, 180, 0, 0.12);
    color: #fff;
}

.legal-head[b-caekfigybw] {
    max-width: 48rem;
    margin-bottom: 2.25rem;
    animation: legal-rise-b-caekfigybw 0.5s ease both;
}

.legal-kicker[b-caekfigybw] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.5rem;
    color: var(--sh-gold, #f0b400);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.legal-title[b-caekfigybw] {
    margin: 0 0 0.5rem;
    color: #fff;
    font-size: clamp(1.8rem, 5vw, 2.6rem);
    font-weight: 900;
    line-height: 1.1;
}

.legal-date[b-caekfigybw] {
    margin: 0 0 1rem;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.85rem;
}

.legal-summary[b-caekfigybw] {
    padding: 1rem 1.2rem;
    border-left: 3px solid var(--sh-blue, #4dabf7);
    border-radius: 0 14px 14px 0;
    background: rgba(77, 171, 247, 0.07);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    line-height: 1.6;
}

.legal-summary[b-caekfigybw]  ul {
    margin: 0.4rem 0 0;
    padding-left: 1.1rem;
}

.legal-summary[b-caekfigybw]  li {
    margin-bottom: 0.25rem;
}

.legal-summary[b-caekfigybw]  b {
    color: #fff;
}

.legal-draft[b-caekfigybw] {
    display: flex;
    gap: 0.6rem;
    margin-top: 1rem;
    padding: 0.8rem 1rem;
    border: 1px dashed rgba(240, 180, 0, 0.45);
    border-radius: 14px;
    background: rgba(240, 180, 0, 0.06);
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.88rem;
    line-height: 1.5;
}

.legal-draft i[b-caekfigybw] {
    color: var(--sh-gold, #f0b400);
}

.legal-draft b[b-caekfigybw] {
    color: #fff;
}

.legal-draft mark[b-caekfigybw] {
    padding: 0 0.3rem;
    border-radius: 4px;
    background: rgba(240, 180, 0, 0.18);
    color: var(--sh-gold, #f0b400);
}

.legal-body[b-caekfigybw] {
    display: grid;
    grid-template-columns: 15rem minmax(0, 48rem);
    gap: 3rem;
    align-items: start;
}

@media (max-width: 900px) {
    .legal-body[b-caekfigybw] {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }
}

.legal-toc[b-caekfigybw] {
    position: sticky;
    top: calc(var(--sh-header-h, 4.8rem) + 1rem);
    max-height: calc(100vh - var(--sh-header-h, 4.8rem) - 2rem);
    overflow-y: auto;
}

@media (max-width: 900px) {
    .legal-toc[b-caekfigybw] {
        position: static;
        max-height: none;
        padding: 1rem;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 14px;
    }
}

.legal-toc__title[b-caekfigybw] {
    margin: 0 0 0.6rem;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.legal-toc ol[b-caekfigybw] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: art;
}

.legal-toc li[b-caekfigybw] {
    counter-increment: art;
}

.legal-toc a[b-caekfigybw] {
    display: flex;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.84rem;
    line-height: 1.4;
    text-decoration: none;
}

.legal-toc a[b-caekfigybw]::before {
    content: counter(art);
    flex: 0 0 1.2rem;
    color: var(--sh-gold, #f0b400);
    font-weight: 800;
}

.legal-toc a:hover[b-caekfigybw] {
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
}

/* ------------------------------------------------------------------ le texte */

.legal-text[b-caekfigybw] {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.96rem;
    line-height: 1.72;
    counter-reset: article;
}

.legal-text[b-caekfigybw]  section {
    padding: 1.6rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    scroll-margin-top: calc(var(--sh-header-h, 4.8rem) + 1rem);
    counter-increment: article;
}

.legal-text[b-caekfigybw]  section:first-child {
    padding-top: 0;
    border-top: 0;
}

.legal-text[b-caekfigybw]  h2 {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    margin: 0 0 0.8rem;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1.3;
}

.legal-text[b-caekfigybw]  h2::before {
    content: counter(article);
    display: inline-grid;
    flex: 0 0 1.9rem;
    place-items: center;
    height: 1.9rem;
    border-radius: 9px;
    background: rgba(240, 180, 0, 0.12);
    color: var(--sh-gold, #f0b400);
    font-size: 0.85rem;
}

.legal-text[b-caekfigybw]  h3 {
    margin: 1.2rem 0 0.5rem;
    color: rgba(255, 255, 255, 0.95);
    font-size: 1rem;
    font-weight: 800;
}

.legal-text[b-caekfigybw]  p {
    margin: 0 0 0.8rem;
}

.legal-text[b-caekfigybw]  ul,
.legal-text[b-caekfigybw]  ol {
    margin: 0 0 0.9rem;
    padding-left: 1.25rem;
}

.legal-text[b-caekfigybw]  li {
    margin-bottom: 0.35rem;
}

.legal-text[b-caekfigybw]  li::marker {
    color: var(--sh-gold, #f0b400);
}

.legal-text[b-caekfigybw]  strong,
.legal-text[b-caekfigybw]  b {
    color: #fff;
}

.legal-text[b-caekfigybw]  a {
    color: var(--sh-gold, #f0b400);
}

.legal-text[b-caekfigybw]  dl {
    display: grid;
    grid-template-columns: minmax(9rem, 14rem) 1fr;
    gap: 0.5rem 1rem;
    margin: 0 0 1rem;
    padding: 1rem 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.02);
}

@media (max-width: 560px) {
    .legal-text[b-caekfigybw]  dl {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.1rem;
    }

    .legal-text[b-caekfigybw]  dd {
        margin-bottom: 0.6rem;
    }
}

.legal-text[b-caekfigybw]  dt {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.86rem;
}

.legal-text[b-caekfigybw]  dd {
    margin: 0;
    color: #fff;
}

.legal-text[b-caekfigybw]  table {
    width: 100%;
    margin: 0 0 1rem;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.legal-text[b-caekfigybw]  th,
.legal-text[b-caekfigybw]  td {
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    text-align: left;
    vertical-align: top;
}

.legal-text[b-caekfigybw]  th {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.legal-text[b-caekfigybw]  .legal-table {
    overflow-x: auto;
}

.legal-text[b-caekfigybw]  .legal-callout {
    margin: 0 0 1rem;
    padding: 0.8rem 1rem;
    border-radius: 12px;
    background: rgba(77, 171, 247, 0.07);
    border: 1px solid rgba(77, 171, 247, 0.2);
}

.legal-contact[b-caekfigybw] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 2rem;
    padding: 1rem 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    font-size: 0.9rem;
}

.legal-contact i[b-caekfigybw] {
    color: var(--sh-gold, #f0b400);
}

.legal-contact a[b-caekfigybw] {
    color: var(--sh-gold, #f0b400);
    font-weight: 700;
}

@keyframes legal-rise-b-caekfigybw {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}
/* /Components/Help/LegalTodo.razor.rz.scp.css */
.legal-todo[b-81fof7ctu3] {
    padding: 0.05rem 0.35rem;
    border: 1px dashed rgba(240, 180, 0, 0.55);
    border-radius: 6px;
    background: rgba(240, 180, 0, 0.12);
    color: var(--sh-gold, #f0b400);
    font-size: 0.92em;
    font-weight: 700;
}
/* /Components/Help/SupportConversation.razor.rz.scp.css */
/* Une demande de support : l'en-tête qui dit où l'on en est, la conversation, la réponse.

   Le support parle depuis la gauche, sur un filet or — c'est la voix de StudioHub, et elle doit se
   repérer d'un coup d'œil dans un fil de dix messages. La personne, depuis la droite, en gris. */

.spc[b-nh9mt11heb] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.spc-head__line[b-nh9mt11heb] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
}

.spc-number[b-nh9mt11heb] {
    color: var(--sh-gold, #f0b400);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.spc-subject[b-nh9mt11heb] {
    margin: 0 0 0.75rem;
    color: #fff;
    font-size: clamp(1.35rem, 4vw, 1.8rem);
    font-weight: 900;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.spc-meta[b-nh9mt11heb] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.spc-chip[b-nh9mt11heb] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.78rem;
    font-weight: 600;
}

.spc-chip i[b-nh9mt11heb] {
    color: var(--sh-gold, #f0b400);
}

.spc-chip--session i[b-nh9mt11heb] {
    color: var(--sh-blue, #4dabf7);
}

.spc-chip--muted[b-nh9mt11heb] {
    color: rgba(255, 255, 255, 0.5);
}

.spc-requester[b-nh9mt11heb] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    margin-top: 0.9rem;
    padding: 0.7rem 0.9rem;
    border: 1px dashed rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    font-size: 0.85rem;
}

.spc-requester i[b-nh9mt11heb] {
    color: var(--sh-aqua, #4fd1e8);
}

.spc-requester__name[b-nh9mt11heb] {
    color: #fff;
    font-weight: 800;
}

.spc-requester__mail[b-nh9mt11heb] {
    color: var(--sh-blue, #4dabf7);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.spc-requester__kind[b-nh9mt11heb] {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.78rem;
}

/* ------------------------------------------------------------------ le fil */

.spc-thread[b-nh9mt11heb] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.spc-msg[b-nh9mt11heb] {
    max-width: min(40rem, 92%);
    padding: 0.85rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.035);
    animation: spc-arrive-b-nh9mt11heb 0.35s ease both;
}

.spc-msg.is-mine[b-nh9mt11heb] {
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

.spc-msg:not(.is-mine)[b-nh9mt11heb] {
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}

.spc-msg--staff[b-nh9mt11heb] {
    border-color: rgba(240, 180, 0, 0.22);
    border-left: 3px solid var(--sh-gold, #f0b400);
    background: linear-gradient(135deg, rgba(240, 180, 0, 0.08), rgba(240, 180, 0, 0.02));
}

.spc-msg.is-new[b-nh9mt11heb] {
    box-shadow: 0 0 0 1px rgba(77, 171, 247, 0.35);
}

.spc-msg__who[b-nh9mt11heb] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}

.spc-avatar[b-nh9mt11heb] {
    display: grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
}

.spc-avatar--staff[b-nh9mt11heb] {
    background: var(--sh-gold, #f0b400);
    color: #111;
}

.spc-msg__name[b-nh9mt11heb] {
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
}

.spc-msg__who[b-nh9mt11heb]  .spc-msg__time {
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.75rem;
}

.spc-new[b-nh9mt11heb] {
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: rgba(77, 171, 247, 0.16);
    color: var(--sh-blue, #4dabf7);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Le texte tel qu'il a été écrit, retours à la ligne compris : un pas-à-pas perd son sens en un
   seul paragraphe. */
.spc-msg__body[b-nh9mt11heb] {
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.93rem;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ la réponse */

.spc-compose[b-nh9mt11heb] {
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.025);
}

.spc-closed-note[b-nh9mt11heb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.8rem;
    color: var(--sh-green, #4ade80);
    font-size: 0.85rem;
}

.spc-label[b-nh9mt11heb] {
    display: block;
    margin-bottom: 0.4rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
    font-weight: 700;
}

.spc-textarea[b-nh9mt11heb] {
    width: 100%;
    min-height: 6rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 0.93rem;
    line-height: 1.55;
    resize: vertical;
}

.spc-textarea:focus[b-nh9mt11heb] {
    outline: none;
    border-color: var(--sh-gold, #f0b400);
    box-shadow: 0 0 0 3px rgba(240, 180, 0, 0.15);
}

.spc-compose__foot[b-nh9mt11heb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.6rem;
}

.spc-count[b-nh9mt11heb] {
    color: rgba(255, 255, 255, 0.38);
    font-size: 0.75rem;
}

.spc-count.is-over[b-nh9mt11heb] {
    color: #ff8b8b;
}

.spc-actions[b-nh9mt11heb] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-left: auto;
}

.spc-error[b-nh9mt11heb] {
    margin: 0.6rem 0 0;
    color: #ff8b8b;
    font-size: 0.85rem;
}

@keyframes spc-arrive-b-nh9mt11heb {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .spc-msg[b-nh9mt11heb] { animation: none; }
}
/* /Components/ItemCard.razor.rz.scp.css */
/* La fiche d'élément, unique dans l'application.

   Même verre, même rayon, même bordure que la section : ce sont deux surfaces de la même
   famille, et rien ne justifiait qu'elles diffèrent. Ce qui les sépare est structurel, pas
   décoratif — la fiche a un pied d'actions et peut être cliquable, la section non. */

.item-card[b-rhcy5ne93x] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--sh-glass-bg);
    border: 1px solid var(--sh-glass-border);
    border-radius: var(--sh-radius-aero-sm);
    backdrop-filter: var(--sh-glass-blur);
    -webkit-backdrop-filter: var(--sh-glass-blur);
    overflow: hidden;
}

.item-card.is-clickable[b-rhcy5ne93x] {
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.item-card.is-clickable:hover[b-rhcy5ne93x],
.item-card.is-clickable:focus-visible[b-rhcy5ne93x] {
    border-color: var(--sh-gold-dim, rgba(212, 175, 55, 0.45));
    transform: translateY(-2px);
}

.item-card.is-clickable:focus-visible[b-rhcy5ne93x] {
    outline: 2px solid var(--sh-gold);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .item-card.is-clickable[b-rhcy5ne93x] { transition: none; }
    .item-card.is-clickable:hover[b-rhcy5ne93x] { transform: none; }
}

.item-card__head[b-rhcy5ne93x] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--sh-glass-border);
}

/* Le titre d'une fiche nomme une chose : il se lit, il ne se crie pas. C'est ce qui le
   distingue du titre de section, en petites capitales espacées. */
.item-card__title[b-rhcy5ne93x] {
    margin: 0;
    min-width: 0;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-card__aside[b-rhcy5ne93x] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
    flex-shrink: 0;
}

.item-card__body[b-rhcy5ne93x] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    padding: 1rem;
}

.item-card__actions[b-rhcy5ne93x] {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--sh-glass-border);
}

/* Deux formes de ligne suffisent au corps de toutes les fiches existantes : un renseignement
   (icône + texte) et une mesure (intitulé à gauche, valeur à droite). Elles étaient réécrites
   à chaque fois en « d-flex justify-content-between align-items-center mb-3 ». */
.item-card[b-rhcy5ne93x]  .item-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.85rem;
    min-width: 0;
}

.item-card[b-rhcy5ne93x]  .item-meta i { color: rgba(255, 255, 255, 0.4); }

.item-card[b-rhcy5ne93x]  .item-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.item-card[b-rhcy5ne93x]  .item-line dt,
.item-card[b-rhcy5ne93x]  .item-line .item-line__label {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.85rem;
}

.item-card[b-rhcy5ne93x]  .item-line dd,
.item-card[b-rhcy5ne93x]  .item-line .item-line__value {
    margin: 0;
    color: #fff;
    font-weight: 700;
    text-align: right;
}

.item-card[b-rhcy5ne93x]  .item-line__value--money { color: var(--sh-gold); }

.item-card[b-rhcy5ne93x]  .item-card__note {
    margin: 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.85rem;
    line-height: 1.5;
}

/* Le logo d'un studio, ou son absence : même carré dans les deux cas, sinon la grille de
   fiches se décale dès qu'un studio n'a pas d'image. */
.item-card[b-rhcy5ne93x]  .item-card__logo {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--sh-radius-aero-sm);
    object-fit: cover;
}

.item-card[b-rhcy5ne93x]  .item-card__logo--empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--sh-glass-border);
    color: rgba(255, 255, 255, 0.35);
}
/* /Components/Media/MediaLightbox.razor.rz.scp.css */
/* La visionneuse. Préfixe « mlb » : vérifié — grep "mlb__" sur src/StudioHub.Client ne renvoyait
   rien avant ce fichier, le préfixe est libre. */

.mlb[b-nk7thk651w] {
    position: fixed;
    inset: 0;
    /* Échelle commune de src/wwwroot/css/app.css : la visionneuse occupe la couche Modal
       d'OverlayCoordinator, comme ConfirmDialog — pas de +1, les deux s'excluent déjà l'une
       l'autre au niveau du coordinateur, elles n'ont aucune raison de s'empiler. */
    z-index: var(--sh-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5, 5, 5, 0.94);
    padding: 1rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}

.mlb__stage[b-nk7thk651w] {
    margin: 0;
    max-width: min(100%, 1200px);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.mlb__image[b-nk7thk651w] {
    max-width: 100%;
    max-height: calc(100vh - 6rem);
    object-fit: contain;
    border-radius: 0.5rem;
}

.mlb__counter[b-nk7thk651w] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    letter-spacing: 0.08em;
}

.mlb__close[b-nk7thk651w],
.mlb__nav[b-nk7thk651w] {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 1.15rem;
}

.mlb__close[b-nk7thk651w] {
    top: calc(1rem + env(safe-area-inset-top));
    right: 1rem;
}

.mlb__nav--prev[b-nk7thk651w] { left: 1rem; }
.mlb__nav--next[b-nk7thk651w] { right: 1rem; }

/* Sur téléphone, les flèches recouvriraient l'image : le glissement au doigt les remplace. */
@media (max-width: 767px) {
    .mlb__nav[b-nk7thk651w] { display: none; }
    .mlb__image[b-nk7thk651w] { max-height: calc(100vh - 9rem); }
}
/* /Components/NotificationCenter.razor.rz.scp.css */
/* Le centre de notifications, ouvert depuis la cloche de la barre du haut. */

.notification-center-wrapper[b-ltukyz9ksf] {
    position: relative;
}

.notification-bell-btn[b-ltukyz9ksf] {
    background: transparent;
    border: none;
    color: white;
    font-size: 1.25rem;
    padding: 8px 12px;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.notification-bell-btn:hover[b-ltukyz9ksf] {
    background: rgba(255, 215, 0, 0.1);
    color: var(--sh-gold);
}

.notification-bell-btn.active[b-ltukyz9ksf] {
    background: rgba(255, 215, 0, 0.15);
    color: var(--sh-gold);
}

.notification-badge[b-ltukyz9ksf] {
    position: absolute;
    top: 0;
    right: 0;
    background: #ff4d4d;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 900;
    box-shadow: 0 2px 8px rgba(255, 77, 77, 0.4);
}


.notification-dropdown-panel[b-ltukyz9ksf] {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    width: 380px;
    background: var(--sh-elev-3-bg);
    border: 1px solid rgba(255, 215, 0, 0.15);
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), var(--sh-elev-3-shadow);
    z-index: var(--sh-z-dropdown);
    display: flex;
    flex-direction: column;
    max-height: 600px;
    animation: dropdown-in-b-ltukyz9ksf 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes dropdown-in-b-ltukyz9ksf {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.notification-panel-header[b-ltukyz9ksf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    padding: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Le retour n'a de sens que dans la feuille de verre, où le panneau occupe toute la place et où
   le menu qu'on quitte n'est plus visible. Sur grand écran le panneau flotte au-dessus de la page :
   cliquer à côté referme, et un bouton « Menu » y désignerait un menu qu'on n'a jamais quitté.
   C'est la barre du haut qui l'affiche, par ::deep, là où elle sait qu'on est dans la feuille. */
.notification-panel-back[b-ltukyz9ksf] {
    display: none;
}

.notification-panel-title[b-ltukyz9ksf] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: white;
    margin: 0;
}

/* Combien reste à lire, dit en toutes lettres : la pastille de la cloche donne le nombre, elle
   ne dit pas de quoi. */
.notification-panel-count[b-ltukyz9ksf] {
    color: var(--sh-gold);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.btn-mark-all-read[b-ltukyz9ksf] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: transparent;
    border: 1px solid rgba(255, 215, 0, 0.25);
    color: var(--sh-gold);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 999px;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.btn-mark-all-read:hover[b-ltukyz9ksf] {
    background: rgba(255, 215, 0, 0.12);
    border-color: var(--sh-gold);
}

.notification-list-container[b-ltukyz9ksf] {
    flex: 1;
    overflow-y: auto;
    max-height: 420px;
}

.notification-list-container[b-ltukyz9ksf]::-webkit-scrollbar {
    width: 6px;
}

.notification-list-container[b-ltukyz9ksf]::-webkit-scrollbar-track {
    background: transparent;
}

.notification-list-container[b-ltukyz9ksf]::-webkit-scrollbar-thumb {
    background: rgba(255, 215, 0, 0.2);
    border-radius: 3px;
}

.notification-list-container[b-ltukyz9ksf]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 215, 0, 0.3);
}

/* Le partage entre ce qui attend un geste et ce qui informe. Discret : c'est un repère de
   lecture, pas un titre — il ne doit pas peser plus que les lignes qu'il annonce. */
.notification-group-label[b-ltukyz9ksf] {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.5rem 0.9rem 0.35rem;
    background: var(--sh-panel, #131313);
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.63rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.notification-group-label:not(:first-child)[b-ltukyz9ksf] {
    margin-top: 0.35rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.notification-empty-state[b-ltukyz9ksf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
}

.notification-empty-state i[b-ltukyz9ksf] {
    font-size: 2rem;
    margin-bottom: 12px;
}

.notification-empty-state p[b-ltukyz9ksf] {
    margin: 0 0 6px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
    font-weight: 600;
}

/* Un vide qui dit ce qui viendra s'y ranger : « Aucune notification » laissait croire à une
   panne autant qu'à un calme. */
.notification-empty-state small[b-ltukyz9ksf] {
    max-width: 22rem;
    font-size: 0.76rem;
    line-height: 1.45;
}

.notification-item[b-ltukyz9ksf] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px 12px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.15s ease;
    cursor: pointer;
}

.notification-item:hover[b-ltukyz9ksf] { background: rgba(255, 255, 255, 0.05); }

/* Le point de non-lu. Il tient sa propre colonne : le fond très légèrement teinté qui marquait
   auparavant une non-lue se confondait avec le survol, et depuis que les lues restent dans le
   journal, c'est la seule chose qui distingue une ligne d'une autre. */
.notification-item-dot[b-ltukyz9ksf] {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    margin-top: 16px;
    border-radius: 50%;
    background: var(--sh-gold);
}

.notification-item.is-read .notification-item-dot[b-ltukyz9ksf] { background: transparent; }

/* Une lue s'estompe, elle ne s'efface pas : elle reste lisible, elle cesse seulement de
   réclamer le regard. */
.notification-item.is-read[b-ltukyz9ksf] { opacity: 0.62; }
.notification-item.is-read:hover[b-ltukyz9ksf] { opacity: 1; }

/* Une décision déjà prise ailleurs — l'invitation répondue, le solde réglé — n'a plus rien à
   demander : le mot se barre plutôt que de continuer à réclamer un geste déjà fait. */
.notification-item.est-traite .notification-item-title[b-ltukyz9ksf],
.notification-item.est-traite .notification-item-message[b-ltukyz9ksf] {
    text-decoration: line-through;
    text-decoration-color: rgba(255, 255, 255, 0.35);
}

.notification-item-icon[b-ltukyz9ksf] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.95rem;
}

/* La famille se lit à la couleur du pictogramme : l'argent, une décision de séance et une
   invitation ne se cherchent pas de la même façon dans un journal. Toutes portaient l'or, qui ne
   distinguait rien et promettait de l'argent partout. */
.notification-item-icon--payment[b-ltukyz9ksf] { color: var(--sh-gold); background: rgba(240, 180, 0, 0.12); }
.notification-item-icon--reservation[b-ltukyz9ksf] { color: var(--sh-aqua); background: rgba(79, 209, 232, 0.12); }
.notification-item-icon--invitation[b-ltukyz9ksf] { color: var(--sh-pink); background: var(--sh-pink-glow); }
.notification-item-icon--engineer[b-ltukyz9ksf] { color: var(--sh-aqua); background: rgba(79, 209, 232, 0.1); }
.notification-item-icon--review[b-ltukyz9ksf] { color: #c9a6ff; background: rgba(201, 166, 255, 0.12); }
.notification-item-icon--system[b-ltukyz9ksf] { color: #ff8b8b; background: rgba(255, 139, 139, 0.12); }

.notification-item-content[b-ltukyz9ksf] {
    flex: 1;
    min-width: 0;
}

.notification-item-title[b-ltukyz9ksf] {
    font-size: 0.9rem;
    font-weight: 700;
    color: white;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notification-item-message[b-ltukyz9ksf] {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* La pastille d'espace (.sh-space, dans app.css) partage cette ligne avec l'heure. Elle porte
   la couleur de l'espace, la même que le sélecteur de la barre du haut ; elle écrivait jusqu'ici
   le mot en or quel que soit l'espace — or l'or est celui du propriétaire, si bien qu'une
   notification d'artiste s'annonçait dans la couleur de quelqu'un d'autre.

   La ligne passe à deux niveaux quand l'écran est étroit, plutôt que de pousser l'heure hors du
   cadre. */
.notification-item-time[b-ltukyz9ksf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
}

.notification-item-state[b-ltukyz9ksf] { font-style: italic; }

.notification-item-actions[b-ltukyz9ksf] {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Les gestes se montrent au survol — et au focus clavier, sans quoi ils étaient inatteignables
   autrement qu'à la souris. */
.notification-item:hover .notification-item-actions[b-ltukyz9ksf],
.notification-item:focus-within .notification-item-actions[b-ltukyz9ksf] { opacity: 1; }

@media (hover: none) {
    .notification-item-actions[b-ltukyz9ksf] { opacity: 1; }
}

.btn-read[b-ltukyz9ksf],
.btn-delete[b-ltukyz9ksf] {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.btn-read:hover[b-ltukyz9ksf] {
    color: var(--sh-gold);
    background: rgba(255, 215, 0, 0.1);
}

.btn-delete:hover[b-ltukyz9ksf] {
    color: #ff4d4d;
    background: rgba(255, 77, 77, 0.1);
}

.notification-panel-footer[b-ltukyz9ksf] {
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
}

.btn-view-all[b-ltukyz9ksf] {
    background: transparent;
    border: 1px solid rgba(255, 215, 0, 0.3);
    color: var(--sh-gold);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-view-all:hover[b-ltukyz9ksf] {
    background: rgba(255, 215, 0, 0.1);
    border-color: var(--sh-gold);
}

@media (max-width: 576px) {
    .notification-dropdown-panel[b-ltukyz9ksf] {
        position: fixed;
        top: auto;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        border-radius: 24px 24px 0 0;
        max-height: 80vh;
        animation: mobile-panel-in-b-ltukyz9ksf 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    @keyframes mobile-panel-in-b-ltukyz9ksf {
        from {
            transform: translateY(100%);
        }
        to {
            transform: translateY(0);
        }
    }
}

/* Le bandeau qui demande l'autorisation du navigateur.

   Un bouton pleine largeur, en tête de la liste : c'est un geste à faire, pas une remarque à
   lire, et il doit être atteignable au pouce sans viser. Il disparaît dès qu'on a répondu. */
.notification-permission[b-ltukyz9ksf] {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    width: 100%;
    margin: 0;
    padding: 0.8rem 1rem;
    text-align: left;
    background: rgba(240, 180, 0, 0.08);
    border: none;
    border-bottom: 1px solid rgba(240, 180, 0, 0.22);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.78rem;
    line-height: 1.45;
    cursor: pointer;
    transition: background 160ms ease;
}

.notification-permission:hover[b-ltukyz9ksf] {
    background: rgba(240, 180, 0, 0.14);
}

.notification-permission i[b-ltukyz9ksf] {
    color: var(--sh-gold);
    font-size: 1.05rem;
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.notification-permission strong[b-ltukyz9ksf] {
    display: block;
    color: var(--sh-gold);
    font-size: 0.82rem;
    margin-bottom: 2px;
}

/* Refusé : on le dit une fois, sans insister — c'est une décision de l'utilisateur, et elle ne se
   reprend que dans les réglages du navigateur. */
.notification-permission-refused[b-ltukyz9ksf] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.72rem;
    line-height: 1.4;
}

/* L'invitation à installer l'application.

   Elle vient après le bandeau d'autorisation, jamais à sa place : sur iPhone c'est le seul chemin
   vers les alertes, ailleurs c'est ce qui les rend fiables. Elle dit d'abord ce que ça change,
   puis nomme le geste — ou le déclenche, là où le navigateur nous y autorise. */
.notification-install[b-ltukyz9ksf] {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.notification-install > i[b-ltukyz9ksf] {
    color: var(--sh-gold);
    font-size: 1.1rem;
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.notification-install-corps[b-ltukyz9ksf] { min-width: 0; }

.notification-install-corps strong[b-ltukyz9ksf] {
    display: block;
    color: #fff;
    font-size: 0.82rem;
    margin-bottom: 3px;
}

.notification-install-corps p[b-ltukyz9ksf] {
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.74rem;
    line-height: 1.45;
}

/* Le geste, quand il faut le décrire : détaché du texte qui le motive, pour qu'on puisse le
   suivre sans relire le reste. */
.notification-install-geste[b-ltukyz9ksf] {
    margin-top: 0.5rem !important;
    padding: 0.5rem 0.65rem;
    background: rgba(240, 180, 0, 0.08);
    border-left: 2px solid var(--sh-gold);
    border-radius: 0 6px 6px 0;
    color: rgba(255, 255, 255, 0.8) !important;
}

.notification-install-btn[b-ltukyz9ksf] {
    margin-top: 0.6rem;
    padding: 0.5rem 0.9rem;
    border: none;
    border-radius: 8px;
    background: var(--sh-gold);
    color: #111;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

.notification-install-btn:hover[b-ltukyz9ksf] { background: #ffc61a; }

/* Le refus se dit comme le reste : ce qui bloque, puis où le reprendre. */
.notification-permission-refused strong[b-ltukyz9ksf] {
    display: block;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.76rem;
    margin-bottom: 2px;
}

/* L'espace d'origine, devant l'heure.

   Discret : il ne concurrence ni le titre ni le message, il lève seulement l'ambiguïté pour qui
   porte plusieurs casquettes. Pour un compte à rôle unique il ne dit rien de neuf, et sa
   discrétion est alors ce qui le rend supportable. */

.notification-item-sep[b-ltukyz9ksf] {
    margin: 0 0.3rem;
    color: rgba(255, 255, 255, 0.25);
}

/* Le titre du panneau est un chemin, et le dit.

   Pour atteindre l'ensemble des notifications, il fallait dérouler l'extrait jusqu'au pied et y
   trouver « Voir tout » : le raccourci vers la totalité passait par la totalité. Le titre y mène
   désormais, et l'icône de sortie annonce qu'on quitte le panneau — sans elle, un titre cliquable
   ne se distingue pas d'un titre. */
.notification-panel-title-link[b-ltukyz9ksf] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.notification-panel-title-link > i[b-ltukyz9ksf] {
    font-size: 0.72em;
    color: var(--sh-gray-400, #9a9a9a);
    transition: color 120ms ease, transform 120ms ease;
}

.notification-panel-title-link:hover[b-ltukyz9ksf],
.notification-panel-title-link:focus-visible[b-ltukyz9ksf] { color: var(--sh-gold); }

.notification-panel-title-link:hover > i[b-ltukyz9ksf],
.notification-panel-title-link:focus-visible > i[b-ltukyz9ksf] {
    color: var(--sh-gold);
    transform: translate(1px, -1px);
}
/* /Components/Onboarding/AccountStep.razor.rz.scp.css */
/* L'étape « compte » de l'accueil des nouveaux venus. */

.account-step[b-vh0a0d8kfm] { max-width: 560px; margin: 0 auto; }
.account-step-header[b-vh0a0d8kfm] { text-align: center; margin-bottom: 1.75rem; }
.account-step-title[b-vh0a0d8kfm] { font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.account-step-subtitle[b-vh0a0d8kfm] { color: rgba(255,255,255,0.6); margin: 0.4rem 0 0; }
.account-step-avatar[b-vh0a0d8kfm] { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; margin-bottom: 2rem; }
.account-step-fields[b-vh0a0d8kfm] { display: flex; flex-direction: column; gap: 1rem; }
/* Le pseudo se lit, il ne se saisit pas ici : présenté comme un fait acquis
   plutôt que comme un champ vide qui appellerait une réponse. */
.account-step-identity[b-vh0a0d8kfm] {
    display: flex; align-items: baseline; gap: 0.6rem;
    padding: 0.7rem 0.9rem; border-radius: 0.6rem;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
}
.account-step-identity-label[b-vh0a0d8kfm] {
    font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
    color: rgba(255,255,255,0.35);
}
.account-step-identity-value[b-vh0a0d8kfm] { font-weight: 700; color: rgba(255,255,255,0.92); }
.account-step-field label[b-vh0a0d8kfm] { display: block; color: rgba(255,255,255,0.7); font-size: 0.85rem; font-weight: 700; margin-bottom: 0.35rem; }
.account-step-field-row[b-vh0a0d8kfm] { display: flex; gap: 1rem; }
.account-step-field-row .account-step-field[b-vh0a0d8kfm] { flex: 1; }
.account-step-actions[b-vh0a0d8kfm] { display: flex; justify-content: center; margin-top: 2rem; }

/* Role accents — same shared variables as the /app launcher (app.css), so a role's
   color is consistent from the moment you pick it to every space it appears in. */
/* /Components/OwnerLoadingOverlay.razor.rz.scp.css */
/* Styles du composant, auparavant dans un <style> en ligne — donc globaux et injectés dans le DOM le temps de l'affichage. Scopés ici, ils ne visent plus que son propre balisage. */

.owner-loading-overlay[b-15obqfqmf6] {
    display: grid;
    place-items: center;
    color: var(--sh-white);
}
.owner-loading-overlay--content[b-15obqfqmf6] {
    position: absolute;
    inset: 0;
    min-height: 280px;
    z-index: 20;
    background: rgba(5, 5, 5, 0.74);
    backdrop-filter: blur(2px);
}
.owner-loading-overlay--blocking[b-15obqfqmf6] {
    position: fixed;
    inset: 0;
    z-index: var(--sh-z-critical);
    background: rgba(3, 3, 3, 0.9);
    backdrop-filter: blur(5px);
}
.owner-loading-panel--blocking[b-15obqfqmf6] { display: grid; justify-items: center; gap: 1.5rem; text-align: center; }
.owner-loading-panel--blocking .owner-loading-indicator[b-15obqfqmf6] { flex-direction: column; }
.owner-loading-brand[b-15obqfqmf6] { justify-content: center; }
.owner-loading-indicator[b-15obqfqmf6] { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; }
.owner-loading-message[b-15obqfqmf6] { font-size: 0.92rem; font-weight: 750; }
.owner-loading-detail[b-15obqfqmf6] { margin-top: 0.25rem; color: rgba(255, 255, 255, 0.5); font-size: 0.78rem; }
.owner-loading-spinner--large[b-15obqfqmf6] { width: 58px; height: 58px; border-width: 4px; }

@media (prefers-reduced-motion: reduce) {
    .owner-loading-overlay .sh-spinner-elite[b-15obqfqmf6] { animation-duration: 1.6s; }
}

/* La ronde de mots hérite du fond de l'overlay : sans cela son dégradé de rognage laisse deux
   bandes de la couleur par défaut au-dessus et en dessous.

   ::deep est indispensable : la racine d'un composant enfant ne porte pas le marqueur de scope
   du parent, et le sélecteur ne viserait donc jamais rien. */
.owner-loading-overlay--content[b-15obqfqmf6]  .owner-loading-words { --wl-bg: rgba(5, 5, 5, 0.74); }
.owner-loading-overlay--blocking[b-15obqfqmf6]  .owner-loading-words { --wl-bg: rgba(3, 3, 3, 0.9); }
/* /Components/OwnerWorkspaceShell.razor.rz.scp.css */
/* L'espace propriétaire : barre latérale des studios, leurs onglets, et la zone de contenu. */

.owner-workspace[b-uf4b7545sn] {
    display: grid;
    grid-template-columns: 244px minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    min-height: calc(100vh - 110px);
    align-items: stretch;
    transition: grid-template-columns 180ms ease;
}
.owner-workspace--collapsed[b-uf4b7545sn] { grid-template-columns: 68px minmax(0, 1fr); }
/* La colonne n'existe comme colonne qu'au-delà de 900 px. En dessous, c'est le tiroir commun
   (.sh-workspace-drawer, app.css) qui la place — et le CSS isolé, plus spécifique que le global,
   écraserait sa position s'il déclarait la sienne sans condition. */
@media (min-width: 901px) {
    .owner-workspace-sidebar[b-uf4b7545sn] {
        position: sticky;
        top: 0;
        align-self: start;
        height: calc(100vh - 110px);
        overflow-y: auto;
        padding: 0.75rem 0.65rem 1rem;
        border-right: 1px solid rgba(255, 255, 255, 0.08);
        scrollbar-width: thin;
    }
}
.owner-workspace-sidebar-header[b-uf4b7545sn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 36px;
    padding: 0 0.45rem 0.55rem;
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.owner-workspace--collapsed .owner-workspace-sidebar-header[b-uf4b7545sn] { justify-content: center; padding-inline: 0; }
.owner-workspace-collapse[b-uf4b7545sn] {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: rgba(255, 255, 255, 0.58);
    background: transparent;
    border: 0;
    border-radius: 6px;
}
.owner-workspace-collapse:hover[b-uf4b7545sn], .owner-workspace-collapse:focus-visible[b-uf4b7545sn] { color: var(--sh-white); background: rgba(255, 255, 255, 0.06); }
.owner-workspace-nav[b-uf4b7545sn] { display: grid; gap: 0.2rem; }
.owner-workspace-nav-label[b-uf4b7545sn] {
    margin: 0.9rem 0.65rem 0.3rem;
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.65rem;
    font-weight: 750;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
.owner-workspace-link[b-uf4b7545sn],
.owner-workspace-studio-toggle[b-uf4b7545sn],
.owner-workspace-sublink[b-uf4b7545sn] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    min-width: 0;
    color: rgba(255, 255, 255, 0.64);
    background: transparent;
    border: 0;
    border-radius: 7px;
    text-align: left;
    text-decoration: none;
}
.owner-workspace-link[b-uf4b7545sn],
.owner-workspace-studio-toggle[b-uf4b7545sn] { min-height: 38px; padding: 0.55rem 0.65rem; font-size: 0.86rem; font-weight: 650; }
.owner-workspace--collapsed .owner-workspace-link[b-uf4b7545sn],
.owner-workspace--collapsed .owner-workspace-studio-toggle[b-uf4b7545sn] { justify-content: center; padding-inline: 0; }
.owner-workspace-link:hover[b-uf4b7545sn],
.owner-workspace-link:focus-visible[b-uf4b7545sn],
.owner-workspace-studio-toggle:hover[b-uf4b7545sn],
.owner-workspace-studio-toggle:focus-visible[b-uf4b7545sn],
.owner-workspace-sublink:hover[b-uf4b7545sn],
.owner-workspace-sublink:focus-visible[b-uf4b7545sn] { color: var(--sh-white); background: rgba(255, 255, 255, 0.055); }
.owner-workspace-badge[b-uf4b7545sn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #ff4747;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    flex-shrink: 0;
}
.owner-workspace-link.active[b-uf4b7545sn],
.owner-workspace-studio.active > .owner-workspace-studio-toggle[b-uf4b7545sn] { color: var(--sh-white); background: rgba(255, 255, 255, 0.075); }
.owner-workspace-link.active > i[b-uf4b7545sn],
.owner-workspace-studio.active > .owner-workspace-studio-toggle > i:first-child[b-uf4b7545sn] { color: var(--sh-accent); }
/* Un bouton désactivé avale le survol sans l'émettre : l'enveloppe qui porte l'explication ne
   le verrait jamais. En le rendant transparent au pointeur, c'est elle qui le reçoit. */
.owner-workspace-link--disabled[b-uf4b7545sn] { opacity: 0.46; cursor: not-allowed; pointer-events: none; }
/* « ::deep », parce que l'enveloppe est rendue par Hint : la règle porterait sinon la portée
   de ce fichier, et ne rencontrerait jamais l'élément d'un autre composant. */
.owner-workspace-nav[b-uf4b7545sn]  .sh-hint:not(.sh-hint--bare) { cursor: not-allowed; width: 100%; }
.owner-workspace-link span[b-uf4b7545sn],
.owner-workspace-studio-toggle span[b-uf4b7545sn],
.owner-workspace-sublink span[b-uf4b7545sn] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.owner-workspace-chevron[b-uf4b7545sn] { margin-left: auto; font-size: 0.7rem; }
.owner-workspace-studio-list[b-uf4b7545sn] { display: grid; gap: 0.2rem; }
.owner-workspace-studio-row[b-uf4b7545sn] { display: flex; align-items: center; gap: 0.15rem; }
.owner-workspace-studio-row .owner-workspace-studio-toggle[b-uf4b7545sn] { width: auto; flex: 1; min-width: 0; }
.owner-workspace-studio-drag-handle[b-uf4b7545sn] {
    display: grid;
    place-items: center;
    width: 22px;
    height: 38px;
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.32);
    cursor: grab;
    touch-action: none;
}
.owner-workspace-studio-drag-handle:hover[b-uf4b7545sn] { color: rgba(255, 255, 255, 0.58); }
.owner-workspace-studio-drag-handle:active[b-uf4b7545sn] { cursor: grabbing; }
.owner-workspace-studio-ghost[b-uf4b7545sn] { opacity: 0.4; }
.owner-workspace-studio-chosen > .owner-workspace-studio-row > .owner-workspace-studio-toggle[b-uf4b7545sn] { background: rgba(255, 255, 255, 0.075); }
.owner-workspace-subnav[b-uf4b7545sn] { display: grid; gap: 0.1rem; padding: 0.25rem 0 0.45rem 1.35rem; }
.owner-workspace-sublink[b-uf4b7545sn] { min-height: 32px; padding: 0.4rem 0.55rem; font-size: 0.78rem; }
.owner-workspace-sublink.active[b-uf4b7545sn] { color: var(--sh-white); background: rgba(218, 171, 91, 0.09); }
.owner-workspace-sublink.active i[b-uf4b7545sn] { color: var(--sh-accent); }
.owner-workspace-content[b-uf4b7545sn] { min-width: 0; width: 100%; padding: 0.9rem 1.25rem 4rem; }

@media (prefers-reduced-motion: reduce) {
    .owner-workspace[b-uf4b7545sn] { transition: none; }
}
/* Sous 900 px, la colonne devient un tiroir posé sur la page (.sh-workspace-drawer, app.css).

   Elle devenait une bande horizontale : « Vos studios » et les studios à la file sur un rang, et
   les onglets du studio ouvert sur un second rang à faire défiler du pouce. On ne voyait jamais
   quels onglets existaient, ni combien il en restait à droite. Deux niveaux de navigation
   compressés dans deux bandes qui glissent, là où la colonne les montrait tous.

   Le tiroir rend la lecture verticale : le studio ouvert, ses onglets empilés dessous, comme sur
   grand écran. Il n'y a donc plus rien à mettre à plat ici. */
@media (max-width: 900px) {
    .owner-workspace[b-uf4b7545sn],
    .owner-workspace--collapsed[b-uf4b7545sn] { display: block; }

    /* Le repli n'a plus d'objet : le tiroir est ouvert ou fermé, il n'est jamais rétréci. */
    .owner-workspace-sidebar-header[b-uf4b7545sn] { display: none; }

    /* Cibles tactiles : en dessous de 44 px, on rate le lien. */
    .owner-workspace-link[b-uf4b7545sn],
    .owner-workspace-studio-toggle[b-uf4b7545sn],
    .owner-workspace-sublink[b-uf4b7545sn] { min-height: 44px; }

    /* « Limite atteinte » explique l'absence du bouton d'ajout. Sur téléphone, c'est un rang
       entier pour une information dont on n'a pas besoin en consultant un studio ; elle reste
       dite là où elle se résout, dans les formules. */
    .owner-workspace-link--disabled[b-uf4b7545sn] { display: none; }

    /* Le glisser-déposer des studios demande une souris et une colonne stable : dans un tiroir
       qu'on ouvre pour choisir puis qu'on referme, la poignée ne sert qu'à gêner le défilement. */
    .owner-workspace-studio-drag-handle[b-uf4b7545sn] { display: none; }

    .owner-workspace-content[b-uf4b7545sn] { padding: 0.8rem 0.85rem 3rem; }
}
/* /Components/PlusButton.razor.rz.scp.css */
/* Bouton « ajouter », d'après Uiverse, réécrit sans Tailwind.

   L'original s'appuie sur les classes utilitaires (group, stroke-zinc-400, group-hover:fill-…),
   absentes ici : rien n'aurait été rendu. Les teintes viennent donc des jetons, et le trait se
   remplit d'or au survol plutôt que de gris neutre. */

.plusb[b-owcypl7exj] {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    outline-offset: 4px;
    transition: transform 300ms var(--sh-ease-liquid, ease);
}

.plusb svg[b-owcypl7exj] {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: rgba(255, 255, 255, 0.45);
    stroke-width: 1.5;
    transition: stroke 300ms ease, fill 300ms ease;
}

.plusb:not(:disabled):hover[b-owcypl7exj] { transform: rotate(90deg); }

.plusb:not(:disabled):hover svg[b-owcypl7exj] {
    stroke: var(--sh-gold);
    fill: rgba(240, 180, 0, 0.1);
}

/* Au clic, le pivot s'interrompt : le geste doit répondre tout de suite, pas finir sa rotation. */
.plusb:not(:disabled):active[b-owcypl7exj] { transition-duration: 0s; }
.plusb:not(:disabled):active svg[b-owcypl7exj] { stroke: #fff; fill: rgba(240, 180, 0, 0.22); }

.plusb:disabled[b-owcypl7exj] { cursor: not-allowed; }
.plusb:disabled svg[b-owcypl7exj] { stroke: rgba(255, 255, 255, 0.18); }

@media (prefers-reduced-motion: reduce) {
    .plusb[b-owcypl7exj], .plusb svg[b-owcypl7exj] { transition: none; }
    .plusb:not(:disabled):hover[b-owcypl7exj] { transform: none; }
}
/* /Components/ProfileLink.razor.rz.scp.css */
.profile-link[b-xmc75sihqr] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    color: inherit;
    text-decoration: none;
}

/* Le lien se signale par un soulignement discret plutôt que par une couleur : ces noms vivent
   dans des listes de faits, où une couleur d'accent ferait lire le nom comme une alerte. */
.profile-link:not(.profile-link--plain)[b-xmc75sihqr] {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 0.2em;
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}

.profile-link:not(.profile-link--plain):hover[b-xmc75sihqr],
.profile-link:not(.profile-link--plain):focus-visible[b-xmc75sihqr] {
    text-decoration-style: solid;
    text-decoration-color: currentColor;
}

.profile-link i[b-xmc75sihqr] {
    font-size: 0.72em;
    opacity: 0.55;
}
/* /Components/Profiles/PublicProfileShell.razor.rz.scp.css */
.profile-shell-avatar[b-obs8e0nmqs] {
    object-fit: cover;
}

.profile-shell-avatar--lg[b-obs8e0nmqs] {
    width: 150px;
    height: 150px;
}

.profile-shell-avatar--md[b-obs8e0nmqs] {
    width: 120px;
    height: 120px;
}

.profile-shell-avatar-icon.profile-shell-avatar--lg[b-obs8e0nmqs] {
    font-size: 4rem;
}

.profile-shell-avatar-icon.profile-shell-avatar--md[b-obs8e0nmqs] {
    font-size: 3rem;
}
/* /Components/ReceivedReviews.razor.rz.scp.css */
.rr-summary[b-eoww4sswym] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.rr-list[b-eoww4sswym] {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
}

.rr-item[b-eoww4sswym] {
    padding: 0.75rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.rr-item:first-child[b-eoww4sswym] {
    border-top: 0;
    padding-top: 0;
}

.rr-head[b-eoww4sswym] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.rr-stars[b-eoww4sswym] {
    display: inline-flex;
    gap: 0.1rem;
    font-size: 0.85rem;
}

.rr-author[b-eoww4sswym] {
    font-weight: 600;
}

.rr-date[b-eoww4sswym] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
}

.rr-comment[b-eoww4sswym] {
    margin: 0.4rem 0 0.25rem;
}

.rr-link[b-eoww4sswym] {
    font-size: 0.85rem;
}
/* /Components/Reservations/ReservationFilterBar.razor.rz.scp.css */
/* Le rang de filtres d'une liste de séances, identique dans les trois espaces.

   Il vivait dans la coquille du studio, sous des classes propres à cet écran : l'artiste et
   l'ingénieur n'avaient rien du tout. Le style vit maintenant avec le composant, ce qui est la
   seule manière de garantir que les trois se ressemblent. */

.res-filters[b-6tfjq88665] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

/* Les bulles sont celles du planning du studio : même gouttière, même rembourrage, même corps.
   Les deux rangs se suivent dans l'onglet Réservations — les salles, puis la période — et deux
   séries de bulles légèrement différentes, l'une sous l'autre, se lisent comme un défaut
   d'alignement plutôt que comme deux filtres. */
.res-filter-segments[b-6tfjq88665] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 3px;
    padding: 3px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
}

.res-filter-seg[b-6tfjq88665] {
    padding: 0.35rem 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    background: transparent;
    border: 0;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    transition: color 140ms ease, background 140ms ease;
}

.res-filter-seg:hover[b-6tfjq88665] { color: #fff; }

.res-filter-seg.is-on[b-6tfjq88665] {
    color: #000;
    background: var(--sh-gold);
}

.res-filter-search[b-6tfjq88665] {
    flex: 1 1 12rem;
    min-width: 0;
    max-width: 22rem;
    padding: 0.4rem 0.85rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
    font-size: 0.8rem;
}

.res-filter-search[b-6tfjq88665]::placeholder { color: rgba(255, 255, 255, 0.4); }

.res-filter-search:focus-visible[b-6tfjq88665] {
    outline: none;
    border-color: rgba(240, 180, 0, 0.45);
}

@media (max-width: 640px) {
    .res-filters[b-6tfjq88665] { gap: 0.5rem; }

    .res-filter-segments[b-6tfjq88665] { width: 100%; }

    .res-filter-seg[b-6tfjq88665] { flex: 1 1 0; text-align: center; padding: 0.4rem 0.35rem; }

    .res-filter-search[b-6tfjq88665] { flex: 1 1 100%; max-width: none; }
}
/* /Components/Reservations/ReservationTable.razor.rz.scp.css */
/* ── Le cadre, la grille, les rangs ──────────────────────────────────────────

   La liste héritait de .table-dark : rangs gris, filets gris, survol gris, sur un fond de page
   lui aussi gris. Rien ne disait où la liste commençait, où elle finissait, ni quelle information
   d'un rang comptait plus qu'une autre — tout était écrit de la même façon, dans la même teinte.

   Elle est maintenant noire dans un cadre noir. Seul ce qu'on vient lire porte de la couleur :
   un nom en blanc, un montant en doré, un état dans sa pastille. Le reste s'efface.

   Une seule écriture pour les cinq écrans qui partagent ce composant — studio, ingénieur,
   artiste : une liste de séances se lit pareil quel que soit l'espace où l'on se trouve. */

/* Le cadre ne défile plus en hauteur.

   Il portait une hauteur maximale — la fenêtre moins l'en-tête — et son propre défilement
   vertical. La page en avait déjà un : on se retrouvait avec deux ascenseurs emboîtés, l'un dans
   l'autre, et la molette agissait sur celui que le pointeur survolait. Descendre la liste puis
   descendre la page devenait deux gestes différents au même endroit de l'écran, et arrivé au bas
   de la liste on ne savait plus lequel des deux venait de s'arrêter.

   La liste s'étire donc sur toute sa hauteur, et c'est la page qui défile — une seule fois.

   Reste la largeur : dix colonnes ne rentrent pas toujours dans la place laissée par la barre
   latérale. En dessous du seuil, le cadre laisse défiler ce qui dépasse ; au-dessus, il n'y a
   rien à retenir, et il se contente de couper ses angles.

   Le seuil valait 1280 px, pour un tableau estimé à 838. Les deux chiffres étaient faux. Un
   tableau propriétaire réel — dix colonnes, deux pastilles d'état écrites en toutes lettres,
   des noms d'artistes — demande 1098 px ; et à 1366 px de fenêtre, la barre latérale et les
   marges n'en laissent que 1023. Le seuil ne se déclenchait donc pas, « overflow: clip » tenait,
   et les soixante-quinze derniers pixels du tableau étaient coupés net : pas de barre de
   défilement, pas de geste possible, rien qui signale qu'il manquait une colonne. C'est
   exactement la résolution d'un ordinateur portable courant.

   Le seuil est maintenant mesuré à l'endroit où le défaut se produit : 1098 de tableau plus 328
   de barre latérale et de marges font 1426, arrondis à 1440. Sous cette largeur, on peut perdre
   les intitulés collants — un cadre qui défile en X n'est plus un repère pour eux — mais on
   atteint toutes les colonnes. Perdre un repère vaut mieux que perdre une donnée. */
.res-shell[b-bz8fv2j343] {
    /* « clip » et non « hidden » : arrondir les coins sans faire du cadre un conteneur de
       défilement, ce qui rendrait de nouveau les intitulés collants prisonniers d'une boîte qui
       ne défile pas. Même raison que l'« overflow-x: clip » du body. */
    overflow: clip;
    background: var(--sh-black);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 18px;
}

@media (max-width: 1440px) {
    .res-shell[b-bz8fv2j343] { overflow-x: auto; }
}

.res-table[b-bz8fv2j343] {
    width: 100%;
    margin: 0;
    color: #fff;
    border-collapse: separate;
    border-spacing: 0;
}

/* Les intitulés restent en haut tant que la liste défile. Au trentième rang on savait encore lire
   un montant, mais plus de quoi il était le montant.

   Leur repère est la fenêtre, et non plus le cadre : c'est la page qui défile désormais. Ils se
   posent donc sous la barre du site, elle-même collée en haut — à zéro, ils passeraient dessous.
   Sous le seuil où le cadre retient la largeur, il redevient un conteneur de défilement et les
   intitulés n'ont plus rien à quoi se coller : ils suivent alors simplement leur tableau. */
.res-head th[b-bz8fv2j343] {
    position: sticky;
    top: var(--sh-header-h, 4.8rem);
    z-index: 2;
    padding: 0.55rem 0.5rem;
    background: var(--sh-black);
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    text-align: left;
    vertical-align: middle;
}

.res-head th.text-end[b-bz8fv2j343] { text-align: right; }

/* Chaque intitulé est une bulle : un rang d'intitulés ne se confond alors jamais avec un rang de
   données, même quand il flotte au-dessus d'eux. */
.res-head-pill[b-bz8fv2j343] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.22rem 0.62rem;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

button.res-head-pill[b-bz8fv2j343] { cursor: pointer; }

button.res-head-pill:hover[b-bz8fv2j343],
button.res-head-pill:focus-visible[b-bz8fv2j343] {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

/* La colonne qui trie porte la teinte de l'action : on retrouve d'un coup d'œil sur quoi la
   liste est rangée, sans comparer trois icônes. */
.res-head-pill.is-on[b-bz8fv2j343] {
    color: var(--sh-gold);
    background: rgba(240, 180, 0, 0.1);
    border-color: rgba(240, 180, 0, 0.3);
}

/* Icône vide (aucune classe bi-*) tant que la colonne n'est pas celle qui trie : présente dans
   le DOM pour que l'intitulé ne saute pas de largeur quand le tri change de colonne. */
.res-head-pill i[b-bz8fv2j343] { font-size: 0.62rem; }

/* Marges serrées : dix colonnes de 0,75 rem de part et d'autre, c'était deux cent quarante pixels
   de vide, soit une colonne entière offerte au néant. */
.res-row > td[b-bz8fv2j343] {
    padding: 0.7rem 0.5rem;
    background: transparent;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    vertical-align: middle;
}

/* Le créneau : le jour, puis la plage horaire sous lui. Un seul bloc, à toutes les largeurs.

   Le jour et la plage étaient deux éléments libres dans leur cellule. Sur la fiche téléphone, ils
   se disputaient la largeur avec l'intitulé de la pastille, qu'ils poussaient hors du cadre — on
   lisait « ESSION ». Sur le tableau, ils se suivaient sur une seule ligne assez large pour
   déborder la page. Chaque ligne reste d'un tenant : « 11 septembre 2026 » se coupait après
   « septembre ». */
.res-slot[b-bz8fv2j343] {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}

.res-slot-day[b-bz8fv2j343],
.res-slot-range[b-bz8fv2j343] { white-space: nowrap; }

/* La durée suit la plage, séparée par un point médian : « 12:00 – 15:00 · 3 h ». */
.res-slot-length[b-bz8fv2j343] { color: rgba(255, 255, 255, 0.5); }

.res-slot-length[b-bz8fv2j343]::before {
    content: "·";
    margin: 0 0.3rem;
    color: rgba(255, 255, 255, 0.28);
}

.res-row:hover > td[b-bz8fv2j343] { background: rgba(255, 255, 255, 0.03); }

.res-row:first-child > td[b-bz8fv2j343] { border-top: 0; }

/* Bandeaux d'âge et mise en avant de la session en cours.

   Une liste de sessions mêlait tout, triée par date de création : une session en cours pouvait
   se retrouver entre deux annulées de la semaine précédente. Le classement vit dans
   SessionEras ; ces règles ne font que le rendre visible. */

.res-era th[b-bz8fv2j343] {
    padding: 0.85rem 1rem 0.35rem;
    background: transparent;
    border: 0;
}

.res-era-label[b-bz8fv2j343] {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Trois tons, trois temps. Le rouge ne sert qu'au présent — c'est la couleur de la barre REC,
   et il ne doit jamais désigner autre chose qu'une session qui tourne. */
.res-era-label--live[b-bz8fv2j343] {
    color: #ff8b8b;
    background: rgba(255, 71, 71, 0.14);
}

.res-era-label--upcoming[b-bz8fv2j343] {
    color: var(--sh-aqua);
    background: var(--sh-aqua-soft);
}

.res-era-label--past[b-bz8fv2j343] {
    color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.06);
}

.res-era-count[b-bz8fv2j343] {
    margin-left: 0.5rem;
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.72rem;
    font-weight: 650;
}

/* Le témoin REC vit désormais dans .status-pill/.status-dot (app.css), avec le ton de
   StatusVocabulary : plus de surlignage de ligne ni de rouge propre au tableau — un point qui
   bat se retrouve dans une liste qui défile, un fond de ligne s'y perd. */

/* Pagination : facultative (PageSize), sous le tableau, alignée à droite — ce n'est pas une
   lecture du contenu, elle ne mérite pas la place au-dessus. */
.res-pager[b-bz8fv2j343] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 1.25rem;
    padding: 0.85rem 1rem 0.25rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.78rem;
}

.res-pager-size[b-bz8fv2j343] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.res-pager-select[b-bz8fv2j343] {
    padding: 0.25rem 0.5rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
}

.res-pager-nav[b-bz8fv2j343] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.res-pager-btn[b-bz8fv2j343] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
}

.res-pager-btn:disabled[b-bz8fv2j343] {
    color: rgba(255, 255, 255, 0.3);
    cursor: not-allowed;
}

.res-pager-status[b-bz8fv2j343] {
    min-width: 5.5rem;
    text-align: center;
}

/* ── Téléphone : le tableau se replie en fiches ──────────────────────────────

   Un tableau à six colonnes ne tient sur aucun téléphone. La classe .table-responsive de
   Bootstrap le fait défiler latéralement, ce qui est pire que rien sur l'écran principal de
   l'artiste : la moitié des informations vit hors champ, et rien ne signale qu'elle existe.

   Chaque ligne devient donc une fiche, et chaque cellule porte son intitulé — repris de
   l'attribut data-col, puisque l'en-tête disparaît. */

@media (max-width: 700px) {
    /* Le cadre s'efface : ce sont les fiches qui portent la forme, un cadre autour de cartes
       déjà encadrées ferait deux traits pour rien. Et il ne retient plus rien — une fiche tient
       dans la largeur, il n'y a plus de colonnes à contenir. */
    .res-shell[b-bz8fv2j343] {
        overflow: visible;
        background: transparent;
        border: 0;
        border-radius: 0;
    }

    .res-table thead[b-bz8fv2j343] { display: none; }

    .res-table[b-bz8fv2j343],
    .res-table tbody[b-bz8fv2j343],
    .res-table td[b-bz8fv2j343] { display: block; width: 100%; }

    /* La fiche : une tête, un créneau, puis les champs par paires.

       Chaque champ portait la même pastille pleine largeur, du numéro jusqu'au solde : huit rangs
       de même poids où rien ne ressortait, et il fallait tout lire pour savoir de quelle séance
       il s'agissait. Les champs vont maintenant deux par deux, et l'ordre des colonnes les
       regroupe de lui-même : où (lieu, ingé), l'état (session, paiement), l'argent (total,
       reste). Trois paires, trois familles.

       Souple et non en grille : une paire incomplète — quand un écran n'affiche pas les mêmes
       colonnes, ou qu'un champ s'efface au plus étroit — voit son dernier champ prendre la
       largeur entière, sans qu'aucune règle n'ait à compter les cellules. */
    .res-row[b-bz8fv2j343] {
        position: relative;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: 0.35rem;
        margin-bottom: 0.7rem;
        padding: 0.75rem 0.8rem;
        background: var(--sh-gray-950);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 16px;
    }

    .res-row > td[b-bz8fv2j343] { min-width: 0; }

    /* ── Chaque famille sur sa ligne ──────────────────────────────────────────

       Les champs allaient deux par deux, mais dans l'ordre où ils tombaient : dès qu'une valeur
       était large, la paire se cassait et l'on obtenait « paiement » à côté de « total » — un
       état et un montant sur la même ligne, deux familles mélangées.

       La place de chacun est donc écrite, et non déduite : où (lieu, ingé), l'état (session,
       paiement), l'argent (total, reste). Trois lignes, trois familles, quelle que soit la
       largeur des valeurs. */
    .res-row > td[data-col="Lieu"][b-bz8fv2j343],
    .res-row > td[data-col="Statut"][b-bz8fv2j343],
    .res-row > td[data-col="Total"][b-bz8fv2j343] { grid-column: 1; }

    .res-row > td[data-col="Ingé"][b-bz8fv2j343],
    .res-row > td[data-col="Paiement"][b-bz8fv2j343],
    .res-row > td[data-col="Reste"][b-bz8fv2j343] { grid-column: 2; }

    /* Un écran qui n'affiche pas l'ingénieur — celui de l'artiste — laisserait une demi-ligne
       vide à côté du lieu. Le lieu la prend. */
    .res-row:not(:has(> td[data-col="Ingé"])) > td[data-col="Lieu"][b-bz8fv2j343] { grid-column: 1 / -1; }

    /* Une session soldée ne doit plus rien, une session annulée ne réclame plus : ces cellules
       n'écrivent alors aucune valeur, et le cadre se refermait sur du vide — ce qui se lit comme
       une donnée qu'on n'a pas su charger. Elles s'effacent, et leur voisine prend la ligne. */
    .res-row > td[data-blank][b-bz8fv2j343] { display: none; }

    .res-row:has(> td[data-col="Reste"][data-blank]) > td[data-col="Total"][b-bz8fv2j343],
    .res-row:has(> td[data-col="Paiement"][data-blank]) > td[data-col="Statut"][b-bz8fv2j343] { grid-column: 1 / -1; }

    /* Le compte à rebours de la séance en cours n'apparaît pas ici : la bande REC en haut de
       l'écran et le cockpit le portent déjà, et sa largeur chassait le paiement de la ligne. */
    .res-rec-time[b-bz8fv2j343] { display: none; }

    .res-row:hover > td[b-bz8fv2j343] { background: rgba(255, 255, 255, 0.025); }

    /* Chaque champ prend la forme d'une pastille deux tons : l'intitulé sur son fond à gauche,
       la valeur à droite. C'est la géométrie de TwoTonePill, appliquée sans changer le balisage
       du tableau — l'intitulé vient de data-col, puisque l'en-tête a disparu.

       Auparavant l'intitulé et la valeur flottaient aux deux bouts d'une ligne nue : sur une
       fiche de huit champs, huit paires de textes gris se lisaient comme un paragraphe. */
    .res-row > td[b-bz8fv2j343] {
        display: flex;
        align-items: center;
        /* « space-between » et non « flex-end » : si la valeur ne tient pas, elle déborde vers la
           droite où le cadre la coupe, au lieu de remonter sur son propre intitulé. C'est ce qui
           faisait lire « ATUT » à la place de « STATUT ». */
        justify-content: space-between;
        gap: 0.45rem;
        overflow: hidden;
        margin: 0;
        padding: 0 0.6rem 0 0 !important;
        background: var(--pill-bg, rgba(255, 255, 255, 0.025));
        border: 1px solid var(--pill-border, rgba(255, 255, 255, 0.08));
        border-radius: 999px;
        text-align: right !important;
        /* La valeur se replie plutôt que de se faire couper : « Acompte payé » demandait 193 px
           dans une pastille qui en fait 165, et le cadre en mangeait la fin. Le repli ne casse
           plus l'alignement depuis que la fiche est une grille : deux pastilles d'une même
           rangée prennent la hauteur de la plus haute, sans qu'on ait à l'écrire. */
        white-space: normal;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    /* ── La couleur ne décore pas, elle signale ────────────────────────────────

       Seuls les champs qui portent un état la prennent : la session, le paiement, et le solde
       tant qu'il reste dû. Le lieu, l'ingé et le total restent neutres — colorer six pastilles
       sur six ferait perdre au vert de « soldée » ce qui en fait un repère.

       Les teintes sont celles de StatusVocabulary, sous les mêmes noms de variables que
       TwoTonePill : les deux surfaces ne peuvent pas diverger. */
    .res-row > td[data-tone="tone-success"][b-bz8fv2j343] {
        --pill-accent: var(--sh-green);
        --pill-bg: rgba(74, 222, 128, 0.07);
        --pill-border: rgba(74, 222, 128, 0.22);
        --pill-label-bg: rgba(74, 222, 128, 0.13);
    }

    .res-row > td[data-tone="tone-warning"][b-bz8fv2j343] {
        --pill-accent: var(--sh-amber);
        --pill-bg: rgba(212, 165, 116, 0.07);
        --pill-border: rgba(212, 165, 116, 0.24);
        --pill-label-bg: rgba(212, 165, 116, 0.14);
    }

    .res-row > td[data-tone="tone-danger"][b-bz8fv2j343] {
        --pill-accent: #ef8585;
        --pill-bg: rgba(255, 71, 71, 0.07);
        --pill-border: rgba(255, 71, 71, 0.24);
        --pill-label-bg: rgba(255, 71, 71, 0.14);
    }

    .res-row > td[data-tone="tone-info"][b-bz8fv2j343] {
        --pill-accent: var(--sh-aqua);
        --pill-bg: rgba(79, 209, 232, 0.07);
        --pill-border: rgba(79, 209, 232, 0.22);
        --pill-label-bg: rgba(79, 209, 232, 0.13);
    }

    /* La séance qui tourne. Le rouge d'un enregistrement, pas celui d'une erreur — c'est le seul
       état qui bat, et il doit se repérer en balayant la liste du pouce.

       Il manquait : les quatre teintes écrites plus haut couvraient success, warning, danger et
       info, mais StatusVocabulary répond « rec » pour une séance en cours et « purple » pour un
       remboursement. Ces deux-là restaient donc gris, et REC — le seul état urgent de la liste —
       était le moins visible de tous. */
    .res-row > td[data-tone="tone-rec"][b-bz8fv2j343] {
        --pill-accent: #ff8b8b;
        --pill-bg: rgba(255, 71, 71, 0.09);
        --pill-border: rgba(255, 71, 71, 0.32);
        --pill-label-bg: rgba(255, 71, 71, 0.16);
    }

    .res-row > td[data-tone="tone-purple"][b-bz8fv2j343] {
        --pill-accent: #c88ee0;
        --pill-bg: rgba(155, 89, 182, 0.08);
        --pill-border: rgba(155, 89, 182, 0.28);
        --pill-label-bg: rgba(155, 89, 182, 0.15);
    }

    /* L'intitulé prend la teinte de l'état lui aussi : une pastille dont seule la moitié droite
       est colorée se lit comme deux morceaux, pas comme un état. */
    .res-row > td[data-tone][b-bz8fv2j343]::before {
        color: var(--pill-accent, rgba(255, 255, 255, 0.55));
        background: var(--pill-label-bg, rgba(255, 255, 255, 0.07));
    }

    /* ── Le statut n'est plus une pastille dans une pastille ───────────────────

       StatusBadge dessine son propre fond, son propre cadre et son point : posé dans la valeur
       d'une pastille deux tons, cela faisait deux pastilles emboîtées, deux cadres, deux fonds.
       Sur la fiche, il n'est plus que son mot — en majuscules, à la couleur de son état, la
       pastille qui le porte étant déjà teintée. */
    .res-row > td[data-col="Statut"][b-bz8fv2j343]  .status-pill,
    .res-row > td[data-col="Paiement"][b-bz8fv2j343]  .status-pill {
        gap: 0;
        padding: 0;
        /* Le mot de l'état se replie au lieu de sortir du cadre : StatusBadge le tient en
           une ligne, ce qui coupait « Acompte payé » dans une pastille de 165 px. */
        min-width: 0;
        white-space: normal;
        text-align: right;
        color: var(--pill-accent, rgba(255, 255, 255, 0.9));
        background: transparent;
        border: 0;
        font-size: 0.7rem;
        font-weight: 800;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    .res-row > td[data-col="Statut"][b-bz8fv2j343]  .status-dot,
    .res-row > td[data-col="Paiement"][b-bz8fv2j343]  .status-dot { display: none; }

    /* La séance qui tourne est écrite ici même, et non par StatusBadge : elle porte le compte à
       rebours. Elle se dépouille pareil, mais garde son point — c'est le seul état qui bat, et
       c'est à cela qu'on le reconnaît d'un coup d'œil dans une liste. */
    .res-row > td[data-col="Statut"] .status-pill[b-bz8fv2j343] {
        gap: 0.35rem;
        padding: 0;
        background: transparent;
        border: 0;
        font-size: 0.7rem;
        font-weight: 800;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    .res-row > td[b-bz8fv2j343]::before {
        content: attr(data-col);
        display: flex;
        align-items: center;
        align-self: stretch;
        flex: 0 0 auto;
        margin-right: auto;
        padding: 0.42rem 0.7rem;
        color: rgba(255, 255, 255, 0.55);
        background: rgba(255, 255, 255, 0.07);
        font-size: 0.64rem;
        font-weight: 800;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        text-align: left;
        white-space: nowrap;
    }

    /* ── La tête de la fiche : qui, et quel numéro ────────────────────────────

       Le nom à gauche, le numéro à droite, sur le même rang. C'est ce couple qui désigne une
       séance : l'un se retient, l'autre se dicte. Tout le reste vient après, et plus discret. */

    .res-row > td[data-col="Artiste"][b-bz8fv2j343] {
        grid-column: 1 / -1;
        justify-content: flex-start;
        overflow: hidden;
        /* La place du numéro, réservée : il est posé dans le coin, hors du flux, pour que le nom
           dispose de tout le reste plutôt que d'une demi-largeur. */
        padding: 0 4.5rem 0 0 !important;
        background: transparent;
        border: 0;
        border-radius: 0;
        color: #fff;
        font-size: 1.05rem;
        font-weight: 800;
        text-align: left !important;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .res-row > td[data-col="Artiste"][b-bz8fv2j343]::before { display: none; }

    .res-row > td[data-col="Réf."][b-bz8fv2j343] {
        position: absolute;
        top: 0.7rem;
        right: 0.75rem;
        display: inline-flex;
        flex: 0 0 auto;
        width: auto;
        margin: 0;
        padding: 0.18rem 0.55rem !important;
        background: rgba(240, 180, 0, 0.1);
        border-color: rgba(240, 180, 0, 0.24);
    }

    /* L'intitulé « RÉF. » s'efface : le croisillon le dit déjà, et la place revient au nom. */
    .res-row > td[data-col="Réf."][b-bz8fv2j343]::before { display: none; }

    .res-row > td[data-col="Réf."] .res-ref[b-bz8fv2j343] { color: var(--sh-gold); font-size: 0.78rem; }

    /* ── Quand ────────────────────────────────────────────────────────────────

       Le créneau vient juste sous le nom, en clair, sans pastille ni intitulé : c'est la
       deuxième chose qu'on cherche, elle n'a pas à être rangée dans un casier comme le reste.
       La durée le suit — c'est du temps de salle qu'on vend, pas deux heures à soustraire. */
    .res-row > td[data-col="Session"][b-bz8fv2j343] {
        grid-column: 1 / -1;
        justify-content: flex-start;
        margin: 0 0 0.1rem;
        /* La réserve à droite est celle du numéro de réservation, posé en absolu dans le coin :
           sans elle, un créneau long lui passait dessous et l'on lisait « 18 h » à travers
           « #1025 ». */
        padding: 0 5.6rem 0.6rem 0 !important;
        background: transparent;
        border: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 0;
        color: rgba(255, 255, 255, 0.85);
        text-align: left !important;
    }

    .res-row > td[data-col="Session"][b-bz8fv2j343]::before { display: none; }

    .res-row > td[data-col="Session"] .res-slot[b-bz8fv2j343] {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 0.45rem;
        row-gap: 0.1rem;
    }

    .res-row > td[data-col="Session"] .res-slot-day[b-bz8fv2j343] {
        font-size: 0.94rem;
        font-weight: 700;
    }

    .res-row > td[data-col="Session"] .res-slot-range[b-bz8fv2j343] {
        color: rgba(255, 255, 255, 0.6);
        font-size: 0.8rem;
    }

    /* Les actions n'ont pas d'intitulé : elles ferment la fiche, séparées du reste. */
    .res-row > td[data-col-actions][b-bz8fv2j343] {
        grid-column: 1 / -1;
        justify-content: flex-end;
        margin: 0.15rem 0 0;
        padding: 0.5rem 0 0 0 !important;
        background: transparent;
        border: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 0;
    }

    .res-row > td[data-col-actions][b-bz8fv2j343]::before { display: none; }

    /* Le bandeau d'âge reste pleine largeur, sans se replier en fiche. */
    .res-table tr.res-era[b-bz8fv2j343] {
        margin: 0.9rem 0 0.4rem;
        padding: 0;
        background: none;
        border: none;
    }

    .res-table tr.res-era th[b-bz8fv2j343] {
        display: flex;
        justify-content: space-between;
        position: static;
        background: transparent;
        border: 0;
    }

    /* Le pager tenait sur un rang à droite ; sur téléphone, le sélecteur et la navigation
       s'empilent plutôt que de se compresser illisiblement. */
    .res-pager[b-bz8fv2j343] { justify-content: center; }
}

/* Au plus étroit, la fiche se resserre sur l'essentiel.

   « Ingé : Non requis » occupe un rang entier pour dire qu'il n'y a rien à dire, et l'affectation
   se lit de toute façon dans le détail de la séance. Sur 320 px, ce rang-là est celui qu'on
   sacrifie en premier — le nom, le créneau, l'état et l'argent restent. */
@media (max-width: 360px) {
    .res-row > td[data-col="Ingé"][b-bz8fv2j343] { display: none; }

    .res-row > td[data-col="Artiste"][b-bz8fv2j343] { font-size: 0.98rem; }

    .res-row > td[b-bz8fv2j343]::before { font-size: 0.6rem; padding-inline: 0.55rem; }
}

/* La référence d'une réservation : elle ouvre la ligne, et se lit comme un numéro — chiffres
   alignés d'une ligne à l'autre, pour qu'on retrouve celle qu'on cherche en balayant la colonne. */
.res-ref[b-bz8fv2j343] {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.82rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}


/* Une ligne qui vient de changer sous les yeux du lecteur. Elle s'illumine puis s'éteint : le
   changement se remarque, et l'écran ne reste pas bariolé de traces de ce qui a bougé. */
.res-row--fresh[b-bz8fv2j343] {
    animation: res-fresh-b-bz8fv2j343 6s ease-out;
}

@keyframes res-fresh-b-bz8fv2j343 {
    0% { background: rgba(240, 180, 0, 0.22); }
    12% { background: rgba(240, 180, 0, 0.18); }
    100% { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .res-row--fresh[b-bz8fv2j343] { animation: none; background: rgba(240, 180, 0, 0.1); }
}

/* La ligne que l'adresse désigne — celle dont parlait la notification qui a mené ici.

   Elle ne s'éteint pas, contrairement à l'éclat d'un changement : on peut arriver, lire autre
   chose, remonter, et devoir la retrouver. Le liseré tient donc tant qu'on est sur cette adresse.

   Un liseré et non un fond seul : un fond ambré se confond avec celui d'une ligne qui vient de
   changer, et les deux disent des choses différentes. */
.res-row--focus > td[b-bz8fv2j343] {
    background: rgba(217, 166, 83, 0.14);
    box-shadow: inset 0 1px 0 rgba(217, 166, 83, 0.55), inset 0 -1px 0 rgba(217, 166, 83, 0.55);
}

.res-row--focus > td:first-child[b-bz8fv2j343] {
    box-shadow: inset 1px 1px 0 rgba(217, 166, 83, 0.55), inset 0 -1px 0 rgba(217, 166, 83, 0.55);
}

.res-row--focus > td:last-child[b-bz8fv2j343] {
    box-shadow: inset -1px 1px 0 rgba(217, 166, 83, 0.55), inset 0 -1px 0 rgba(217, 166, 83, 0.55);
}

/* Une pulsation à l'arrivée : le liseré seul se remarque mal quand la page vient de défiler.

   Elle finissait sur du transparent alors que les cellules, elles, gardaient leur fond ambré :
   la « pulsation » laissait donc une ligne jaune derrière elle, pour toujours. C'est la classe
   entière qui s'en va maintenant, au bout de trois secondes — le composant la retire — et il n'y
   a plus rien à éteindre en CSS. */
.res-row--focus[b-bz8fv2j343] {
    animation: res-focus-arrivee-b-bz8fv2j343 1.6s ease-out;
}

@keyframes res-focus-arrivee-b-bz8fv2j343 {
    0% { background: rgba(217, 166, 83, 0.38); }
    100% { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .res-row--focus[b-bz8fv2j343] { animation: none; }
}
/* /Components/RoleWorkspaceShell.razor.rz.scp.css */
/* La coquille d'un espace de travail : barre latérale repliable et zone de contenu. */

.role-workspace[b-ordhc19vgw] {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    min-height: calc(100vh - 110px);
    align-items: stretch;
    transition: grid-template-columns 180ms ease;
}
.role-workspace--collapsed[b-ordhc19vgw] { grid-template-columns: 68px minmax(0, 1fr); }
/* La colonne n'existe comme colonne qu'au-delà de 900 px. En dessous, c'est le tiroir commun
   (.sh-workspace-drawer, app.css) qui la place — et le CSS isolé, plus spécifique que le global,
   écraserait sa position s'il déclarait la sienne sans condition. */
@media (min-width: 901px) {
    .role-workspace-sidebar[b-ordhc19vgw] {
        position: sticky;
        top: 0;
        align-self: start;
        height: calc(100vh - 110px);
        overflow-y: auto;
        padding: 0.75rem 0.65rem 1rem;
        border-right: 1px solid rgba(255, 255, 255, 0.08);
        scrollbar-width: thin;
    }
}
.role-workspace-header[b-ordhc19vgw] {
    display: flex;
    align-items: center;
    /* Le nom de l'espace ayant quitté cet en-tête, il ne reste que le bouton de repli : il se
       range à droite, comme chez le propriétaire. */
    justify-content: flex-end;
    min-height: 36px;
    padding: 0 0.45rem 0.55rem;
}
.role-workspace--collapsed .role-workspace-header[b-ordhc19vgw] { justify-content: center; padding-inline: 0; }
.role-workspace-collapse[b-ordhc19vgw] {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: rgba(255, 255, 255, 0.58);
    background: transparent;
    border: 0;
    border-radius: 6px;
}
.role-workspace-collapse:hover[b-ordhc19vgw],
.role-workspace-collapse:focus-visible[b-ordhc19vgw] { color: var(--sh-white); background: rgba(255, 255, 255, 0.06); }
.role-workspace-nav[b-ordhc19vgw] { display: grid; gap: 0.2rem; }
.role-workspace-link[b-ordhc19vgw] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 38px;
    padding: 0.55rem 0.65rem;
    color: rgba(255, 255, 255, 0.64);
    border-radius: 7px;
    font-size: 0.86rem;
    font-weight: 650;
    text-decoration: none;
}
.role-workspace--collapsed .role-workspace-link[b-ordhc19vgw] { justify-content: center; padding-inline: 0; }
.role-workspace-link:hover[b-ordhc19vgw],
.role-workspace-link:focus-visible[b-ordhc19vgw] { color: var(--sh-white); background: rgba(255, 255, 255, 0.055); }
.role-workspace-link.active[b-ordhc19vgw] { color: var(--sh-white); background: rgba(255, 255, 255, 0.075); }
.role-workspace-link.active i[b-ordhc19vgw] { color: var(--sh-accent); }
.role-workspace-link span[b-ordhc19vgw] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-workspace-badge[b-ordhc19vgw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #ff4747;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    flex-shrink: 0;
    margin-left: auto;
}
.role-workspace-content[b-ordhc19vgw] { min-width: 0; width: 100%; padding: 0.9rem 1.25rem 4rem; }

@media (prefers-reduced-motion: reduce) {
    .role-workspace[b-ordhc19vgw] { transition: none; }
}
/* Sous 900 px, la colonne devient un tiroir posé sur la page (.sh-workspace-drawer, app.css).

   Elle devenait une bande d'onglets à faire défiler horizontalement : on ne voyait jamais quels
   onglets existaient, et le pouce en manquait la moitié. Les onglets restent donc empilés, comme
   sur grand écran — c'est la même lecture, seul le support change. Rien à surcharger ici : les
   règles de position et de taille appartiennent au tiroir commun, et une règle isolée écrirait
   par-dessus lui. */
@media (max-width: 900px) {
    .role-workspace[b-ordhc19vgw],
    .role-workspace--collapsed[b-ordhc19vgw] { display: block; }

    /* Le repli n'a pas de sens quand la colonne est un tiroir : l'en-tête disparaît, comme chez
       le propriétaire. */
    .role-workspace-header[b-ordhc19vgw] { display: none; }

    /* Cible tactile : en dessous de 44 px, on rate le lien. */
    .role-workspace-link[b-ordhc19vgw] { min-height: 44px; }

    .role-workspace-content[b-ordhc19vgw] { padding: 0.8rem 0.85rem 3rem; }
}
/* /Components/Session/ActiveSessionBar.razor.rz.scp.css */
/* Bande REC. Une seule ligne, cliquable en entier, qui ne pousse pas le contenu :
   elle occupe la place d'un titre, pas celle d'un bandeau. */

.sh-rec-bar[b-tutxcn8xym] {
    /* Au-dessus de la page, sous le voile des panneaux (2000). Elle passait au-dessus, au motif
       qu'une session en cours ne se cache pas ; mais une bande rouge parfaitement nette au
       milieu d'un shell flouté se lit comme un défaut d'affichage. Panneau ouvert, il est seul
       net ; la session reste là, floutée comme le reste. Voir l'échelle dans app.css. */
    position: relative;
    z-index: var(--sh-z-sticky);

    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.4rem 1rem;
    border: 0;
    border-bottom: 1px solid rgba(255, 71, 71, 0.3);
    background: linear-gradient(90deg, rgba(255, 71, 71, 0.16), rgba(255, 71, 71, 0.04) 60%, transparent);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8rem;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: background 0.2s ease;
}

/* Un balayage lent qui traverse la bande. C'est ce qui la fait vivre sans clignoter :
   le mouvement se perçoit du coin de l'œil, il ne réclame pas l'attention. */
.sh-rec-bar[b-tutxcn8xym]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        transparent 0%,
        rgba(255, 120, 120, 0.14) 45%,
        rgba(255, 160, 160, 0.2) 50%,
        rgba(255, 120, 120, 0.14) 55%,
        transparent 100%);
    transform: translateX(-100%);
    animation: sh-rec-sweep-b-tutxcn8xym 4.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes sh-rec-sweep-b-tutxcn8xym {
    0% { transform: translateX(-100%); }
    /* Long temps mort : le balayage passe, puis la bande respire. Sans cette pause,
       le mouvement devient un défilement continu, donc une gêne. */
    45%, 100% { transform: translateX(100%); }
}

.sh-rec-bar:hover[b-tutxcn8xym] {
    background: linear-gradient(90deg, rgba(255, 71, 71, 0.24), rgba(255, 71, 71, 0.08) 60%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .sh-rec-bar[b-tutxcn8xym]::after { animation: none; opacity: 0; }
}

/* Le point rouge bat lentement. Une pulsation rapide ferait clignoter en permanence
   un élément présent pendant des heures. */
.sh-rec-dot[b-tutxcn8xym] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ff4747;
    box-shadow: 0 0 0 0 rgba(255, 71, 71, 0.6);
    animation: sh-rec-pulse-b-tutxcn8xym 2.4s ease-out infinite;
    flex: none;
}

@keyframes sh-rec-pulse-b-tutxcn8xym {
    0% { box-shadow: 0 0 0 0 rgba(255, 71, 71, 0.55); }
    70% { box-shadow: 0 0 0 7px rgba(255, 71, 71, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 71, 71, 0); }
}

/* Les éléments passent au-dessus du balayage, sans quoi il les voilerait. */
.sh-rec-dot[b-tutxcn8xym],
.sh-rec-label[b-tutxcn8xym],
.sh-rec-time[b-tutxcn8xym],
.sh-rec-where[b-tutxcn8xym],
.sh-rec-go[b-tutxcn8xym] { position: relative; z-index: 1; }

.sh-rec-label[b-tutxcn8xym] {
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #ff8b8b;
    flex: none;
}

.sh-rec-time[b-tutxcn8xym] {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    flex: none;
}

/* Le lieu cède la place en premier sur petit écran : le temps et le point rouge
   sont ce qui doit rester lisible. */
.sh-rec-where[b-tutxcn8xym] {
    color: rgba(255, 255, 255, 0.55);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}

.sh-rec-go[b-tutxcn8xym] {
    color: rgba(255, 255, 255, 0.4);
    flex: none;
}

/* Dépassement : le temps compte à l'envers, la bande le dit sans clignoter davantage. */
.sh-rec-bar--overrun[b-tutxcn8xym] {
    border-bottom-color: rgba(255, 71, 71, 0.5);
    background: linear-gradient(90deg, rgba(255, 71, 71, 0.3), rgba(255, 71, 71, 0.1) 60%, transparent);
}

.sh-rec-bar--overrun .sh-rec-time[b-tutxcn8xym] {
    color: #ff8b8b;
}

@media (max-width: 520px) {
    .sh-rec-where[b-tutxcn8xym] { display: none; }
}
/* /Components/Session/CancelSessionModal.razor.rz.scp.css */
/* L'annulation d'une séance, vue par l'artiste.

   Le voile floute la page derrière : la question posée est la seule chose nette à l'écran, et ce
   qu'on quitte reste visible — on annule une séance qu'on voit encore, pas une ligne abstraite. */

.cancel-modal[b-dtkyeaqi0s] {
    position: fixed;
    inset: 0;
    z-index: var(--sh-z-modal);
    display: grid;
    place-items: center;
    padding: 1rem;
    background: var(--sh-overlay-bg);
    backdrop-filter: var(--sh-overlay-blur);
    -webkit-backdrop-filter: var(--sh-overlay-blur);
}

.cancel-modal__dialog[b-dtkyeaqi0s] {
    width: min(100%, 520px);
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    color: var(--sh-white);
    background: var(--sh-elev-4-bg);
    border: 1px solid var(--sh-elev-4-border);
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), var(--sh-elev-4-shadow);
}

/* ── L'en-tête ──────────────────────────────────────────────────────────────── */

.cancel-modal__head[b-dtkyeaqi0s] {
    padding: 1.4rem 1.5rem 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    /* Un halo rouge très dilué : la gravité de l'écran s'annonce avant les mots. */
    background: radial-gradient(ellipse 90% 120% at 0% 0%, rgba(220, 53, 69, 0.16), transparent 70%);
}

.cancel-modal__eyebrow[b-dtkyeaqi0s] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
    color: #ff8a95;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.cancel-modal__head h2[b-dtkyeaqi0s] {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
    font-weight: 800;
}

.cancel-modal__session[b-dtkyeaqi0s] {
    margin: 0;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.85rem;
    line-height: 1.5;
}

.cancel-modal__session strong[b-dtkyeaqi0s] { color: var(--sh-white); }

.cancel-modal__body[b-dtkyeaqi0s] { padding: 1.25rem 1.5rem; }

/* ── Quand il n'y a rien en jeu ─────────────────────────────────────────────── */

.cancel-note[b-dtkyeaqi0s] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border-radius: 12px;
    font-size: 0.85rem;
    line-height: 1.5;
}

.cancel-note i[b-dtkyeaqi0s] { font-size: 1.15rem; }

.cancel-note strong[b-dtkyeaqi0s] { display: block; margin-bottom: 0.15rem; }

.cancel-note span[b-dtkyeaqi0s] { color: rgba(255, 255, 255, 0.62); }

.cancel-note--calm[b-dtkyeaqi0s] {
    color: var(--sh-green);
    background: rgba(74, 222, 128, 0.09);
    border: 1px solid rgba(74, 222, 128, 0.24);
}

/* ── Le simulateur ──────────────────────────────────────────────────────────── */

.cancel-sim[b-dtkyeaqi0s] {
    padding: 1rem;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
}

.cancel-sim__head[b-dtkyeaqi0s] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.cancel-sim__label[b-dtkyeaqi0s] {
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.cancel-sim__moment[b-dtkyeaqi0s] {
    color: var(--sh-gold);
    font-size: 0.88rem;
    font-weight: 700;
    text-align: right;
}

.cancel-sim__range[b-dtkyeaqi0s] {
    width: 100%;
    margin: 0;
    accent-color: var(--sh-gold);
    cursor: pointer;
}

/* L'échelle du curseur, avec le repère de la bascule. Le trait vaut plus qu'une légende : c'est
   l'endroit exact où le prix de l'hésitation change. */
.cancel-sim__scale[b-dtkyeaqi0s] {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-top: 0.3rem;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.66rem;
}

.cancel-sim__tick[b-dtkyeaqi0s] {
    position: absolute;
    top: -0.55rem;
    width: 2px;
    height: 0.85rem;
    background: #ff8a95;
    border-radius: 1px;
    transform: translateX(-50%);
}

.cancel-sim__split[b-dtkyeaqi0s] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    margin-top: 1rem;
}

.cancel-amount[b-dtkyeaqi0s] {
    padding: 0.7rem 0.8rem;
    border-radius: 11px;
    border: 1px solid transparent;
    /* Les montants changent en glissant le curseur : la transition dit qu'ils sont liés au
       geste, plutôt que de les faire sauter d'une valeur à l'autre. */
    transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}

.cancel-amount__label[b-dtkyeaqi0s] {
    display: block;
    margin-bottom: 0.2rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cancel-amount__value[b-dtkyeaqi0s] {
    font-size: 1.1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.cancel-amount--back[b-dtkyeaqi0s] {
    color: var(--sh-green);
    background: rgba(74, 222, 128, 0.09);
    border-color: rgba(74, 222, 128, 0.22);
}

.cancel-amount--kept[b-dtkyeaqi0s] {
    color: #ff8a95;
    background: rgba(220, 53, 69, 0.1);
    border-color: rgba(220, 53, 69, 0.26);
}

/* Zéro retenu n'est pas une perte : la case reste éteinte plutôt que rouge. */
.cancel-amount--none[b-dtkyeaqi0s] {
    color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

.cancel-sim__rule[b-dtkyeaqi0s] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.9rem 0 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.78rem;
    line-height: 1.45;
}

.cancel-sim__rule strong[b-dtkyeaqi0s] { color: rgba(255, 255, 255, 0.85); }

.cancel-modal__aside[b-dtkyeaqi0s] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.85rem 0 0;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.76rem;
}

/* ── Les deux issues ────────────────────────────────────────────────────────── */

.cancel-modal__actions[b-dtkyeaqi0s] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1.1rem 1.5rem 1.35rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

@media (min-width: 480px) {
    /* « Garder ma séance » à gauche, en premier sous la main qui revient : c'est l'issue sans
       conséquence, et elle ne doit pas être celle qu'on atteint par habitude. */
    .cancel-modal__actions[b-dtkyeaqi0s] { flex-direction: row-reverse; }
    .cancel-modal__actions .sh-action[b-dtkyeaqi0s] { flex: 1 1 0; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .cancel-amount[b-dtkyeaqi0s] { transition: none; }
}
/* /Components/Session/ConfirmationWindowNotice.razor.rz.scp.css */
/* Une ligne d'information, pas une alerte : tant que le délai court, il n'y a rien d'anormal. */
.confirmation-window[b-eutvf49l1g] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.35rem 0 0;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.62);
}

.confirmation-window strong[b-eutvf49l1g] {
    color: var(--sh-amber);
    font-weight: 700;
}

/* Écoulé, c'est un fait acquis : plus d'ambre, il n'y a plus rien à surveiller. */
.confirmation-window--expired[b-eutvf49l1g] {
    color: rgba(255, 255, 255, 0.42);
}
/* /Components/Session/EngineerRateNegotiation.razor.rz.scp.css */
/* Convenir d'un tarif avec l'ingénieur d'une séance.

   Reprend à l'identique les deux jeux de règles qu'il remplace — .sp-engineer-proposal du
   récapitulatif et .rfd-engineer-proposal de la page de détail — qui ne différaient que de
   quelques centièmes de rem. */

.ern[b-kgylfu1kz5] {
    margin-top: 0.75rem;
    padding: 0.6rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed var(--sh-glass-border);
    border-radius: var(--sh-radius-aero-sm);
}

.ern-text[b-kgylfu1kz5] {
    margin: 0 0 0.5rem;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.83rem;
    line-height: 1.4;
}

/* Aucun tarif proposé : il n'y a rien à retenir, seulement un fait à énoncer. */
.ern-none[b-kgylfu1kz5] {
    margin: 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.83rem;
    line-height: 1.4;
}

/* Le formulaire du montant, dans ConfirmDialog : même style que le tarif d'équipe côté
   TeamManagement, pour une seule et même façon de saisir un tarif horaire dans l'application. */
.ern-field[b-kgylfu1kz5] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 0.75rem;
}

.ern-label[b-kgylfu1kz5] {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ern-input[b-kgylfu1kz5] {
    padding: 0.45rem 0.6rem;
    color: #fff;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--sh-glass-border);
    border-radius: var(--sh-radius-aero-sm);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

.ern-checkbox[b-kgylfu1kz5] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.82rem;
}
/* /Components/Session/EngineerSessionCalendar.razor.rz.scp.css */
/* L'agenda de l'ingénieur : les mêmes mesures que le planning du studio, pour que la même grille
   se lise de la même façon d'un espace à l'autre. */

.esc-scale[b-fh38zwl0tw] {
    padding: 0.35rem 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    background: transparent;
    border: 0;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    transition: color 140ms ease, background 140ms ease;
}

.esc-scale:hover[b-fh38zwl0tw] { color: #fff; }

/* L'aqua de l'espace ingénieur plutôt que l'or du studio : c'est son agenda, pas celui d'une salle. */
.esc-scale.is-on[b-fh38zwl0tw] {
    color: #001a1f;
    background: var(--sh-space-engineer);
}

.esc-empty[b-fh38zwl0tw] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.7rem;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.82rem;
}

.esc-block[b-fh38zwl0tw] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.esc-block-studio[b-fh38zwl0tw] {
    overflow: hidden;
    font-size: 0.78rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.esc-block-who[b-fh38zwl0tw] {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Session/ReservationDetail.razor.rz.scp.css */
/* Le détail d'une séance, partagé par l'espace artiste et l'espace ingénieur.

   Aucune largeur imposée : le composant occupe la colonne de contenu de la coquille d'espace qui
   le monte, exactement comme la liste qu'il remplace. */

.rdetail[b-88voa6ek4y] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

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

.rdetail-head[b-88voa6ek4y] {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "back back"
        "title status"
        "actions actions";
    align-items: end;
    gap: 0.75rem 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--sh-glass-border);
}

/* Le retour tient sa propre ligne, au-dessus du titre : c'est la sortie, et elle doit se
   trouver sans avoir à balayer l'en-tête. */
.rdetail-back[b-88voa6ek4y] {
    grid-area: back;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    width: fit-content;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.8rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-decoration: none;
}

.rdetail-back:hover[b-88voa6ek4y],
.rdetail-back:focus-visible[b-88voa6ek4y] {
    color: var(--sh-semantic-gold);
}

.rdetail-title[b-88voa6ek4y] { grid-area: title; min-width: 0; }

.rdetail-ref[b-88voa6ek4y] {
    display: block;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.14em;
}

.rdetail-title h1[b-88voa6ek4y] {
    margin: 0.15rem 0 0;
    color: #fff;
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

.rdetail-room[b-88voa6ek4y] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.3rem 0 0;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.9rem;
}

.rdetail-when-short[b-88voa6ek4y] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.5rem 0 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
    font-weight: 600;
}

.rdetail-status[b-88voa6ek4y] {
    grid-area: status;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem;
}

/* ── Angles ────────────────────────────────────────────────────────────────────────── */

.rdetail-lenses[b-88voa6ek4y] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.rdetail-lens[b-88voa6ek4y] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--sh-glass-border);
    border-radius: var(--sh-radius-aero-sm);
    background: rgba(0, 0, 0, 0.28);
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.82rem;
    font-weight: 650;
    text-decoration: none;
}

.rdetail-lens:hover[b-88voa6ek4y],
.rdetail-lens:focus-visible[b-88voa6ek4y] {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.28);
}

.rdetail-lens.is-active[b-88voa6ek4y] {
    background: var(--sh-semantic-gold-subtle);
    border-color: var(--sh-semantic-gold);
    color: var(--sh-semantic-gold);
}

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

.rdetail-body[b-88voa6ek4y] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.rdetail-section[b-88voa6ek4y] {
    padding: 1rem 1.15rem;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid var(--sh-glass-border);
    border-radius: var(--sh-radius-aero-sm);
}

.rdetail-section h2[b-88voa6ek4y] {
    margin: 0 0 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.rdetail-notes[b-88voa6ek4y] {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.92rem;
    line-height: 1.55;
    white-space: pre-wrap;
}

.rdetail-hint[b-88voa6ek4y] {
    margin: 0.65rem 0 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.82rem;
    line-height: 1.5;
}

/* ── Listes de faits et de montants ────────────────────────────────────────────────── */

.rdetail-facts[b-88voa6ek4y],
.rdetail-amounts[b-88voa6ek4y] {
    display: grid;
    gap: 0.5rem 1.5rem;
    margin: 0;
}

.rdetail-facts[b-88voa6ek4y] { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }

.rdetail-facts > div[b-88voa6ek4y] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.rdetail-facts dt[b-88voa6ek4y],
.rdetail-amounts dt[b-88voa6ek4y] {
    margin: 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.rdetail-facts dd[b-88voa6ek4y] {
    margin: 0;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 650;
}

/* L'adresse, sur la même ligne que le geste qui y mène — même esprit que .sww-where, dont elle
   reprend l'icône et l'échelle, plutôt qu'une paire dt/dd de plus qui la ferait lire comme un
   simple fait parmi d'autres. */
.rdetail-place[b-88voa6ek4y] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-top: 0.5rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.rdetail-place-address[b-88voa6ek4y] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
}

.rdetail-place-address i[b-88voa6ek4y] { color: rgba(255, 255, 255, 0.4); }

.rdetail-directions[b-88voa6ek4y] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: var(--sh-semantic-gold-subtle);
    color: var(--sh-semantic-gold);
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.rdetail-directions:hover[b-88voa6ek4y],
.rdetail-directions:focus-visible[b-88voa6ek4y] {
    background: var(--sh-semantic-gold);
    color: #000;
}

/* Les montants s'alignent en colonne, libellé à gauche et somme à droite : c'est ce qui rend
   la soustraction lisible d'un coup d'œil — prix, moins versé, égale reste dû. */
.rdetail-amounts > div[b-88voa6ek4y] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.rdetail-amounts > div:last-child[b-88voa6ek4y] { border-bottom: 0; }

.rdetail-amounts dd[b-88voa6ek4y] {
    margin: 0;
    color: #fff;
    font-size: 1rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

/* Ce qui reste à payer est la seule ligne ambrée : le reste est du constat. */
.rdetail-amounts > div.is-due dd[b-88voa6ek4y] { color: var(--sh-semantic-gold); }

/* L'acompte tenu sur la carte, pas encore débité : même ambre que le reste dû, parce que
   c'est le même argent vu de l'autre bout — pas versé, mais pas absent non plus. */
.rdetail-amount--held[b-88voa6ek4y] { color: var(--sh-semantic-gold); }

/* ── Gestes ────────────────────────────────────────────────────────────────────────── */

.rdetail-actions[b-88voa6ek4y] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

@media (max-width: 40rem) {
    .rdetail-head[b-88voa6ek4y] {
        grid-template-columns: 1fr;
        grid-template-areas:
            "back"
            "title"
            "status"
            "actions";
    }

    .rdetail-status[b-88voa6ek4y] { justify-content: flex-start; }

    .rdetail-title h1[b-88voa6ek4y] { font-size: 1.35rem; }

    .rdetail-actions > *[b-88voa6ek4y] { flex: 1 1 100%; }
}

/* ── Gestes propres à l'espace, dans l'en-tête ─────────────────────────────────────── */

.rdetail-header-actions[b-88voa6ek4y] {
    grid-area: actions;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ── Pastille REC ──────────────────────────────────────────────────────────────────── */

.rdetail-rec[b-88voa6ek4y] { font-variant-numeric: tabular-nums; }

/* Le point bat : c'est ce qui distingue une séance en cours d'une séance simplement acceptée.
   La pastille REC passe désormais par StatusBadge, dont le point interne (.status-dot) n'a pas
   de classe à lui — on le vise donc depuis le wrapper. */
.rdetail-rec[b-88voa6ek4y]  .status-dot { animation: rdetail-rec-pulse-b-88voa6ek4y 1.6s ease-in-out infinite; }

@keyframes rdetail-rec-pulse-b-88voa6ek4y {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
    .rdetail-rec[b-88voa6ek4y]  .status-dot { animation: none; }
}

/* ── Non-lus sur l'angle Messages ──────────────────────────────────────────────────── */

.rdetail-lens-badge[b-88voa6ek4y] {
    min-width: 1.15rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--sh-semantic-gold);
    color: #12100b;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.15rem;
    text-align: center;
}

/* Chapeau d'une section : il précède le contenu au lieu de le commenter après. */
.rdetail-hint--lead[b-88voa6ek4y] { margin: 0 0 0.75rem; }
/* /Components/Session/SessionActionBar.razor.rz.scp.css */
/* L'indicateur de traitement, pendant qu'un geste est en cours.

   Sa règle vivait dans la feuille du panneau, d'où le balisage a été extrait. En CSS scopé une
   règle ne vise que son propre composant : l'indicateur s'affichait donc sans style, en texte
   brut, au moment précis où l'utilisateur attend un signe que ça travaille. */

.sidepanel-processing[b-hw9xu7l4x6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.6rem;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.8rem;
}

/* Ce qui est fait et n'attend plus rien de vous : une ligne, pas un bouton grisé. Un bouton
   inerte laisse chercher ce qu'on a mal fait. */
.sh-action-note[b-hw9xu7l4x6] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0.45rem 0.2rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.84rem;
}

.sh-action-note i[b-hw9xu7l4x6] { color: var(--sh-green); }
/* /Components/Session/SessionCommitmentNotice.razor.rz.scp.css */
/* L'engagement : un cadre doré discret, pas une alerte. Ce n'est pas un danger, c'est une
   promesse — l'ambre des avertissements le ferait lire comme un risque. */

.commitment[b-cflof8z25o] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(217, 166, 83, 0.35);
    border-radius: var(--sh-radius-aero-sm, 12px);
    background: rgba(217, 166, 83, 0.06);
    text-align: left;
}

.commitment--compact[b-cflof8z25o] {
    padding: 0;
    border: 0;
    background: transparent;
}

.commitment-title[b-cflof8z25o] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    color: #fff;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.35;
}

.commitment-title i[b-cflof8z25o] {
    margin-top: 0.1rem;
    color: var(--sh-gold, #d9a653);
}

.commitment-terms[b-cflof8z25o] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    padding-left: 1.15rem;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.84rem;
    line-height: 1.45;
}

.commitment-terms li[b-cflof8z25o]::marker { color: var(--sh-gold, #d9a653); }

.commitment-agree[b-cflof8z25o] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: 0.2rem;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}

.commitment-agree input[b-cflof8z25o] {
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.1rem;
    accent-color: var(--sh-gold, #d9a653);
    cursor: pointer;
}
/* /Components/Session/SessionLossNotice.razor.rz.scp.css */
/* Un avertissement, pas un blocage : le studio a le droit de perdre sur une séance, il doit
   seulement le savoir. D'où le filet rouge plutôt qu'un fond d'alarme. */
.loss-notice[b-8ej5fff5dj] {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0.7rem 0 0;
    padding: 0.5rem 0.7rem;
    color: #ff8b8b;
    background: rgba(255, 71, 71, 0.08);
    border: 1px solid rgba(255, 71, 71, 0.28);
    border-radius: 10px;
    font-size: 0.8rem;
    line-height: 1.45;
}

.loss-notice strong[b-8ej5fff5dj] {
    color: #ff8b8b;
    font-variant-numeric: tabular-nums;
}
/* /Components/Session/SessionMoneyGauge.razor.rz.scp.css */
/* La barre de progression du règlement. */

.smg[b-cy03j3pf29] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.smg-track[b-cy03j3pf29] {
    display: flex;
    flex: 1 1 auto;
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
}

/* Tant qu'il reste quelque chose à solder, la piste elle-même se teinte d'ambre — au lieu de
   rester un gris neutre qui ne dit ni « rien dû » ni « pas encore réglé ». Soldée, la barre est
   pleine et verte : la couleur de la piste ne se voit plus, et ne dit donc plus rien de faux. */
.smg-track--due[b-cy03j3pf29] { background: var(--sh-semantic-gold-subtle); }

.smg-fill[b-cy03j3pf29] {
    height: 100%;
    transition: width var(--sh-duration-aero) var(--sh-ease-liquid);
}

/* Encaissé, entièrement ou en partie : c'est de l'argent réellement rentré, il est vert dès le
   premier centime — pas seulement quand la session est soldée. */
.smg-fill--captured[b-cy03j3pf29] { background: linear-gradient(90deg, #1f9254, #4ade80); }

/* Tenu, pas encaissé : l'ambre en rayures, qui ne se confond pas avec une barre pleine et unie.
   Même motif que le fond /admin (AdminSessionDetail), pour que « réservé » se lise pareil des
   deux côtés. Rempli sur la part que représente l'acompte, pas sur toute la largeur — une barre
   pleine hachurée dirait « réservé » sans dire combien. */
.smg-fill--held[b-cy03j3pf29] {
    background: repeating-linear-gradient(135deg,
        var(--sh-semantic-gold) 0 6px,
        var(--sh-semantic-gold-hover) 6px 12px);
}

.smg-value[b-cy03j3pf29] {
    flex: 0 0 auto;
    min-width: 3.2rem;
    text-align: right;
    color: var(--sh-gold);
    font-size: 0.82rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.smg-value.is-captured[b-cy03j3pf29],
.smg-value.is-settled[b-cy03j3pf29] { color: #4ade80; }

/* Le chiffre reste neutre : c'est la barre, hachurée, qui porte « réservé, pas encaissé ».
   Les deux en ambre répétaient le même signal ; un seul suffit et se comprend mieux. */
.smg-value.is-held[b-cy03j3pf29] { color: rgba(255, 255, 255, 0.55); }
/* /Components/Session/SessionRecap.razor.rz.scp.css */
/* Le récapitulatif d'une séance : quand, où, avec qui, où en est l'argent.

   Ces règles vivaient dans le panneau latéral. Elles le suivent ici parce que le balisage a
   déménagé : la page de détail montre désormais les mêmes blocs, et sans ce déplacement elle
   aurait hérité du balisage sans son style.

   Le conteneur .sr n'impose aucune largeur : le panneau le contraint à sa colonne, le détail
   lui donne toute la sienne. C'est le seul écart voulu entre les deux vues. */

.sr[b-v51uokyahg] { display: contents; }

.sp-block[b-v51uokyahg] {
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid var(--sh-glass-border);
    /* Suit l'arrondi du panneau, un cran en dessous : des angles vifs à l'intérieur d'une
       carte franchement arrondie se voient immédiatement. */
    border-radius: var(--sh-radius-aero-sm);
}

.sp-block-head[b-v51uokyahg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.55rem;
}

.sp-block-title[b-v51uokyahg] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.sp-block-note[b-v51uokyahg] {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.78rem;
}

.sp-line[b-v51uokyahg] {
    margin: 0;
    color: #fff;
    font-size: 0.88rem;
}

.sp-line--muted[b-v51uokyahg] { color: rgba(255, 255, 255, 0.55); }

.sp-warn[b-v51uokyahg] {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0.5rem 0 0;
    padding: 0.5rem 0.65rem;
    color: #f0c34f;
    background: rgba(240, 180, 0, 0.1);
    border: 1px solid rgba(240, 180, 0, 0.28);
    border-radius: var(--sh-radius-aero-sm);
    font-size: 0.78rem;
}

.sp-money[b-v51uokyahg] {
    display: flex;
    gap: 1.5rem;
    margin: 0;
}

.sp-money > div[b-v51uokyahg] { display: flex; flex-direction: column; gap: 0.1rem; }

.sp-money dt[b-v51uokyahg] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sp-money dd[b-v51uokyahg] {
    margin: 0;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

/* Réservé sur la carte, pas encaissé : ni la couleur de l'argent reçu, ni celle d'un impayé. */
.sp-money-hold[b-v51uokyahg] { color: var(--sh-aqua) !important; font-size: 0.85rem !important; }

.sp-due[b-v51uokyahg] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    margin: 0.65rem 0 0;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.82rem;
}

.sp-due strong[b-v51uokyahg] {
    color: var(--sh-gold);
    font-size: 1.05rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.sp-settled[b-v51uokyahg] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0.65rem 0 0;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #4ade80;
    font-size: 0.85rem;
    font-weight: 700;
}

/* Ambre et non rouge : ce n'est pas une erreur du studio, c'est une règle du métier — on ne
   livre pas un travail qu'on n'a pas été payé pour. */
.sp-hold[b-v51uokyahg] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0.35rem 0 0;
    color: var(--sh-amber);
    font-size: 0.78rem;
    font-weight: 650;
}




/* Les règles de l'empilement brut → net (.sp-money-stack, .sp-fees-kind, .sp-net-detail) et
   celles de la négociation de tarif (.sp-engineer-proposal, .sp-rate-*) sont parties avec leur
   balisage, dans StudioNetStack et EngineerRateNegotiation : ces deux blocs étaient recopiés à
   l'identique dans la page de détail financier, style compris. */
/* /Components/Session/SessionWhenWhere.razor.rz.scp.css */
/* Quand et où. Règles reprises du panneau latéral, qui les portait avant que le balisage ne
   devienne partagé. */

.sww-when[b-fin9w7lawm] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 0.95rem;
    color: #fff;
}

.sww-hours[b-fin9w7lawm] { font-weight: 750; color: var(--sh-gold); }
.sww-length[b-fin9w7lawm] { color: rgba(255, 255, 255, 0.6); }
.sww-dot[b-fin9w7lawm] { color: rgba(255, 255, 255, 0.3); }

.sww-where[b-fin9w7lawm] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.25rem;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.85rem;
}
/* /Components/Session/SettlementNotice.razor.rz.scp.css */
/* Le rappel du solde en fin de tunnel. Centré, comme les messages de fin qu'il accompagne. */

.sn-notice[b-9xhq1msnlw] {
    max-width: 26rem;
    margin: 1.25rem auto 0;
}

.sn-when[b-9xhq1msnlw] {
    max-width: 26rem;
    margin: 0.5rem auto 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
}
/* /Components/Session/StudioNetStack.razor.rz.scp.css */
/* Ce que le studio touche sur une séance.

   Reprend à l'identique les règles .sp-money-* du récapitulatif de séance et .rfd-money-* de la
   page de détail financier, qui décrivaient le même empilement avec deux préfixes. */

.sns[b-cpkk1e93dl] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0 0 0.9rem;
}

.sns-line[b-cpkk1e93dl] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.sns-line dt[b-cpkk1e93dl] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sns-line dd[b-cpkk1e93dl] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

/* Le brut : blanc, en tête. C'est ce que la séance vaut, le chiffre qu'on cherche d'abord. */
.sns-gross[b-cpkk1e93dl] { color: #fff; }

/* Ce qui part : plus petit que les deux montants qu'il sépare, il ne se lit pas au même titre. */
.sns-fees[b-cpkk1e93dl] {
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.92rem !important;
    font-weight: 600 !important;
}

.sns-line--net[b-cpkk1e93dl] {
    padding-top: 0.35rem;
    border-top: 1px solid var(--sh-glass-border);
}

.sns-net[b-cpkk1e93dl] { color: var(--sh-green); }

/* Un net négatif n'est pas un net : c'est un coût, et il porte la couleur de ce qui alerte. */
.sns-net--loss[b-cpkk1e93dl] { color: #ff8b8b !important; }

/* Estimés ou facturés : deux natures très différentes sous un même mot. L'ambre signale ce qui
   peut encore bouger, le gris ce qui est acquis. */
.sns-fees-kind[b-cpkk1e93dl] {
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    font-size: 0.66rem;
}

.sns-fees-kind--estimated[b-cpkk1e93dl] {
    color: var(--sh-amber);
    background: var(--sh-amber-glow, rgba(212, 165, 116, 0.18));
}

.sns-fees-kind--actual[b-cpkk1e93dl] {
    color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.06);
}

.sns-detail[b-cpkk1e93dl] {
    margin-bottom: 0.6rem;
}

.sns-detail > summary[b-cpkk1e93dl] {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.76rem;
    cursor: pointer;
    list-style: none;
}

.sns-detail > summary[b-cpkk1e93dl]::-webkit-details-marker { display: none; }
.sns-detail > summary:hover[b-cpkk1e93dl] { color: rgba(255, 255, 255, 0.72); }
.sns-detail[open] > summary[b-cpkk1e93dl] { margin-bottom: 0.4rem; }

.sns-note[b-cpkk1e93dl] {
    margin: 0.5rem 0 0;
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.74rem;
    line-height: 1.45;
}

/* La rémunération éteinte d'une séance close : présente pour dire qu'elle a été tranchée, mais
   sans le poids d'une déduction — il n'y a rien à soustraire. Le zéro se lit plus pâle encore que
   les frais, et la mention juste dessous porte le pourquoi. */
.sns-line--void dd[b-cpkk1e93dl] {
    color: rgba(255, 255, 255, 0.3);
}

.sns-note--void[b-cpkk1e93dl] {
    margin-top: 0.25rem;
}
/* /Components/SessionCountdown.razor.rz.scp.css */
/* Styles du composant. Étaient un <style> en ligne, donc globaux et présents dans le DOM tant
   que le composant était affiché ; scopés ici, ils ne visent plus que son propre balisage.

   Vérifié avant le déplacement : aucune de ces classes n'est posée ni redéfinie dans un autre
   fichier, et aucun sélecteur ne vise un élément rendu par un composant enfant — ::deep est
   donc inutile. */

.sh-session-countdown[b-3cltgrdmp1] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.75);
}

.sh-session-countdown-value[b-3cltgrdmp1] { font-variant-numeric: tabular-nums; }

/* L'heure de fin, en retrait : elle sert à recouper le décompte, pas à le concurrencer. */
.sh-session-countdown-at[b-3cltgrdmp1] {
    padding-left: 0.5rem;
    margin-left: 0.15rem;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.55);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.sh-session-countdown--warning[b-3cltgrdmp1] {
    color: #f2c66d;
    border-color: rgba(242, 198, 109, 0.35);
    background: rgba(242, 198, 109, 0.08);
}

.sh-session-countdown--danger[b-3cltgrdmp1] {
    color: #ff8b8b;
    border-color: rgba(255, 71, 71, 0.4);
    background: rgba(255, 71, 71, 0.1);
    animation: sh-countdown-pulse-b-3cltgrdmp1 1.4s ease-in-out infinite;
}

/* Le fichier était écrit « @@keyframes », l'échappement des .razor : en CSS scopé c'est une
   règle inconnue, et l'animation ne s'appliquait donc jamais. */
@keyframes sh-countdown-pulse-b-3cltgrdmp1 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
    .sh-session-countdown--danger[b-3cltgrdmp1] { animation: none; }
}
/* /Components/ShToggle.razor.rz.scp.css */
/* Interrupteur, d'après Uiverse, réécrit avec nos jetons.

   L'original masque sa case par `display: none`. C'est le défaut à corriger : ainsi cachée, elle
   quitte l'ordre de tabulation, et l'interrupteur devient injoignable au clavier. Elle est donc
   simplement rendue invisible, et garde le focus — qu'on rend visible sur la piste. */

.sht[b-zfyj126b0n] {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    cursor: pointer;
}

.sht-input[b-zfyj126b0n] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

.sht-track[b-zfyj126b0n] {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    width: 60px;
    height: 30px;
    background: rgba(255, 255, 255, 0.14);
    border: 4px solid transparent;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.35);
    transition: background 300ms ease;
}

.sht-track[b-zfyj126b0n]::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.25);
    transform: translateX(-30px);
    transition: transform 300ms ease;
}

.sht-input:checked ~ .sht-track[b-zfyj126b0n] { background: var(--sh-gold); }
.sht-input:checked ~ .sht-track[b-zfyj126b0n]::before { transform: translateX(30px); }

/* Le pouce revient au centre pendant l'appui : l'original le fait, et c'est ce qui donne au
   geste sa consistance de bascule physique. */
.sht-input:active:not(:disabled) ~ .sht-track[b-zfyj126b0n]::before { transform: translateX(0); }

/* Le focus se voit sur la piste, puisque la case n'est plus visible. */
.sht-input:focus-visible ~ .sht-track[b-zfyj126b0n] {
    outline: 2px solid var(--sh-aqua, #4fd1e8);
    outline-offset: 3px;
}

.sht-label[b-zfyj126b0n] {
    display: flex;
    flex-direction: column;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 650;
}

.sht-reason[b-zfyj126b0n] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    font-weight: 500;
}

/* Désactivé : la piste s'éteint, mais le pouce reste lisible — on doit pouvoir lire l'état
   qu'on ne peut pas changer. */
.sht--off[b-zfyj126b0n] { cursor: not-allowed; }
.sht--off .sht-track[b-zfyj126b0n] { opacity: 0.45; box-shadow: none; }
.sht--off .sht-label[b-zfyj126b0n] { color: rgba(255, 255, 255, 0.55); }

@media (prefers-reduced-motion: reduce) {
    .sht-track[b-zfyj126b0n], .sht-track[b-zfyj126b0n]::before { transition: none; }
}

/* Une taille réduite, pour les volets où l'interrupteur partage la ligne avec un tarif et une
   durée. Le calendrier de réservation la décrivait chez lui, en visant le balisage de ce
   composant — ce qui ne tenait qu'à un <style> global. */
.sht--compact .sht-track[b-zfyj126b0n] { width: 44px; height: 22px; border-width: 3px; }
.sht--compact .sht-track[b-zfyj126b0n]::before { transform: translateX(-22px); }
.sht--compact .sht-input:checked ~ .sht-track[b-zfyj126b0n]::before { transform: translateX(22px); }
.sht--compact .sht-label[b-zfyj126b0n] { font-size: 0.78rem; }
.sht--compact .sht-reason[b-zfyj126b0n] { font-size: 0.68rem; }
/* /Components/SmartOnboardingBanner.razor.rz.scp.css */
/* Le bandeau qui rappelle ce qu'il reste à configurer. */

.suggestion-card[b-9b87g25l6d] {
    cursor: pointer;
    transition: all 0.3s ease;
}

.suggestion-card:hover[b-9b87g25l6d] {
    border-color: var(--sh-gold) !important;
    background: rgba(255, 204, 0, 0.05) !important;
}




/* Il s'annonçait par un dégradé et un liseré doré pleins : dans un espace, il criait plus fort
   que le titre de la page qu'il surmontait, et il criait en or jusque chez l'artiste. Il prend
   la surface et le filet d'accent des autres cartes de l'espace — l'anneau de progression suffit
   à dire qu'il attend quelque chose. */
.onboarding-banner[b-9b87g25l6d] {
    background: var(--sh-elev-2-bg);
    border: 1px solid var(--sh-elev-2-border);
    border-left: 3px solid var(--sh-accent);
    border-radius: var(--sh-radius-aero-sm, 14px);
    overflow: hidden;
    transition: background 200ms ease, border-color 200ms ease;
}

.banner-header[b-9b87g25l6d] {
    padding: 1rem 1.25rem;
    cursor: pointer;
}

.banner-header:hover[b-9b87g25l6d] {
    background: var(--sh-accent-soft);
}

.banner-content[b-9b87g25l6d] {
    padding: 0 1.25rem 1.25rem;
    animation: slideDown-b-9b87g25l6d 0.3s ease;
}

@keyframes slideDown-b-9b87g25l6d {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.progress-ring[b-9b87g25l6d] {
    width: 50px;
    height: 50px;
}

.progress-ring-mini[b-9b87g25l6d] {
    width: 30px;
    height: 30px;
}

.circular-chart[b-9b87g25l6d] {
    display: block;
}

.circular-chart-mini[b-9b87g25l6d] {
    display: block;
    width: 30px;
    height: 30px;
}

.circle-bg[b-9b87g25l6d] {
    fill: none;
    stroke: rgba(255,255,255,0.1);
    stroke-width: 3;
}

.circle[b-9b87g25l6d] {
    fill: none;
    stroke: var(--sh-accent);
    stroke-width: 3;
    stroke-linecap: round;
    animation: progress-b-9b87g25l6d 1s ease-out forwards;
}

@keyframes progress-b-9b87g25l6d {
    0% { stroke-dasharray: 0 100; }
}

.percentage[b-9b87g25l6d] {
    fill: white;
    font-size: 0.5rem;
    text-anchor: middle;
    font-weight: bold;
}

.completion-item[b-9b87g25l6d] {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.completion-item:hover[b-9b87g25l6d] {
    background: var(--sh-accent-soft);
    border-color: var(--sh-accent-edge);
}

.completion-item.critical[b-9b87g25l6d] {
    border-color: rgba(220, 53, 69, 0.5);
}

.completion-item.critical:hover[b-9b87g25l6d] {
    border-color: var(--sh-accent-edge);
}

.item-icon[b-9b87g25l6d] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.item-icon.complete[b-9b87g25l6d] {
    background: rgba(40, 167, 69, 0.2);
    color: #28a745;
}

.item-icon.critical[b-9b87g25l6d] {
    background: rgba(220, 53, 69, 0.2);
    color: #dc3545;
}

.item-icon.pending[b-9b87g25l6d] {
    background: var(--sh-accent-soft);
    color: var(--sh-accent);
}

/* Replié, l'assistant n'est plus qu'un rang : l'anneau, un pourcentage, une flèche. C'est
   l'état par défaut d'un profil presque complet — à 94 %, une carte dépliée réclame une place
   qu'elle ne mérite plus. */
.mini-progress[b-9b87g25l6d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    width: 100%;
    padding: 0.45rem 0.7rem;
    background: var(--sh-elev-1-bg);
    border: 1px solid var(--sh-elev-1-border);
    border-left: 3px solid var(--sh-accent);
    border-radius: 999px;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease;
}

.mini-progress:hover[b-9b87g25l6d],
.mini-progress:focus-visible[b-9b87g25l6d] {
    background: var(--sh-accent-soft);
    border-color: var(--sh-accent-edge);
}

/* La grille des points à compléter, sans la grille de Bootstrap : « .row » y pose des marges
   négatives de douze pixels, et le bandeau débordait des deux côtés de la page. */
.onboarding-grid[b-9b87g25l6d] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.6rem;
}

.mini-progress-ring[b-9b87g25l6d] {
    flex: none;
    width: 30px;
    height: 30px;
}

.mini-progress-text[b-9b87g25l6d] {
    flex: 1;
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    min-width: 0;
    text-align: left;
}

.mini-progress-text > strong[b-9b87g25l6d] {
    color: var(--sh-accent);
    font-size: 0.85rem;
    font-weight: 800;
}

/* Ce qu'il reste à faire, dit d'un mot. Le rang disait « Profil à 94 % » et rien d'autre : un
   pourcentage sans suite n'appelle aucun geste, il constate. */
.mini-progress-text > span[b-9b87g25l6d] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mini-progress > i[b-9b87g25l6d] {
    flex: none;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.8rem;
}

.completion-item > div > i.bi-arrow-right[b-9b87g25l6d] { color: var(--sh-accent); }
/* /Components/Studio/EngineerPayoutActions.razor.rz.scp.css */
/* Ce qui s'écrit à la place des boutons quand il n'y a rien à déclarer : une attente, pas une
   action. Même valeur que dans la file de l'onglet Finances, d'où ces deux mots viennent. */

.payout-wait[b-b153ozzd6e] {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.76rem;
    font-weight: 650;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
/* /Components/Studio/EngineerPayoutMirror.razor.rz.scp.css */
/* Le montant dû, écrit comme les montants du détail d'une séance : le libellé à gauche, la somme
   à droite, sur une ligne qu'on lit sans relire. */

.payout-amounts[b-urp9g5w3f9] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
}

.payout-amounts > div[b-urp9g5w3f9] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.payout-amounts dt[b-urp9g5w3f9] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.86rem;
    font-weight: 650;
}

.payout-amounts dd[b-urp9g5w3f9] {
    margin: 0;
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.payout-actions[b-urp9g5w3f9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
/* /Components/Studio/EngineerPickerModal.razor.rz.scp.css */
/* Le choix d'un ingénieur : une liste courte, un tarif, un bouton. */

.picker-overlay[b-sggm76bqhu] {
    position: fixed;
    inset: 0;
    z-index: var(--sh-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.picker-dialog[b-sggm76bqhu] {
    width: min(30rem, 100%);
    max-height: 80vh;
    overflow-y: auto;
    padding: 1.2rem 1.3rem 1rem;
    background: var(--sh-elev-4-bg);
    border: 1px solid var(--sh-elev-4-border);
    border-radius: var(--sh-radius-aero-sm, 14px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), var(--sh-elev-4-shadow);
}

.picker-head[b-sggm76bqhu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.picker-head h2[b-sggm76bqhu] {
    margin: 0;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 800;
}

.picker-close[b-sggm76bqhu] {
    padding: 0.25rem 0.45rem;
    color: rgba(255, 255, 255, 0.55);
    background: none;
    border: 0;
    cursor: pointer;
}

.picker-close:hover[b-sggm76bqhu] { color: #fff; }

.picker-list[b-sggm76bqhu] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.picker-row[b-sggm76bqhu] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--sh-glass-border);
}

.picker-row:last-child[b-sggm76bqhu] { border-bottom: 0; }

.picker-identity[b-sggm76bqhu] { min-width: 0; }

.picker-name[b-sggm76bqhu] {
    display: block;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.picker-city[b-sggm76bqhu] {
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.75rem;
}

/* Le tarif décide autant que le nom : il se lit sans avoir à ouvrir une fiche. */
.picker-rate[b-sggm76bqhu] {
    color: var(--sh-gold);
    font-size: 0.82rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.picker-rate--unknown[b-sggm76bqhu] {
    color: rgba(255, 255, 255, 0.35);
    font-weight: 400;
    font-style: italic;
}

/* Le montant et son statut d'accord empilés : le choix se fait sur les deux à la fois. */
.picker-rate-cell[b-sggm76bqhu] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
}

/* Un tarif de vitrine, pas un accord : il ne reste plus discret, le geste qui suit s'appuierait
   sur un montant que le studio n'a pas décidé. */
.picker-rate-flag[b-sggm76bqhu] {
    color: #ffc107;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.picker-foot[b-sggm76bqhu] {
    margin: 0.9rem 0 0;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.76rem;
}

/* Un tarif proposé n'est pas un tarif dû : il s'écrit en gris, pas dans l'or des montants. */
.picker-rate--proposed[b-sggm76bqhu] { color: rgba(255, 255, 255, 0.45); }

/* L'ingénieur déjà pris sur ce créneau. Atténué, pas caché : le studio doit voir que la personne
   fait bien partie de son équipe — sinon il la croit partie et va la réinviter. */
.picker-row.is-busy[b-sggm76bqhu] {
    opacity: 0.55;
}

.picker-busy[b-sggm76bqhu] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--sh-amber, #ffb020);
}

/* Hors de ses heures déclarées : dit, pas barré. Le studio connaît son équipe mieux qu'un
   agenda, et un ingénieur reste libre de prendre une séance qu'il voit passer. */
.picker-offhours[b-sggm76bqhu] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
}
/* /Components/Studio/RoomStatusTile.razor.rz.scp.css */
/* Tuile d'état d'une salle.

   Trois états, trois tons. Le rouge ne désigne que le présent — c'est la couleur de la barre
   REC, et elle ne doit jamais dire autre chose qu'une session qui tourne. */

.rst[b-mumullk9kg] {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "room  state"
        "who   time";
    gap: 0.35rem 0.75rem;
    width: 100%;
    padding: 0.9rem 1rem;
    text-align: left;
    background: var(--sh-glass-bg);
    border: 1px solid var(--sh-glass-border);
    border-radius: var(--sh-radius-aero-sm);
    box-shadow: var(--sh-glass-specular);
    transition: background var(--sh-duration-aero) var(--sh-ease-liquid),
                border-color var(--sh-duration-aero) var(--sh-ease-liquid),
                transform var(--sh-duration-aero) var(--sh-ease-liquid);
}

.rst:not(:disabled):hover[b-mumullk9kg] {
    background: var(--sh-glass-bg-raised);
    transform: translateY(-1px);
}

/* Une salle libre n'est pas cliquable : rien à ouvrir. Elle ne doit pas paraître éteinte
   pour autant — elle est simplement disponible. */
.rst:disabled[b-mumullk9kg] { cursor: default; opacity: 1; }

.rst-room[b-mumullk9kg] {
    grid-area: room;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 750;
}

.rst-state[b-mumullk9kg] {
    grid-area: state;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.rst-who[b-mumullk9kg] {
    grid-area: who;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rst-who--muted[b-mumullk9kg] { color: rgba(255, 255, 255, 0.38); }

.rst-time[b-mumullk9kg] {
    grid-area: time;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── En cours ─────────────────────────────────────────────────────────────── */

.rst--live[b-mumullk9kg] {
    background: rgba(255, 71, 71, 0.08);
    border-color: rgba(255, 71, 71, 0.35);
    box-shadow: var(--sh-glass-specular), inset 3px 0 0 #ff4747;
}

.rst--live:not(:disabled):hover[b-mumullk9kg] { background: rgba(255, 71, 71, 0.12); }
.rst--live .rst-time[b-mumullk9kg] { color: #ff8b8b; font-weight: 700; }

/* Le rouge dit « cette salle est occupée en ce moment », rien d'autre. Une séance dont l'heure
   est venue mais que personne n'a ouverte le reste donc : c'est le libellé, « À démarrer », qui
   porte l'écart — pas la couleur. */
.rst-state--live[b-mumullk9kg] { color: #ff8b8b; }
.rst-state--pending[b-mumullk9kg] { color: var(--sh-amber); }
.rst-state--upcoming[b-mumullk9kg] { color: var(--sh-aqua); }
.rst-state--free[b-mumullk9kg] { color: rgba(255, 255, 255, 0.35); }

/* ── La pastille de statut ────────────────────────────────────────────────────

   Quatre états, quatre pastilles. La teinte du texte seule ne suffisait pas :
   elle se lit mal sur fond sombre, et disparaît pour un œil qui distingue mal
   le rouge du vert. Chaque état a donc aussi une forme — pleine et battante,
   pleine, cerclée, creuse — reconnaissable sans la couleur. */

.rst-dot[b-mumullk9kg] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: 0 0 auto;
}

/* En cours : pleine, et elle respire lentement. Elle dit que ça tourne sans
   attirer l'œil en permanence. */
.rst-dot--live[b-mumullk9kg] {
    background: #ff4747;
    animation: rst-pulse-b-mumullk9kg 2s ease-in-out infinite;
}

/* À venir : pleine, immobile. C'est acté, ça n'a pas commencé. */
.rst-dot--upcoming[b-mumullk9kg] { background: var(--sh-aqua); }

/* À valider : cerclée. Le halo dit qu'on attend un geste. */
.rst-dot--pending[b-mumullk9kg] {
    background: var(--sh-amber);
    box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.22);
}

/* Libre : creuse. Rien à l'intérieur, rien de prévu. */
.rst-dot--free[b-mumullk9kg] {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
}

@keyframes rst-pulse-b-mumullk9kg {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
    .rst-dot--live[b-mumullk9kg] { animation: none; }
}

/* ── À venir ──────────────────────────────────────────────────────────────── */

.rst--upcoming[b-mumullk9kg] { border-color: var(--sh-aqua-glow); }

/* Une séance non confirmée n'est pas une séance à venir : elle attend une
   réponse, et la tuile doit le dire avant qu'on lise le libellé. */
.rst--pending[b-mumullk9kg] { border-color: var(--sh-amber-glow); }
/* /Components/Studio/StudioCashModal.razor.rz.scp.css */
/* L'encaissement en espèces, côté studio. */

.studio-cash-modal[b-v2gtj3ej50] {
    position: fixed;
    inset: 0;
    z-index: var(--sh-z-modal);
    display: grid;
    place-items: center;
    padding: 1rem;
    background: var(--sh-overlay-bg);
    backdrop-filter: var(--sh-overlay-blur);
}
.studio-cash-modal__dialog[b-v2gtj3ej50] {
    width: min(100%, 500px);
    max-height: calc(100vh - 2rem);
    display: flex;
}
.studio-cash-modal__content[b-v2gtj3ej50] {
    /* Bornée à l'écran, corps défilant. « overflow: hidden » seul coupait le bas de la modale
       sans un pixel pour le signaler : sur un téléphone, « Demander le paiement par carte » —
       le repli quand l'artiste n'a pas d'espèces — tombait sous le bord de l'écran. */
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;

    color: var(--sh-white);
    background: var(--sh-elev-4-bg);
    border: 1px solid var(--sh-elev-4-border);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), var(--sh-elev-4-shadow);
}
.studio-cash-modal__header[b-v2gtj3ej50] { flex: 0 0 auto; }
.studio-cash-modal__header[b-v2gtj3ej50] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.studio-cash-modal__title[b-v2gtj3ej50] { margin: 0; font-size: 1rem; font-weight: 800; }
.studio-cash-modal__body[b-v2gtj3ej50] {
    padding: 1.5rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Les trois gestes restent visibles pendant que le récapitulatif et le pavé défilent
   au-dessous d'eux : ce sont eux qu'on vient chercher, et les enterrer sous le contenu qui
   les justifie revient à les cacher. Le fond opaque évite que le texte les traverse. */
.studio-cash-modal__body > .sh-actions[b-v2gtj3ej50] {
    position: sticky;
    bottom: calc(-1.5rem - 1px);
    margin: 0 -1.5rem -1.5rem;
    padding: 1rem 1.5rem calc(1rem + env(safe-area-inset-bottom, 0px));
    background: #131313;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.studio-cash-pin-display[b-v2gtj3ej50] {
    display: flex;
    justify-content: center;
    gap: 1.1rem;
}
.studio-cash-pin-digit[b-v2gtj3ej50] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.studio-cash-pin-digit.filled[b-v2gtj3ej50] {
    background: var(--sh-gold);
    border-color: var(--sh-gold);
    transform: scale(1.2);
    box-shadow: 0 0 12px var(--sh-gold-glow);
}
.studio-cash-pin-keypad[b-v2gtj3ej50] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    max-width: 220px;
    margin: 0 auto;
}
.studio-cash-keypad-btn[b-v2gtj3ej50] {
    aspect-ratio: 1;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.studio-cash-keypad-btn:hover[b-v2gtj3ej50] { background: rgba(255, 255, 255, 0.08); }
.studio-cash-keypad-btn.danger[b-v2gtj3ej50] { color: #ff4747; background: rgba(255, 71, 71, 0.05); }
@supports (height: 100dvh) {
    .studio-cash-modal__dialog[b-v2gtj3ej50] { max-height: calc(100dvh - 2rem); }
}

@media (max-width: 576px) {
    /* Feuille posée en bas de l'écran : elle prend la hauteur qu'il lui faut, sans jamais
       dépasser celle qui est réellement visible — barres de Safari comprises. */
    .studio-cash-modal[b-v2gtj3ej50] { align-items: end; padding: 0; }
    .studio-cash-modal__dialog[b-v2gtj3ej50] { width: 100%; max-height: 92vh; }
    .studio-cash-modal__content[b-v2gtj3ej50] { border-right: 0; border-bottom: 0; border-left: 0; border-radius: 18px 18px 0 0; }

    @supports (height: 100dvh) {
        .studio-cash-modal__dialog[b-v2gtj3ej50] { max-height: 92dvh; }
    }
}
/* /Components/Studio/StudioReservationSidePanel.razor.rz.scp.css */
/* Panneau de réservation, côté studio.

   Géométrie, voile, en-tête et pied viennent des classes partagées .sh-sidepanel* d'app.css.
   Ce fichier ne porte que ce qui est propre à ce panneau.

   Le panneau tient sur un écran : rien n'y défile. C'est pourquoi les blocs sont serrés et
   pourquoi le contenu a été réduit à ce qui sert à décider — le reste vit dans la vue de détail.

   Ces règles étaient un <style> en ligne, donc globales et injectées le temps de l'affichage.
   Elles portaient aussi une seconde animation d'entrée, .page-fade-right, qui écrasait celle du
   panneau et le faisait glisser depuis la droite au lieu d'apparaître au centre. */

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

.sp-head[b-yeltjtncia] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.sp-head-who[b-yeltjtncia] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

.sp-head-who h2[b-yeltjtncia] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-head-end[b-yeltjtncia] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 0 0 auto;
}

/* Ouvrir en plein écran : le geste attendu depuis ce panneau, remonté en haut à côté du
   statut. Même famille que .sh-sidepanel-close (rond, fond sourd), teinte aqua — celle de
   l'interactif dans ce panneau — pour qu'il ne se confonde pas avec un bouton d'arrêt, et un
   survol net puisque c'est lui qui doit se voir avant tout autre geste du panneau. */
.sh-sidepanel-expand[b-yeltjtncia] {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: var(--sh-aqua);
    background: var(--sh-aqua-soft);
    border: 1px solid var(--sh-aqua-glow);
    border-radius: 50%;
    transition: background var(--sh-duration-aero) var(--sh-ease-liquid),
                transform var(--sh-duration-aero) var(--sh-ease-liquid);
}

.sh-sidepanel-expand:hover[b-yeltjtncia],
.sh-sidepanel-expand:focus-visible[b-yeltjtncia] {
    background: rgba(79, 209, 232, 0.3);
    transform: scale(1.08);
}

.artist-avatar-sm[b-yeltjtncia] {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    background: var(--sh-purple);
    color: #fff;
    border-radius: 50%;
    font-weight: 800;
    font-size: 1.05rem;
}

/* ── Quand et où ─────────────────────────────────────────────────────────── */

/* ── Blocs ───────────────────────────────────────────────────────────────── */

/* ── Jauge de paiement ───────────────────────────────────────────────────── */

/* ── Montants ────────────────────────────────────────────────────────────── */

/* ── Passerelle vers le détail ───────────────────────────────────────────── */

/* ── Traitement en cours ─────────────────────────────────────────────────── */

/* Le lien vers le détail financier.

   Ces règles étaient parties avec le récapitulatif quand son balisage a été extrait — mais le
   bouton, lui, est resté ici. En CSS scopé, une règle ne vise que le balisage de son propre
   composant : elle ne l'atteignait plus, et le bouton s'affichait nu, sans rien du vocabulaire
   StudioHub. */

/* Second rang : le plein écran a pris la place la plus visible, en haut du panneau
   (.sh-sidepanel-expand). Ce lien reste pour qui cherche spécifiquement l'argent, mais n'a
   plus à rivaliser avec lui — plus de bloc plein cadre, un texte discret qui s'éclaire au
   survol. */
.payment-detail-link[b-yeltjtncia] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.7rem;
    padding: 0;
    color: rgba(255, 255, 255, 0.5);
    background: none;
    border: none;
    font-size: 0.76rem;
    font-weight: 650;
    transition: color var(--sh-duration-aero) var(--sh-ease-liquid);
}

.payment-detail-link:hover[b-yeltjtncia],
.payment-detail-link:focus-visible[b-yeltjtncia] {
    color: var(--sh-aqua);
}

/* Le nom, puis le numéro : l'un se lit, l'autre se transmet. */
.sp-head-names[b-yeltjtncia] {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}

.sp-head-ref[b-yeltjtncia] {
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.76rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
/* /Components/Studio/StudioTabCalendar.razor.rz.scp.css */
/* Autour de la grille : le choix de la salle, la consigne, et ce qu'on vient de sélectionner.
   La grille elle-même porte son propre style, partagé avec le calendrier public. */

/* La barre — son cadre, sa navigation de période — vit dans CalendarPeriodBar depuis que les
   disponibilités de l'ingénieur ont eu besoin de la même. Ne restent ici que les trois portées,
   qui sont propres au planning d'un studio : un basculeur plein, pas trois liens — on change de
   lunette, on ne navigue pas ailleurs. */
.cal-scale[b-n3b899jrzu] {
    padding: 0.35rem 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    background: transparent;
    border: 0;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    transition: color 140ms ease, background 140ms ease;
}

.cal-scale:hover[b-n3b899jrzu] { color: #fff; }

.cal-scale.is-on[b-n3b899jrzu] {
    color: #000;
    background: var(--sh-gold);
}

/* Taillé sur son contenu : en bloc, il tirait un cerne vide jusqu'au bord de l'écran, comme si
   des salles manquaient à droite de la dernière. */
.cal-rooms[b-n3b899jrzu] {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    width: fit-content;
    max-width: 100%;
    padding: 3px;
    margin-bottom: 0.7rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
}

.cal-room[b-n3b899jrzu] {
    padding: 0.35rem 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    background: transparent;
    border: 0;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    transition: color 140ms ease, background 140ms ease;
}

.cal-room:hover[b-n3b899jrzu] { color: #fff; }

.cal-room.is-on[b-n3b899jrzu] {
    color: #000;
    background: var(--sh-gold);
}

.cal-hint[b-n3b899jrzu] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.6rem;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.78rem;
}

.cal-empty[b-n3b899jrzu] {
    padding: 2rem;
    color: rgba(255, 255, 255, 0.45);
    text-align: center;
}

/* ── Le mois ──────────────────────────────────────────────────────────────────

   Sept colonnes de journées, pas d'heures : à cette portée, la question n'est pas « à quelle
   heure » mais « quel jour reste-t-il de la place ». Sept colonnes tiennent sur la largeur d'un
   téléphone sans rien faire déborder, c'est la seule disposition qui n'a jamais eu besoin d'être
   dégradée. */

/* La trame du mois vit dans MonthGrid. Ne reste ici que ce que le studio écrit *dans* une
   journée — sa densité, son décompte — et la teinte des journées qui portent des séances.

   « ::deep » pour la teinte : le bouton d'une journée est écrit par MonthGrid, il porte donc son
   marqueur d'isolation et non celui de ce fichier. La barre et le décompte, eux, sont écrits
   ici — dans le fragment DayContent — et n'en ont pas besoin. */

/* La barre dit combien la journée est prise, le nombre dit combien de séances. Les deux
   ensemble : trois séances d'une heure et une de huit ne se ressemblent pas. */
.cal-day-bar[b-n3b899jrzu] {
    width: 70%;
    height: 4px;
    background: linear-gradient(
        to right,
        var(--sh-gold) 0%,
        var(--sh-gold) calc(var(--fill, 0.2) * 100%),
        rgba(255, 255, 255, 0.09) calc(var(--fill, 0.2) * 100%),
        rgba(255, 255, 255, 0.09) 100%);
    border-radius: 999px;
}

.cal-day-count[b-n3b899jrzu] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1;
}

[b-n3b899jrzu] .cal-day.has-sessions { background: rgba(240, 180, 0, 0.06); }

[b-n3b899jrzu] .cal-day.is-outside.has-sessions { background: rgba(240, 180, 0, 0.03); }

/* Le récapitulatif de sélection reste sous la grille plutôt qu'en volet flottant : le studio a
   déjà la place, et un volet couvrirait les heures qu'il vient de choisir. */
.cal-selection[b-n3b899jrzu] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.75rem;
    padding: 0.8rem 1rem;
    background: rgba(240, 180, 0, 0.08);
    border: 1px solid var(--sh-gold);
    border-radius: 14px;
}

.cal-selection-text[b-n3b899jrzu] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.cal-selection-text strong[b-n3b899jrzu] {
    color: var(--sh-gold);
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
}

.cal-selection-text span[b-n3b899jrzu] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.82rem;
}

.cal-selection-actions[b-n3b899jrzu] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-left: auto;
}

/* La barre de sélection est restée à sa place : après la grille, dans le flux.

   Elle avait été posée au bas de la fenêtre sous 900 px, parce qu'elle tombait sinon sous le pli
   et que le bouton « Bloquer ces heures » devenait introuvable. Le remède créait l'autre défaut :
   flottante, elle recouvrait la dernière journée du calendrier — précisément la zone qu'on vient
   de toucher pour sélectionner des heures.

   Le problème n'était pas sa place mais le fait qu'on ne la voyait pas paraître. C'est le
   calendrier qui l'amène à l'écran, une fois, à l'apparition de la sélection (voir
   DevoilerLaSelection). Elle reste donc après le calendrier, en dessous, et ne recouvre rien. */
@media (max-width: 900px) {
    .cal-selection[b-n3b899jrzu] {
        flex-wrap: wrap;
    }

    .cal-selection-actions[b-n3b899jrzu] { margin-left: 0; width: 100%; }
}

@media (max-width: 640px) {
    /* Sur 390 px, les trois portées côte à côte réduisaient « Semaine » à trois lettres : elles
       se partagent le rang. Le repli de la barre elle-même vit avec elle, dans
       CalendarPeriodBar. */
    .cal-scale[b-n3b899jrzu] { flex: 1 1 0; text-align: center; padding: 0.4rem 0.4rem; }

    .cal-room[b-n3b899jrzu] { flex: 1 1 auto; text-align: center; }

    .cal-selection[b-n3b899jrzu] { flex-direction: column; align-items: stretch; }
    .cal-selection-actions[b-n3b899jrzu] { margin-left: 0; }
    .cal-selection-actions .sh-action[b-n3b899jrzu] { flex: 1 1 8rem; justify-content: center; }
}

/* Le motif d'une indisponibilité, saisi dans la question elle-même plutôt que dans le champ nu
   d'un prompt() de navigateur. */
.calendar-block-reason[b-n3b899jrzu] {
    display: block;
    margin-top: 1rem;
}

.calendar-block-reason span[b-n3b899jrzu] {
    display: block;
    margin-bottom: 0.3rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.calendar-block-reason input[b-n3b899jrzu] {
    width: 100%;
    padding: 0.5rem 0.7rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--sh-glass-border);
    border-radius: 8px;
}

.calendar-block-reason input:focus-visible[b-n3b899jrzu] {
    outline: 2px solid var(--sh-gold);
    outline-offset: 1px;
}

/* Contenu du bloc réservé, posé par ce composant dans le voile que dessine BookingGrid (le fond
   rouge, le cadre, le clic). Empilé plutôt qu'en ligne : c'est ce qui laisse une séance d'une heure
   dégrader proprement — le nom tient dans une seule ligne quand la salle et les pastilles n'ont
   plus la place. */
.cal-block[b-n3b899jrzu] {
    display: flex;
    flex-direction: column;

    /* Deux interlignes seulement, entre trois lignes qui tiennent au pixel près dans la hauteur
       d'un rang : c'est le premier endroit où prendre de la place quand elle manque. */
    gap: 0.15rem;
    min-width: 0;
}

.cal-block-artist[b-n3b899jrzu] {
    overflow: hidden;
    font-size: 0.78rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cal-block-room[b-n3b899jrzu] {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Deux points côte à côte, jamais sur deux lignes : c'est le retour à la ligne qui doublait la
   hauteur du contenu et faisait couper le bloc. */
.cal-block-badges[b-n3b899jrzu] {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.25rem;
    margin-top: 0.1rem;
}
/* /Components/Studio/StudioTabFinances.razor.rz.scp.css */

/* La note de second plan sous le net studio a disparu : la décomposition vit maintenant dans la
   vignette elle-même, à droite du chiffre (voir Figure.Breakdown). Il n'y a donc plus de
   conteneur à étirer autour du Figure — c'est le Figure qui est de nouveau la cellule du rang. */

/* Le compte de paiement : une ligne quand il fonctionne, un appel à l'action quand il manque. */
.fin-account[b-caxm239xjr] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1.5rem;
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
}

.fin-account-icon[b-caxm239xjr] {
    flex: 0 0 auto;
    color: var(--sh-aqua);
    font-size: 1.25rem;
}

.fin-account--todo[b-caxm239xjr] {
    background: rgba(212, 165, 116, 0.08);
    border-color: var(--sh-amber-glow);
}

.fin-account--todo .fin-account-icon[b-caxm239xjr] { color: var(--sh-amber); }

.fin-account-text[b-caxm239xjr] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.fin-account-text strong[b-caxm239xjr] { color: #fff; font-size: 0.92rem; }

.fin-account-text span[b-caxm239xjr] {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
    line-height: 1.45;
}

.fin-account-actions[b-caxm239xjr] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-left: auto;
}

/* Le plan ferme l'écran : c'est ce qui explique l'écart entre le brut et le net vus plus haut. */
.fin-plan[b-caxm239xjr] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
}

.fin-plan-text[b-caxm239xjr] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.fin-plan-label[b-caxm239xjr] {
    color: var(--sh-gold);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.fin-plan-detail[b-caxm239xjr] {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
    line-height: 1.45;
}

.fin-plan .sh-action[b-caxm239xjr] {
    margin-left: auto;
    flex: 0 0 auto;
}

@media (max-width: 640px) {
    .fin-account[b-caxm239xjr],
    .fin-plan[b-caxm239xjr] {
        flex-direction: column;
        align-items: flex-start;
    }

    .fin-account-actions[b-caxm239xjr],
    .fin-plan .sh-action[b-caxm239xjr] {
        margin-left: 0;
        width: 100%;
    }


}

/* Ce que le studio doit à ses ingénieurs. Les lignes elles-mêmes sont celles de la file
   « À traiter » — c'est la même idée : quelqu'un attend quelque chose de vous. */

.fin-crew[b-caxm239xjr] { margin-bottom: 1.5rem; }

.fin-crew-head[b-caxm239xjr] {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.fin-crew-head h3[b-caxm239xjr] {
    margin: 0;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.fin-crew-total[b-caxm239xjr] {
    color: var(--sh-amber);
    font-size: 0.9rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.fin-crew-empty[b-caxm239xjr] {
    margin: 0;
    padding: 1rem 1.1rem;
    color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    font-size: 0.85rem;
}

/* Une attente n'est pas un bouton : le studio a fait sa part, la balle est chez l'ingénieur. */
.fin-crew-wait[b-caxm239xjr] {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.76rem;
    font-weight: 650;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* ── Le carnet ────────────────────────────────────────────────────────────────────
   Une ligne par mouvement : la date, ce que c'est, pour quelle séance, combien. Les montants
   arrivent signés du serveur ; ici, seule la couleur se décide. */
.fin-book-totals[b-caxm239xjr] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
    padding: 0 0 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.fin-book-total[b-caxm239xjr] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.fin-book-total-value[b-caxm239xjr] {
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.fin-book-total--in .fin-book-total-value[b-caxm239xjr] { color: var(--sh-green, #2fbf71); }
.fin-book-total--out .fin-book-total-value[b-caxm239xjr] { color: rgba(255, 255, 255, 0.75); }
/* Un solde négatif est le seul chiffre du carnet qui doive crier : même rouge que les pastilles
   de danger, faute d'un jeton de palette pour cette teinte. */
.fin-book-total-value.is-negative[b-caxm239xjr] { color: #ff8b8b; }

.fin-book-total-label[b-caxm239xjr] {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

/* Le mois et ce qu'il pèse : un carnet se feuillette par mois avant de se lire par ligne. */
.fin-book-month[b-caxm239xjr] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.9rem 0 0.35rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.fin-book-month-sum[b-caxm239xjr] {
    color: rgba(255, 255, 255, 0.6);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

.fin-book-row[b-caxm239xjr] {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.55rem 0.4rem;
    color: inherit;
    text-align: left;
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
}

.fin-book-row:hover[b-caxm239xjr] { background: rgba(255, 255, 255, 0.03); }

.fin-book-day[b-caxm239xjr] {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.fin-book-what[b-caxm239xjr] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.fin-book-label[b-caxm239xjr] {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.82rem;
    font-weight: 650;
}

.fin-book-label--in[b-caxm239xjr] { color: var(--sh-green, #2fbf71); }
.fin-book-label--out[b-caxm239xjr] { color: rgba(255, 255, 255, 0.85); }
.fin-book-label--fee[b-caxm239xjr] { color: rgba(255, 255, 255, 0.55); }

/* La séance à laquelle la ligne se rattache : utile pour la retrouver, jamais pour la lire. */
.fin-book-who[b-caxm239xjr] {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.74rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fin-book-amount[b-caxm239xjr] {
    font-size: 0.88rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fin-book-amount.is-in[b-caxm239xjr] { color: var(--sh-green, #2fbf71); }
.fin-book-amount.is-out[b-caxm239xjr] { color: rgba(255, 255, 255, 0.6); }

@media (max-width: 575.98px) {
    .fin-book-row[b-caxm239xjr] {
        grid-template-columns: 2.6rem minmax(0, 1fr) auto;
        gap: 0.5rem;
    }

    .fin-book-totals[b-caxm239xjr] { gap: 1rem; }
}

/* /Components/Studio/StudioTabHours.razor.rz.scp.css */
/* Styles du composant. Étaient un <style> en ligne, donc globaux et présents dans le DOM tant que le composant était affiché ; scopés ici, ils ne visent plus que son propre balisage.\n\n   Vérifié avant le déplacement : aucune de ces classes n'est posée ni redéfinie dans un autre fichier, et aucun sélecteur ne vise un élément rendu par un composant enfant — ::deep est donc inutile. */

.opening-hours-grid[b-dwzob0skj1] { display: flex; flex-direction: column; gap: 0.75rem; }
.day-row[b-dwzob0skj1] { display: flex; align-items: center; padding: 0.75rem 1rem; border-radius: 8px; transition: all 0.2s; }
.day-row.day-open[b-dwzob0skj1]   { background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.08); }
.day-row.day-closed[b-dwzob0skj1] { background: rgba(220,53,69,0.1); border: 1px solid rgba(220,53,69,0.2); opacity: 0.7; }
.day-name-cell[b-dwzob0skj1] { width: 140px; }
.day-name[b-dwzob0skj1] { font-weight: 600; font-size: 0.85rem; }
.day-toggle-cell[b-dwzob0skj1] { width: 60px; }
.day-times-cell[b-dwzob0skj1] { flex: 1; }
.time-inputs[b-dwzob0skj1] { display: flex; align-items: center; gap: 0.75rem; }
.time-input-group[b-dwzob0skj1] { display: flex; flex-direction: column; gap: 0.25rem; }
.time-label[b-dwzob0skj1] { font-size: 0.65rem; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.05em; }
.time-separator[b-dwzob0skj1] { color: rgba(255,255,255,0.3); margin-top: 1rem; }


/* Le bandeau « ouvert en permanence » : un texte à gauche, l'interrupteur à droite. Il était
   bâti en utilitaires Bootstrap, et son commutateur se comprimait contre le texte sur un écran
   étroit — c'est ce qu'on voyait déborder en haut de l'écran des horaires. */
.hours-always[b-dwzob0skj1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding: 0.85rem 1rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
}

.hours-always-text[b-dwzob0skj1] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.hours-always-text strong[b-dwzob0skj1] { color: #fff; font-size: 0.92rem; }

.hours-always-text span[b-dwzob0skj1] { color: rgba(255, 255, 255, 0.5); font-size: 0.8rem; }

/* ── Téléphone : la journée se lit sur deux rangs ────────────────────────────────────────
   La ligne d'un jour alignait trois cellules de largeur fixe — 140 px pour le nom, 60 px pour
   l'interrupteur — puis deux champs d'heure côte à côte avec leurs intitulés. Sur 390 px, la
   somme dépasse la largeur de l'écran : « FERMETURE » et son champ sortaient du cadre, le nom du
   jour venait buter contre son propre interrupteur, et la colonne de droite n'était atteignable
   qu'en faisant défiler latéralement une page qui, elle, ne défile pas.

   Deux rangs : qui et s'il ouvre, puis de quand à quand. Les champs se partagent la largeur au
   lieu de la réclamer. */
@media (max-width: 640px) {
    .day-row[b-dwzob0skj1] {
        flex-wrap: wrap;
        gap: 0.5rem 0.75rem;
        padding: 0.7rem 0.8rem;
    }

    /* Le nom prend ce qui reste, l'interrupteur garde sa place au bout du premier rang. */
    .day-name-cell[b-dwzob0skj1] { flex: 1 1 auto; width: auto; min-width: 0; }

    .day-toggle-cell[b-dwzob0skj1] { flex: 0 0 auto; width: auto; margin-right: 0 !important; }

    /* Le second rang, sur toute la largeur. */
    .day-times-cell[b-dwzob0skj1] { flex: 1 1 100%; min-width: 0; }

    .time-inputs[b-dwzob0skj1] { gap: 0.5rem; }

    .time-input-group[b-dwzob0skj1] { flex: 1 1 0; min-width: 0; }

    .time-input-group input[b-dwzob0skj1] { width: 100%; }

    /* La flèche ne mérite pas une colonne à elle : elle se serre entre les deux champs. */
    .time-separator[b-dwzob0skj1] { margin: 1rem 0 0 !important; }
}
/* /Components/Studio/StudioTabOverview.razor.rz.scp.css */
/* Vue d'ensemble d'un studio. */

/* Les raccourcis d'onglet, au-dessus des chiffres : l'action passe devant le constat.
   La note de bas de carte (« +3 aujourd'hui », « brut … · frais … ») vit maintenant dans
   Figure lui-même (Figure.razor.css) — elle qualifie un chiffre, elle doit rester dans sa carte. */
/* Le rang lui-même vit dans app.css : les trois espaces l'emploient, et une feuille scopée ne
   sert qu'au fichier qui l'écrit. Ne restent ici que le bouton de personnalisation et sa
   modale, qui n'appartiennent qu'au studio. */

/* Le geste de personnalisation : une icône seule, pour ne pas rivaliser avec les quatre
   raccourcis qu'elle configure. */
.ovw-shortcuts-edit[b-qg8e9nh3dr] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.ovw-shortcuts-edit:hover[b-qg8e9nh3dr] {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
}

/* La grille de cases de la boîte de personnalisation. */
.ovw-shortcuts-picker[b-qg8e9nh3dr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.4rem;
    margin: 0.75rem 0;
}

.ovw-shortcuts-picker-item[b-qg8e9nh3dr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    font-size: 0.82rem;
    cursor: pointer;
}

/* Une case déjà à quatre ne s'active plus : forcer un cinquième choix demanderait d'en défaire
   un autre en même temps, ce que la case seule ne peut pas exprimer. */
.ovw-shortcuts-picker-item--locked[b-qg8e9nh3dr] {
    color: rgba(255, 255, 255, 0.35);
    cursor: not-allowed;
}

/* Le label au-dessus du rang de chiffres. Léger : ce n'est pas un titre de section, juste de quoi
   situer le rang qui suit sans lui donner le poids d'un <h2>. */
.ovw-stats-label[b-qg8e9nh3dr] {
    display: block;
    margin-bottom: 0.35rem;
    color: rgba(255, 255, 255, 0.38);
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* La bande d'état des salles, sous les compteurs.

   Une largeur minimale de 15rem : en dessous, le décompte « reste 1h 12m 04s » se casse en deux
   lignes et la tuile perd sa lecture d'un coup d'œil. Au-delà de la largeur disponible, le rang
   se replie plutôt que de comprimer. */
.ovw-rooms[b-qg8e9nh3dr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.6rem;
}

/* Le renvoi vers les salles qu'on ne montre plus ici : une ligne de texte, pas une carte de plus —
   ce n'est qu'un lien, il ne doit pas rivaliser avec les tuiles qu'il suit. */
.ovw-rooms-more[b-qg8e9nh3dr] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    padding: 0.3rem 0.1rem;
    color: rgba(255, 255, 255, 0.45);
    background: none;
    border: 0;
    font-size: 0.78rem;
    cursor: pointer;
}

.ovw-rooms-more:hover[b-qg8e9nh3dr] {
    color: rgba(255, 255, 255, 0.75);
}

/* Le sélecteur de tri, au-dessus de la file. Discret : le tri n'est pas l'action de l'écran,
   accepter et refuser le sont. */
.ovw-queue-sort[b-qg8e9nh3dr] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.ovw-queue-sort label[b-qg8e9nh3dr] {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
}

.ovw-queue-sort-select[b-qg8e9nh3dr] {
    padding: 0.3rem 0.55rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    font-size: 0.78rem;
}

/* Le corps de la ligne était un bouton sans le moindre retour au survol — rien ne distinguait
   une ligne cliquable d'un simple bloc de texte tant qu'on n'avait pas déjà cliqué dessus.
   ::deep pour l'atteindre : la racine d'ActionQueue ne porte pas le marqueur de scope de ce
   composant, elle est rendue par ActionQueue puis ActionRow, deux composants partagés. */
.ovw-queue[b-qg8e9nh3dr]  button.row-text {
    cursor: pointer;
    padding: 0.3rem 0.4rem;
    margin: -0.3rem -0.4rem;
    border-radius: 10px;
    transition: background 150ms ease;
}

.ovw-queue[b-qg8e9nh3dr]  button.row-text:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Une demande déjà validée par le studio : ce qui reste à attendre, à la place du bouton. Même
   lecture que la barre d'actions du panneau (SessionActionBar). */
.ov-approved-note[b-qg8e9nh3dr] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.82rem;
    white-space: nowrap;
}

.ov-approved-note i[b-qg8e9nh3dr] { color: var(--sh-green); }
/* /Components/Studio/StudioTabPolicies.razor.rz.scp.css */
/* Les règles à gauche, ce qu'elles produisent à droite.

   La colonne des champs reste étroite : ce sont six nombres, pas un formulaire d'inscription. Le
   simulateur prend la place qui reste, parce que c'est lui qu'on regarde en réglant. */

.policy-grid[b-kx66zbindv] {
    display: grid;
    grid-template-columns: minmax(15rem, 22rem) 1fr;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 900px) {
    .policy-grid[b-kx66zbindv] { grid-template-columns: 1fr; }
}

.policy-fields[b-kx66zbindv] {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.policy-field label[b-kx66zbindv] {
    display: block;
    margin-bottom: 0.35rem;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.policy-input[b-kx66zbindv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.policy-input[b-kx66zbindv]  input {
    width: 5.5rem;
    padding: 0.45rem 0.6rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--sh-glass-border);
    border-radius: 8px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.policy-input[b-kx66zbindv]  input:focus-visible {
    outline: 2px solid var(--sh-gold);
    outline-offset: 1px;
}

.policy-unit[b-kx66zbindv] {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.8rem;
}

.policy-field small[b-kx66zbindv],
.policy-switch small[b-kx66zbindv] {
    display: block;
    margin-top: 0.3rem;
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.74rem;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

/* Le réglage à bascule : l'interrupteur glissant commun, et sa phrase dessous.

   C'était une case à cocher carrée, seule de son espèce dans une page qui parle d'argent. */
.policy-switch[b-kx66zbindv] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* Le choix qui commande l'autre se détache de la grille des champs. */
.policy-switch--lead[b-kx66zbindv] {
    padding: 0.75rem 0.85rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--sh-glass-border);
    border-radius: 12px;
}

/* ── Les simulateurs ────────────────────────────────────────────────────────
   Une surface un ton au-dessus des champs : on regarde un résultat, pas un formulaire. */

.sim[b-kx66zbindv] {
    padding: 1.1rem 1.2rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--sh-glass-border);
    border-radius: var(--sh-radius-aero-sm, 14px);
}

.sim-head[b-kx66zbindv] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.sim-title[b-kx66zbindv] {
    color: #fff;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sim-note[b-kx66zbindv] {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.72rem;
}

.sim-controls[b-kx66zbindv] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 1rem;
}

.sim-controls label[b-kx66zbindv] {
    display: grid;
    grid-template-columns: 4.5rem 1fr 5.5rem;
    align-items: center;
    gap: 0.6rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.78rem;
}

.sim-controls strong[b-kx66zbindv] {
    color: #fff;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.sim-controls input[type="range"][b-kx66zbindv] {
    width: 100%;
    accent-color: var(--sh-gold);
}

.sim-total[b-kx66zbindv] {
    margin: 0 0 0.5rem;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.sim-total span[b-kx66zbindv] {
    margin-left: 0.5rem;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* La barre reprend la jauge d'une séance réelle : la part versée en vert, le reste en ambre. */
.sim-bar[b-kx66zbindv] {
    height: 0.5rem;
    border-radius: 999px;
    background: var(--sh-amber-glow, rgba(212, 165, 116, 0.25));
    overflow: hidden;
}

.sim-bar-paid[b-kx66zbindv] {
    display: block;
    height: 100%;
    background: var(--sh-green);
}

.sim-lines[b-kx66zbindv] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0.9rem 0 0;
}

.sim-lines > div[b-kx66zbindv] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.sim-lines dt[b-kx66zbindv] {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.82rem;
    font-weight: 400;
}

.sim-lines dd[b-kx66zbindv] { margin: 0; }

.sim-amount[b-kx66zbindv] {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

/* Trois lectures, pas trois montants équivalents : ce que l'artiste verse ou récupère est un
   mouvement brut — blanc — pas le net du studio. Le vert n'appartient qu'à « vous touchez » et
   « vous conservez », les deux seules lignes qui disent ce qu'il reste au studio. */
.sim-amount--paid[b-kx66zbindv] { color: #fff; }
.sim-amount--due[b-kx66zbindv] { color: var(--sh-amber); }
.sim-amount--net[b-kx66zbindv] { color: var(--sh-green); }

.sim-line--net[b-kx66zbindv] {
    margin-top: 0.35rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--sh-glass-border);
}

.sim-fees[b-kx66zbindv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.8rem 0 0;
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.76rem;
}

.sim-fees-toggle[b-kx66zbindv] {
    padding: 0;
    color: var(--sh-gold);
    background: none;
    border: 0;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
}

.sim-fees-detail[b-kx66zbindv] {
    margin: 0.45rem 0 0;
    padding: 0.5rem 0 0;
    border-top: 1px dashed var(--sh-glass-border);
    list-style: none;
}

.sim-fees-detail li[b-kx66zbindv] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.76rem;
    font-variant-numeric: tabular-nums;
}

/* ── La frise ───────────────────────────────────────────────────────────── */

.sim-timeline[b-kx66zbindv] {
    margin: 0;
    padding: 0 0 0 0.75rem;
    border-left: 2px solid var(--sh-glass-border);
    list-style: none;
}

.sim-timeline.is-blocked[b-kx66zbindv] { opacity: 0.35; }

.sim-timeline li[b-kx66zbindv] {
    position: relative;
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: 0.6rem;
    padding: 0.45rem 0;
}

.sim-step-dot[b-kx66zbindv] {
    position: absolute;
    left: -1.16rem;
    top: 0.75rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
}

.sim-step-dot--rec[b-kx66zbindv] { background: #ff4747; box-shadow: 0 0 8px #ff4747; }

.sim-step-when[b-kx66zbindv] {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.76rem;
    font-variant-numeric: tabular-nums;
}

.sim-step-what[b-kx66zbindv] {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.8rem;
}

.sim-step-what em[b-kx66zbindv] {
    display: block;
    margin-top: 0.1rem;
    color: var(--sh-amber);
    font-size: 0.76rem;
    font-style: normal;
    font-weight: 700;
}

.sim-step--key .sim-step-what[b-kx66zbindv] { color: #fff; }

.sim-blocked[b-kx66zbindv] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.7rem;
    color: #ff8b8b;
    font-size: 0.8rem;
}

.sim-hint[b-kx66zbindv] {
    margin: 0.8rem 0 0;
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.76rem;
}

.policy-submit[b-kx66zbindv] {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}
/* /Components/Studio/StudioTabReservations.razor.rz.scp.css */
/* Barre de l'onglet : le basculeur, et le décompte. Un seul rang, parce que le contenu qui
   compte commence juste dessous.

   Le basculeur y a rejoint le décompte. Il vivait au bout du rang de filtres en vue liste et seul
   sur son propre rang en vue calendrier : il changeait donc de place selon la vue qu'il servait
   à quitter. Il est en haut, toujours au même endroit, et il ne filtre rien — il change d'écran,
   ce qui n'est pas la même chose et ne se range pas au même niveau. */

.res-tab-bar[b-ha7aawe1lm] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 0.75rem;
}

/* Le titre de l'onglet a disparu du balisage : il répétait celui de la page. */

.res-tab-count[b-ha7aawe1lm] {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.res-tab-views[b-ha7aawe1lm] {
    display: inline-flex;
    padding: 3px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
}

.res-tab-view[b-ha7aawe1lm] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    background: transparent;
    border: 0;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    transition: color 140ms ease, background 140ms ease;
}

.res-tab-view:hover[b-ha7aawe1lm] { color: #fff; }

/* La vue active est un fond plein : le basculeur doit se lire sans comparer deux teintes. */
.res-tab-view.is-on[b-ha7aawe1lm] {
    color: #000;
    background: var(--sh-gold);
}

/* Le rang de salles, à l'identique de celui du planning : même gouttière, même rembourrage,
   mêmes bulles. C'est le même filtre, il ne doit pas changer d'aspect en changeant de vue.

   Il se taille sur ce qu'il contient. En bloc, il occupait toute la largeur de l'écran : deux
   salles laissaient une gouttière vide de trois cents pixels à droite de « Studio B », cerclée
   comme si une troisième bulle manquait. Un basculeur se termine là où finit son dernier choix. */
.res-tab-rooms[b-ha7aawe1lm] {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    width: fit-content;
    max-width: 100%;
    padding: 3px;
    margin-bottom: 0.7rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
}

.res-tab-room[b-ha7aawe1lm] {
    padding: 0.35rem 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    background: transparent;
    border: 0;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    transition: color 140ms ease, background 140ms ease;
}

.res-tab-room:hover[b-ha7aawe1lm] { color: #fff; }

.res-tab-room.is-on[b-ha7aawe1lm] {
    color: #000;
    background: var(--sh-gold);
}

@media (max-width: 640px) {
    .res-tab-bar[b-ha7aawe1lm] { flex-wrap: wrap; gap: 0.6rem; }
    .res-tab-count[b-ha7aawe1lm] { margin-left: 0; width: 100%; }
    .res-tab-views[b-ha7aawe1lm] { width: 100%; }
    .res-tab-view[b-ha7aawe1lm] { flex: 1 1 0; justify-content: center; padding: 0.45rem 0.5rem; }
    .res-tab-room[b-ha7aawe1lm] { padding: 0.4rem 0.7rem; }
}
/* /Components/Studio/StudioTabSettings.razor.rz.scp.css */

/* Le renvoi vers l'onglet Politiques : une indication, pas une alerte. */
.settings-moved[b-e9scvnnmeb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.82rem;
}

.settings-moved i[b-e9scvnnmeb] { color: var(--sh-gold); }
.settings-moved strong[b-e9scvnnmeb] { color: #fff; }

/* La suggestion d'adresse, sous le champ du site : un lien d'action discret, pas un bouton plein. */
.settings-website-suggest[b-e9scvnnmeb] {
    margin-top: 0.4rem;
    padding: 0.25rem 0.6rem;
    font-size: 0.78rem;
}
/* /Components/TimezoneDropdown.razor.rz.scp.css */
/* Calqué sur CountryDropdown.razor.css : les deux sélecteurs voisinent dans les mêmes
   formulaires, un écart de hauteur ou de rayon se verrait immédiatement. */

.tz-dropdown[b-gih9yjt6h6] {
    position: relative;
    width: 100%;
    min-width: 0;
    /* Pas « height: 100% » : dans une colonne de grille étirée par sa ligne, le sélecteur
       prenait toute la hauteur de la colonne et poussait dehors le libellé au-dessus et la
       remarque en dessous — le texte du fuseau se superposait au champ « Email ». Un contrôle
       de formulaire se dimensionne par son contenu. */
    min-height: 52px;
}

.tz-dropdown__trigger[b-gih9yjt6h6] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    /* Même raison que ci-dessus. La hauteur et les retraits sont ceux de « .form-control » :
       ces sélecteurs voisinent avec des champs de texte dans les mêmes lignes de formulaire, et
       dix pixels d'écart entre deux contrôles côte à côte se voient. */
    min-height: 52px;
    padding: 0.8rem 1rem;
    color: var(--sh-white, #fff);
    text-align: left;
    background: var(--sh-gray-950, #101010);
    border: 1px solid var(--sh-gray-800, #343434);
    border-radius: 8px;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.tz-dropdown__trigger:hover:not(:disabled)[b-gih9yjt6h6] {
    border-color: rgba(255, 255, 255, 0.28);
}

.tz-dropdown__trigger:focus-visible[b-gih9yjt6h6],
.tz-dropdown__trigger[aria-expanded="true"][b-gih9yjt6h6] {
    border-color: var(--sh-gold, #ffcc00);
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(255, 204, 0, 0.14);
}

.tz-dropdown__trigger:disabled[b-gih9yjt6h6] {
    cursor: not-allowed;
    opacity: 0.55;
}

.tz-dropdown__icon[b-gih9yjt6h6] {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.95rem;
}

.tz-dropdown__selection[b-gih9yjt6h6] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
    flex: 1;
}

.tz-dropdown__primary[b-gih9yjt6h6] {
    overflow: hidden;
    font-size: 0.92rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tz-dropdown__secondary[b-gih9yjt6h6],
.tz-dropdown__placeholder[b-gih9yjt6h6] {
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.75rem;
    white-space: nowrap;
}

.tz-dropdown__chevron[b-gih9yjt6h6] {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.72rem;
    transition: transform 140ms ease;
}

.tz-dropdown__trigger[aria-expanded="true"] .tz-dropdown__chevron[b-gih9yjt6h6] {
    transform: rotate(180deg);
}

.tz-dropdown__backdrop[b-gih9yjt6h6] {
    position: fixed;
    z-index: var(--sh-z-dropdown);
    inset: 0;
    padding: 0;
    background: transparent;
    border: 0;
}

.tz-dropdown__menu[b-gih9yjt6h6] {
    position: absolute;
    z-index: calc(var(--sh-z-dropdown) + 1);
    top: calc(100% + 0.45rem);
    left: 0;
    width: 100%;
    min-width: min(340px, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    overflow: hidden;
    background: var(--sh-elev-3-bg);
    border: 1px solid var(--sh-elev-3-border);
    border-radius: 0.65rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), var(--sh-elev-3-shadow);
    animation: tz-dropdown-enter-b-gih9yjt6h6 120ms ease-out;
}

.tz-dropdown__search[b-gih9yjt6h6] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tz-dropdown__search i[b-gih9yjt6h6] {
    color: rgba(255, 255, 255, 0.42);
}

.tz-dropdown__search input[b-gih9yjt6h6] {
    width: 100%;
    min-width: 0;
    padding: 0.45rem 0.55rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid transparent;
    border-radius: 0.4rem;
    outline: none;
}

.tz-dropdown__search input:focus[b-gih9yjt6h6] {
    border-color: rgba(255, 204, 0, 0.7);
}

.tz-dropdown__options[b-gih9yjt6h6] {
    max-height: 320px;
    padding: 0.35rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* En-tête de région. Une centaine de fuseaux à plat est illisible ; le regroupement
   donne un point de repère au défilement. */
.tz-dropdown__group[b-gih9yjt6h6] {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.45rem 0.65rem 0.3rem;
    color: rgba(255, 255, 255, 0.42);
    background: #111;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.tz-dropdown__option[b-gih9yjt6h6] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 18px;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.55rem 0.65rem;
    color: rgba(255, 255, 255, 0.88);
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 0.4rem;
}

.tz-dropdown__option:hover[b-gih9yjt6h6],
.tz-dropdown__option:focus-visible[b-gih9yjt6h6] {
    background: rgba(255, 255, 255, 0.07);
    outline: none;
}

.tz-dropdown__option--selected[b-gih9yjt6h6] {
    background: rgba(255, 204, 0, 0.12);
    color: #fff;
}

.tz-dropdown__option-name[b-gih9yjt6h6] {
    overflow: hidden;
    font-size: 0.88rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tz-dropdown__option-offset[b-gih9yjt6h6] {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tz-dropdown__option--selected .tz-dropdown__option-offset[b-gih9yjt6h6] {
    color: rgba(255, 204, 0, 0.75);
}

.tz-dropdown__empty[b-gih9yjt6h6] {
    margin: 0;
    padding: 1rem 0.65rem;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.82rem;
    text-align: center;
}

@keyframes tz-dropdown-enter-b-gih9yjt6h6 {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .tz-dropdown__menu[b-gih9yjt6h6] { animation: none; }
}
/* /Components/ToastContainer.razor.rz.scp.css */
/* Les messages fugaces, empilés dans un coin de l'écran. */

.sh-toast-container[b-mqcpf4r4cs] {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: var(--sh-z-critical);
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.sh-toast[b-mqcpf4r4cs] {
    pointer-events: auto;
    min-width: 300px;
    max-width: 450px;
    background: var(--sh-elev-3-bg);
    border: 1px solid var(--sh-elev-3-border);
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
    padding: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), var(--sh-elev-3-shadow);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sh-toast.entering[b-mqcpf4r4cs] {
    transform: translateX(100%);
    opacity: 0;
    animation: toast-in-b-mqcpf4r4cs 0.4s forwards;
}

.sh-toast.exiting[b-mqcpf4r4cs] {
    animation: toast-out-b-mqcpf4r4cs 0.4s forwards;
}

/* Un message reçu en direct mène à sa conversation d'un clic sur le toast lui-même, plutôt que
   d'obliger à rouvrir la cloche pour retrouver ce qu'on vient de recevoir. */
.sh-toast--clickable[b-mqcpf4r4cs] {
    cursor: pointer;
}

.sh-toast--clickable:hover[b-mqcpf4r4cs],
.sh-toast--clickable:focus-visible[b-mqcpf4r4cs] {
    border-color: var(--sh-accent-edge, rgba(255, 255, 255, 0.25));
    background: rgba(255, 255, 255, 0.04);
}

@keyframes toast-in-b-mqcpf4r4cs {
    to { transform: translateX(0); opacity: 1; }
}

@keyframes toast-out-b-mqcpf4r4cs {
    to { transform: translateX(100%); opacity: 0; }
}

.sh-toast-icon[b-mqcpf4r4cs] {
    font-size: 1.5rem;
    margin-right: 16px;
    flex-shrink: 0;
}

.sh-toast.success .sh-toast-icon[b-mqcpf4r4cs] { color: #00ff88; }
.sh-toast.error .sh-toast-icon[b-mqcpf4r4cs] { color: #ff4d4d; }
.sh-toast.warning .sh-toast-icon[b-mqcpf4r4cs] { color: #ffcc00; }
.sh-toast.info .sh-toast-icon[b-mqcpf4r4cs] { color: #00d4ff; }

.sh-toast-content[b-mqcpf4r4cs] {
    flex-grow: 1;
    margin-right: 12px;
}

.sh-toast-title[b-mqcpf4r4cs] {
    font-weight: 700;
    color: white;
    margin-bottom: 4px;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sh-toast-message[b-mqcpf4r4cs] {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    line-height: 1.4;
}

.sh-toast-close[b-mqcpf4r4cs] {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    padding: 0;
    cursor: pointer;
    transition: color 0.2s;
}

.sh-toast-close:hover[b-mqcpf4r4cs] {
    color: white;
}

.sh-toast-progress[b-mqcpf4r4cs] {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.2);
    width: 100%;
    transform-origin: left;
    animation: toast-progress-b-mqcpf4r4cs linear forwards;
}

.sh-toast.success .sh-toast-progress[b-mqcpf4r4cs] { background: #00ff88; }
.sh-toast.error .sh-toast-progress[b-mqcpf4r4cs] { background: #ff4d4d; }
.sh-toast.warning .sh-toast-progress[b-mqcpf4r4cs] { background: #ffcc00; }
.sh-toast.info .sh-toast-progress[b-mqcpf4r4cs] { background: #00d4ff; }

@keyframes toast-progress-b-mqcpf4r4cs {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}
/* /Components/TwoTonePill.razor.rz.scp.css */
.sh-two-tone-pill[b-uckqg8gycd] {
    --pill-accent: rgba(255, 255, 255, 0.74);
    --pill-label-bg: rgba(255, 255, 255, 0.08);
    --pill-border: rgba(255, 255, 255, 0.11);
    display: inline-grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: stretch;
    min-height: 34px;
    overflow: hidden;
    color: var(--sh-white);
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--pill-border);
    border-radius: 999px;
    vertical-align: middle;
}

.sh-two-tone-pill--full[b-uckqg8gycd] { width: 100%; }

.sh-two-tone-pill-label[b-uckqg8gycd],
.sh-two-tone-pill-value[b-uckqg8gycd] {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 0.43rem 0.72rem;
    line-height: 1.2;
}

.sh-two-tone-pill-label[b-uckqg8gycd] {
    gap: 0.38rem;
    color: var(--pill-accent);
    background: var(--pill-label-bg);
    font-size: 0.68rem;
    font-weight: 780;
    letter-spacing: 0.035em;
    white-space: nowrap;
}

.sh-two-tone-pill-value[b-uckqg8gycd] {
    justify-content: flex-end;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.8rem;
    font-weight: 700;
    overflow-wrap: anywhere;
    text-align: right;
}

.sh-two-tone-pill--gold[b-uckqg8gycd] {
    --pill-accent: var(--sh-gold);
    --pill-label-bg: rgba(218, 171, 91, 0.13);
    --pill-border: rgba(218, 171, 91, 0.22);
}

.sh-two-tone-pill--success[b-uckqg8gycd] {
    --pill-accent: #67d99a;
    --pill-label-bg: rgba(63, 190, 120, 0.12);
    --pill-border: rgba(63, 190, 120, 0.2);
}

.sh-two-tone-pill--warning[b-uckqg8gycd] {
    --pill-accent: #f2c66d;
    --pill-label-bg: rgba(242, 198, 109, 0.12);
    --pill-border: rgba(242, 198, 109, 0.2);
}

.sh-two-tone-pill--info[b-uckqg8gycd] {
    --pill-accent: #76bde8;
    --pill-label-bg: rgba(83, 166, 216, 0.12);
    --pill-border: rgba(83, 166, 216, 0.2);
}

.sh-two-tone-pill--danger[b-uckqg8gycd] {
    --pill-accent: #ef8585;
    --pill-label-bg: rgba(220, 75, 75, 0.12);
    --pill-border: rgba(220, 75, 75, 0.2);
}

@media (max-width: 420px) {
    .sh-two-tone-pill-label[b-uckqg8gycd],
    .sh-two-tone-pill-value[b-uckqg8gycd] { padding-inline: 0.62rem; }
}
/* /Components/Workspace/ActionQueue.razor.rz.scp.css */
/* La file d'attente d'un espace de travail : ce qui réclame une décision.

   Elle se lisait comme un intertitre parmi d'autres, qu'elle soit vide ou qu'elle porte trois
   échéances. Une file qui attend quelque chose se signale — un liseré ambre le long des lignes,
   un titre plus net, un compteur qui se voit — et redevient discrète dès qu'elle est vide. */

.queue[b-h8o9xe2zcw] { margin-top: 1.5rem; }

.queue-head[b-h8o9xe2zcw] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.queue-head h2[b-h8o9xe2zcw] {
    margin: 0;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.queue.is-pending .queue-head h2[b-h8o9xe2zcw] { color: #fff; }

/* Le groupe ne se signale plus par un rail dans la marge.

   Il en portait un — bordure et rembourrage à gauche — qui rentrait les lignes d'un côté sans
   rien leur rendre de l'autre : elles commençaient à un centimètre et demi du bord gauche et
   finissaient collées au bord droit, seules de toute la page à ne pas s'aligner sur les chiffres
   et les sections au-dessus d'elles.

   Ce que le rail faisait — tenir trois lignes ensemble plutôt que trois cartes tombées là — est
   maintenant porté par le liseré de chaque ligne (voir ActionRow), toutes au même x, et qui
   porte en plus la couleur de ce que la ligne demande. Il en dit donc davantage, sans déplacer
   personne. */

.queue-count[b-h8o9xe2zcw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    padding: 0.1rem 0.45rem;
    color: #1a1206;
    background: var(--sh-amber);
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.queue-empty[b-h8o9xe2zcw] {
    margin: 0;
    padding: 1rem 1.1rem;
    color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    font-size: 0.85rem;
}
/* /Components/Workspace/ActionRow.razor.rz.scp.css */
/* Une ligne de file : intitulé, détail, geste. Le corps cliquable ne doit pas ressembler à un
   bouton — c'est la ligne qu'on ouvre, pas un contrôle.

   « action-row » et non « row » : ce dernier appartient à la grille de Bootstrap, dont la feuille
   est chargée, et qui lui donne des marges négatives de douze pixels de chaque côté. Les lignes
   débordaient de leur conteneur — invisible à gauche, où le rembourrage du groupe compensait par
   hasard, flagrant à droite, où elles touchaient le bord de l'écran. */

.action-row[b-lnd4xy6l54] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);

    /* Le liseré qui tient la file ensemble. Il vivait sur le groupe, dans la marge gauche, et
       rentrait les lignes d'un côté sans rien leur rendre de l'autre — elles finissaient collées
       au bord droit, seules de la page à ne pas s'aligner sur ce qui les surmonte. Porté par la
       ligne, il ne déplace plus rien : la largeur reste celle des sections et des chiffres. */
    border-left-width: 3px;
    border-radius: 14px;
}

/* L'intitulé et les gestes sur une ligne ; les faits, s'il y en a, en dessous et pleine largeur. */
.action-row-main[b-lnd4xy6l54] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

/* Un fait par colonne, à la ligne quand l'écran rétrécit — jamais de défilement horizontal. */
.row-meta[b-lnd4xy6l54] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1.1rem;
    padding-top: 0.55rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.action-row.is-setup[b-lnd4xy6l54] {
    background: rgba(212, 165, 116, 0.07);
    border-color: var(--sh-amber-glow);
}

/* Sans ton, le liseré reste celui de la bordure : présent, mais muet. */
.action-row[b-lnd4xy6l54] { border-left-color: rgba(255, 255, 255, 0.16); }

/* Le pictogramme de la ligne : un rond sobre. Il ne se clique pas — c'est le corps qui ouvre —
   et il garde sa place quand le texte passe à la ligne. */
.row-icon[b-lnd4xy6l54] {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    align-self: flex-start;
    width: 2rem;
    height: 2rem;
    color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    font-size: 0.85rem;
}

.action-row.is-setup .row-icon[b-lnd4xy6l54] {
    color: var(--sh-amber);
    background: rgba(212, 165, 116, 0.12);
    border-color: var(--sh-amber-glow);
}

/* ── Le ton de ce que la ligne demande ────────────────────────────────────────
   Les classes sont celles de StatusVocabulary, comme partout ailleurs : l'autorité les nomme,
   ce composant les peint. Une couleur veut donc dire la même chose ici que sur une pastille de
   statut ou un chiffre de tableau de bord.

   Quatre lignes de la file portaient le même gris. L'icône les distinguait par sa forme, mais
   une forme se regarde et une couleur se voit : c'est elle qui fait repérer un paiement
   interrompu au milieu de trois avis à laisser, sans avoir rien lu.

   Le fond reste à peine teinté — 6 % — parce que ces lignes s'empilent : à pleine intensité,
   trois d'entre elles feraient un écran de couleurs qui ne hiérarchise plus rien. C'est le
   pictogramme qui porte la couleur franche, sur deux centimètres carrés.

   Ces règles viennent après celles de « is-setup », et c'est voulu : une ligne qui porte les deux
   — une mise en route dont on connaît aussi l'enjeu — doit prendre la couleur de l'enjeu. Les
   réordonner rendrait l'ambre de la mise en route au compte de paiement non connecté, qui bloque
   pourtant tout encaissement. */
.action-row.tone-danger[b-lnd4xy6l54] {
    background: rgba(255, 71, 71, 0.06);
    border-color: rgba(255, 71, 71, 0.25);
    border-left-color: #ff4747;
}

.action-row.tone-danger .row-icon[b-lnd4xy6l54] {
    color: #ff8b8b;
    background: rgba(255, 71, 71, 0.14);
    border-color: rgba(255, 71, 71, 0.32);
}

.action-row.tone-warning[b-lnd4xy6l54] {
    background: rgba(212, 165, 116, 0.06);
    border-color: var(--sh-amber-glow);
    border-left-color: var(--sh-amber);
}

.action-row.tone-warning .row-icon[b-lnd4xy6l54] {
    color: var(--sh-amber);
    background: rgba(212, 165, 116, 0.14);
    border-color: var(--sh-amber-glow);
}

/* Rien à faire, seulement à savoir : le bleu de ce qui informe. Pas de fond — une ligne qui
   n'attend aucun geste n'a pas à occuper l'œil autant que celles qui en attendent un. */
.action-row.tone-info[b-lnd4xy6l54] { border-left-color: var(--sh-blue); }

.action-row.tone-info .row-icon[b-lnd4xy6l54] {
    color: var(--sh-blue);
    background: rgba(77, 171, 247, 0.12);
    border-color: rgba(77, 171, 247, 0.28);
}

.action-row.tone-success[b-lnd4xy6l54] { border-left-color: var(--sh-green); }

.action-row.tone-success .row-icon[b-lnd4xy6l54] {
    color: var(--sh-green);
    background: rgba(74, 222, 128, 0.12);
    border-color: rgba(74, 222, 128, 0.28);
}

/* Neutre : le rond gris de base. Rien à redéclarer — l'écrire à nouveau ne ferait que donner à
   croire qu'il diffère. */

.row-text[b-lnd4xy6l54] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    min-width: 0;
    padding: 0;
    text-align: left;
    background: none;
    border: 0;
}

.row-text strong[b-lnd4xy6l54] {
    color: #fff;
    font-size: 0.88rem;
    font-weight: 700;
}

.row-text span[b-lnd4xy6l54] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
    line-height: 1.4;
}

.row-actions[b-lnd4xy6l54] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-left: auto;
}

@media (max-width: 640px) {
    .action-row-main[b-lnd4xy6l54] { flex-direction: column; align-items: stretch; }
    .row-actions[b-lnd4xy6l54] { margin-left: 0; }
    .row-actions .sh-action[b-lnd4xy6l54] { flex: 1 1 8rem; justify-content: center; }
}
/* /Components/Workspace/Figure.razor.rz.scp.css */
/* Un chiffre : valeur devant, intitulé derrière.

   Les couleurs ne se décident plus ici. Doré pour l'argent, ambre pour ce qui attend une action,
   neutre pour un décompte : ce sont les tons sémantiques communs, les mêmes que les pastilles de
   statut. Une teinte veut dire la même chose partout. */

.figure[b-hpkd9qwzjs] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Une carte avec une note (deux lignes de texte en plus) est naturellement plus haute que ses
       voisines : sans cette stretch explicite, seul le rang paraissait bancal, mais chaque carte
       gardait sa propre hauteur de contenu. Ici, la carte EST l'élément de grille (voir
       FigureRow.razor.css) : la plus haute fixe la hauteur du rang, les autres s'y étirent. */
    align-self: stretch;
    gap: 0.75rem;
    padding: 0.7rem 0.95rem;
    text-align: left;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    transition: background 160ms ease, border-color 160ms ease;
}

/* Le chiffre et son intitulé, empilés. Ce bloc est le contenu ordinaire de la carte ; quand une
   décomposition l'accompagne, il devient la moitié gauche.

   min-content et non 0 : à 0, le bloc se laissait comprimer sous la largeur de son propre
   montant, qui débordait alors de sa boîte et venait s'imprimer par-dessus la décomposition —
   « 10 906,80 € » et « − 813,70 € » l'un sur l'autre. Il ne peut plus descendre sous son mot le
   plus long ; c'est la décomposition qui passe à la ligne. */
.figure-main[b-hpkd9qwzjs] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    min-width: min-content;
}

/* Une carte qui porte sa décomposition se lit en deux temps : le résultat d'abord, ce qu'il a
   fallu retrancher ensuite. La soustraction est alors vérifiable sans quitter la vignette —
   c'est précisément ce que la note en phrase ne permettait pas.

   Côte à côte tant qu'il y a la place, l'un sous l'autre sinon. La vignette vit dans une grille
   dont les colonnes se règlent sur la largeur de l'écran : sa propre largeur ne se déduit
   d'aucun point de rupture, elle doit donc savoir se replier d'elle-même. */
.figure--split[b-hpkd9qwzjs] {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    column-gap: 0.75rem;
    row-gap: 0.5rem;
}

.figure-value[b-hpkd9qwzjs] { white-space: nowrap; }

/* Un bloc posé, sans filet de séparation : un trait vertical n'aurait plus de sens le jour où la
   décomposition passe sous le chiffre, et rien en CSS ne dit qu'un élément vient de se replier. */
.figure-breakdown[b-hpkd9qwzjs] {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;
    padding: 0.3rem 0.55rem;
    background: rgba(255, 255, 255, 0.035);
    border-radius: 10px;
}

.figure-breakdown-row[b-hpkd9qwzjs] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.7rem;
}

.figure-breakdown-label[b-hpkd9qwzjs] {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.figure-breakdown-value[b-hpkd9qwzjs] {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.76rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Seul un chiffre cliquable réagit au survol : le reste ne promet rien. */
button.figure:hover[b-hpkd9qwzjs] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
}

.figure-value[b-hpkd9qwzjs] {
    color: #fff;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.figure-label[b-hpkd9qwzjs] {
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.7rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.figure--money .figure-value[b-hpkd9qwzjs] { color: var(--sh-gold); }

/* La garniture facultative : un ton en retrait de l'intitulé, pour rester secondaire même quand
   la carte s'étire pour égaler ses voisines (voir .figure ci-dessus). */
.figure-note[b-hpkd9qwzjs] {
    margin-top: 0.1rem;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
}

/* Ce qui attend une action se signale, sans crier : il manque une condition, rien n'a échoué. */
.figure.tone-warning[b-hpkd9qwzjs] {
    background: rgba(212, 165, 116, 0.08);
    border-color: var(--sh-amber-glow);
}

.figure.tone-warning .figure-value[b-hpkd9qwzjs] { color: var(--sh-amber); }

.figure.tone-danger[b-hpkd9qwzjs] {
    background: rgba(255, 71, 71, 0.08);
    border-color: rgba(255, 71, 71, 0.3);
}

.figure.tone-danger .figure-value[b-hpkd9qwzjs] { color: #ff8b8b; }

.figure.tone-success .figure-value[b-hpkd9qwzjs] { color: var(--sh-green); }
.figure.tone-info .figure-value[b-hpkd9qwzjs] { color: var(--sh-aqua); }
/* /Components/Workspace/FigureRow.razor.rz.scp.css */
/* Le rang de chiffres, commun aux trois espaces.

   Il existait en trois versions : deux grilles et une ligne flexible, avec des tailles et des
   espacements voisins mais jamais identiques. Une seule ici — ce qui change d'un écran à l'autre,
   ce sont les chiffres, pas la façon de les écrire. */

/* Un rang souple, et non une grille.

   En grille, les colonnes se règlent sur la largeur du rang — et la vignette qui prend le rang
   entier les réserve toutes. Les vignettes suivantes se retrouvaient alors chacune dans une
   colonne étroite, deux vignettes de 157 px dans un rang de 981, le reste vide à droite.

   En flex, chaque vignette part d'une largeur souhaitée et grandit pour occuper ce qui reste de
   sa ligne. Deux vignettes se partagent la ligne en deux, trois en trois, et celle qui se
   retrouve seule sur la dernière ligne la prend tout entière — le rang n'a jamais de trou, sans
   qu'aucune règle n'ait à compter les vignettes. */
/* L'intitulé du rang : petit, en capitales, effacé. Il nomme sans concurrencer les nombres. */
.figures-caption[b-smr0wqjxmb] {
    display: block;
    margin-bottom: 0.35rem;
    color: rgba(255, 255, 255, 0.38);
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.figures[b-smr0wqjxmb] {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.figures[b-smr0wqjxmb] >  .figure {
    flex: 1 1 8.5rem;
    min-width: 0;
}

/* Sans marge basse : dans un cockpit, l'espacement entre blocs vient du cockpit lui-même, et la
   marge du rang s'y ajoutait en double. */
.figures.figures--flush[b-smr0wqjxmb] {
    margin-bottom: 0;
}

/* Un chiffre qui porte sa décomposition tient la largeur du rang sur écran étroit.

   La note du net studio nomme trois montants — encaissé, frais, rémunération — pour que le
   lecteur retrouve le chiffre au-dessus. Dans une colonne de 8,5 rem elle se replie sur six
   lignes et étire la tuile à deux fois la hauteur de ses voisines. Raccourcir la note reviendrait
   à retirer une composante du calcul : c'est la mise en page qui cède, pas l'explication. */
/* Un chiffre qui porte sa décomposition prend le rang entier.

   Ce n'est pas un chiffre parmi d'autres : c'est le résultat, et les montants qui l'expliquent.
   Serré dans une colonne, le résultat et sa décomposition se disputaient la même largeur — au
   point de s'imprimer l'un sur l'autre. Sur toute la largeur, le net se lit à gauche, ce qu'il a
   fallu retrancher à droite, et les autres chiffres se rangent dessous sans rien perdre. */
.figures[b-smr0wqjxmb] >  .figure--split {
    flex: 1 1 100%;
}

/* Un chiffre qui porte une note en phrase prend aussi le rang, mais seulement sur téléphone :
   la note s'y replierait sur six lignes et étirerait la vignette au double de ses voisines. */
@media (max-width: 30rem) {
    .figures[b-smr0wqjxmb] >  .figure:has(.figure-note) {
        flex: 1 1 100%;
    }
}
/* /Components/Workspace/PageHead.razor.rz.scp.css */
/* L'en-tête d'un écran d'espace. Les tailles sont celles de la vue d'ensemble du studio, prise
   comme référence : c'est le seul en-tête que le produit avait déjà réussi. */
.page-head[b-ot1ch1ylbf] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1.5rem;
}

.page-head-text[b-ot1ch1ylbf] {
    min-width: 0;
}

/* Le fil au-dessus du titre : discret, en majuscules espacées — il situe, il n'annonce pas. */
.page-head-eyebrow[b-ot1ch1ylbf] {
    display: block;
    margin-bottom: 0.15rem;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.page-head h1[b-ot1ch1ylbf] {
    margin: 0;
    color: #fff;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.page-head p[b-ot1ch1ylbf] {
    margin: 0.15rem 0 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.9rem;
}

.page-head-actions[b-ot1ch1ylbf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

@media (max-width: 640px) {
    .page-head[b-ot1ch1ylbf] {
        align-items: flex-start;
        margin-bottom: 1.1rem;
    }

    /* Le titre cède le pas au contenu : sur un écran de téléphone, un en-tête à 1,75 rem mange
       le premier chiffre de la page. */
    .page-head h1[b-ot1ch1ylbf] { font-size: 1.35rem; }

    .page-head p[b-ot1ch1ylbf] { font-size: 0.84rem; }

    /* Les actions passent sous le titre plutôt que de le comprimer, et se partagent la largeur
       plutôt que de se serrer à droite : trois boutons de contact alignés sur 375 px se
       réduisaient chacun à deux lettres et des points de suspension. */
    .page-head-actions[b-ot1ch1ylbf] { width: 100%; }

    .page-head-actions[b-ot1ch1ylbf] >  .sh-action { flex: 1 1 8rem; justify-content: center; }
}
/* /Components/Workspace/SettingsAngles.razor.rz.scp.css */
/* Deux pastilles, la même forme que les angles d'une séance : on change de face, pas d'écran. */

.angles[b-s4u40thzt2] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.1rem;
}

.angle[b-s4u40thzt2] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
}

.angle:hover[b-s4u40thzt2] {
    color: #fff;
    border-color: rgba(217, 166, 83, 0.45);
}

.angle.is-active[b-s4u40thzt2] {
    color: #000;
    background: var(--sh-amber, #f0b429);
    border-color: transparent;
}
/* /Components/Workspace/SpaceWelcomeCard.razor.rz.scp.css */
/* L'accueil se pose au cran 2 : au-dessus de la page, sans prétendre couvrir ce qu'on est venu
   faire. Il prend l'accent de l'espace, qui est justement ce qu'il présente. */
.space-welcome[b-xya5tm5xqx] {
    position: relative;
    margin: 1rem auto 0;
    max-width: 1320px;
    padding: 1.1rem 1.2rem;
    border-radius: var(--sh-radius-aero-sm, 18px);

    /* Le filet d'accent sur la tranche gauche : la même grammaire que les lignes « à traiter ».
       Une carte qui parle de l'espace porte la couleur de l'espace. */
    border-left: 3px solid var(--sh-accent);
}

.space-welcome-head[b-xya5tm5xqx] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.space-welcome-eyebrow[b-xya5tm5xqx] {
    margin: 0;
    color: var(--sh-accent);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.space-welcome-title[b-xya5tm5xqx] {
    margin: 0.15rem 0 0;
    font-size: 1.15rem;
    font-weight: 800;
}

.space-welcome-close[b-xya5tm5xqx] {
    flex: none;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--sh-gray-400, #9a9a9a);
    cursor: pointer;
    transition: color 120ms ease, background 120ms ease;
}

.space-welcome-close:hover[b-xya5tm5xqx],
.space-welcome-close:focus-visible[b-xya5tm5xqx] {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.space-welcome-lead[b-xya5tm5xqx] {
    margin: 0.5rem 0 0;
    max-width: 68ch;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.9rem;
    line-height: 1.45;
}

/* Trois repères, sur une ligne quand la place le permet et empilés sinon. Jamais quatre : au-delà
   on ne lit plus, on ferme. */
.space-welcome-points[b-xya5tm5xqx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 0.7rem;
    margin: 0.9rem 0 0;
    padding: 0;
    list-style: none;
}

.space-welcome-point[b-xya5tm5xqx] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.65rem 0.7rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.space-welcome-point > i[b-xya5tm5xqx] {
    flex: none;
    margin-top: 0.1rem;
    color: var(--sh-accent);
    font-size: 1rem;
}

.space-welcome-point > div[b-xya5tm5xqx] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.space-welcome-point-title[b-xya5tm5xqx] {
    font-size: 0.85rem;
    font-weight: 750;
}

.space-welcome-point-detail[b-xya5tm5xqx] {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.8rem;
    line-height: 1.4;
}

.space-welcome-actions[b-xya5tm5xqx] {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.9rem;
}

@media (max-width: 900px) {
    .space-welcome[b-xya5tm5xqx] {
        margin: 0.75rem 0.85rem 0;
        padding: 0.9rem;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
/* Le voile qui referme les menus de la barre du haut.

   Transparent, et sous la barre (couche « dropdown », la barre étant juste au-dessus) : il ne se voit
   pas, il ne fait qu'intercepter le premier clic ailleurs.

   Sans lui, un menu ouvert le restait jusqu'à ce qu'on rouvre le même. La barre portait bien un
   gestionnaire de fermeture, mais un stopPropagation posé sur son conteneur intérieur l'empêchait
   de recevoir les clics — et rien n'écoutait ceux du reste de la page. */
.nav-dismiss[b-1ntc7gocex] {
    position: fixed;
    inset: 0;
    z-index: var(--sh-z-dropdown);
    background: transparent;
}

/* Le voile ne se teinte que là où un panneau recouvre la feuille de verre, c'est-à-dire sur écran
   étroit. Sur grand écran, le profil est une petite carte posée sous son bouton : flouter la page
   entière derrière elle serait hors de proportion. */
@media (max-width: 991.98px) {
    .nav-dismiss.is-veiled[b-1ntc7gocex] {
        background: var(--sh-overlay-bg);
        backdrop-filter: var(--sh-overlay-blur);
        -webkit-backdrop-filter: var(--sh-overlay-blur);
        animation: nav-veil-in-b-1ntc7gocex 0.18s ease-out;
    }
}

@keyframes nav-veil-in-b-1ntc7gocex {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ── Les panneaux de la barre ────────────────────────────────────────────────

   Un seul dessin pour le profil et pour les notifications, et deux comportements selon la place :
   une liste déroulante ancrée sous son bouton quand l'écran est large, un panneau qui recouvre la
   feuille de verre quand il ne l'est pas.

   Le profil était une liste déroulante Bootstrap ouverte à la main — le JavaScript de Bootstrap
   n'est pas chargé — repeinte par des styles en ligne, et qui se dépliait *dans* la feuille sur
   téléphone : la feuille grandissait, se mettait à défiler, et le menu partait vers le haut. */

.topbar-menu[b-1ntc7gocex] {
    position: relative;
}

.topbar-trigger[b-1ntc7gocex] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    background: transparent;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    transition: background 140ms ease;
}

.topbar-trigger:hover[b-1ntc7gocex],
.topbar-trigger.is-open[b-1ntc7gocex] {
    background: var(--sh-glass-bg);
}

.topbar-panel[b-1ntc7gocex] {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: calc(var(--sh-z-dropdown) + 2);
    display: flex;
    flex-direction: column;
    min-width: 240px;
    overflow: hidden;
    background: var(--sh-elev-3-bg);
    border: 1px solid var(--sh-elev-3-border);
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), var(--sh-elev-3-shadow);
    animation: topbar-panel-in-b-1ntc7gocex 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes topbar-panel-in-b-1ntc7gocex {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* La tête ne défile pas : elle est hors du corps, qui est le seul à défiler. */
.topbar-panel-head[b-1ntc7gocex] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--sh-glass-border);
}

.topbar-panel-title[b-1ntc7gocex] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Sur grand écran, cliquer à côté suffit à revenir : le retour n'a rien à dire. */
.topbar-panel-back[b-1ntc7gocex] {
    display: none;
}

.topbar-panel-body[b-1ntc7gocex] {
    display: flex;
    flex-direction: column;
    padding: 0.4rem;
    overflow-y: auto;
}

.topbar-panel-item[b-1ntc7gocex] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.7rem;
    color: rgba(255, 255, 255, 0.82);
    background: transparent;
    border: 0;
    border-radius: 10px;
    font-size: 0.9rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}

.topbar-panel-item i[b-1ntc7gocex] {
    color: var(--sh-gold);
    font-size: 1rem;
}

.topbar-panel-item:hover[b-1ntc7gocex],
.topbar-panel-item:focus-visible[b-1ntc7gocex] {
    color: #fff;
    background: var(--sh-glass-bg-raised);
}

.topbar-panel-item--danger[b-1ntc7gocex] { color: #ff8a95; }
.topbar-panel-item--danger i[b-1ntc7gocex] { color: #ff8a95; }
.topbar-panel-item--danger:hover[b-1ntc7gocex] { color: #ff8a95; background: rgba(220, 53, 69, 0.12); }

/* ── Les menus, sur écran étroit ─────────────────────────────────────────────

   La navigation dépliée poussait la barre du haut vers le bas : elle passait de 56 pixels à
   presque la moitié de l'écran, et le contenu de la page sautait sous elle. Les deux listes
   déroulantes faisaient pire, chacune ajoutant sa propre hauteur à l'intérieur.

   Elles montent maintenant du bas de l'écran, là où le pouce arrive, et la barre ne bouge plus
   d'un pixel. Le voile qui les referme existe déjà — il intercepte le premier clic ailleurs. */

@media (max-width: 991.98px) {
    .navbar-collapse:not(.collapse)[b-1ntc7gocex] {
        position: fixed;
        inset: auto 0 0 0;
        z-index: var(--sh-z-dropdown);
        max-height: 72vh;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 1.4rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
        background: var(--sh-elev-4-bg);
        border-top: 1px solid var(--sh-elev-4-border);
        border-radius: 18px 18px 0 0;
        box-shadow: var(--sh-elev-4-shadow-up);
        animation: nav-sheet-rise-b-1ntc7gocex 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* La poignée : elle dit d'où vient la feuille, et que le bas de l'écran lui appartient. */
    .navbar-collapse:not(.collapse)[b-1ntc7gocex]::before {
        content: "";
        position: absolute;
        top: 0.55rem;
        left: 50%;
        transform: translateX(-50%);
        width: 2.5rem;
        height: 0.25rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.22);
    }

    /* Les entrées occupent la largeur : une feuille se parcourt au pouce, pas à la précision. */
    .navbar-collapse:not(.collapse) .navbar-nav[b-1ntc7gocex] {
        align-items: stretch;
        gap: 0.15rem;
    }

    .navbar-collapse:not(.collapse) .nav-link[b-1ntc7gocex] {
        padding-top: 0.7rem;
        padding-bottom: 0.7rem;
    }

    .navbar-collapse:not(.collapse) .topbar-trigger[b-1ntc7gocex] {
        width: 100%;
        padding: 0.7rem 0.75rem;
    }

    /* ── La feuille devient le panneau ────────────────────────────────────────

       Un panneau — notifications, profil — se dépliait *dans* la feuille, en retrait : elle
       grandissait d'autant, se mettait à défiler, et le menu qu'on venait de quitter remontait
       hors de vue. On perdait le fil de deux choses à la fois — ce qu'on lisait, et d'où l'on
       venait.

       La feuille ne se déplie plus, elle change de contenu. Elle monte un peu plus haut, les
       entrées du menu s'effacent, et le panneau occupe seul la place, sa sortie posée en tête. Le
       fond passe derrière un voile flouté (.nav-dismiss.is-veiled). Rien ne s'ajoute, rien ne
       pousse : c'est la même feuille, montrant autre chose.

       Le panneau reste dans le flux et n'est pas mis en « position: fixed » : la feuille porte un
       backdrop-filter, qui fait d'elle le bloc conteneur de ses descendants fixes — un panneau
       fixé s'y serait ancré, puis découpé par son défilement. */
    .navbar-collapse:not(.collapse).has-panel[b-1ntc7gocex] {
        max-height: 86vh;
        padding-top: 0;
    }

    /* La poignée disparaît sous la tête du panneau, qui commence au bord haut. Le retour dit déjà
       de quelle surface il s'agit ; deux repères superposés n'en font pas un plus clair. */
    .navbar-collapse:not(.collapse).has-panel[b-1ntc7gocex]::before {
        display: none;
    }

    /* Seule l'entrée dont le panneau est ouvert reste : les autres n'ont rien à dire tant qu'on
       est ailleurs, et c'est leur présence qui allongeait la feuille. */
    .navbar-collapse:not(.collapse).has-panel .navbar-nav > li:not(.is-open)[b-1ntc7gocex] {
        display: none;
    }

    /* Le bouton qui a ouvert le panneau s'efface aussi : le retour le remplace. */
    .navbar-collapse:not(.collapse).has-panel .topbar-trigger[b-1ntc7gocex],
    .navbar-collapse:not(.collapse).has-panel[b-1ntc7gocex]  .notification-bell-btn {
        display: none;
    }

    /* Le panneau prend toute la largeur de la feuille. La liste et son conteneur sont des éléments
       de flex qui, laissés à eux-mêmes, se réduisent à leur contenu et se retrouvent centrés au
       milieu d'une feuille vide. */
    .navbar-collapse:not(.collapse).has-panel .navbar-nav[b-1ntc7gocex],
    .navbar-collapse:not(.collapse).has-panel .navbar-nav > li.is-open[b-1ntc7gocex],
    .navbar-collapse:not(.collapse).has-panel[b-1ntc7gocex]  .notification-center-wrapper {
        width: 100%;
    }

    /* La liste de la barre porte « mt-3 » de Bootstrap : seize pixels de marge haute, utiles quand
       elle est la liste d'un menu déplié, néfastes quand elle contient un panneau.

       Ces seize pixels séparaient la tête du panneau du bord haut de la feuille. On y voyait donc
       une bande du fond de la feuille, puis le début franc de la tête, opaque et à angles droits,
       coupant les coins arrondis de la feuille — une ligne de démarcation horizontale, présente
       défilement ou pas, qui ne séparait rien : elle marquait seulement l'endroit où la tête
       commençait, seize pixels trop bas.

       « !important » parce que les utilitaires d'espacement de Bootstrap en portent un : la
       spécificité seule ne suffit pas à les défaire. */
    .navbar-collapse:not(.collapse).has-panel .navbar-nav[b-1ntc7gocex] {
        margin-top: 0 !important;
    }

    .navbar-collapse:not(.collapse).has-panel .topbar-panel[b-1ntc7gocex],
    .navbar-collapse:not(.collapse).has-panel[b-1ntc7gocex]  .notification-dropdown-panel {
        position: static;
        width: 100%;
        min-width: 0;
        max-height: none;
        margin: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        animation: none;
    }

    /* La tête colle en haut de la feuille qui défile : la sortie ne part jamais avec la liste.

       Fond opaque, et non le verre de la feuille : « --sh-glass-bg-raised » vaut 7 % de blanc,
       qui sur du noir donne un gris — et surtout ne cache rien de ce qui défile dessous. Il faut
       ici une vraie surface, sinon les lignes traversent la tête en remontant.

       Les marges négatives compensent le retrait de la feuille : la tête va d'un bord à l'autre,
       au lieu de flotter comme une plaque grise au milieu. */
    .navbar-collapse:not(.collapse).has-panel .topbar-panel-head[b-1ntc7gocex],
    .navbar-collapse:not(.collapse).has-panel[b-1ntc7gocex]  .notification-panel-header {
        position: sticky;
        top: 0;
        z-index: 2;
        margin: 0 -1rem;
        padding: 0.85rem 1rem;

        /* Le fond de la feuille, et non un gris à part. Opaque, donc la liste ne la traverse pas
           en remontant — c'était la seule raison de lui donner une couleur propre, et un ton plus
           sombre en faisait une plaque posée sur la feuille plutôt que son bord haut. Il ne reste
           qu'une ligne, celle du bas, qui sépare les gestes de ce qu'ils commandent. */
        background: var(--sh-elev-4-bg);
        border-bottom: 1px solid var(--sh-glass-border);

        /* Elle commence au bord haut de la feuille : ses coins doivent en épouser l'arrondi,
           sinon deux angles droits dépassent de part et d'autre. */
        border-radius: 18px 18px 0 0;
    }

    .navbar-collapse:not(.collapse).has-panel .topbar-panel-back[b-1ntc7gocex],
    .navbar-collapse:not(.collapse).has-panel[b-1ntc7gocex]  .notification-panel-back {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.35rem 0.75rem 0.35rem 0.55rem;
        color: rgba(255, 255, 255, 0.82);
        background: var(--sh-glass-bg);
        border: 1px solid var(--sh-glass-border);
        border-radius: 999px;
        font-size: 0.8rem;
        font-weight: 600;
        cursor: pointer;
    }

    .navbar-collapse:not(.collapse).has-panel .topbar-panel-back:hover[b-1ntc7gocex],
    .navbar-collapse:not(.collapse).has-panel[b-1ntc7gocex]  .notification-panel-back:hover {
        color: #fff;
        background: var(--sh-glass-bg-raised);
    }

    /* La liste du panneau ne défile plus pour son compte : la feuille est déjà le défilement, et
       deux ascenseurs emboîtés se disputaient le pouce. */
    .navbar-collapse:not(.collapse).has-panel[b-1ntc7gocex]  .notification-list-container {
        max-height: none;
        overflow: visible;
    }

    .navbar-collapse:not(.collapse).has-panel .topbar-panel-body[b-1ntc7gocex] {
        padding: 0.5rem 0 1rem;
        overflow: visible;
    }

    /* Le sélecteur d'espace ne se déplie plus dans la feuille : il vit contre la marque, hors du
       volet repliable, et reste donc visible qu'on ouvre le menu ou non. */
}

@keyframes nav-sheet-rise-b-1ntc7gocex {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .navbar-collapse:not(.collapse)[b-1ntc7gocex] { animation: none; }
}

/* ── Le sélecteur d'espace ────────────────────────────────────────────────────

   Un seul contrôle pour une seule question : dans quel espace suis-je, et comment en changer.
   Ils étaient deux — une pastille qui nommait l'espace, un menu « Dashboards » qui n'en nommait
   aucun — posés côte à côte sans se répondre.

   Chaque espace garde sa teinte, la même que celle de sa coquille : la barre et le contenu se
   répondent au lieu de se contredire. */

/* La place du sélecteur : collé à la marque, et il pousse tout le reste de la barre à droite.

   Il vivait à l'autre bout, dans le volet que le téléphone replie — donc invisible tant qu'on
   n'avait pas ouvert un menu, sur l'écran où l'on passe le plus de temps. « StudioHub · Studio »
   se lit maintenant d'un trait, à toute largeur. */
.nav-space-slot[b-1ntc7gocex] {
    display: flex;
    align-items: center;
    min-width: 0;
    margin-right: auto;
    margin-left: 0.35rem;
}

.space-switch[b-1ntc7gocex] { position: relative; min-width: 0; }

.space-switch-trigger[b-1ntc7gocex] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    max-width: 12rem;
    padding: 0.35rem 0.6rem 0.35rem 0.55rem;
    border-radius: 999px;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

/* Le nom cède du terrain avant de disparaître : sur un écran étroit il se coupe plutôt que de
   pousser le reste de la barre hors champ. */
.space-switch-name[b-1ntc7gocex] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hors des espaces, la même pastille mène au lanceur : la barre garde sa forme quand on franchit
   la porte, seul le mot change. */
.space-switch-trigger--launcher[b-1ntc7gocex] {
    color: rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.045);
}

.space-switch-trigger--launcher:hover[b-1ntc7gocex] { color: #fff; }

.space-switch-trigger:hover[b-1ntc7gocex],
.space-switch-trigger:focus-visible[b-1ntc7gocex] { background: rgba(255, 255, 255, 0.09); }

.space-switch-caret[b-1ntc7gocex] {
    font-size: 0.7rem;
    opacity: 0.55;
    transition: transform 0.15s ease;
}

.space-switch-trigger.is-open .space-switch-caret[b-1ntc7gocex] { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
    .space-switch-caret[b-1ntc7gocex] { transition: none; }
}

/* La teinte de l'espace, sur le déclencheur comme sur sa ligne dans le menu.

   Les valeurs vivent dans app.css, en jetons --sh-space-* : les pastilles des notifications
   portent les mêmes, et une couleur d'identité écrite à deux endroits finit par diverger. */
.space-switch-trigger--owner[b-1ntc7gocex],
.space-switch-item--owner .space-switch-item-icon[b-1ntc7gocex] { color: var(--sh-space-owner); }

.space-switch-trigger--owner[b-1ntc7gocex] {
    background: var(--sh-space-owner-soft);
    border-color: var(--sh-space-owner-edge);
}

.space-switch-trigger--engineer[b-1ntc7gocex],
.space-switch-item--engineer .space-switch-item-icon[b-1ntc7gocex] { color: var(--sh-space-engineer); }

.space-switch-trigger--engineer[b-1ntc7gocex] {
    background: var(--sh-space-engineer-soft);
    border-color: var(--sh-space-engineer-edge);
}

.space-switch-trigger--artist[b-1ntc7gocex],
.space-switch-item--artist .space-switch-item-icon[b-1ntc7gocex] { color: var(--sh-space-artist); }

.space-switch-trigger--artist[b-1ntc7gocex] {
    background: var(--sh-space-artist-soft);
    border-color: var(--sh-space-artist-edge);
}

/* Un menu liquide : la largeur du plus long nom, et rien de plus. Il faisait 17 rem de large et
   trois lignes de haut par espace, pour trois mots utiles. */
.space-switch-menu[b-1ntc7gocex] {
    position: absolute;
    top: calc(100% + 0.45rem);
    left: 0;
    z-index: 1055;
    min-width: 11rem;
    padding: 0.35rem;
    border-radius: 14px;
    border: 1px solid var(--sh-elev-3-border);
    background: var(--sh-elev-3-bg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), var(--sh-elev-3-shadow);
}

.space-switch-item[b-1ntc7gocex] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none;
    white-space: nowrap;
}

.space-switch-item:hover[b-1ntc7gocex],
.space-switch-item:focus-visible[b-1ntc7gocex] {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

/* L'espace où l'on est déjà : marqué, mais toujours cliquable — c'est le chemin le plus court
   pour revenir à son accueil depuis un détail. */
.space-switch-item.is-active[b-1ntc7gocex] { background: rgba(255, 255, 255, 0.05); }

.space-switch-item-icon[b-1ntc7gocex] { font-size: 1.05rem; }

.space-switch-item-name[b-1ntc7gocex] { font-size: 0.88rem; font-weight: 700; }

.space-switch-item-check[b-1ntc7gocex] {
    margin-left: auto;
    color: var(--sh-green, #10b981);
    font-size: 0.95rem;
}

/* Un rôle attribué dont l'onboarding n'est pas fini : la ligne mène à l'onboarding, et le dit. */
.space-switch-item-todo[b-1ntc7gocex] {
    margin-left: auto;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--sh-gold-glow, rgba(240, 180, 0, 0.2));
    color: var(--sh-gold, #f0b400);
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
}

.space-switch-manage[b-1ntc7gocex] {
    display: block;
    margin-top: 0.35rem;
    padding: 0.55rem 0.6rem;
    border-top: 1px solid var(--sh-glass-border);
    color: var(--sh-gold);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
}

.space-switch-manage:hover[b-1ntc7gocex],
.space-switch-manage:focus-visible[b-1ntc7gocex] { color: #fff; }

/* Sur écran étroit le nom se resserre plutôt que de disparaître : c'est la réponse à « où
   suis-je », elle ne doit pas s'effacer là où la barre latérale est justement repliée. La teinte
   et l'icône la doublent, elles ne la remplacent pas. */
@media (max-width: 480px) {
    .nav-space-slot[b-1ntc7gocex] { margin-left: 0.2rem; }
    .space-switch-trigger[b-1ntc7gocex] { max-width: 8.5rem; padding: 0.32rem 0.5rem; font-size: 0.78rem; }
    .space-switch-menu[b-1ntc7gocex] { min-width: 10.5rem; }
}

/* Un seul rang sur téléphone : la marque, le sélecteur, le bouton du menu.

   Le rang de Bootstrap se replie tout seul, et le sélecteur tombait alors sous le logo. C'est la
   marque qui cède, pas la place du sélecteur : à 1,65 rem elle occupait plus de la moitié d'un
   écran de 390 px pour dire ce qu'on sait déjà — on est sur StudioHub. Réduite, elle laisse au
   sélecteur de quoi nommer l'espace en toutes lettres sur la même ligne. */
@media (max-width: 991.98px) {
    /* Un écart minimal garanti entre les trois éléments : sans lui, dès que la place manque, la
       pastille se retrouvait posée sous le bouton du menu — deux cibles tactiles superposées. */
    .navbar > .container-fluid[b-1ntc7gocex] {
        flex-wrap: nowrap;
        gap: 0.4rem;
    }

    .navbar-brand[b-1ntc7gocex] {
        flex-shrink: 1;
        min-width: 0;
        margin-right: 0;
    }

    /* Les deux marges automatiques se partagent la place restante : le sélecteur se pose au
       milieu de ce qui sépare la marque du bouton du menu, plutôt que collé à l'une ou à l'autre. */
    .nav-space-slot[b-1ntc7gocex] {
        flex-shrink: 1;
        margin-left: auto;
        margin-right: auto;
    }

    .navbar-toggler[b-1ntc7gocex] { flex-shrink: 0; }

    /* Le menu s'ouvre sous le sélecteur et non depuis son bord gauche : au milieu de la barre,
       un menu aligné à gauche déborderait d'un côté ou de l'autre selon la longueur du nom. */
    .space-switch-menu[b-1ntc7gocex] {
        left: 50%;
        transform: translateX(-50%);
    }
}

/* En dessous de 560 px, la marque passe à la taille « sm ».

   ::deep est indispensable : elle est rendue par StudioHubLogo, donc hors de l'isolation de
   cette feuille — une règle ordinaire ne l'atteindrait pas. */
@media (max-width: 560px) {
    .navbar-brand[b-1ntc7gocex]  .sh-brand { gap: 0.45rem; }
    .navbar-brand[b-1ntc7gocex]  .sh-brand-wordmark { font-size: 1.15rem; }

    .navbar-brand[b-1ntc7gocex]  .sh-brand-icon {
        width: 30px;
        height: 30px;
        border-radius: 6px;
    }
}

/* Sous 400 px, la marque cède encore.

   Seuil mesuré avec le nom d'espace le plus long (« Ingénieur »), qui est celui qui décide :
   à 430 px il reste 22 px de part et d'autre de la pastille, 13 px à 412 px, mais il en manque
   4 à 375 px — la pastille passait alors sous le bouton du menu, deux cibles tactiles
   superposées. C'est la marque qui rétrécit, elle seule est redondante : le logo carré dit déjà
   où l'on est.

   Le chevron part aussi : c'est le seul élément du sélecteur qui ne porte aucune information,
   la pastille se voit déjà comme un bouton. */
@media (max-width: 399.98px) {
    .navbar-brand[b-1ntc7gocex]  .sh-brand { gap: 0.35rem; }
    .navbar-brand[b-1ntc7gocex]  .sh-brand-wordmark { font-size: 1rem; }

    .navbar-brand[b-1ntc7gocex]  .sh-brand-icon {
        width: 26px;
        height: 26px;
    }

    .space-switch-caret[b-1ntc7gocex] { display: none; }
    .space-switch-trigger[b-1ntc7gocex] { max-width: 8rem; }
}

/* En dessous de 360 px, réduire ne suffit plus : à 344 px la pastille touche déjà le bouton du
   menu. Le mot s'efface, il ne reste que le logo — qui suffit à dire où l'on est. Le seuil est
   posé juste sous 360 px, la largeur de la plupart des téléphones Android, qui gardent donc
   le mot. */
@media (max-width: 359.98px) {
    .navbar-brand[b-1ntc7gocex]  .sh-brand-wordmark { display: none; }
}

/* La pastille des notifications non lues, sur le bouton du menu.

   Elle n'existe que là où ce bouton existe : au-delà de « lg », Bootstrap le replie et la cloche
   reprend son rôle, avec son compte chiffré. Ici, seulement le fait qu'il y ait quelque chose.

   Posée sur le coin, à cheval sur le bord — un point à l'intérieur du bouton se lirait comme une
   partie de l'icône. L'anneau sombre la détache du fond quel qu'il soit. */
.navbar-toggler[b-1ntc7gocex] {
    position: relative;
    overflow: visible;
}

.nav-toggler-dot[b-1ntc7gocex] {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #dc3545;
    border: 2px solid #0a0a0a;
    box-shadow: 0 0 6px rgba(220, 53, 69, 0.7);
    pointer-events: none;
}

/* Le bouton « Commencer », pour qui n'a pas encore choisi de rôle.

   Il portait les classes de bouton de Bootstrap, dimensionnées pour un formulaire : dans une barre
   de navigation déjà serrée, il poussait la marque et le sélecteur d'espace hors du cadre sur un
   téléphone. Il prend ici la taille des autres éléments de la barre. */
.nav-start-btn[b-1ntc7gocex] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: var(--sh-gold, #f0b400);
    color: #000;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.nav-start-btn:hover[b-1ntc7gocex],
.nav-start-btn:focus-visible[b-1ntc7gocex] {
    background: var(--sh-gold-deep, #d4a017);
    color: #000;
}

/* Sous 480 px, l'icône porte seule. Le libellé reste dans « aria-label » du lien. */
@media (max-width: 480px) {
    .nav-start-label[b-1ntc7gocex] {
        display: none;
    }

    .nav-start-btn[b-1ntc7gocex] {
        padding: 0.4rem 0.55rem;
    }
}

/* Les messages, dans la barre du haut, à côté de la cloche.

   Même gabarit que le bouton des notifications : deux voisins de taille différente se lisent
   comme deux choses de nature différente, alors qu'on les consulte pour la même raison. */
.nav-messages[b-1ntc7gocex] {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: rgba(255, 255, 255, 0.72);
    border-radius: 10px;
    text-decoration: none;
    transition: background-color 140ms ease, color 140ms ease;
}

.nav-messages:hover[b-1ntc7gocex],
.nav-messages:focus-visible[b-1ntc7gocex] {
    color: #fff;
    background: rgba(255, 255, 255, 0.07);
}

.nav-messages i[b-1ntc7gocex] {
    font-size: 1.15rem;
}

/* La pastille porte le nombre ; l'icône se dore quand il y en a. La couleur seule ne suffirait
   pas — elle ne dit pas combien — et le nombre seul se perdrait dans une barre chargée. */
.nav-messages.has-unread[b-1ntc7gocex] {
    color: var(--sh-gold, #d4af37);
}

.nav-messages-badge[b-1ntc7gocex] {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 1.05rem;
    padding: 0 0.25rem;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1.05rem;
    text-align: center;
    color: #000;
    background: var(--sh-gold, #d4af37);
    border-radius: 999px;
}

/* Messages et notifications côte à côte, partout.

   Sur grand écran elles l'étaient déjà, la barre étant horizontale. Sur la feuille du téléphone,
   qui empile ses entrées, chacune occupait une ligne entière pour une icône de quarante pixels.
   Une entrée qui les contient toutes les deux règle les deux cas d'un coup. */
.nav-icons[b-1ntc7gocex] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

@media (max-width: 991.98px) {
    /* Centrées sur la feuille : elles y sont la seule ligne d'icônes, et alignées à gauche elles
       pendaient dans le vide. */
    .nav-icons[b-1ntc7gocex] {
        justify-content: center;
        gap: 0.75rem;
        width: 100%;
    }

    /* Le panneau des notifications ouvert, l'icône des messages s'efface.

       Les deux icônes partagent une ligne ; le panneau, rendu par la cloche, restait donc dans
       cette ligne, à droite de l'icône des messages. Il perdait sa largeur à gauche, l'icône
       flottait seule dans la marge, et le filet sous l'en-tête ne s'alignait plus sur les
       notifications. Le panneau prend toute la ligne tant qu'il est ouvert. */
    .nav-icons.is-open[b-1ntc7gocex] {
        display: block;
    }

    .nav-icons.is-open .nav-messages[b-1ntc7gocex] {
        display: none;
    }
}
/* /Layout/SiteFooter.razor.rz.scp.css */
.site-footer[b-o0kvlk0qa6] {
    margin-top: 4rem;
    padding: 2.5rem 1.25rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.015));
}

.site-footer__inner[b-o0kvlk0qa6] {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr));
    gap: 2rem;
    max-width: 72rem;
    margin: 0 auto;
}

@media (max-width: 720px) {
    .site-footer__inner[b-o0kvlk0qa6] {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }
}

.site-footer__tagline[b-o0kvlk0qa6] {
    max-width: 20rem;
    margin: 0.4rem 0 0;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.85rem;
    line-height: 1.55;
}

.site-footer__col[b-o0kvlk0qa6] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.site-footer__title[b-o0kvlk0qa6] {
    margin: 0 0 0.3rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.site-footer__col a[b-o0kvlk0qa6] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: fit-content;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.88rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-footer__col a:hover[b-o0kvlk0qa6] {
    color: var(--sh-gold, #f0b400);
}

.site-footer__col a i[b-o0kvlk0qa6] {
    color: rgba(240, 180, 0, 0.7);
}

.site-footer__copy[b-o0kvlk0qa6] {
    max-width: 72rem;
    margin: 2rem auto 0;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.78rem;
    text-align: center;
}
/* /Pages/AddRoom.razor.rz.scp.css */
/* Les photos d'une salle : une grille de cases d'envoi, une par photo. Une case ajoutée et
   laissée vide est écartée à l'enregistrement. */
.room-photos[b-2mlkc5peoa] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1rem;
    margin-bottom: 0.6rem;
}

.room-photo[b-2mlkc5peoa] {
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
}
/* /Pages/Admin/AdminJournalPage.razor.rz.scp.css */
.adm-journal-filter[b-xr9m15yqza] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.adm-journal-filter select[b-xr9m15yqza] {
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
    font-size: 0.86rem;
}
/* /Pages/Admin/AdminMoney.razor.rz.scp.css */
/* Séances et paiements : la file « À vérifier » (ActionQueue, qui porte son style) et la liste des
   paiements en relevé — une ligne par paiement, colonnes alignées, la ligne entière cliquable. */

.amy-queue-amount[b-h3mblm1ls8] {
    color: var(--sh-gold, #f0b400);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.amy-queue-since[b-h3mblm1ls8] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.76rem;
    white-space: nowrap;
}

.amy-total[b-h3mblm1ls8] {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.78rem;
    font-weight: 700;
}

/* ---------------------------------------------------------------- relevé */

.amy-list[b-h3mblm1ls8] {
    min-width: 0;
}

.amy-rows[b-h3mblm1ls8] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.amy-row[b-h3mblm1ls8] {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr) 7rem 12rem 8rem 1.25rem;
    gap: 0.9rem;
    align-items: center;
    width: 100%;
    padding: 0.7rem 1rem;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-left: 3px solid transparent;
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.84rem;
    text-align: left;
    transition: background 120ms ease;
}

.amy-row--head[b-h3mblm1ls8] {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    border-top: 0;
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

button.amy-row[b-h3mblm1ls8] { cursor: pointer; }

button.amy-row:hover[b-h3mblm1ls8],
button.amy-row:focus-visible[b-h3mblm1ls8] {
    background: rgba(255, 255, 255, 0.04);
}

button.amy-row:focus-visible[b-h3mblm1ls8] {
    outline: 2px solid var(--sh-gold, #f0b400);
    outline-offset: -2px;
}

button.amy-row.is-open[b-h3mblm1ls8] { background: rgba(240, 180, 0, 0.06); }

button.amy-row:disabled[b-h3mblm1ls8] {
    cursor: default;
    opacity: 0.6;
}

button.amy-row:disabled:hover[b-h3mblm1ls8] { background: transparent; }

/* Un paiement qui réclame un regard se repère au bord, sans avoir à lire la colonne d'état. */
.amy-row.tone-warning[b-h3mblm1ls8] { border-left-color: var(--sh-amber, #f59e0b); }
.amy-row.tone-danger[b-h3mblm1ls8] { border-left-color: #ff4747; }

.amy-right[b-h3mblm1ls8] { text-align: right; }

.amy-date[b-h3mblm1ls8] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

.amy-session[b-h3mblm1ls8] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.amy-session strong[b-h3mblm1ls8] {
    overflow: hidden;
    color: #fff;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amy-sub[b-h3mblm1ls8] {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.5rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
}

.amy-sub > span + span[b-h3mblm1ls8]::before {
    content: "·";
    margin-right: 0.5rem;
    color: rgba(255, 255, 255, 0.25);
}

.amy-ref[b-h3mblm1ls8] {
    color: var(--sh-gold, #f0b400);
    font-weight: 700;
}

.amy-type[b-h3mblm1ls8] { color: rgba(255, 255, 255, 0.75); }

.amy-state[b-h3mblm1ls8] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.amy-state .status-pill[b-h3mblm1ls8] {
    padding: 3px 10px;
    gap: 6px;
    font-size: 0.64rem;
}

.amy-flag[b-h3mblm1ls8] {
    display: inline-grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    font-size: 0.78rem;
}

.amy-flag.tone-warning[b-h3mblm1ls8] { color: var(--sh-amber, #f59e0b); background: rgba(245, 158, 11, 0.12); }
.amy-flag.tone-danger[b-h3mblm1ls8] { color: #ff8b8b; background: rgba(255, 71, 71, 0.12); }

.amy-amount[b-h3mblm1ls8] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-variant-numeric: tabular-nums;
}

.amy-amount strong[b-h3mblm1ls8] {
    color: var(--sh-gold, #f0b400);
    font-weight: 800;
    white-space: nowrap;
}

.amy-amount span[b-h3mblm1ls8] {
    color: #c4a1ff;
    font-size: 0.72rem;
    white-space: nowrap;
}

.amy-chevron[b-h3mblm1ls8] {
    color: rgba(255, 255, 255, 0.35);
    text-align: right;
}

button.amy-row:hover .amy-chevron[b-h3mblm1ls8] { color: var(--sh-gold, #f0b400); }

/* Écran moyen : le type rejoint la ligne de la séance. */
@media (max-width: 1200px) {
    .amy-row[b-h3mblm1ls8] { grid-template-columns: 7.5rem minmax(0, 1fr) 11rem 7rem 1rem; }
    .amy-type[b-h3mblm1ls8] { display: none; }
    .amy-row--head span:nth-child(3)[b-h3mblm1ls8] { display: none; }
}

/* Téléphone : deux lignes par paiement — la séance et le montant, puis la date et l'état. */
@media (max-width: 720px) {
    .amy-row--head[b-h3mblm1ls8] { display: none; }

    .amy-row[b-h3mblm1ls8] {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "session amount"
            "meta state";
        gap: 0.35rem 0.75rem;
        padding: 0.75rem 0.85rem;
    }

    .amy-session[b-h3mblm1ls8] { grid-area: session; }
    .amy-amount[b-h3mblm1ls8] { grid-area: amount; }
    .amy-date[b-h3mblm1ls8] { grid-area: meta; }
    .amy-state[b-h3mblm1ls8] { grid-area: state; justify-content: flex-end; }
    .amy-chevron[b-h3mblm1ls8] { display: none; }
}
/* /Pages/Admin/AdminReviews.razor.rz.scp.css */
/* Un avis masqué reste lisible, en retrait : on doit pouvoir relire ce qu'on a retiré. La ligne
   elle-même est une ItemCard (Components/ItemCard) ; seule cette teinte lui est propre. */
[b-z1jh6564c5] .admin-review--hidden .item-card__title,
[b-z1jh6564c5] .admin-review--hidden .adm-quote {
    opacity: 0.55;
}
/* /Pages/Admin/AdminStaff.razor.rz.scp.css */
/* Les lignes de l'équipe et des résultats de recherche sont désormais des ItemCard
   (Components/ItemCard), qui portent leur propre feuille de style — plus rien à décrire ici. */
/* /Pages/Admin/AdminUserDetail.razor.rz.scp.css */
/* Les profils et studios de ce compte sont désormais des ItemCard (Components/ItemCard), qui
   portent leur propre feuille de style — plus rien à décrire ici. */
/* /Pages/AdminDashboard.razor.rz.scp.css */
/* La vue d'ensemble : six mois de volume en barres. La file « À traiter » réutilise ActionQueue
   et ActionRow (Components/Workspace), qui portent déjà leur propre feuille de style. */

.adm-months[b-ck8bphm0ot] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.adm-month[b-ck8bphm0ot] {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr) 9rem;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.82rem;
}

.adm-month__label[b-ck8bphm0ot] {
    color: rgba(255, 255, 255, 0.6);
    text-transform: capitalize;
}

.adm-month__bars[b-ck8bphm0ot] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.adm-month__bar[b-ck8bphm0ot] {
    display: block;
    min-width: 2px;
    height: 0.55rem;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(240, 180, 0, 0.35), var(--sh-gold, #f0b400));
}

.adm-month__bar.is-fee[b-ck8bphm0ot] {
    height: 0.35rem;
    background: var(--sh-green, #4ade80);
    opacity: 0.8;
}

.adm-month__value[b-ck8bphm0ot] {
    color: #fff;
    font-weight: 700;
    text-align: right;
}

.adm-month__value .adm-muted[b-ck8bphm0ot] {
    display: block;
    font-weight: 500;
}

@media (max-width: 600px) {
    .adm-month[b-ck8bphm0ot] {
        grid-template-columns: 4.5rem minmax(0, 1fr);
    }

    .adm-month__value[b-ck8bphm0ot] {
        grid-column: 1 / -1;
        text-align: left;
    }
}
/* /Pages/AdminSupport.razor.rz.scp.css */
/* La file à gauche, la demande à droite. Sur téléphone, la file seule tant qu'aucune demande
   n'est ouverte, puis la demande seule, avec un retour vers la file. */

/* Posée dans la coquille de l'administration, qui porte déjà les marges et la largeur. */
.asup[b-cnk0nehkxk] {
    display: grid;
    grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
    gap: 1.25rem;
    padding-bottom: 2rem;
}

.asup-queue[b-cnk0nehkxk] {
    position: sticky;
    top: calc(var(--sh-header-h, 4.8rem) + 1rem);
    align-self: start;
    max-height: calc(100vh - var(--sh-header-h, 4.8rem) - 2rem);
    overflow-y: auto;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.02);
}

.asup-filters[b-cnk0nehkxk] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.9rem;
}

.asup-filter[b-cnk0nehkxk] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.78rem;
    font-weight: 700;
}

.asup-filter.is-on[b-cnk0nehkxk] {
    border-color: var(--sh-gold, #f0b400);
    background: rgba(240, 180, 0, 0.12);
    color: #fff;
}

.asup-badge[b-cnk0nehkxk] {
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--sh-gold, #f0b400);
    color: #111;
    font-size: 0.7rem;
    font-weight: 900;
}

.asup-empty[b-cnk0nehkxk] {
    margin: 1rem 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.88rem;
}

.asup-list[b-cnk0nehkxk] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.asup-item[b-cnk0nehkxk] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid transparent;
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
}

.asup-item:hover[b-cnk0nehkxk] {
    background: rgba(255, 255, 255, 0.04);
}

.asup-item.is-current[b-cnk0nehkxk] {
    border-color: rgba(240, 180, 0, 0.35);
    background: rgba(240, 180, 0, 0.07);
}

.asup-item__top[b-cnk0nehkxk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.asup-item__num[b-cnk0nehkxk] {
    color: var(--sh-gold, #f0b400);
    font-size: 0.72rem;
    font-weight: 800;
}

.asup-item .status-pill[b-cnk0nehkxk] {
    font-size: 0.68rem;
}

.asup-item__subject[b-cnk0nehkxk] {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.9rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.asup-item.is-unread .asup-item__subject[b-cnk0nehkxk] {
    color: #fff;
    font-weight: 900;
}

.asup-item__meta[b-cnk0nehkxk],
.asup-item__preview[b-cnk0nehkxk] {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.74rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.asup-item__meta i[b-cnk0nehkxk] {
    color: var(--sh-gold, #f0b400);
}

.asup-back[b-cnk0nehkxk] {
    display: none;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.85rem;
    text-decoration: none;
}

@media (max-width: 860px) {
    .asup[b-cnk0nehkxk] {
        grid-template-columns: minmax(0, 1fr);
    }

    .asup-queue[b-cnk0nehkxk] {
        position: static;
        max-height: none;
    }

    .asup.has-open .asup-queue[b-cnk0nehkxk] {
        display: none;
    }

    .asup:not(.has-open) .asup-detail[b-cnk0nehkxk] {
        display: none;
    }

    .asup-back[b-cnk0nehkxk] {
        display: inline-flex;
    }
}
/* /Pages/AppCockpit.razor.rz.scp.css */
/* Le choix d'espace de travail, et la coquille qui accueille l'espace choisi. */

.app-cockpit[b-658s846gmh] { max-width: 1120px; padding-top: 2.25rem; padding-bottom: 4rem; }
.app-cockpit-header[b-658s846gmh] { margin-bottom: 2rem; text-align: center; }
.app-cockpit-brand[b-658s846gmh] { margin-bottom: 0.35rem; color: var(--sh-gold); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; }
.app-cockpit-header h1[b-658s846gmh] { margin: 0; font-weight: 850; letter-spacing: -0.035em; }
.app-cockpit-header p[b-658s846gmh] { margin: 0.45rem 0 0; color: rgba(255, 255, 255, 0.62); }
.app-cockpit-status[b-658s846gmh] { padding: 1rem 0; color: rgba(255, 255, 255, 0.68); }
.app-space-list[b-658s846gmh] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.app-space-list--1[b-658s846gmh] { grid-template-columns: minmax(280px, 360px); justify-content: center; }
.app-space-list--2[b-658s846gmh] { grid-template-columns: repeat(2, minmax(280px, 360px)); justify-content: center; }
.app-space-link[b-658s846gmh] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 310px;
    padding: 1.6rem;
    color: var(--sh-white);
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    text-decoration: none;
}
.app-space-link-icon[b-658s846gmh] {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 1.5rem;
    color: var(--sh-gold);
    background: rgba(218, 171, 91, 0.08);
    border-radius: 10px;
    font-size: 1.25rem;
}
.app-space-link-copy strong[b-658s846gmh], .app-space-link-copy small[b-658s846gmh] { display: block; }
.app-space-link-copy strong[b-658s846gmh] { font-size: 1.25rem; letter-spacing: -0.02em; }
.app-space-link-copy small[b-658s846gmh] { margin-top: 0.55rem; color: rgba(255, 255, 255, 0.58); line-height: 1.55; }
.app-space-link-fact[b-658s846gmh] { margin: auto 0 1.1rem; color: rgba(255, 255, 255, 0.72); font-size: 0.9rem; }
.app-space-link-action[b-658s846gmh] { display: flex; align-items: center; justify-content: space-between; width: 100%; color: var(--sh-white); font-weight: 700; }
/* Per-role accent so the right space is recognizable at a glance — reuses the app's
   shared role-color variables (app.css) so this matches every other role-scoped
   surface (AccountStep, badges, etc.) instead of inventing its own palette. */
.app-space-link[b-658s846gmh] { border-top: 3px solid transparent; }
.app-space-link--owner[b-658s846gmh] { border-top-color: var(--sh-gold); }
.app-space-link--owner .app-space-link-icon[b-658s846gmh] { color: var(--sh-gold); background: var(--sh-gold-glow); }
.app-space-link--engineer[b-658s846gmh] { border-top-color: var(--sh-blue); }
.app-space-link--engineer .app-space-link-icon[b-658s846gmh] { color: var(--sh-blue); background: var(--sh-blue-glow); }
.app-space-link--artist[b-658s846gmh] { border-top-color: var(--sh-pink); }
.app-space-link--artist .app-space-link-icon[b-658s846gmh] { color: var(--sh-pink); background: var(--sh-pink-glow); }
.app-role-add[b-658s846gmh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin: 2rem auto 0;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.app-role-add h2[b-658s846gmh] { margin: 0; font-size: 1rem; font-weight: 750; }
.app-role-add p[b-658s846gmh] { margin: 0.25rem 0 0; color: rgba(255, 255, 255, 0.52); font-size: 0.85rem; }
.app-role-add-actions[b-658s846gmh] { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.55rem; }
.app-role-add-button[b-658s846gmh] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 0.85rem;
    color: rgba(255, 255, 255, 0.78);
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    font-weight: 650;
}
.app-role-add-button:hover:not(:disabled)[b-658s846gmh], .app-role-add-button:focus-visible[b-658s846gmh] { color: var(--sh-white); border-color: var(--sh-gold); }
.app-role-add-button--owner:hover:not(:disabled)[b-658s846gmh], .app-role-add-button--owner:focus-visible[b-658s846gmh] { border-color: var(--sh-gold); }
.app-role-add-button--engineer:hover:not(:disabled)[b-658s846gmh], .app-role-add-button--engineer:focus-visible[b-658s846gmh] { border-color: var(--sh-blue); }
.app-role-add-button--artist:hover:not(:disabled)[b-658s846gmh], .app-role-add-button--artist:focus-visible[b-658s846gmh] { border-color: var(--sh-pink); }
/* La barre ne porte plus que le bouton du menu d'espace, lui-même réservé aux écrans étroits.
   Au-delà, elle n'a rien à montrer : elle disparaît plutôt que de tracer un filet sous un rang
   vide. Le retour aux espaces vit désormais dans le sélecteur de la barre du haut. */
.app-space-shell-bar[b-658s846gmh] { display: none; }

.app-space-shell[b-658s846gmh] {
    min-height: calc(100vh - 70px);
}
@media (max-width: 900px) {
    /* Sur un écran de 393 px, l'en-tête de l'espace consommait 388 px avant le premier mot
       utile : fil d'Ariane, retour, nom de l'espace, studios, onglets. Chaque rang gagné ici
       est un rang de contenu visible sans défiler — il n'en reste qu'un, le menu de l'espace. */
    .app-space-shell-bar[b-658s846gmh] {
        display: flex;
        align-items: flex-start;
        padding: 0.5rem 0.85rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.09);
        font-size: 0.85rem;
    }

    .app-space-list[b-658s846gmh] { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; }
    .app-space-link[b-658s846gmh] { min-height: 250px; }
    .app-role-add[b-658s846gmh] { align-items: flex-start; flex-direction: column; max-width: 620px; }
    .app-role-add-actions[b-658s846gmh] { justify-content: flex-start; }
}
@media (max-width: 576px) {
    .app-cockpit[b-658s846gmh] { padding-top: 0.5rem; }
}
/* /Pages/ArtistProfile.razor.rz.scp.css */
/* La page de profil artiste, quand elle est rendue à l'intérieur d'un espace de travail plutôt que seule. */

.artist-profile-page--embedded[b-8eeukphu4p] {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0.25rem 0 0;
}
/* /Pages/ArtistReservations.razor.rz.scp.css */
/* Les réservations de l'artiste : la liste, et le panneau de détail qui s'ouvre à droite. */

/* Bandeaux d'âge et session en cours. Le rouge ne désigne que le présent — c'est la couleur
   de la barre REC, et elle ne doit jamais dire autre chose qu'une session qui tourne. */

/* Tenu, pas clignotant : la carte reste à l'écran pendant toute la session. */

/* Pas de verrou de défilement sur le body : le panneau est sticky et défile avec sa
   propre zone, comme celui du studio. Le verrou datait du temps où c'était un tiroir
   fixe et empêchait de faire défiler la liste derrière. */
.artist-reservations-page--embedded[b-qp76tx7047] {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0.25rem 0 0;
}


/* Columns */

/* Date Badge V2 */

/* Info */

/* Time */

/* Amount */

/* Le voile du panneau assombrit désormais toute la fenêtre, barre du haut et pied
   de page compris. Assombrir aussi le contenu ici empilait deux effets. */

/* Géométrie fournie par .sh-sidepanel ; ne restent ici que la couleur du texte et
   l'entrée en fondu, propres à cet écran. */
.artist-reservation-panel[b-qp76tx7047] {
    color: var(--sh-white);
    animation: artist-panel-in-b-qp76tx7047 220ms var(--sh-ease-liquid);
}

.artist-reservation-panel-header[b-qp76tx7047] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    gap: 1rem;
}

.artist-reservation-panel-heading[b-qp76tx7047] { min-width: 0; text-align: center; }
.artist-reservation-eyebrow[b-qp76tx7047] {
    margin-bottom: 0.35rem;
    color: var(--sh-gold);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
.artist-reservation-panel-heading h2[b-qp76tx7047] {
    margin: 0;
    color: var(--sh-white);
    font-size: 1.35rem;
    font-weight: 820;
    letter-spacing: -0.025em;
}
.artist-reservation-panel-heading > p[b-qp76tx7047] {
    margin: 0.3rem 0 0;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.86rem;
}
.artist-reservation-status-line[b-qp76tx7047] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.85rem;
}
.artist-reservation-status-line > span:last-child[b-qp76tx7047] {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.78rem;
}
/* L'en-tête artiste centre son titre : le bouton de fermeture est donc positionné
   en absolu par-dessus, contrairement au panneau studio où il est dans le flux. */
.artist-reservation-panel-close[b-qp76tx7047] {
    position: absolute;
    top: 0;
    right: 0;
}
.artist-reservation-section[b-qp76tx7047] {
    padding: 1.25rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.075);
}
.artist-reservation-section:last-child[b-qp76tx7047] { border-bottom: 0; }
.artist-reservation-section-heading[b-qp76tx7047] {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    gap: 0.8rem;
    margin-bottom: 0.85rem;
}
.artist-reservation-section-heading h3[b-qp76tx7047] {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    font-weight: 780;
}
.artist-reservation-section-caption[b-qp76tx7047] {
    position: absolute;
    right: 0;
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.72rem;
}
.artist-reservation-pill-grid[b-qp76tx7047] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}
.artist-reservation-finance-list[b-qp76tx7047] { display: grid; gap: 0.7rem; }
.artist-reservation-pill-grid[b-qp76tx7047]  .sh-two-tone-pill,
.artist-reservation-finance-list[b-qp76tx7047]  .sh-two-tone-pill {
    min-height: 42px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}
.artist-reservation-pill-grid[b-qp76tx7047]  .sh-two-tone-pill-label,
.artist-reservation-finance-list[b-qp76tx7047]  .sh-two-tone-pill-label {
    justify-content: center;
    min-width: 42%;
    padding-inline: 0.8rem;
}
.artist-reservation-pill-grid[b-qp76tx7047]  .sh-two-tone-pill-value,
.artist-reservation-finance-list[b-qp76tx7047]  .sh-two-tone-pill-value {
    justify-content: center;
    padding-inline: 0.8rem;
    text-align: center;
}
.artist-reservation-section-heading[b-qp76tx7047] >  .status-pill {
    position: absolute;
    right: 0;
}
.artist-reservation-explanation[b-qp76tx7047] {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin-top: 0.9rem;
    color: rgba(255, 255, 255, 0.64);
    font-size: 0.8rem;
    line-height: 1.5;
}
.artist-reservation-explanation i[b-qp76tx7047] { margin-top: 0.15rem; color: #76bde8; }
.artist-reservation-waiting[b-qp76tx7047] {
    margin: 0.55rem 0 0 1.45rem;
    color: #f2c66d;
    font-size: 0.78rem;
}
.artist-reservation-notes[b-qp76tx7047] {
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.86rem;
    line-height: 1.65;
    white-space: pre-wrap;
}
.artist-reservation-panel-actions[b-qp76tx7047] {
    display: grid;
    gap: 0.55rem;
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
}
.artist-reservation-review-done[b-qp76tx7047] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 42px;
    margin: 0;
    padding: 0 0.75rem;
    color: #6fe0a8;
    background: rgba(0, 217, 118, 0.08);
    border: 1px solid rgba(0, 217, 118, 0.24);
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 700;
}
/* Plus de colonne réservée : le panneau est fixe, au-dessus de la page. Elle
   rétrécissait la liste pendant toute la consultation. */

@keyframes artist-panel-in-b-qp76tx7047 {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Responsive */
@media (max-width: 1200px) {
}

@media (max-width: 992px) {
}

@media (max-width: 560px) {
    .artist-reservation-pill-grid[b-qp76tx7047] { grid-template-columns: 1fr; }
    .artist-reservation-section-heading[b-qp76tx7047] { justify-content: flex-start; }
    .artist-reservation-section-caption[b-qp76tx7047],
    .artist-reservation-section-heading[b-qp76tx7047] >  .status-pill { position: static; }
}

@media (prefers-reduced-motion: reduce) {
    .artist-reservation-panel[b-qp76tx7047],
    .artist-reservation-panel-backdrop[b-qp76tx7047],
    .dashboard-wrapper.sidepanel-open .dashboard-main-content[b-qp76tx7047] { animation: none; transition: none; }
}

/* Les montants occupent la largeur du panneau, alignés à droite comme les valeurs des pastilles
   à deux tons qui les suivent. */
.artist-reservation-amounts[b-qp76tx7047] {
    display: flex;
    width: 100%;
    align-items: flex-end;
}

/* Les raccourcis de réservation, sous la file. Un rang d'actions, à distance des chiffres du
   cockpit : on lit en haut, on agit ici. */
.artist-shortcuts[b-qp76tx7047] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0.75rem 0 1.25rem;
}

.artist-shortcuts-label[b-qp76tx7047] {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    /* Même gris que les intitulés de chiffres : c'est la même voix, en marge du contenu. */
    color: rgba(255, 255, 255, 0.42);
    margin-right: 0.25rem;
}
/* /Pages/CreateStudio.razor.rz.scp.css */
/* Styles du composant, auparavant dans un <style> en ligne — donc globaux et injectés dans le DOM le temps de l'affichage. Scopés ici, ils ne visent plus que son propre balisage. */

.studio-creation-guard[b-wx9vlf3c4e] {
    max-width: 620px;
    padding: 3rem 1.5rem;
    text-align: center;
}
.studio-creation-guard > i[b-wx9vlf3c4e] { color: var(--sh-gold); font-size: 2rem; }
.studio-creation-guard h1[b-wx9vlf3c4e] { margin: 1rem 0 0.75rem; color: var(--sh-white); font-size: clamp(1.55rem, 3vw, 2.2rem); }
.studio-creation-guard p[b-wx9vlf3c4e] { color: rgba(255, 255, 255, 0.62); }
.studio-creation-guard-meta[b-wx9vlf3c4e] { display: flex; justify-content: center; gap: 1rem; margin: 1.25rem 0; color: rgba(255, 255, 255, 0.72); font-size: 0.88rem; }
.input-group > .form-select[b-wx9vlf3c4e] {
    flex: 0 0 auto;
    width: 100px;
}
.input-group > .form-control[b-wx9vlf3c4e] {
    flex: 1 1 auto;
}
/* Champ téléphone : voir .sh-phone-field dans app.css. */
/* /Pages/Discover.razor.rz.scp.css */
/* La découverte des studios : recherche, filtres et grille de résultats. */

.discover-page--embedded[b-p2pdw6tzw8] {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0.25rem 0 0;
}


@keyframes fadeIn-b-p2pdw6tzw8 {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.discover-toolbar[b-p2pdw6tzw8] {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    align-items: center;
    box-shadow: var(--sh-elev-2-shadow);
}

.search-section[b-p2pdw6tzw8] { flex: 1.5; min-width: 250px; }

.search-input-wrapper[b-p2pdw6tzw8] {
    position: relative;
    width: 100%;
}

.search-icon-inside[b-p2pdw6tzw8] {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.4);
    z-index: 5;
    font-size: 0.9rem;
}

.search-input-compact[b-p2pdw6tzw8] {
    padding-left: 2.8rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    font-size: 0.9rem !important;
    border-radius: 10px !important;
    background-color: rgba(0,0,0,0.2) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}

.btn-clear-search[b-p2pdw6tzw8] {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.4);
    padding: 0.2rem 0.5rem;
    z-index: 5;
}

.btn-clear-search:hover[b-p2pdw6tzw8] {
    color: white;
}

.filters-section[b-p2pdw6tzw8] { display: flex; gap: 1rem; flex-wrap: wrap; flex: 1; }

/* Les commandes de la barre de filtres : même hauteur, toutes.

   Elles ne l'avaient pas. Les menus déroulants se dimensionnaient par leur seul rembourrage
   vertical, le bouton de la carte par le sien, et la barre présentait trois hauteurs différentes
   sur une même ligne. Une hauteur posée ici les aligne, quel que soit leur contenu. */
.filter-select-compact[b-p2pdw6tzw8] {
    min-width: 150px;
    height: 44px;
    border-radius: 10px !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    font-size: 0.9rem !important;
    background-color: rgba(0,0,0,0.2) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: white !important;
}

/* Le rayon, au curseur. Il occupe la place d'un menu déroulant et s'aligne sur lui : la barre
   ne doit pas se réorganiser quand la position devient disponible. */
.discover-radius[b-p2pdw6tzw8] {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.15rem;
    min-width: 170px;
    height: 44px;
    padding: 0.3rem 0.75rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.discover-radius-value[b-p2pdw6tzw8] {
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.75);
    white-space: nowrap;
}

.discover-radius input[type="range"][b-p2pdw6tzw8] {
    width: 100%;
    height: 4px;
    margin: 0;
    accent-color: var(--sh-gold, #d4af37);
    cursor: pointer;
}

.tabs-section[b-p2pdw6tzw8] { margin-left: auto; }
.tabs-section .btn-group[b-p2pdw6tzw8] { border-radius: 10px; overflow: hidden; }

.tabs-section .btn[b-p2pdw6tzw8] {
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
    font-weight: 600;
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
}

.tabs-section .btn:hover[b-p2pdw6tzw8] { background: rgba(255,255,255,0.05); color: #fff; }

.tabs-section .btn.active-studios .badge[b-p2pdw6tzw8] { background-color: var(--sh-gold) !important; color: #000 !important; }
.tabs-section .btn.active-artists .badge[b-p2pdw6tzw8] { background-color: var(--sh-purple) !important; color: #fff !important; }
.tabs-section .btn.active-engineers .badge[b-p2pdw6tzw8] { background-color: var(--sh-amber) !important; color: #000 !important; }

.tabs-section .btn.active-studios[b-p2pdw6tzw8] {
    background: linear-gradient(135deg, rgba(217, 166, 83, 0.4) 0%, rgba(217, 166, 83, 0.2) 100%);
    border-color: var(--sh-gold);
    color: var(--sh-gold);
}

.tabs-section .btn.active-artists[b-p2pdw6tzw8] {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.4) 0%, rgba(139, 92, 246, 0.2) 100%);
    border-color: var(--sh-purple);
    color: var(--sh-purple);
}

.tabs-section .btn.active-engineers[b-p2pdw6tzw8] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.4) 0%, rgba(245, 158, 11, 0.2) 100%);
    border-color: var(--sh-amber);
    color: var(--sh-amber);
}

.results-info[b-p2pdw6tzw8] { display: flex; align-items: center; }

.discover-card .bi[b-p2pdw6tzw8] {
    opacity: 1 !important;
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.5));
    width: 1.2rem;
    height: 1.2rem;
}

.tabs-section .badge[b-p2pdw6tzw8] {
    border: 1px solid rgba(255,255,255,0.2);
    font-weight: 800;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.active-studios .badge[b-p2pdw6tzw8] { color: #000 !important; }
.active-artists .badge[b-p2pdw6tzw8] { color: #fff !important; }
.active-engineers .badge[b-p2pdw6tzw8] { color: #000 !important; }










/* ── La barre de filtres, en colonne ───────────────────────────────────────────────────────

   Elle passait bien en colonne, mais ses commandes gardaient leur largeur naturelle : chacune
   s'alignait à gauche sur cent cinquante pixels, laissant la moitié droite de la carte vide, et
   le groupe d'onglets, lui, débordait par la droite. Trois défauts d'une même cause — rien ne
   disait aux enfants de prendre la largeur qu'on leur avait ouverte.

   Un écart plus serré aussi : deux centimètres et demi entre deux filtres se justifient sur une
   ligne, pas empilés. */
@media (max-width: 992px) {
    .discover-toolbar[b-p2pdw6tzw8] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.85rem;
        padding: 1rem;
    }

    .search-section[b-p2pdw6tzw8],
    .filters-section[b-p2pdw6tzw8],
    .tabs-section[b-p2pdw6tzw8] {
        width: 100%;
        min-width: 0;
    }

    .filters-section[b-p2pdw6tzw8] {
        flex-direction: column;
        gap: 0.65rem;
    }

    /* Elles remplissent la colonne plutôt que de s'aligner sur leur largeur minimale. */
    .filters-section > *[b-p2pdw6tzw8] {
        width: 100%;
        min-width: 0;
    }

    .tabs-section[b-p2pdw6tzw8] { margin-left: 0; }

    /* Une grille de trois plutôt qu'une rangée de boutons : la rangée débordait du cadre dès que
       « INGÉNIEURS » et sa pastille ne tenaient plus. Trois colonnes égales tiennent toujours,
       et le texte se replie à l'intérieur de la sienne. */
    .tabs-section .btn-group[b-p2pdw6tzw8] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        width: 100%;
    }

    .tabs-section .btn[b-p2pdw6tzw8] {
        flex: none;
        min-width: 0;
        padding-left: 0.35rem;
        padding-right: 0.35rem;
        font-size: 0.78rem;
        white-space: normal;
    }
}

/* ── La position du visiteur, et la carte ──────────────────────────────────────────────── */

/* La demande de position : une bande, pas une fenêtre. Ce que l'écran propose ici est un
   confort, et une modale en ferait un péage. */
.discover-locate[b-p2pdw6tzw8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(212, 175, 55, 0.28);
    border-radius: 0.75rem;
    background: rgba(212, 175, 55, 0.06);
}

.discover-locate--muted[b-p2pdw6tzw8] {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
}

.discover-locate-text[b-p2pdw6tzw8] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    min-width: 0;
    font-size: 0.85rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.72);
}

.discover-locate-text strong[b-p2pdw6tzw8] {
    color: #fff;
    margin-right: 0.35rem;
}

.discover-locate-text i[b-p2pdw6tzw8] {
    flex: 0 0 auto;
    margin-top: 0.15rem;
}

/* La distance, sur la ligne de la ville : c'est la même information — où est ce studio —
   et la séparer sur deux lignes ferait chercher deux fois. */
.discover-distance[b-p2pdw6tzw8] {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.72);
}

.discover-map-toggle[b-p2pdw6tzw8] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
}

.discover-map-toggle:hover[b-p2pdw6tzw8],
.discover-map-toggle.is-active[b-p2pdw6tzw8] {
    background: rgba(212, 175, 55, 0.15);
    border-color: rgba(212, 175, 55, 0.45);
    color: #fff;
}

/* La carte est un bloc, pas un fond d'écran : elle porte une bordure, un en-tête et un
   compteur, comme les autres sections de l'application. C'est une façon de lire la même liste,
   et elle doit s'annoncer comme telle. */
.discover-map-card[b-p2pdw6tzw8] {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.9rem;
    overflow: hidden;
    background: #1d2127;
}

.discover-map-head[b-p2pdw6tzw8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.discover-map-head h2[b-p2pdw6tzw8] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
}

.discover-map-head i[b-p2pdw6tzw8] {
    color: var(--sh-gold, #d4af37);
}

.discover-map-count[b-p2pdw6tzw8] {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
}

/* Une hauteur fixe plutôt qu'un ratio : la carte doit garder la liste visible en dessous,
   sinon le bouton « Carte » remplace la recherche au lieu de l'accompagner. Plus haute qu'avant,
   parce qu'à quatre cents pixels les pastilles de prix se chevauchaient dès trois studios. */
.discover-map[b-p2pdw6tzw8] {
    width: 100%;
    height: 520px;
}

@media (max-width: 768px) {
    .discover-map[b-p2pdw6tzw8] {
        height: 380px;
    }
}

.discover-map-note[b-p2pdw6tzw8],
.discover-map-fallback[b-p2pdw6tzw8] {
    margin: 0;
    padding: 0.6rem 1rem;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
}

.discover-map-fallback[b-p2pdw6tzw8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
/* /Pages/EngineerEarnings.razor.rz.scp.css */

.earn-list[b-nekdbxesc0] { margin-top: 1.75rem; }

.earn-list h2[b-nekdbxesc0] {
    margin: 0 0 0.6rem;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.earn-note[b-nekdbxesc0] {
    margin: 0;
    margin-top: 1.5rem;
    padding: 1rem 1.1rem;
    display: flex;
    gap: 0.6rem;
    color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    font-size: 0.82rem;
    line-height: 1.55;
}

.earn-note i[b-nekdbxesc0] { color: var(--sh-gold); }

.earn-rows[b-nekdbxesc0] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.earn-row[b-nekdbxesc0] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.earn-row:last-child[b-nekdbxesc0] { border-bottom: 0; }

.earn-row-when[b-nekdbxesc0] {
    display: flex;
    flex-direction: column;
    flex: 0 0 3.2rem;
    line-height: 1.15;
}

.earn-row-when strong[b-nekdbxesc0] {
    color: #fff;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
}

.earn-row-when span[b-nekdbxesc0] {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.72rem;
}

.earn-row-what[b-nekdbxesc0] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    gap: 0.1rem;
}

.earn-row-what strong[b-nekdbxesc0] {
    color: #fff;
    font-size: 0.88rem;
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.earn-row-what span[b-nekdbxesc0] {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.78rem;
}

/* L'état porte la couleur, pas le montant : c'est lui qui change d'une ligne à l'autre. */
.earn-row-state[b-nekdbxesc0] {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    font-weight: 650;
}

.earn-row-state--due[b-nekdbxesc0] { color: var(--sh-amber); }
.earn-row-state--declared[b-nekdbxesc0] { color: var(--sh-aqua); }
.earn-row-state--confirmed[b-nekdbxesc0] { color: var(--sh-green, #4caf82); }
.earn-row-state--contested[b-nekdbxesc0] { color: #ff8b8b; }

/* Le tarif sur lequel la séance a été calculée, sous son montant. Discret par construction :
   c'est une réponse tenue en réserve pour qui la cherche, pas une information de premier plan. */
.earn-row-rate[b-nekdbxesc0] {
    display: block;
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.7rem;
    font-weight: 600;
}

/* Un tarif qui n'est plus celui d'aujourd'hui. La nuance suffit à poser la question et à y
   répondre — l'italique dit « c'était », le pointillé invite à s'y arrêter. */
.earn-row-rate--historic[b-nekdbxesc0] {
    border-bottom: 1px dotted rgba(212, 165, 116, 0.5);
    color: var(--sh-amber, #d4a574);
    font-style: italic;
}

.earn-row-amount[b-nekdbxesc0] {
    flex: 0 0 auto;
    color: var(--sh-gold);
    font-size: 0.95rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.earn-row-action[b-nekdbxesc0] { flex: 0 0 auto; }

.earn-row-claimed[b-nekdbxesc0] {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.75rem;
    font-style: italic;
}

@media (max-width: 700px) {
    .earn-row[b-nekdbxesc0] {
        flex-wrap: wrap;
        gap: 0.4rem 0.75rem;
        padding: 0.85rem 0.9rem;
    }

    .earn-row-what[b-nekdbxesc0] { flex: 1 1 60%; }
    .earn-row-state[b-nekdbxesc0] { flex: 1 1 100%; order: 4; }
    .earn-row-action[b-nekdbxesc0] { flex: 1 1 100%; order: 5; }
    .earn-row-action .sh-action[b-nekdbxesc0] { width: 100%; justify-content: center; }
}
/* /Pages/EngineerInvitationResponse.razor.rz.scp.css */
/* L'invitation à une séance, reçue par courriel.

   Elle tenait dans une carte Bootstrap montée à la main — « card bg-dark border-secondary
   border-opacity-25 p-5 » — avec une pastille dorée en guise d'icône. Elle prend maintenant la
   surface commune (DashboardSection) et la grammaire de faits de l'espace ingénieur (.sh-fact,
   dans app.css) : ce qu'on lit dans son courrier ressemble à ce qu'on lira dans l'application. */

.inv-studio[b-ouf25hdo05] {
    margin: 0;
    color: #fff;
    font-size: 1.35rem;
    font-weight: 800;
}

.inv-room[b-ouf25hdo05] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.2rem 0 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
}

.inv-room > i[b-ouf25hdo05] { color: rgba(255, 255, 255, 0.35); }

/* Les faits sur une ligne, comme dans la file : quand, combien de temps, combien. */
.inv-facts[b-ouf25hdo05] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1.1rem;
    padding: 0.7rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.inv-hint[b-ouf25hdo05] {
    margin: 0;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.78rem;
    line-height: 1.5;
}

.inv-hint a[b-ouf25hdo05] { color: var(--sh-aqua); }
/* /Pages/EngineerMy.razor.rz.scp.css */
/* Bandeau de statut : un sélecteur à trois positions, dans l'esprit du cockpit —
   un interrupteur de façade plutôt qu'un groupe de boutons Bootstrap. */

.eng-status[b-382auskqiz] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
    flex-wrap: wrap;
}

.eng-status-label[b-382auskqiz] {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
}

/* Le creux dans lequel les positions sont serties. */
.eng-status-group[b-382auskqiz] {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.5);
    background: rgba(0, 0, 0, 0.35);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}

.eng-status-btn[b-382auskqiz] {
    padding: 0.28rem 0.85rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.74rem;
    font-weight: 700;
    transition: color var(--sh-duration-aero), background var(--sh-duration-aero);
}

.eng-status-btn:hover[b-382auskqiz] { color: rgba(255, 255, 255, 0.75); }

/* La position active ressort du creux : c'est le seul élément en relief de la rangée. */
.eng-status-btn.is-on[b-382auskqiz] {
    background: var(--sh-aqua-soft);
    color: var(--sh-aqua);
    box-shadow: var(--sh-glass-specular), 0 1px 3px rgba(0, 0, 0, 0.45);
}

.eng-status-stamp[b-382auskqiz] {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.25);
    font-variant-numeric: tabular-nums;
}

/* Tuiles de séance de l'accueil ingénieur.

   Deux par ligne dès qu'il y a la place : une seule colonne ferait défiler une liste que l'on
   veut embrasser d'un coup, quatre rendraient chaque tuile trop étroite pour son décompte. */
.eng-tiles[b-382auskqiz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}

/* Le solde restant, dans la file : seul chiffre de la ligne, il doit se lire d'un coup. */
.eng-amount[b-382auskqiz] {
    color: var(--sh-amber);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Les faits d'une invitation se lisent avec la grammaire commune — .sh-fact, dans app.css, la
   même que la file du propriétaire. Ne restent ici que les deux variations propres à cet écran. */

/* L'absence de tarif convenu prend l'habillage des mises en garde : ce n'est pas une accusation
   portée au studio, c'est un fait à connaître avant de s'engager. */
.eng-fact--nopay[b-382auskqiz] {
    align-items: flex-start;
    padding: 0.3rem 0.55rem;
    color: #f0c34f;
    background: rgba(240, 180, 0, 0.1);
    border: 1px solid rgba(240, 180, 0, 0.28);
    border-radius: 8px;
}

.eng-fact--nopay > i[b-382auskqiz] { margin-top: 0.15rem; color: #f0c34f; }

/* L'échéance ferme la ligne, à droite dès qu'il y a la place : c'est ce qu'on relit en dernier,
   une fois le montant et l'horaire acceptés. */
.eng-fact--deadline[b-382auskqiz] { margin-left: auto; }

@media (max-width: 640px) {
    .eng-fact--deadline[b-382auskqiz] { margin-left: 0; }
}

/* Le tarif affiché sur le profil n'est qu'une proposition, jamais un accord : gris, comme
   toute simple proposition dans l'application, pour ne pas le confondre avec le fait ci-dessus. */
.eng-fee-proposed[b-382auskqiz] {
    display: block;
    margin-top: 0.25rem;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 400;
}
/* /Pages/EngineerRates.razor.rz.scp.css */
/* Le cadre défile pour son compte, comme le reste des listes de l'application : le tableau ne
   pousse jamais la page entière en largeur, même avec un studio au nom long. */
.rates-shell[b-h2g6csb4of] {
    overflow-x: auto;
    background: var(--sh-black);
    border-radius: 18px;
}

.rates-table[b-h2g6csb4of] {
    width: 100%;
    margin: 0;
    color: #fff;
    border-collapse: separate;
    border-spacing: 0;
}

.rates-head th[b-h2g6csb4of] {
    padding: 0.7rem 1rem;
    color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.02);
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}

.rates-table tbody tr[b-h2g6csb4of] { border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.rates-table tbody tr:last-child[b-h2g6csb4of] { border-bottom: 0; }

.rates-table td[b-h2g6csb4of] {
    padding: 0.75rem 1rem;
    vertical-align: middle;
    font-size: 0.85rem;
}

.rates-studio a[b-h2g6csb4of] {
    color: #fff;
    font-weight: 650;
    text-decoration: none;
}

.rates-studio a:hover[b-h2g6csb4of],
.rates-studio a:focus-visible[b-h2g6csb4of] { color: var(--sh-gold); }

/* Le geste d'accord porte l'ambre : c'est celui qui clôt la négociation, pas celui qui la
   rouvre. « Modifier », à côté, reste neutre. */
.rates-align[b-h2g6csb4of] {
    color: var(--sh-amber);
    border-color: var(--sh-amber-glow, rgba(212, 165, 116, 0.35));
}

.rates-action[b-h2g6csb4of] { text-align: right; }

.rates-note[b-h2g6csb4of] { margin-top: 1.5rem; }

/* La boîte de saisie : un montant en euros, comme le tarif d'équipe et le tarif de séance. */
.rates-field[b-h2g6csb4of] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}

.rates-label[b-h2g6csb4of] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.78rem;
    font-weight: 650;
}

.rates-input[b-h2g6csb4of] {
    padding: 0.55rem 0.75rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    font-size: 0.95rem;
}

.rates-input:focus[b-h2g6csb4of] {
    outline: none;
    border-color: var(--sh-gold);
}

.rates-hint[b-h2g6csb4of] {
    margin: 0;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.76rem;
    line-height: 1.5;
}

/* Ni « Demandé » ni « Tarif convenu » ne cède la place sur petit écran : l'écart entre les deux
   est précisément ce que cet écran doit montrer. Le cadre défile plutôt que d'en sacrifier un. */
.rates-table[b-h2g6csb4of] { min-width: 34rem; }
/* /Pages/EngineerSessions.razor.rz.scp.css */
/* La barre de « Mes séances » : le basculeur et le décompte, dessinés comme ceux de l'onglet
   Réservations du studio. Les deux écrans lisent les mêmes séances ; ils se présentent de même. */

.es-bar[b-equ7vqe0cb] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 0.75rem;
}

.es-count[b-equ7vqe0cb] {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.es-views[b-equ7vqe0cb] {
    display: inline-flex;
    padding: 3px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
}

.es-view[b-equ7vqe0cb] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    background: transparent;
    border: 0;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    transition: color 140ms ease, background 140ms ease;
}

.es-view:hover[b-equ7vqe0cb] { color: #fff; }

.es-view.is-on[b-equ7vqe0cb] {
    color: #001a1f;
    background: var(--sh-space-engineer);
}

@media (max-width: 640px) {
    .es-bar[b-equ7vqe0cb] { flex-wrap: wrap; gap: 0.6rem; }
    .es-count[b-equ7vqe0cb] { margin-left: 0; width: 100%; }
    .es-views[b-equ7vqe0cb] { width: 100%; }
    .es-view[b-equ7vqe0cb] { flex: 1 1 0; justify-content: center; padding: 0.45rem 0.5rem; }
}
/* /Pages/EngineerStudioDashboard.razor.rz.scp.css */
/* Un studio, vu par l'ingénieur. Même en-tête que le tableau de bord du gérant : le nom une
   fois, le lieu dessous, les gestes à droite. */

/* L’en-tête de cet écran est désormais PageHead, comme partout ailleurs : trente lignes de
   style disparaissent avec lui. */

.eng-studio-block[b-9e98ndyjcn] { margin-bottom: 2rem; }

/* Les titres de bloc sont ceux de DashboardSection, comme chez le gérant. */

.eng-studio-missing[b-9e98ndyjcn] {
    padding: 3rem 1rem;
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
}

/* La règle des gestes serrés sur téléphone est remontée dans PageHead : elle valait pour tous
   les écrans qui en portent, pas pour celui-ci seul. */
/* /Pages/Faq.razor.rz.scp.css */
.faq[b-v1kr8gsg3l] {
    max-width: 52rem;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
}

.faq-hero[b-v1kr8gsg3l] {
    margin-bottom: 1.5rem;
    text-align: center;
    animation: faq-rise-b-v1kr8gsg3l 0.5s ease both;
}

.faq-title[b-v1kr8gsg3l] {
    margin: 0 0 0.5rem;
    color: #fff;
    font-size: clamp(2rem, 6vw, 3rem);
    font-weight: 900;
    letter-spacing: -0.02em;
}

.faq-lead[b-v1kr8gsg3l] {
    margin: 0 0 1.5rem;
    color: rgba(255, 255, 255, 0.6);
}

.faq-search[b-v1kr8gsg3l] {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 34rem;
    margin: 0 auto;
}

.faq-search > i[b-v1kr8gsg3l] {
    position: absolute;
    left: 1rem;
    color: rgba(255, 255, 255, 0.45);
}

.faq-search input[b-v1kr8gsg3l] {
    width: 100%;
    padding: 0.9rem 2.8rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    font-size: 1rem;
}

.faq-search input:focus[b-v1kr8gsg3l] {
    outline: none;
    border-color: var(--sh-gold, #f0b400);
    box-shadow: 0 0 0 4px rgba(240, 180, 0, 0.14);
}

.faq-search input[b-v1kr8gsg3l]::-webkit-search-cancel-button {
    display: none;
}

.faq-search__clear[b-v1kr8gsg3l] {
    position: absolute;
    right: 0.6rem;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
}

.faq-topics[b-v1kr8gsg3l] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    margin-bottom: 2rem;
    animation: faq-rise-b-v1kr8gsg3l 0.5s 0.06s ease both;
}

.faq-topic[b-v1kr8gsg3l] {
    --t: var(--sh-gold, #f0b400);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    font-weight: 700;
    transition: all 0.2s ease;
}

.faq-topic i[b-v1kr8gsg3l] {
    color: var(--t);
}

.faq-topic--artist[b-v1kr8gsg3l] { --t: var(--sh-pink, #f06fa8); }
.faq-topic--owner[b-v1kr8gsg3l] { --t: var(--sh-gold, #f0b400); }
.faq-topic--engineer[b-v1kr8gsg3l] { --t: var(--sh-aqua, #4fd1e8); }
.faq-topic--info[b-v1kr8gsg3l] { --t: var(--sh-blue, #4dabf7); }

.faq-topic:hover[b-v1kr8gsg3l] {
    border-color: color-mix(in srgb, var(--t) 45%, transparent);
    color: #fff;
}

.faq-topic.is-on[b-v1kr8gsg3l] {
    border-color: var(--t);
    background: color-mix(in srgb, var(--t) 14%, transparent);
    color: #fff;
}

/* ------------------------------------------------------------------ groupes */

.faq-group[b-v1kr8gsg3l] {
    --g: var(--sh-gold, #f0b400);
    margin-bottom: 2rem;
    animation: faq-rise-b-v1kr8gsg3l 0.45s ease both;
}

.faq-group--artist[b-v1kr8gsg3l] { --g: var(--sh-pink, #f06fa8); }
.faq-group--owner[b-v1kr8gsg3l] { --g: var(--sh-gold, #f0b400); }
.faq-group--engineer[b-v1kr8gsg3l] { --g: var(--sh-aqua, #4fd1e8); }
.faq-group--info[b-v1kr8gsg3l] { --g: var(--sh-blue, #4dabf7); }

.faq-group__title[b-v1kr8gsg3l] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.8rem;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 900;
}

.faq-group__icon[b-v1kr8gsg3l] {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--g) 15%, transparent);
    color: var(--g);
}

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

.faq-item[b-v1kr8gsg3l] {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.02);
    scroll-margin-top: calc(var(--sh-header-h, 4.8rem) + 1rem);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.faq-item[open][b-v1kr8gsg3l] {
    border-color: color-mix(in srgb, var(--g) 35%, transparent);
    background: color-mix(in srgb, var(--g) 5%, transparent);
}

.faq-item summary[b-v1kr8gsg3l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1.1rem;
    color: #fff;
    font-size: 0.97rem;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
}

.faq-item summary[b-v1kr8gsg3l]::-webkit-details-marker {
    display: none;
}

.faq-item__toggle[b-v1kr8gsg3l] {
    flex: 0 0 auto;
    color: var(--g);
    transition: transform 0.25s ease;
}

.faq-item[open] .faq-item__toggle[b-v1kr8gsg3l] {
    transform: rotate(45deg);
}

.faq-item__answer[b-v1kr8gsg3l] {
    padding: 0 1.1rem 1rem;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.93rem;
    line-height: 1.65;
    animation: faq-open-b-v1kr8gsg3l 0.3s ease both;
}

.faq-item__answer[b-v1kr8gsg3l]  p {
    margin: 0 0 0.6rem;
}

.faq-item__answer[b-v1kr8gsg3l]  p:last-child {
    margin-bottom: 0;
}

.faq-item__answer[b-v1kr8gsg3l]  b {
    color: #fff;
}

.faq-item__answer[b-v1kr8gsg3l]  a {
    color: var(--g);
    font-weight: 700;
}

.faq-item__answer[b-v1kr8gsg3l]  .hl {
    padding: 0.02rem 0.35rem;
    border-radius: 6px;
    font-weight: 800;
    white-space: nowrap;
}

.faq-item__answer[b-v1kr8gsg3l]  .hl--money { background: rgba(240, 180, 0, 0.14); color: var(--sh-gold, #f0b400); }
.faq-item__answer[b-v1kr8gsg3l]  .hl--ok { background: rgba(74, 222, 128, 0.12); color: var(--sh-green, #4ade80); }
.faq-item__answer[b-v1kr8gsg3l]  .hl--wait { background: rgba(212, 165, 116, 0.14); color: var(--sh-amber, #d4a574); }
.faq-item__answer[b-v1kr8gsg3l]  .hl--no { background: rgba(255, 107, 107, 0.12); color: #ff8b8b; }
.faq-item__answer[b-v1kr8gsg3l]  .hl--info { background: rgba(77, 171, 247, 0.12); color: var(--sh-blue, #4dabf7); }

/* ------------------------------------------------------------------ rien, et la suite */

.faq-none[b-v1kr8gsg3l] {
    padding: 2.5rem 1rem;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
}

.faq-none > i[b-v1kr8gsg3l] {
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.3);
}

.faq-none__cta[b-v1kr8gsg3l] {
    color: var(--sh-gold, #f0b400);
    font-weight: 800;
}

.faq-more[b-v1kr8gsg3l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2.5rem;
    padding: 1.25rem 1.4rem;
    border: 1px solid rgba(240, 180, 0, 0.22);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(240, 180, 0, 0.08), transparent);
}

.faq-more > div:first-child[b-v1kr8gsg3l] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.faq-more strong[b-v1kr8gsg3l] {
    color: #fff;
    font-size: 1.05rem;
}

.faq-more span[b-v1kr8gsg3l] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.88rem;
}

.faq-more__actions[b-v1kr8gsg3l] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.faq-more__actions span[b-v1kr8gsg3l] {
    color: inherit;
    font-size: inherit;
}

@keyframes faq-rise-b-v1kr8gsg3l {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

@keyframes faq-open-b-v1kr8gsg3l {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .faq-hero[b-v1kr8gsg3l], .faq-topics[b-v1kr8gsg3l], .faq-group[b-v1kr8gsg3l], .faq-item__answer[b-v1kr8gsg3l] { animation: none; }
}
/* /Pages/GettingStarted.razor.rz.scp.css */
/* Le centre d'aide.

   Deux temps. Choisir : un titre, trois grandes cartes, rien d'autre. Lire : les cartes se
   resserrent en une rangée, et le parcours monte en dessous, sous-rubrique après sous-rubrique,
   dans la couleur de l'espace concerné. */

.hc[b-b37bfsa35s] {
    --hc-accent: var(--sh-gold, #f0b400);
    --hc-soft: rgba(240, 180, 0, 0.1);
    --hc-edge: rgba(240, 180, 0, 0.3);
    max-width: 76rem;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
}

.hc--artist[b-b37bfsa35s] {
    --hc-accent: var(--sh-pink, #f06fa8);
    --hc-soft: rgba(240, 111, 168, 0.1);
    --hc-edge: rgba(240, 111, 168, 0.32);
}

.hc--owner[b-b37bfsa35s] {
    --hc-accent: var(--sh-gold, #f0b400);
    --hc-soft: rgba(240, 180, 0, 0.1);
    --hc-edge: rgba(240, 180, 0, 0.3);
}

.hc--engineer[b-b37bfsa35s] {
    --hc-accent: var(--sh-aqua, #4fd1e8);
    --hc-soft: rgba(79, 209, 232, 0.1);
    --hc-edge: rgba(79, 209, 232, 0.3);
}

/* ------------------------------------------------------------------ accueil */

.hc-hero[b-b37bfsa35s] {
    max-width: 44rem;
    margin: 0 auto;
    text-align: center;
    transition: margin 0.45s ease;
}

.is-choosing .hc-hero[b-b37bfsa35s] {
    margin: 2.5rem auto 2.5rem;
    animation: hc-rise-b-b37bfsa35s 0.6s ease both;
}

.is-reading .hc-hero[b-b37bfsa35s] {
    margin-bottom: 1.25rem;
}

.hc-eyebrow[b-b37bfsa35s] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.75rem;
    color: var(--hc-accent);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: color 0.4s ease;
}

.hc-title[b-b37bfsa35s] {
    margin: 0 0 0.75rem;
    color: #fff;
    font-size: clamp(2.1rem, 6.5vw, 3.6rem);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -0.02em;
    transition: font-size 0.45s ease;
}

.is-reading .hc-title[b-b37bfsa35s] {
    font-size: clamp(1.5rem, 4vw, 2rem);
}

/* « pour vous » prend la couleur de celui qui lit, ou un dégradé des trois tant qu'il n'a pas choisi. */
.hc-title__accent[b-b37bfsa35s] {
    background: linear-gradient(90deg, var(--sh-pink, #f06fa8), var(--sh-gold, #f0b400), var(--sh-aqua, #4fd1e8));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.is-reading .hc-title__accent[b-b37bfsa35s] {
    background: none;
    color: var(--hc-accent);
}

.hc-lead[b-b37bfsa35s] {
    margin: 0;
    color: rgba(255, 255, 255, 0.62);
    font-size: 1.05rem;
    line-height: 1.6;
}

.is-reading .hc-lead[b-b37bfsa35s] {
    display: none;
}

/* ------------------------------------------------------------------ rôles */

.hc-roles[b-b37bfsa35s] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    max-width: 62rem;
    margin: 0 auto 3rem;
}

@media (max-width: 760px) {
    .hc-roles[b-b37bfsa35s] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.hc-role[b-b37bfsa35s] {
    --r: var(--sh-gold, #f0b400);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.6rem 1.4rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.025);
    color: #fff;
    text-decoration: none;
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, padding 0.4s ease, box-shadow 0.25s ease;
    animation: hc-rise-b-b37bfsa35s 0.55s ease both;
}

.hc-role:nth-child(2)[b-b37bfsa35s] { animation-delay: 0.07s; }
.hc-role:nth-child(3)[b-b37bfsa35s] { animation-delay: 0.14s; }

.hc-role--artist[b-b37bfsa35s] { --r: var(--sh-pink, #f06fa8); }
.hc-role--owner[b-b37bfsa35s] { --r: var(--sh-gold, #f0b400); }
.hc-role--engineer[b-b37bfsa35s] { --r: var(--sh-aqua, #4fd1e8); }

/* Une lueur de la couleur du rôle, dans l'angle, qui s'avive au survol. */
.hc-role[b-b37bfsa35s]::before {
    content: "";
    position: absolute;
    inset: auto -30% -60% auto;
    width: 70%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--r) 35%, transparent), transparent 70%);
    opacity: 0.45;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.hc-role:hover[b-b37bfsa35s] {
    border-color: color-mix(in srgb, var(--r) 45%, transparent);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.hc-role:hover[b-b37bfsa35s]::before {
    opacity: 1;
}

.hc-role__icon[b-b37bfsa35s] {
    display: grid;
    place-items: center;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 16px;
    background: color-mix(in srgb, var(--r) 16%, transparent);
    color: var(--r);
    font-size: 1.6rem;
    transition: width 0.4s ease, height 0.4s ease, font-size 0.4s ease;
}

.hc-role__text[b-b37bfsa35s] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.hc-role__name[b-b37bfsa35s] {
    font-size: 1.3rem;
    font-weight: 900;
}

.hc-role__tag[b-b37bfsa35s] {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.9rem;
}

.hc-role__go[b-b37bfsa35s] {
    position: absolute;
    top: 1.4rem;
    right: 1.4rem;
    color: var(--r);
    opacity: 0.5;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.hc-role:hover .hc-role__go[b-b37bfsa35s] {
    opacity: 1;
    transform: translateX(3px);
}

/* Une fois le rôle choisi, les trois cartes deviennent une rangée d'onglets. */
.is-reading .hc-roles[b-b37bfsa35s] {
    gap: 0.6rem;
    margin-bottom: 2.5rem;
}

.is-reading .hc-role[b-b37bfsa35s] {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    border-radius: 16px;
    animation: none;
}

.is-reading .hc-role__icon[b-b37bfsa35s] {
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 12px;
    font-size: 1.1rem;
}

.is-reading .hc-role__name[b-b37bfsa35s] {
    font-size: 0.98rem;
}

.is-reading .hc-role__tag[b-b37bfsa35s] {
    font-size: 0.78rem;
}

.is-reading .hc-role__go[b-b37bfsa35s] {
    display: none;
}

.is-reading .hc-role:not(.is-on)[b-b37bfsa35s] {
    opacity: 0.62;
}

.is-reading .hc-role:not(.is-on):hover[b-b37bfsa35s] {
    opacity: 1;
}

.hc-role.is-on[b-b37bfsa35s] {
    border-color: var(--r);
    background: color-mix(in srgb, var(--r) 10%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--r) 14%, transparent);
    transform: none;
}

@media (max-width: 760px) {
    .is-reading .hc-roles[b-b37bfsa35s] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .is-reading .hc-role[b-b37bfsa35s] {
        flex-direction: column;
        gap: 0.35rem;
        padding: 0.6rem 0.3rem;
        text-align: center;
    }

    .is-reading .hc-role__tag[b-b37bfsa35s] {
        display: none;
    }

    .is-reading .hc-role__text[b-b37bfsa35s] {
        align-items: center;
    }

    .is-reading .hc-role[b-b37bfsa35s]::before {
        display: none;
    }
}

/* ------------------------------------------------------------------ parcours */

.hc-guide[b-b37bfsa35s] {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}

@media (max-width: 980px) {
    .hc-guide[b-b37bfsa35s] {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }
}

.hc-toc[b-b37bfsa35s] {
    position: sticky;
    top: calc(var(--sh-header-h, 4.8rem) + 1rem);
    animation: hc-slide-b-b37bfsa35s 0.5s ease both;
}

.hc-toc__title[b-b37bfsa35s] {
    margin: 0 0 0.6rem;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hc-toc__list[b-b37bfsa35s] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
    border-left: 2px solid rgba(255, 255, 255, 0.06);
}

.hc-toc__list a[b-b37bfsa35s] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-left: -2px;
    padding: 0.45rem 0.7rem;
    border-left: 2px solid transparent;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.86rem;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.hc-toc__list a i[b-b37bfsa35s] {
    color: var(--hc-accent);
    opacity: 0.8;
}

.hc-toc__list a:hover[b-b37bfsa35s] {
    border-left-color: var(--hc-accent);
    color: #fff;
}

/* Sur téléphone, le sommaire devient une rangée qu'on fait glisser, collée sous la barre — contre
   elle, sans le rem d'écart du grand écran : entre deux bandes translucides, cet écart laissait
   défiler le texte dans une fente. */
@media (max-width: 980px) {
    .hc-toc[b-b37bfsa35s] {
        top: var(--sh-header-h, 4.8rem);
        z-index: 5;
        margin: 0 -1.25rem;
        padding: 0.5rem 1.25rem;
        background: rgba(5, 5, 5, 0.88);
        backdrop-filter: blur(10px);
    }

    .hc-toc__title[b-b37bfsa35s] {
        display: none;
    }

    .hc-toc__list[b-b37bfsa35s] {
        flex-direction: row;
        overflow-x: auto;
        border-left: 0;
        gap: 0.4rem;
        scrollbar-width: none;
    }

    .hc-toc__list[b-b37bfsa35s]::-webkit-scrollbar {
        display: none;
    }

    .hc-toc__list a[b-b37bfsa35s] {
        margin: 0;
        padding: 0.4rem 0.75rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 999px;
        white-space: nowrap;
        font-size: 0.8rem;
    }

    .hc-toc__list a:hover[b-b37bfsa35s] {
        border-color: var(--hc-edge);
    }
}

.hc-guide-head[b-b37bfsa35s] {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
    margin-bottom: 2.5rem;
    padding: 1.5rem;
    border: 1px solid var(--hc-edge);
    border-radius: 22px;
    background:
        radial-gradient(120% 140% at 0% 0%, var(--hc-soft), transparent 60%),
        rgba(255, 255, 255, 0.02);
    animation: hc-rise-b-b37bfsa35s 0.55s ease both;
}

.hc-guide-head__icon[b-b37bfsa35s] {
    display: grid;
    flex: 0 0 3.2rem;
    place-items: center;
    height: 3.2rem;
    border-radius: 16px;
    background: var(--hc-accent);
    color: #0b0b0b;
    font-size: 1.5rem;
    box-shadow: 0 10px 30px color-mix(in srgb, var(--hc-accent) 35%, transparent);
}

.hc-guide-head__title[b-b37bfsa35s] {
    margin: 0 0 0.4rem;
    color: #fff;
    font-size: clamp(1.4rem, 3.5vw, 1.9rem);
    font-weight: 900;
    line-height: 1.15;
}

.hc-guide-head__intro[b-b37bfsa35s] {
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 1rem;
    line-height: 1.6;
}

/* ------------------------------------------------------------------ sous-rubriques */

.hc-section[b-b37bfsa35s] {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 2rem;
    align-items: center;
    padding: 2.25rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    scroll-margin-top: calc(var(--sh-header-h, 4.8rem) + 4rem);
    animation: hc-rise-b-b37bfsa35s 0.55s ease both;
    animation-delay: calc(0.08s + var(--i, 0) * 0.07s);
}

/* Une rubrique sur deux met son image à gauche : l'œil zigzague plutôt que de lire une colonne. */
.hc-section:nth-of-type(even) .hc-section__visual[b-b37bfsa35s] {
    order: -1;
}

.hc-section--text[b-b37bfsa35s] {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 760px) {
    .hc-section[b-b37bfsa35s] {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
        padding: 1.75rem 0;
    }

    .hc-section:nth-of-type(even) .hc-section__visual[b-b37bfsa35s] {
        order: 0;
    }
}

/* Là où le navigateur sait lier une animation au défilement, chaque rubrique se révèle en entrant
   à l'écran ; ailleurs, elles arrivent en cascade au chargement. */
@supports (animation-timeline: view()) {
    .hc-section[b-b37bfsa35s] {
        animation: hc-reveal-b-b37bfsa35s linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 28%;
        animation-delay: 0s;
    }
}

.hc-num[b-b37bfsa35s] {
    display: block;
    margin-bottom: 0.2rem;
    color: color-mix(in srgb, var(--hc-accent) 55%, transparent);
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.hc-section__title[b-b37bfsa35s] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.45rem;
    color: #fff;
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    font-weight: 900;
}

.hc-section__title i[b-b37bfsa35s] {
    display: grid;
    flex: 0 0 2.2rem;
    place-items: center;
    height: 2.2rem;
    border-radius: 11px;
    background: var(--hc-soft);
    color: var(--hc-accent);
    font-size: 1.05rem;
}

.hc-section__lead[b-b37bfsa35s] {
    margin: 0 0 1.1rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.98rem;
    line-height: 1.55;
}

.hc-points[b-b37bfsa35s] {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hc-points li[b-b37bfsa35s] {
    display: flex;
    gap: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    line-height: 1.62;
}

.hc-points li > i[b-b37bfsa35s] {
    flex: 0 0 auto;
    margin-top: 0.15rem;
    color: var(--hc-accent);
    font-size: 1.05rem;
}

/* Le texte vient de HelpGuides, en balisage : il n'est pas marqué par l'isolation de cette
   feuille, d'où ::deep. */
.hc-points[b-b37bfsa35s]  b,
.hc-tip[b-b37bfsa35s]  b {
    color: #fff;
    font-weight: 800;
}

.hc-section[b-b37bfsa35s]  .hl {
    padding: 0.02rem 0.35rem;
    border-radius: 6px;
    font-weight: 800;
    white-space: nowrap;
}

.hc-section[b-b37bfsa35s]  .hl--money {
    background: rgba(240, 180, 0, 0.14);
    color: var(--sh-gold, #f0b400);
}

.hc-section[b-b37bfsa35s]  .hl--ok {
    background: rgba(74, 222, 128, 0.12);
    color: var(--sh-green, #4ade80);
}

.hc-section[b-b37bfsa35s]  .hl--wait {
    background: rgba(212, 165, 116, 0.14);
    color: var(--sh-amber, #d4a574);
}

.hc-section[b-b37bfsa35s]  .hl--no {
    background: rgba(255, 107, 107, 0.12);
    color: #ff8b8b;
}

.hc-section[b-b37bfsa35s]  .hl--info {
    background: rgba(77, 171, 247, 0.12);
    color: var(--sh-blue, #4dabf7);
}

.hc-tip[b-b37bfsa35s] {
    display: flex;
    gap: 0.65rem;
    margin-top: 1.1rem;
    padding: 0.8rem 0.95rem;
    border-radius: 14px;
    font-size: 0.9rem;
    line-height: 1.55;
}

.hc-tip--tip[b-b37bfsa35s] {
    border: 1px solid rgba(77, 171, 247, 0.22);
    background: rgba(77, 171, 247, 0.07);
    color: rgba(255, 255, 255, 0.78);
}

.hc-tip--tip i[b-b37bfsa35s] {
    color: var(--sh-blue, #4dabf7);
}

.hc-tip--warning[b-b37bfsa35s] {
    border: 1px solid rgba(212, 165, 116, 0.28);
    background: rgba(212, 165, 116, 0.08);
    color: rgba(255, 255, 255, 0.8);
}

.hc-tip--warning i[b-b37bfsa35s] {
    color: var(--sh-amber, #d4a574);
}

.hc-link[b-b37bfsa35s] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 1.1rem;
    color: var(--hc-accent);
    font-size: 0.9rem;
    font-weight: 800;
    text-decoration: none;
}

.hc-link:hover[b-b37bfsa35s] {
    color: #fff;
}

.hc-section__visual[b-b37bfsa35s] {
    max-width: 24rem;
    width: 100%;
    justify-self: center;
    transform: perspective(900px) rotateY(-4deg);
    transition: transform 0.4s ease;
}

.hc-section:nth-of-type(even) .hc-section__visual[b-b37bfsa35s] {
    transform: perspective(900px) rotateY(4deg);
}

.hc-section__visual:hover[b-b37bfsa35s],
.hc-section:nth-of-type(even) .hc-section__visual:hover[b-b37bfsa35s] {
    transform: none;
}

@media (max-width: 760px) {
    .hc-section__visual[b-b37bfsa35s],
    .hc-section:nth-of-type(even) .hc-section__visual[b-b37bfsa35s] {
        transform: none;
    }
}

/* ------------------------------------------------------------------ fin */

.hc-end[b-b37bfsa35s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    margin-top: 1rem;
    padding: 2.25rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    text-align: center;
}

.hc-end__cta[b-b37bfsa35s] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.6rem;
    border-radius: 14px;
    background: var(--hc-accent);
    color: #0b0b0b;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 12px 30px color-mix(in srgb, var(--hc-accent) 30%, transparent);
    transition: transform 0.2s ease;
}

.hc-end__cta:hover[b-b37bfsa35s] {
    color: #0b0b0b;
    transform: translateY(-2px);
}

.hc-end__more[b-b37bfsa35s] {
    margin: 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.9rem;
}

.hc-end__more a[b-b37bfsa35s] {
    color: var(--hc-accent);
    font-weight: 700;
}

@keyframes hc-rise-b-b37bfsa35s {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

@keyframes hc-slide-b-b37bfsa35s {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: none; }
}

@keyframes hc-reveal-b-b37bfsa35s {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hc-hero[b-b37bfsa35s],
    .hc-role[b-b37bfsa35s],
    .hc-toc[b-b37bfsa35s],
    .hc-guide-head[b-b37bfsa35s],
    .hc-section[b-b37bfsa35s] {
        animation: none !important;
    }
}
/* /Pages/Home.razor.rz.scp.css */
/* La page d'accueil : accroche, choix de rôle, studios en vedette. */




/* ===== Découvrir les studios ===== */
.sh-discover[b-fj50jcw8fs] { padding-top: clamp(2rem, 4vw, 3.25rem); }
.sh-discover-title[b-fj50jcw8fs] {
    font-weight: 800;
    font-size: clamp(1.25rem, 2.4vw, 1.6rem);
    letter-spacing: -0.02em;
    color: #fff;
}
.sh-discover-count[b-fj50jcw8fs] {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.38);
    font-variant-numeric: tabular-nums;
}
.studio-hover-card[b-fj50jcw8fs] { transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1); }
.studio-hover-card:hover[b-fj50jcw8fs] { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) {
    .studio-hover-card[b-fj50jcw8fs] { transition: none; }
    .studio-hover-card:hover[b-fj50jcw8fs] { transform: none; }
}

/* =====================================================
   Rythme vertical : une seule échelle pour toute la page
   ===================================================== */
.sh-hero-section[b-fj50jcw8fs],
.sh-welcome-back[b-fj50jcw8fs],
.sh-roles-section[b-fj50jcw8fs] { --sh-rhythm: clamp(3.5rem, 7vw, 6rem); }

/* ===== Hero =====
   Aucune couleur de fond propre : le hero partage le noir du body.
   La profondeur vient d'un halo radial, jamais d'un bloc plus clair. */
.sh-hero-section[b-fj50jcw8fs] {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    max-width: 100vw;
    overflow: hidden;
    padding: calc(var(--sh-rhythm) * 1.15) 1.5rem var(--sh-rhythm);
    text-align: center;
    background: transparent;
    border-bottom: none;
}
/* Halo très diffus : donne du volume au noir sans créer de bande */
.sh-hero-section[b-fj50jcw8fs]::before {
    content: "";
    position: absolute;
    inset: -20% -10% auto;
    height: 130%;
    background: radial-gradient(ellipse 55% 50% at 50% 32%, rgba(240, 180, 0, 0.06), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Onde de signal : or et blanc uniquement, dérive très lente */
.sh-hero-signal[b-fj50jcw8fs] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(150px, 26vh, 260px);
    z-index: 0;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 45%, #000 100%);
    mask-image: linear-gradient(180deg, transparent, #000 45%, #000 100%);
}
.sh-hero-signal-svg[b-fj50jcw8fs] { width: 100%; height: 100%; display: block; overflow: visible; }

/* Transformations exprimées en unités du viewBox (2400 de large) :
   les pourcentages ne résolvent pas de façon fiable sur un groupe SVG. */
.sh-hero-signal-layer[b-fj50jcw8fs],
.sh-hero-signal-parallax[b-fj50jcw8fs] {
    transform-box: view-box;
    transform-origin: center;
    will-change: transform;
}

/* Dérive continue, lente — indépendante du scroll */
.sh-hero-signal-layer--far[b-fj50jcw8fs] {
    opacity: 0.6;
    animation: sh-signal-drift-a-b-fj50jcw8fs 26s ease-in-out infinite alternate;
}
.sh-hero-signal-layer--mid[b-fj50jcw8fs] {
    opacity: 0.45;
    animation: sh-signal-drift-b-b-fj50jcw8fs 34s ease-in-out infinite alternate;
}
.sh-hero-signal-layer--near[b-fj50jcw8fs] {
    opacity: 0.55;
    animation: sh-signal-drift-c-b-fj50jcw8fs 44s ease-in-out infinite alternate;
}
@keyframes sh-signal-drift-a-b-fj50jcw8fs {
    from { transform: translate(-90px, 4px) scaleY(0.96); }
    to   { transform: translate(90px, -6px) scaleY(1.08); }
}
@keyframes sh-signal-drift-b-b-fj50jcw8fs {
    from { transform: translate(70px, -5px) scaleY(1.06); }
    to   { transform: translate(-70px, 5px) scaleY(0.94); }
}
@keyframes sh-signal-drift-c-b-fj50jcw8fs {
    from { transform: translate(-50px, 3px) scaleY(1.03); }
    to   { transform: translate(50px, -3px) scaleY(0.97); }
}

/* Parallaxe liée au scroll : chaque plan glisse à une vitesse différente.
   Groupe imbriqué distinct pour ne pas écraser la dérive continue. */
@supports (animation-timeline: scroll()) {
    .sh-hero-signal-parallax[b-fj50jcw8fs] {
        animation-timeline: scroll(root block);
        animation-fill-mode: both;
        animation-timing-function: linear;
    }
    .sh-hero-signal-parallax--far[b-fj50jcw8fs] { animation-name: sh-signal-scroll-far-b-fj50jcw8fs; }
    .sh-hero-signal-parallax--mid[b-fj50jcw8fs] { animation-name: sh-signal-scroll-mid-b-fj50jcw8fs; }
    .sh-hero-signal-parallax--near[b-fj50jcw8fs] { animation-name: sh-signal-scroll-near-b-fj50jcw8fs; }

    @keyframes sh-signal-scroll-far-b-fj50jcw8fs {
        from { transform: translateX(0); }
        to   { transform: translateX(-420px); }
    }
    @keyframes sh-signal-scroll-mid-b-fj50jcw8fs {
        from { transform: translateX(0); }
        to   { transform: translateX(-700px); }
    }
    @keyframes sh-signal-scroll-near-b-fj50jcw8fs {
        from { transform: translateX(0); }
        to   { transform: translateX(-1000px); }
    }
}

/* Apparition du hero : une seule séquence, jamais rejouée */
.sh-hero-inner[b-fj50jcw8fs] {
    position: relative; z-index: 1; max-width: 720px; margin: 0 auto;
    display: flex; flex-direction: column; align-items: center;
    animation: sh-hero-enter-b-fj50jcw8fs 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes sh-hero-enter-b-fj50jcw8fs {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.sh-hero-eyebrow[b-fj50jcw8fs] {
    font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; font-weight: 700;
    color: rgba(240, 180, 0, 0.85); margin-bottom: 1.5rem;
}
.sh-hero-title[b-fj50jcw8fs] {
    font-weight: 800;
    font-size: clamp(2.35rem, 5.2vw, 3.6rem);
    line-height: 1.06;
    letter-spacing: -0.03em;
    margin: 0;
    text-wrap: balance;
    color: #fff;
}
.sh-hero-title-accent[b-fj50jcw8fs] {
    background: linear-gradient(100deg, #ffd873 0%, var(--sh-gold) 55%, var(--sh-gold-deep) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sh-hero-lede[b-fj50jcw8fs] {
    font-size: 1.0625rem;
    color: rgba(255, 255, 255, 0.56);
    max-width: 44ch;
    line-height: 1.7;
    margin: 1.375rem 0 0;
}
.sh-hero-cta[b-fj50jcw8fs] { display: flex; gap: 0.875rem; flex-wrap: wrap; justify-content: center; margin-top: 2.5rem; }
/* Un CTA n'est jamais souligné */
.sh-hero-cta .btn[b-fj50jcw8fs],
.sh-hero-cta .btn:hover[b-fj50jcw8fs],
.sh-hero-cta .btn:focus[b-fj50jcw8fs] { text-decoration: none; }
.sh-hero-cta .btn[b-fj50jcw8fs] {
    border-radius: 10px;
    font-weight: 650;
    letter-spacing: 0.01em;
    padding-block: 0.8rem;
    transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}
.sh-hero-cta .btn-outline-light[b-fj50jcw8fs] {
    border-color: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.9);
}
.sh-hero-cta .btn-outline-light:hover[b-fj50jcw8fs] {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .sh-hero-signal-layer[b-fj50jcw8fs],
    .sh-hero-signal-parallax[b-fj50jcw8fs] { animation: none; }
    .sh-hero-inner[b-fj50jcw8fs] { animation: none; }
    .sh-hero-cta .btn[b-fj50jcw8fs] { transition: none; }
}

/* ===== Bandeau "Votre espace" =====
   Prolonge la composition du hero : pas de carte posée, pas de bordure. */
.sh-welcome-back[b-fj50jcw8fs] {
    --accent: var(--sh-gold);
    position: relative;
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 1.5rem calc(var(--sh-rhythm) * 0.85);
}
.sh-welcome-back--owner[b-fj50jcw8fs] { --accent: var(--sh-gold); }
.sh-welcome-back--engineer[b-fj50jcw8fs] { --accent: #5bc8ff; }
.sh-welcome-back--artist[b-fj50jcw8fs] { --accent: #ff6ad5; }
.sh-welcome-back-inner[b-fj50jcw8fs] {
    display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
    border: none;
    border-radius: 18px;
    padding: 1.75rem 2rem;
}
.sh-welcome-back-icon[b-fj50jcw8fs] {
    width: 56px; height: 56px; flex-shrink: 0; border-radius: 14px; display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--accent) 13%, transparent);
    border: none;
    color: var(--accent); font-size: 1.4rem;
}
.sh-welcome-back-copy[b-fj50jcw8fs] { flex: 1; min-width: 200px; }
.sh-welcome-back-tag[b-fj50jcw8fs] { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); font-weight: 700; display: block; margin-bottom: 0.3rem; }
.sh-welcome-back-copy h2[b-fj50jcw8fs] { font-weight: 800; font-size: 1.3rem; letter-spacing: -0.01em; margin: 0 0 0.35rem; color: #fff; }
.sh-welcome-back-copy p[b-fj50jcw8fs] { margin: 0; color: rgba(255,255,255,0.55); font-size: 0.92rem; line-height: 1.6; }
.sh-welcome-back .btn[b-fj50jcw8fs] { border-radius: 10px; font-weight: 650; text-decoration: none; }

/* ===== Carrousel de choix du premier rôle ===== */
.sh-role-picker[b-fj50jcw8fs] {
    --accent: var(--sh-gold);
    --sh-rhythm: clamp(3.5rem, 7vw, 6rem);
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1.5rem calc(var(--sh-rhythm) * 0.6);
}
.sh-role-picker--owner[b-fj50jcw8fs] { --accent: var(--sh-gold); }
.sh-role-picker--engineer[b-fj50jcw8fs] { --accent: #5bc8ff; }
.sh-role-picker--artist[b-fj50jcw8fs] { --accent: #ff6ad5; }

.sh-role-picker-head[b-fj50jcw8fs] { text-align: center; margin-bottom: 2.25rem; }
.sh-role-picker-head h2[b-fj50jcw8fs] { font-weight: 800; font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.02em; margin: 0 0 0.6rem; color: #fff; }
.sh-role-picker-head p[b-fj50jcw8fs] { max-width: 52ch; margin: 0 auto; line-height: 1.65; }

.sh-role-picker-stage[b-fj50jcw8fs] { display: flex; align-items: center; gap: 1rem; }
.sh-role-picker-stage:focus-visible[b-fj50jcw8fs] { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 20px; }

.sh-role-picker-arrow[b-fj50jcw8fs] {
    flex-shrink: 0;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 1.05rem;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.sh-role-picker-arrow:hover[b-fj50jcw8fs] { background: rgba(255, 255, 255, 0.11); color: #fff; }
.sh-role-picker-arrow:active[b-fj50jcw8fs] { transform: scale(0.94); }
.sh-role-picker-arrow:focus-visible[b-fj50jcw8fs] { outline: 2px solid var(--accent); outline-offset: 2px; }

.sh-role-picker-slide[b-fj50jcw8fs] {
    position: relative;
    flex: 1;
    min-width: 0;
    min-height: 340px;
    border-radius: 20px;
    overflow: hidden;
    animation: sh-picker-slide-in-b-fj50jcw8fs 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes sh-picker-slide-in-b-fj50jcw8fs {
    from { opacity: 0; transform: translateY(10px) scale(0.995); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.sh-role-picker-media[b-fj50jcw8fs] { position: absolute; inset: 0; z-index: 0; }
.sh-role-picker-media svg[b-fj50jcw8fs] { width: 100%; height: 100%; display: block; }
.sh-role-picker-scrim[b-fj50jcw8fs] {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(105deg, rgba(8, 8, 8, 0.96) 0%, rgba(8, 8, 8, 0.86) 45%, rgba(8, 8, 8, 0.5) 100%);
}
.sh-role-picker-body[b-fj50jcw8fs] {
    position: relative; z-index: 2;
    padding: 2.25rem 2.25rem 2.25rem;
    max-width: 580px;
    display: flex; flex-direction: column; align-items: flex-start;
}
.sh-role-picker-icon[b-fj50jcw8fs] {
    width: 46px; height: 46px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent); font-size: 1.2rem;
    margin-bottom: 1.1rem;
}
.sh-role-picker-tag[b-fj50jcw8fs] {
    font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--accent); font-weight: 700; margin-bottom: 0.4rem;
}
.sh-role-picker-title[b-fj50jcw8fs] { font-size: clamp(1.3rem, 2.6vw, 1.7rem); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 0.7rem; color: #fff; }
.sh-role-picker-title span[b-fj50jcw8fs] { color: rgba(255, 255, 255, 0.5); font-weight: 500; }
.sh-role-picker-desc[b-fj50jcw8fs] { color: rgba(255, 255, 255, 0.68); line-height: 1.7; margin: 0 0 1.25rem; }
.sh-role-picker-cta[b-fj50jcw8fs] { border-radius: 10px; font-weight: 650; text-decoration: none; margin-top: 0.35rem; }

.sh-role-picker-dots[b-fj50jcw8fs] { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.5rem; flex-wrap: wrap; }
.sh-role-picker-dot[b-fj50jcw8fs] {
    --dot: rgba(255, 255, 255, 0.35);
    border: none; background: transparent; cursor: pointer;
    padding: 0.45rem 0.9rem; border-radius: 999px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    transition: color 0.18s ease, background-color 0.18s ease;
}
.sh-role-picker-dot--owner[b-fj50jcw8fs] { --dot: var(--sh-gold); }
.sh-role-picker-dot--engineer[b-fj50jcw8fs] { --dot: #5bc8ff; }
.sh-role-picker-dot--artist[b-fj50jcw8fs] { --dot: #ff6ad5; }
.sh-role-picker-dot:hover[b-fj50jcw8fs] { color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.05); }
.sh-role-picker-dot.is-current[b-fj50jcw8fs] { color: var(--dot); background: color-mix(in srgb, var(--dot) 12%, transparent); }
.sh-role-picker-dot:focus-visible[b-fj50jcw8fs] { outline: 2px solid var(--dot); outline-offset: 2px; }

.sh-role-picker-note[b-fj50jcw8fs] {
    text-align: center; margin: 1.5rem auto 0; max-width: 60ch;
    font-size: 0.85rem; color: rgba(255, 255, 255, 0.42); line-height: 1.6;
}
.sh-role-picker-note strong[b-fj50jcw8fs] { color: rgba(255, 255, 255, 0.65); font-weight: 650; }

@media (max-width: 720px) {
    .sh-role-picker-stage[b-fj50jcw8fs] { gap: 0.5rem; }
    .sh-role-picker-arrow[b-fj50jcw8fs] { width: 40px; height: 40px; }
    .sh-role-picker-slide[b-fj50jcw8fs] { min-height: 0; }
    .sh-role-picker-body[b-fj50jcw8fs] { padding: 1.6rem 1.25rem; }
    .sh-role-picker-scrim[b-fj50jcw8fs] { background: linear-gradient(180deg, rgba(8, 8, 8, 0.82) 0%, rgba(8, 8, 8, 0.95) 55%); }
    .sh-role-picker-dot[b-fj50jcw8fs] { padding: 0.4rem 0.7rem; font-size: 0.66rem; }
}

@media (prefers-reduced-motion: reduce) {
    .sh-role-picker-slide[b-fj50jcw8fs] { animation: none; }
    .sh-role-picker-arrow[b-fj50jcw8fs] { transition: none; }
    .sh-role-picker-arrow:active[b-fj50jcw8fs] { transform: none; }
}

/* ===== Role rows ===== */
.sh-roles-section[b-fj50jcw8fs] { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem calc(var(--sh-rhythm) * 0.5); }
.sh-roles-heading[b-fj50jcw8fs] { text-align: center; margin-bottom: 2.75rem; }
.sh-roles-kicker[b-fj50jcw8fs] { font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.38); font-weight: 700; display: block; margin-bottom: 0.7rem; }
.sh-roles-heading h2[b-fj50jcw8fs] { font-weight: 800; font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.02em; margin: 0 0 0.6rem; color: #fff; }
.sh-roles-heading p[b-fj50jcw8fs] { max-width: 52ch; margin: 0 auto; line-height: 1.65; }

/* Surface unique, séparateurs internes seulement : moins de filets visibles */
.sh-role-rows[b-fj50jcw8fs] {
    display: flex; flex-direction: column;
    border: none;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
}
.sh-role-row + .sh-role-row[b-fj50jcw8fs] { border-top: 1px solid rgba(255,255,255,0.05); }
.sh-role-row[b-fj50jcw8fs] { --accent: var(--sh-gold); position: relative; }
.sh-role-row--owner[b-fj50jcw8fs] { --accent: var(--sh-gold); }
.sh-role-row--engineer[b-fj50jcw8fs] { --accent: #5bc8ff; }
.sh-role-row--artist[b-fj50jcw8fs] { --accent: #ff6ad5; }

.sh-role-trigger[b-fj50jcw8fs] {
    all: unset; box-sizing: border-box; width: 100%; cursor: pointer; position: relative;
    display: grid; grid-template-columns: 4px 60px 1fr auto; align-items: center; gap: 1.3rem;
    padding: 1.4rem 1.75rem;
}
.sh-role-trigger:hover[b-fj50jcw8fs] { background: rgba(255,255,255,0.02); }
.sh-role-trigger:focus-visible[b-fj50jcw8fs] { outline: 2px solid var(--accent); outline-offset: -2px; }

.sh-role-rail[b-fj50jcw8fs] { align-self: stretch; background: rgba(255,255,255,0.14); border-radius: 2px; position: relative; overflow: hidden; }
.sh-role-rail[b-fj50jcw8fs]::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%;
    background: var(--accent); border-radius: 2px; box-shadow: 0 0 14px 1px var(--accent);
    transition: height 0.35s ease;
}
.sh-role-row--open .sh-role-rail[b-fj50jcw8fs]::after { height: 78%; }

.sh-role-icon[b-fj50jcw8fs] {
    width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    color: var(--accent); font-size: 1.35rem;
}

.sh-role-heading-text[b-fj50jcw8fs] { text-align: left; }
.sh-role-tag[b-fj50jcw8fs] { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 800; display: block; margin-bottom: 0.25rem; }
.sh-role-title[b-fj50jcw8fs] { font-size: 1.2rem; font-weight: 800; margin: 0; letter-spacing: -0.01em; color: #fff; }
.sh-role-title span[b-fj50jcw8fs] { color: rgba(255,255,255,0.5); font-weight: 500; }

.sh-role-chevron[b-fj50jcw8fs] {
    width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.14);
    display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.5);
    transition: transform 0.3s ease, border-color 0.2s ease, color 0.2s ease; flex-shrink: 0;
}
.sh-role-row--open .sh-role-chevron[b-fj50jcw8fs] { transform: rotate(180deg); border-color: var(--accent); color: var(--accent); }

.sh-role-panel[b-fj50jcw8fs] { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s cubic-bezier(0.4,0,0.2,1); }
.sh-role-row--open .sh-role-panel[b-fj50jcw8fs] { grid-template-rows: 1fr; }
.sh-role-panel-inner[b-fj50jcw8fs] { overflow: hidden; position: relative; min-height: 0; }

/* Single background cell: the role artwork fills the whole growing panel and recenters/stretches with it */
.sh-role-panel-media[b-fj50jcw8fs] { position: absolute; inset: 0; z-index: 0; }
.sh-role-panel-media svg[b-fj50jcw8fs] { width: 100%; height: 100%; display: block; }
.sh-role-panel-scrim[b-fj50jcw8fs] {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(10,10,10,0.35) 0%, rgba(10,10,10,0.88) 78%, rgba(10,10,10,0.97) 100%);
}
.sh-role-panel-content[b-fj50jcw8fs] { position: relative; z-index: 2; padding: 2.25rem 1.75rem 2.25rem; max-width: 560px; }
.sh-role-panel-content p[b-fj50jcw8fs] { color: rgba(255,255,255,0.72); line-height: 1.7; margin: 0 0 1.15rem; }
.sh-role-capabilities[b-fj50jcw8fs] { list-style: none; margin: 0 0 1.4rem; padding: 0; display: flex; flex-direction: column; gap: 0.8rem; }
.sh-role-capabilities li[b-fj50jcw8fs] { display: flex; align-items: flex-start; gap: 0.7rem; font-size: 0.9rem; color: #fff; line-height: 1.5; }
.sh-role-dot[b-fj50jcw8fs] { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-top: 0.5rem; flex-shrink: 0; box-shadow: 0 0 8px 0 var(--accent); }

@media (max-width: 720px) {
    .sh-role-trigger[b-fj50jcw8fs] { grid-template-columns: 3px 46px 1fr auto; padding: 1.1rem 1.1rem; gap: 0.9rem; }
    .sh-role-icon[b-fj50jcw8fs] { width: 42px; height: 42px; font-size: 1.1rem; }
    .sh-role-title[b-fj50jcw8fs] { font-size: 1.02rem; }
    .sh-role-panel-content[b-fj50jcw8fs] { padding: 1.75rem 1.15rem; }
}


/* ── Les vignettes de studio ─────────────────────────────────────────────────
   L'image occupe toute la carte, le texte se pose dessus derrière un voile qui monte du bas.
   La hauteur est fixe : une grille dont les cartes ont chacune la leur ne se lit pas. */

.studio-tile[b-fj50jcw8fs] {
    position: relative;
    display: block;
    height: 15rem;
    border-radius: var(--sh-radius-aero-sm, 14px);
    overflow: hidden;
    isolation: isolate;
}

.studio-tile-image[b-fj50jcw8fs] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Sans photo : deux tons de la même teinte, celle du nom. */
.studio-tile-image--drawn[b-fj50jcw8fs] {
    background:
        radial-gradient(125% 85% at 22% 0%,
            hsl(var(--tile-hue) 46% 28%) 0%,
            hsl(var(--tile-hue) 34% 13%) 58%,
            #070707 100%);
}

/* Le voile ne couvre que le bas : la photo garde sa lumière, le texte reste lisible. */
.studio-tile-veil[b-fj50jcw8fs] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.88) 0%,
        rgba(0, 0, 0, 0.55) 38%,
        rgba(0, 0, 0, 0.05) 70%);
}

.studio-tile-logo[b-fj50jcw8fs] {
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    width: 2.25rem;
    height: 2.25rem;
    object-fit: contain;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.45);
    padding: 0.2rem;
    backdrop-filter: blur(4px);
}

.studio-tile-note[b-fj50jcw8fs] {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
}

.studio-tile-note i[b-fj50jcw8fs] { color: var(--sh-gold); font-size: 0.62rem; }

.studio-tile-body[b-fj50jcw8fs] {
    position: absolute;
    inset: auto 0 0 0;
    padding: 0.9rem 1rem 1rem;
}

.studio-tile-name[b-fj50jcw8fs] {
    margin: 0;
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-tile-place[b-fj50jcw8fs] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0.2rem 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.78rem;
}

.studio-tile-place i[b-fj50jcw8fs] { color: var(--sh-gold); }

.studio-tile-rooms[b-fj50jcw8fs] { color: rgba(255, 255, 255, 0.5); }

/* Le tarif est ce qu'on vient chercher : il porte l'or, seul. */
.studio-tile-rate[b-fj50jcw8fs] {
    margin: 0.35rem 0 0;
    color: var(--sh-gold);
    font-size: 0.86rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
/* /Pages/Messages.razor.rz.scp.css */
/* La boîte de réception : la liste à gauche, la lecture à droite.

   Au téléphone, les deux ne tiennent pas côte à côte : on voit la liste, ou la conversation, et
   c'est l'adresse qui décide — une conversation ouverte a son propre chemin, donc son propre
   retour, et le bouton précédent du navigateur ramène à la liste. */

.msg-page[b-kbw3hc69u4] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 0 2rem;
}

.msg-layout[b-kbw3hc69u4] {
    display: grid;
    grid-template-columns: minmax(280px, 380px) 1fr;
    gap: 1.25rem;
    align-items: start;
    min-height: 60vh;
}

.msg-list-pane[b-kbw3hc69u4],
.msg-read-pane[b-kbw3hc69u4] {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
}

.msg-read-pane[b-kbw3hc69u4] {
    display: flex;
    flex-direction: column;
    min-height: 60vh;
}

/* ── La liste ─────────────────────────────────────────────────────────────────────────── */

.msg-list[b-kbw3hc69u4] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 70vh;
    overflow-y: auto;
}

.msg-row[b-kbw3hc69u4] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.msg-row:hover[b-kbw3hc69u4] {
    background: rgba(255, 255, 255, 0.04);
}

.msg-row.is-open[b-kbw3hc69u4] {
    background: rgba(212, 175, 55, 0.1);
}

/* Non lu : le titre reprend du poids, sans changer de couleur. Une teinte d'alerte sur un
   message ordinaire ferait lire chaque conversation comme un incident. */
.msg-row.is-unread .msg-row-title[b-kbw3hc69u4] {
    font-weight: 800;
    color: #fff;
}

.msg-row-avatar[b-kbw3hc69u4] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
}

/* Le fil d'une séance ne porte pas un visage : il porte une séance. */
.msg-row-avatar--session[b-kbw3hc69u4] {
    border-radius: 0.6rem;
    background: rgba(212, 175, 55, 0.14);
    color: var(--sh-gold, #d4af37);
}

.msg-row-avatar img[b-kbw3hc69u4] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.msg-row-body[b-kbw3hc69u4] {
    flex: 1;
    min-width: 0;
}

.msg-row-head[b-kbw3hc69u4] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.msg-row-title[b-kbw3hc69u4] {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msg-row-head time[b-kbw3hc69u4],
.msg-row-sub[b-kbw3hc69u4] {
    flex: 0 0 auto;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.45);
}

.msg-row-sub[b-kbw3hc69u4] {
    display: block;
    margin-top: 0.1rem;
}

.msg-row-preview[b-kbw3hc69u4] {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.55);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msg-row-badge[b-kbw3hc69u4] {
    flex: 0 0 auto;
    align-self: center;
    min-width: 1.4rem;
    padding: 0.1rem 0.4rem;
    font-size: 0.72rem;
    font-weight: 800;
    text-align: center;
    color: #000;
    background: var(--sh-gold, #d4af37);
    border-radius: 999px;
}

/* ── La lecture ───────────────────────────────────────────────────────────────────────── */

.msg-blank[b-kbw3hc69u4] {
    display: grid;
    place-items: center;
    gap: 0.5rem;
    flex: 1;
    color: rgba(255, 255, 255, 0.35);
}

.msg-blank i[b-kbw3hc69u4] {
    font-size: 2rem;
}

.msg-thread-head[b-kbw3hc69u4] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-weight: 700;
}

/* Le retour n'existe qu'au téléphone : sur grand écran la liste est toujours là, à gauche. */
.msg-back[b-kbw3hc69u4] {
    display: none;
    color: rgba(255, 255, 255, 0.7);
}

.msg-thread[b-kbw3hc69u4] {
    flex: 1;
    list-style: none;
    margin: 0;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    overflow-y: auto;
    max-height: 55vh;
}

.msg-empty[b-kbw3hc69u4] {
    margin: auto;
    color: rgba(255, 255, 255, 0.4);
}

.msg-bubble[b-kbw3hc69u4] {
    max-width: min(78%, 560px);
    padding: 0.55rem 0.8rem;
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.07);
    align-self: flex-start;
}

.msg-bubble.is-mine[b-kbw3hc69u4] {
    align-self: flex-end;
    background: rgba(212, 175, 55, 0.18);
}

/* Un message neuf s'allume, puis s'éteint : la surbrillance dit « c'est ça que tu n'avais pas
   lu », et elle ne le dit qu'une fois. Même geste que dans le fil d'une séance. */
.msg-bubble.is-new[b-kbw3hc69u4] {
    animation: msg-new-b-kbw3hc69u4 2.4s ease-out;
}

@keyframes msg-new-b-kbw3hc69u4 {
    0%, 45% { box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.55); }
    100% { box-shadow: inset 0 0 0 1px transparent; }
}

.msg-bubble p[b-kbw3hc69u4] {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.msg-bubble time[b-kbw3hc69u4] {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.4);
}

.msg-composer[b-kbw3hc69u4] {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.msg-composer textarea[b-kbw3hc69u4] {
    flex: 1;
    resize: none;
    padding: 0.6rem 0.8rem;
    color: #fff;
    background: var(--sh-gray-950, #101010);
    border: 1px solid var(--sh-gray-800, #343434);
    border-radius: 0.6rem;
}

.msg-composer textarea:focus[b-kbw3hc69u4] {
    border-color: var(--sh-gold, #d4af37);
    outline: none;
}

@media (max-width: 900px) {
    .msg-layout[b-kbw3hc69u4] {
        grid-template-columns: 1fr;
    }

    /* Une conversation ouverte prend tout l'écran : deux panneaux empilés obligeraient à faire
       défiler la liste entière avant d'atteindre ce qu'on est venu lire. */
    .msg-layout.is-reading .msg-list-pane[b-kbw3hc69u4] {
        display: none;
    }

    .msg-layout:not(.is-reading) .msg-read-pane[b-kbw3hc69u4] {
        display: none;
    }

    .msg-back[b-kbw3hc69u4] {
        display: inline-flex;
    }

    .msg-thread[b-kbw3hc69u4] {
        max-height: none;
    }
}

/* ── Les filtres de la boîte ───────────────────────────────────────────────────────────── */

.msg-filters[b-kbw3hc69u4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.msg-kinds[b-kbw3hc69u4] {
    display: flex;
    flex: 1;
    min-width: 0;
    gap: 0.25rem;
    padding: 0.2rem;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 0.6rem;
}

.msg-kind[b-kbw3hc69u4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    flex: 1;
    min-width: 0;
    padding: 0.35rem 0.45rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    background: transparent;
    border: none;
    border-radius: 0.45rem;
    white-space: nowrap;
}

.msg-kind.is-active[b-kbw3hc69u4] {
    color: #000;
    background: var(--sh-gold, #d4af37);
}

/* Le nombre porté par l'onglet dit ce que la sorte contient, pas ce qu'on verrait en cliquant :
   il ne bouge donc pas avec la bascule « non lus ». */
.msg-kind-count[b-kbw3hc69u4] {
    font-size: 0.7rem;
    opacity: 0.75;
}

.msg-unread-toggle[b-kbw3hc69u4] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
    padding: 0.4rem 0.6rem;
    font-size: 0.76rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.5rem;
    white-space: nowrap;
}

.msg-unread-toggle.is-active[b-kbw3hc69u4] {
    color: var(--sh-gold, #d4af37);
    border-color: rgba(212, 175, 55, 0.5);
    background: rgba(212, 175, 55, 0.12);
}

@media (max-width: 420px) {
    /* Sous cette largeur, « Non lus » et trois onglets ne tiennent plus sur une ligne : la
       bascule passe dessous plutôt que d'écraser les onglets. */
    .msg-filters[b-kbw3hc69u4] { flex-wrap: wrap; }
    .msg-kinds[b-kbw3hc69u4] { flex: 1 0 100%; }
    .msg-unread-toggle[b-kbw3hc69u4] { flex: 1; justify-content: center; }
}

/* Ranger une conversation. Discret : ce n'est pas un geste destructeur, et le peindre en rouge
   ferait hésiter à s'en servir. */
.msg-archive[b-kbw3hc69u4] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
    padding: 0.3rem 0.6rem;
    font-size: 0.76rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.5rem;
}

.msg-archive:hover:not(:disabled)[b-kbw3hc69u4] {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}
/* /Pages/MyStudios.razor.rz.scp.css */
/* La liste des studios du propriétaire. */

.studios-my-page[b-v5lpozba74] { position: relative; width: 100%; min-width: 0; min-height: 420px; }

/* La ligne d'état d'un studio : pastille, mot, décompte. Toujours présente, même vide,
   pour que les cartes gardent la même hauteur. */
.studios-my-card-pulse[b-v5lpozba74] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.78rem;
    font-weight: 700;
}
.studios-my-pulse-dot[b-v5lpozba74] { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.studios-my-pulse-label[b-v5lpozba74] { white-space: nowrap; }
.studios-my-pulse-time[b-v5lpozba74] {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Mêmes quatre états que les tuiles de salle, mêmes formes : plein et battant pour ce qui
   tourne, plein pour ce qui est acté, cerclé pour ce qui attend, creux pour le vide. */
.studios-my-card-pulse--live[b-v5lpozba74] { color: #ff8b8b; }
.studios-my-card-pulse--live .studios-my-pulse-dot[b-v5lpozba74] { background: #ff4747; animation: studios-my-pulse-b-v5lpozba74 2s ease-in-out infinite; }
.studios-my-card-pulse--live .studios-my-pulse-time[b-v5lpozba74] { color: #ff8b8b; }

.studios-my-card-pulse--upcoming[b-v5lpozba74] { color: var(--sh-aqua); }
.studios-my-card-pulse--upcoming .studios-my-pulse-dot[b-v5lpozba74] { background: var(--sh-aqua); }

.studios-my-card-pulse--pending[b-v5lpozba74] { color: var(--sh-amber); }
.studios-my-card-pulse--pending .studios-my-pulse-dot[b-v5lpozba74] { background: var(--sh-amber); box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.22); }

.studios-my-card-pulse--free[b-v5lpozba74] { color: rgba(255, 255, 255, 0.35); }
.studios-my-card-pulse--free .studios-my-pulse-dot[b-v5lpozba74] { background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.3); }

@keyframes studios-my-pulse-b-v5lpozba74 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
    .studios-my-card-pulse--live .studios-my-pulse-dot[b-v5lpozba74] { animation: none; }
}
.studios-my-grid[b-v5lpozba74] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.85rem;
    width: 100%;
}
.studios-my-card[b-v5lpozba74] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 285px;
    padding: 1.15rem;
    color: var(--sh-white);
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    text-decoration: none;
}
.studios-my-card-topline[b-v5lpozba74] { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.studios-my-card-icon[b-v5lpozba74] {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: var(--sh-gold);
    background: rgba(218, 171, 91, 0.08);
    border-radius: 9px;
}
.studios-my-card-status[b-v5lpozba74] { color: rgba(255, 255, 255, 0.42); font-size: 0.72rem; font-weight: 700; }
.studios-my-card-status.active[b-v5lpozba74] { color: #67cf91; }
.studios-my-card-copy[b-v5lpozba74] { margin-top: 1.5rem; }
.studios-my-card-copy h2[b-v5lpozba74] { margin: 0; font-size: 1.1rem; font-weight: 780; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.studios-my-card-copy p[b-v5lpozba74] { margin: 0.45rem 0 0; color: rgba(255, 255, 255, 0.5); font-size: 0.82rem; }
.studios-my-card-meta[b-v5lpozba74] { display: flex; flex-wrap: wrap; gap: 0.4rem 0.7rem; margin-top: auto; color: rgba(255, 255, 255, 0.58); font-size: 0.76rem; }

@media (max-width: 1250px) { .studios-my-grid[b-v5lpozba74] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .studios-my-grid[b-v5lpozba74] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .studios-my-grid[b-v5lpozba74] { grid-template-columns: 1fr; } }
/* /Pages/NotificationHistory.razor.rz.scp.css */
/* Styles de la page Notifications (/notifications).

   Étaient un <style> en ligne, donc globaux et présents dans le DOM tant que la page
   était affichée. Scopés ici : chaque règle s ancre sur une classe qui n existe que dans
   cette page — .filter-chip, .notification-history-item, .btn-action — y compris les trois
   noms génériques .active, .unread et .btn-delete, que NotificationCenter définit de son
   côté. Le scope supprime ce recouvrement. */

.notification-history-page[b-cjzrqz1qii] {
    padding: 32px 0;
}

.notification-history-header[b-cjzrqz1qii] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 32px;
    gap: 24px;
}

.notification-history-title[b-cjzrqz1qii] {
    font-size: 2rem;
    font-weight: 900;
    color: white;
    margin: 0 0 8px 0;
}

.notification-history-subtitle[b-cjzrqz1qii] {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

.btn-mark-all-read-large[b-cjzrqz1qii] {
    background: var(--sh-gold);
    color: #000;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-mark-all-read-large:hover[b-cjzrqz1qii] {
    background: #e6c200;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

/* Filters */

/* Le groupe qui porte l'espacement entre les deux axes de filtre (type, puis espace). Un
   flex column avec un gap fixe reste correct quel que soit le nombre de lignes sur lesquelles
   chaque rang de puces s'enroule — contrairement à une marge négative calée sur une seule
   ligne, qui s'effondrait dès que le premier rang passait sur plusieurs lignes. */
.notification-filter-groups[b-cjzrqz1qii] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 32px;
}

.notification-filters[b-cjzrqz1qii] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.filter-chip[b-cjzrqz1qii] {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    padding: 8px 16px;
    border-radius: 24px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.filter-chip:hover[b-cjzrqz1qii] {
    background: rgba(255, 215, 0, 0.08);
    border-color: rgba(255, 215, 0, 0.2);
    color: white;
}

.filter-chip.active[b-cjzrqz1qii] {
    background: var(--sh-gold);
    border-color: var(--sh-gold);
    color: #000;
}

/* Le second rang, celui des espaces, se range sous le premier plutôt que de le prolonger : ce
   sont deux questions, et les mêler ferait croire à un choix unique parmi neuf pastilles. Le
   groupe .notification-filter-groups fait l'espacement entre les deux ; ce rang ne règle que
   le gap interne à ses propres puces, plus serré que celui du premier rang. */
.notification-filters--spaces[b-cjzrqz1qii] {
    gap: 8px;
}

/* Une pastille d'espace porte sa couleur : éteinte tant qu'elle n'est pas retenue — trait et
   fond discret, que lui donnent déjà les classes .sh-space--* d'app.css — et pleine ensuite.

   Ne restent ici que l'état retenu et le survol. Sans eux, une pastille retenue devenait or,
   c'est-à-dire la couleur du propriétaire, même quand elle filtrait sur l'artiste : .filter-chip
   .active peint en or tout ce qui est actif sur cette page. */
.filter-chip--space:hover[b-cjzrqz1qii] {
    filter: brightness(1.2);
    border-color: currentColor;
}

.filter-chip--space.sh-space--owner.active[b-cjzrqz1qii] {
    background: var(--sh-space-owner);
    border-color: var(--sh-space-owner);
    color: #000;
}

.filter-chip--space.sh-space--engineer.active[b-cjzrqz1qii] {
    background: var(--sh-space-engineer);
    border-color: var(--sh-space-engineer);
    color: #000;
}

.filter-chip--space.sh-space--artist.active[b-cjzrqz1qii] {
    background: var(--sh-space-artist);
    border-color: var(--sh-space-artist);
    color: #000;
}

.filter-badge[b-cjzrqz1qii] {
    background: #ff4d4d;
    color: white;
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 0.75rem;
    font-weight: 700;
}

/* Content */
.notification-history-content[b-cjzrqz1qii] {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.notification-empty[b-cjzrqz1qii] {
    text-align: center;
    padding: 60px 32px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 24px;
    border: 1px dashed rgba(255, 215, 0, 0.2);
}

/* Date Sections */
.notification-date-section[b-cjzrqz1qii] {
    margin-bottom: 24px;
}

.notification-date-label[b-cjzrqz1qii] {
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    color: rgba(255, 215, 0, 0.6);
    text-transform: uppercase;
    margin-bottom: 12px;
    padding: 0 12px;
}

.notification-group[b-cjzrqz1qii] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    overflow: hidden;
}

/* Notification Item */
.notification-history-item[b-cjzrqz1qii] {
    display: flex;
    gap: 16px;
    padding: 20px 24px;
    background: rgba(255, 255, 255, 0.01);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    transition: all 0.2s ease;
    align-items: flex-start;
}

.notification-history-item:last-child[b-cjzrqz1qii] {
    border-bottom: none;
}

.notification-history-item:hover[b-cjzrqz1qii] {
    background: rgba(255, 215, 0, 0.05);
}

.notification-history-item.unread[b-cjzrqz1qii] {
    background: rgba(255, 215, 0, 0.03);
}

.notification-history-icon[b-cjzrqz1qii] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: rgba(255, 215, 0, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sh-gold);
    font-size: 1.3rem;
}

.notification-history-main[b-cjzrqz1qii] {
    flex: 1;
    min-width: 0;
}

.notification-history-header-row[b-cjzrqz1qii] {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: flex-start;
    margin-bottom: 12px;
}

.notification-history-item-title[b-cjzrqz1qii] {
    font-size: 1rem;
    font-weight: 800;
    color: white;
    margin: 0 0 4px 0;
}

.notification-history-item-message[b-cjzrqz1qii] {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    line-height: 1.4;
}

/* La colonne de droite d'une ligne : la pastille d'espace, l'heure, puis les étiquettes d'état.
   L'espace passe en tête — c'est ce qui situe la ligne avant qu'on en lise le contenu. */
.notification-history-meta[b-cjzrqz1qii] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    white-space: nowrap;
}

.notification-history-time[b-cjzrqz1qii] {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
}

.notification-history-badge[b-cjzrqz1qii] {
    background: var(--sh-gold);
    color: #000;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
}

/* Ce qui attend un geste. L'historique se range par jour — la chronologie est ce qu'on vient y
   chercher — donc la nature ne s'y groupe pas comme dans la cloche : elle se marque. Un liseré
   ambre au bord de la ligne, et l'étiquette qui le dit. */
.notification-history-item.attend-un-geste[b-cjzrqz1qii] {
    border-left: 2px solid var(--sh-amber, #d4a574);
}

.notification-history-badge--action[b-cjzrqz1qii] {
    background: transparent;
    border: 1px solid rgba(212, 165, 116, 0.45);
    color: var(--sh-amber, #d4a574);
}

/* Une décision déjà prise ailleurs — l'invitation répondue, le solde réglé — n'a plus rien à
   demander : le mot se barre plutôt que de continuer à réclamer un geste déjà fait. */
.notification-history-item.est-traite .notification-history-item-title[b-cjzrqz1qii],
.notification-history-item.est-traite .notification-history-item-message[b-cjzrqz1qii] {
    text-decoration: line-through;
    text-decoration-color: rgba(255, 255, 255, 0.35);
    opacity: 0.6;
}

.notification-history-badge--done[b-cjzrqz1qii] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: transparent;
    border: 1px solid rgba(0, 255, 136, 0.35);
    color: #00ff88;
}

.filter-chip--action.active .filter-badge[b-cjzrqz1qii],
.filter-chip--action .filter-badge[b-cjzrqz1qii] {
    background: var(--sh-amber, #d4a574);
    color: #000;
}

.notification-history-link[b-cjzrqz1qii] {
    margin-top: 12px;
}

.btn-link-subtle[b-cjzrqz1qii] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--sh-gold);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
}

.btn-link-subtle:hover[b-cjzrqz1qii] {
    color: #e6c200;
    text-decoration: underline;
}

.notification-history-actions[b-cjzrqz1qii] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.btn-action[b-cjzrqz1qii] {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.btn-action:hover[b-cjzrqz1qii] {
    background: rgba(255, 215, 0, 0.1);
    border-color: rgba(255, 215, 0, 0.3);
    color: var(--sh-gold);
}

.btn-action.btn-delete:hover[b-cjzrqz1qii] {
    background: rgba(255, 77, 77, 0.1);
    border-color: rgba(255, 77, 77, 0.3);
    color: #ff4d4d;
}

/* Footer */
.notification-history-footer[b-cjzrqz1qii] {
    text-align: center;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-delete-all[b-cjzrqz1qii] {
    background: transparent;
    border: 1px solid rgba(255, 77, 77, 0.3);
    color: #ff4d4d;
    padding: 10px 24px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-delete-all:hover[b-cjzrqz1qii] {
    background: rgba(255, 77, 77, 0.1);
    border-color: #ff4d4d;
}

@media (max-width: 768px) {
    .notification-history-header[b-cjzrqz1qii] {
        flex-direction: column;
    }

    .notification-history-header-row[b-cjzrqz1qii] {
        flex-direction: column;
        gap: 12px;
    }

    .notification-history-meta[b-cjzrqz1qii] {
        align-items: flex-start;
    }

    .notification-filter-groups[b-cjzrqz1qii] {
        gap: 12px;
        margin-bottom: 24px;
    }

    .filter-chip[b-cjzrqz1qii] {
        font-size: 0.85rem;
        padding: 6px 12px;
    }
}
/* /Pages/ProfileSettings.razor.rz.scp.css */
/* Styles du composant, auparavant dans un <style> en ligne — donc globaux et injectés dans le DOM le temps de l'affichage. Scopés ici, ils ne visent plus que son propre balisage. */

.sh-blur-content[b-ubldtbd7t7] { filter: blur(8px); pointer-events: none; transition: filter 0.3s; }
.sh-modal-overlay[b-ubldtbd7t7] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--sh-z-modal);
    padding: 20px;
}
.sh-modal-content[b-ubldtbd7t7] { max-width: 500px; width: 100%; border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), var(--sh-elev-4-shadow); }
.sh-avatar-lg[b-ubldtbd7t7] { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }
.btn-outline-dashed[b-ubldtbd7t7] { border: 2px dashed var(--sh-gray-700); color: var(--sh-gray-500); background: transparent; transition: all 0.2s; }
.btn-outline-dashed:hover[b-ubldtbd7t7] { border-color: var(--sh-gold); color: var(--sh-gold); transform: translateY(-2px); }

/* Rendu sous l'onglet « Paramètres » d'un espace : la coquille porte déjà la largeur et les
   marges. Le conteneur Bootstrap en ajoutait une seconde, et l'écran se rétrécissait d'un cran
   par rapport aux autres onglets du même espace. */
.profile-settings--embedded[b-ubldtbd7t7] {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0.25rem 0 0;
}

/* La zone de danger.

   Sa carte se distinguait par une bordure rouge, écrite à la main sur un assemblage Bootstrap.
   Les sections sont maintenant toutes taillées dans la même surface — et celle-ci garde sa
   bordure, parce que c'est la seule de l'écran d'où l'on ne revient pas. */
.settings-danger[b-ubldtbd7t7] {
    border-color: rgba(220, 53, 69, 0.35);
}

.settings-danger[b-ubldtbd7t7]  .dashboard-section__title {
    color: #ff8b8b;
}
/* /Pages/PublicEngineerProfile.razor.rz.scp.css */
/* Styles du composant, auparavant dans un <style> en ligne — donc globaux et injectés dans le DOM le temps de l'affichage. Scopés ici, ils ne visent plus que son propre balisage. */

/* Fix icon sizing */
.bi[b-an7arr97kz] {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    fill: currentcolor;
}
/* /Pages/PublicRoomPage.razor.rz.scp.css */
/* La page publique d'une salle. Préfixe « prp » : vérifié qu'aucune de ces classes n'existe
   ailleurs (grep "prp-" sur src/StudioHub.Client) avant de considérer la tâche finie.
   Les classes « psp-tag » et « psp-crew », partagées avec la fiche du studio, vivent dans
   wwwroot/css/app.css et non ici : voir la note plus bas, au-dessus de « ── Équipements ── ». */

.prp[b-appa7oer58] {
    min-height: 100vh;
    background: var(--sh-black);
    color: rgba(255, 255, 255, 0.92);
    padding-bottom: 6rem; /* dégage le bandeau d'action collant */
}

.prp-body[b-appa7oer58] { padding-top: 1.25rem; }

.prp-back[b-appa7oer58] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
}

/* ── Galerie ── */
.prp-gallery[b-appa7oer58] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.prp-gallery--empty[b-appa7oer58] {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    background: var(--sh-gray-900);
    border-radius: 0.6rem;
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.2);
}

.prp-gallery__main[b-appa7oer58] {
    aspect-ratio: 4 / 3;
    border: 0;
    padding: 0;
    border-radius: 0.6rem;
    background-color: var(--sh-gray-900);
    background-size: cover;
    background-position: center;
    cursor: zoom-in;
}

.prp-gallery__side[b-appa7oer58] {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    gap: 0.5rem;
}

.prp-gallery__thumb[b-appa7oer58] {
    position: relative;
    border: 0;
    padding: 0;
    border-radius: 0.5rem;
    background-color: var(--sh-gray-900);
    background-size: cover;
    background-position: center;
    cursor: zoom-in;
}

.prp-gallery__more[b-appa7oer58] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    background: rgba(5, 5, 5, 0.6);
    color: #fff;
    font-weight: 700;
}

/* Sur téléphone, trois vignettes à côté d'une grande photo mesurent chacune quarante pixels :
   on ne distingue rien. La grande prend la largeur, les autres passent en bande défilante. */
@media (max-width: 767px) {
    .prp-gallery[b-appa7oer58] { grid-template-columns: 1fr; }
    .prp-gallery__main[b-appa7oer58] { aspect-ratio: 16 / 10; }
    .prp-gallery__side[b-appa7oer58] {
        grid-template-rows: none;
        grid-auto-flow: column;
        grid-auto-columns: 38%;
        overflow-x: auto;
    }
    .prp-gallery__thumb[b-appa7oer58] { aspect-ratio: 4 / 3; }
}

/* ── Sections ── */
.prp-section[b-appa7oer58] { margin-top: 2rem; }

.prp-section__title[b-appa7oer58] {
    font-size: var(--sh-font-size-h2, 1.4rem);
    font-weight: 700;
    margin: 0 0 0.9rem;
}

.prp-name[b-appa7oer58] {
    font-weight: 800;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    margin: 0;
}

.prp-desc[b-appa7oer58] { color: rgba(255, 255, 255, 0.78); line-height: 1.7; margin: 0; }

/* ── Tarifs ── */
.prp-rates[b-appa7oer58] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.9rem;
}

.prp-rate[b-appa7oer58] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--sh-glass-border);
    border-radius: 0.5rem;
}

.prp-rate__label[b-appa7oer58] {
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.prp-rate__value[b-appa7oer58] { font-weight: 700; color: var(--sh-semantic-gold); }

.prp-facts[b-appa7oer58] { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.9rem; }

/* « .psp-tag » et « .psp-crew » (avec ses descendants) visent le même rendu qu'une pastille ou
   qu'un membre d'équipe sur la fiche du studio. Ils vivent dans wwwroot/css/app.css, feuille
   globale non isolée : l'isolation CSS de Blazor scope chaque feuille « .razor.css » à son propre
   composant, et les poser ici comme sur la fiche du studio aurait dessiné deux pastilles capables
   de diverger sans que rien ne le signale. */

/* ── Équipements ── */
.prp-gear[b-appa7oer58] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.25rem;
}

.prp-gear__type[b-appa7oer58] {
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sh-semantic-gold);
    margin: 0 0 0.4rem;
}

.prp-gear__list[b-appa7oer58] {
    list-style: none;
    margin: 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.78);
}

.prp-gear__list li[b-appa7oer58] { padding: 0.15rem 0; }

/* ── Disponibilité ── */
.prp-days[b-appa7oer58] { list-style: none; margin: 0; padding: 0; }

.prp-day a[b-appa7oer58] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 48px;
    padding: 0 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
}

.prp-day__state[b-appa7oer58] { color: var(--sh-semantic-vert); font-weight: 600; }

.prp-day.is-full .prp-day__state[b-appa7oer58],
.prp-day.is-closed .prp-day__state[b-appa7oer58] { color: rgba(255, 255, 255, 0.4); font-weight: 400; }

/* ── Les autres salles ── */
.prp-others[b-appa7oer58] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
}

.prp-other[b-appa7oer58] {
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 0.3rem;
    padding-bottom: 0.6rem;
    border: 1px solid var(--sh-glass-border);
    border-radius: 0.6rem;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
}

.prp-other__photo[b-appa7oer58] {
    display: block;
    aspect-ratio: 16 / 9;
    background-color: var(--sh-gray-900);
    background-size: cover;
    background-position: center;
}

.prp-other__name[b-appa7oer58] { padding: 0 0.6rem; font-weight: 600; }
.prp-other__rate[b-appa7oer58] { padding: 0 0.6rem; color: var(--sh-semantic-gold); font-size: 0.9rem; }

/* ── L'action, toujours à portée ── */
/* « sticky » et non « fixed » : le bandeau reste dans le flux, donc il ne recouvre jamais le pied
   de page, et le rembourrage bas de « .prp » suffit à dégager la dernière section. */
.prp-cta[b-appa7oer58] {
    position: sticky;
    bottom: 0;
    z-index: 15;
    background: rgba(5, 5, 5, 0.94);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--sh-glass-border);
    padding: 0.75rem 0;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
}

.prp-cta__inner[b-appa7oer58] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.prp-cta__rate[b-appa7oer58] { font-weight: 700; color: var(--sh-semantic-gold); white-space: nowrap; }

.prp-cta__go[b-appa7oer58] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0 1.4rem;
    border-radius: 0.5rem;
    background: var(--sh-semantic-gold);
    color: #050505;
    font-weight: 700;
    text-decoration: none;
}
/* /Pages/ReservationPayNew.razor.rz.scp.css */
/* Styles du composant, auparavant dans un <style> en ligne — donc globaux et injectés dans le DOM le temps de l'affichage. Scopés ici, ils ne visent plus que son propre balisage. */


.payment-preparation-error[b-u02hvqiu9z] {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1rem;
    color: rgba(255, 255, 255, 0.88);
    background: rgba(220, 53, 69, 0.08);
    border: 1px solid rgba(220, 53, 69, 0.28);
    border-radius: 0.65rem;
}
.payment-preparation-error > i[b-u02hvqiu9z] { color: #ff7c88; font-size: 1.25rem; }
.payment-preparation-error p[b-u02hvqiu9z] { margin: 0.35rem 0 0.85rem; color: rgba(255, 255, 255, 0.62); }

/* Ce qui empêche de payer, juste au-dessus du bouton éteint.

   Ambre et non rouge : rien n'a échoué, il manque une condition. Le rouge annoncerait un refus
   bancaire, ce qui enverrait chercher le problème du mauvais côté. */
.pay-blocked[b-u02hvqiu9z] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    color: var(--sh-amber);
    background: rgba(212, 165, 116, 0.08);
    border: 1px solid var(--sh-amber-glow);
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Le montant à régler maintenant.

/* Le récapitulatif, rangé comme le panneau du studio.

   Mêmes surfaces, mêmes blocs, même ordre : entête, quand et où, ingénieur, argent. Un artiste
   qui a appris à lire le panneau n'a rien à réapprendre ici — et c'est l'écran où il sort sa
   carte, le plus mauvais moment pour hésiter. */

.prc[b-u02hvqiu9z] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem;
    background: var(--sh-glass-bg, rgba(12, 13, 16, 0.78));
    border: 1px solid var(--sh-glass-border, rgba(255, 255, 255, 0.1));
    border-radius: var(--sh-radius-aero, 28px);
    box-shadow: var(--sh-glass-specular);
}

.prc-head[b-u02hvqiu9z] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.prc-head-who h2[b-u02hvqiu9z] {
    margin: 0;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.prc-head-who p[b-u02hvqiu9z] {
    margin: 0.15rem 0 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
}

.prc-head-badge[b-u02hvqiu9z] {
    flex: 0 0 auto;
    padding: 0.25rem 0.6rem;
    color: var(--sh-aqua);
    background: rgba(79, 209, 232, 0.1);
    border: 1px solid var(--sh-aqua-glow);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.prc-block[b-u02hvqiu9z] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--sh-radius-aero-sm, 18px);
}

.prc-block-head[b-u02hvqiu9z] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.prc-block-title[b-u02hvqiu9z] {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.prc-block-note[b-u02hvqiu9z] {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.76rem;
    font-variant-numeric: tabular-nums;
}

.prc-line[b-u02hvqiu9z] {
    margin: 0;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
}

.prc-money[b-u02hvqiu9z] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0;
}

.prc-money > div[b-u02hvqiu9z] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.prc-money dt[b-u02hvqiu9z] {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.82rem;
    font-weight: 500;
}

.prc-money dd[b-u02hvqiu9z] {
    margin: 0;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

/* La précision sous le reste dû : où et quand il se règle. */
.prc-note[b-u02hvqiu9z] {
    margin: 0.35rem 0 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.78rem;
}
/* /Pages/StudioBookingCalendar.razor.rz.scp.css */
/* Le calendrier public de réservation : en-tête, choix de salle, volet de sélection et récapitulatif. */

/* Page */
.booking-page[b-y0pp2hsf9u] {
    min-height: 100vh;
    background: linear-gradient(180deg, #0a0a0a 0%, #111 100%);
    padding: 1.5rem;
    padding-bottom: 520px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ── Barre de salle ── */
/* Sept blocs précédaient la grille ; celui-ci les remplace tous sauf un, et reste sous la barre
   du site quand on défile. « --sh-header-h » est tenu à la hauteur réelle mesurée
   (studioHubDom.trackHeaderHeight) : une constante laisserait un jour ou un chevauchement selon
   l'appareil. */
.bk-roombar[b-y0pp2hsf9u] {
    position: sticky;
    top: var(--sh-header-h, 4.8rem);
    z-index: var(--sh-z-sticky);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    margin-bottom: 1rem;
    background: rgba(5, 5, 5, 0.92);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
}

.bk-roombar__photo[b-y0pp2hsf9u] {
    flex: 0 0 auto;
    width: 64px;
    height: 44px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 0.4rem;
    background-color: rgba(255,255,255,0.05);
    background-size: cover;
    background-position: center;
    color: rgba(255, 255, 255, 0.3);
    cursor: zoom-in;
}

.bk-roombar__photo:disabled[b-y0pp2hsf9u] { cursor: default; }

.bk-roombar__pick[b-y0pp2hsf9u] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0 0.5rem;
    border: 0;
    background: transparent;
    color: #fff;
    text-align: left;
}

.bk-roombar__name[b-y0pp2hsf9u] { font-weight: 700; }
.bk-roombar__rate[b-y0pp2hsf9u] { color: var(--sh-gold); margin-left: auto; white-space: nowrap; }

.bk-roombar__about[b-y0pp2hsf9u] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: rgba(255, 255, 255, 0.7);
}

/* ── Une ligne au lieu de trois bandeaux ── */
.bk-notes[b-y0pp2hsf9u] {
    margin-bottom: 1rem;
    background: rgba(255,255,255,0.02);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;
}

.bk-notes__toggle[b-y0pp2hsf9u] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 44px;
    padding: 0 0.75rem;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.85rem;
    text-align: left;
}

.bk-notes__toggle > span[b-y0pp2hsf9u] { flex: 1 1 auto; }

.bk-notes__body[b-y0pp2hsf9u] {
    padding: 0 0.75rem 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
}

.bk-notes__body p[b-y0pp2hsf9u] { margin: 0 0 0.4rem; }
.bk-notes__how[b-y0pp2hsf9u] { display: flex; flex-direction: column; gap: 0.2rem; }

/* Day Navigation */
.day-navigation[b-y0pp2hsf9u] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: rgba(255,255,255,0.02);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
}

.month-display[b-y0pp2hsf9u] {
    background: rgba(0, 0, 0, 0.4);
    padding: 0.6rem 1.25rem;
    border-radius: 10px;
    border: 1px solid rgba(217, 166, 83, 0.3);
    color: var(--sh-gold);
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    min-width: 180px;
    justify-content: center;
    margin-right: 0.5rem;
}

.day-tabs[b-y0pp2hsf9u] {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    flex: 1;
    padding: 0.25rem;
}

.day-tab[b-y0pp2hsf9u] {
    flex-shrink: 0;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.03);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    min-width: 60px;
}

.day-tab:hover[b-y0pp2hsf9u] {
    border-color: rgba(217, 166, 83, 0.5);
}

.day-tab.active[b-y0pp2hsf9u] {
    background: linear-gradient(135deg, rgba(217, 166, 83, 0.2) 0%, rgba(217, 166, 83, 0.1) 100%);
    border-color: var(--sh-gold);
}

.day-tab.today[b-y0pp2hsf9u] {
    border-color: rgba(220, 53, 69, 0.5);
}

.day-tab.today.active[b-y0pp2hsf9u] {
    border-color: #dc3545;
}

.tab-day[b-y0pp2hsf9u] {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
}

.tab-date[b-y0pp2hsf9u] {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}

.day-tab.active .tab-day[b-y0pp2hsf9u],
.day-tab.active .tab-date[b-y0pp2hsf9u] {
    color: var(--sh-gold);
}

.day-tab.today.active .tab-day[b-y0pp2hsf9u],
.day-tab.today.active .tab-date[b-y0pp2hsf9u] {
    color: #dc3545;
}

.nav-btn[b-y0pp2hsf9u] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.05);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.nav-btn:hover:not(:disabled)[b-y0pp2hsf9u] {
    background: rgba(255,255,255,0.1);
    border-color: var(--sh-gold);
}

.nav-btn:disabled[b-y0pp2hsf9u] {
    opacity: 0.3;
    cursor: not-allowed;
}

.today-btn[b-y0pp2hsf9u] {
    padding: 0.6rem 1.25rem;
    border-radius: 8px;
    border: 1px solid var(--sh-gold);
    background: transparent;
    color: var(--sh-gold);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
}

.today-btn:hover[b-y0pp2hsf9u] {
    background: var(--sh-gold);
    color: #000;
}

/* Ce qu'un visiteur sans compte lit à la place d'un réglage qui n'a pas encore de sens pour lui. */
.bk-later[b-y0pp2hsf9u] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.88rem;
}

/* Horizontal Calendar Wrapper */
/* La grille — cases, rangs, frise horaire, marqueur de l'heure — porte son style dans
   BookingGrid.razor.css. Il vivait ici en double, et le calendrier du studio en avait un
   troisième. */

/* Le récapitulatif de la sélection.

   Il flottait à trente pixels du bas, centré, arrondi de tous les côtés : une carte posée
   au-dessus de la page. À l'arrêt, l'illusion tient ; en défilant, on voit le contenu passer
   dessous par la fente du bas et ressortir sur les côtés — le panneau ne se lit plus comme une
   barre d'outils mais comme quelque chose qui recouvre ce qu'on est en train de lire.

   Il est donc au ras du bord : pleine largeur, collé à zéro, arrondi sur le haut seulement. Rien
   ne passe plus « au-dessus » de rien, et la page réserve en bas la hauteur qu'il occupe (le
   padding-bottom de .booking-page) pour qu'on puisse atteindre le pied de page.

   L'entrée se fait par translation plutôt qu'en animant « bottom » : un panneau plus haut que sa
   valeur de repli — c'est le cas sur téléphone — dépassait à l'écran alors qu'il se croyait
   caché.

   Sur iOS, le flou (« backdrop-filter ») d'un panneau fixe prend un ou deux images de retard sur
   le défilement : Safari recompose le flou après avoir déjà déplacé le contenu qu'il est censé
   couvrir, et pendant l'élan on voit ce contenu ressortir un instant — le panneau paraît suivre le
   défilement au lieu d'être vraiment fixe, alors que « position: fixed » n'a jamais bougé. Le
   translateZ(0) force ce panneau sur sa propre couche GPU, composée une fois pour toutes plutôt
   que recalculée à chaque image de défilement. */
.selection-panel[b-y0pp2hsf9u] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    transform: translateY(110%) translateZ(0);
    will-change: transform;
    -webkit-backface-visibility: hidden;
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.22) 0%, rgba(0, 0, 0, 0.55) 100%);
    backdrop-filter: blur(28px) saturate(190%);
    border: 1px solid rgba(255, 140, 0, 0.28);
    border-bottom: none;
    border-radius: 24px 24px 0 0;
    padding: 1rem 1.5rem;
    z-index: var(--sh-z-panel);
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 -20px 50px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255, 140, 0, 0.10);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.selection-panel.visible[b-y0pp2hsf9u] {
    transform: translateY(0) translateZ(0);
}

/* La barre traverse l'écran, son contenu non : il garde la largeur qu'il avait, centré. */
.selection-panel > .selection-header[b-y0pp2hsf9u],
.selection-panel > .selection-content-wrapper[b-y0pp2hsf9u] {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
}

/* L'en-tête ne rétrécit jamais : c'est lui que le plancher de la poignée garantit visible. Le
   contenu, lui, encaisse la hauteur retirée — il défile plutôt que d'emporter l'en-tête avec lui.
   Sans hauteur explicite (le cas courant), le panneau reste haut comme son contenu : rien ne
   déborde, donc rien ne défile. */
.selection-panel > .selection-header[b-y0pp2hsf9u] {
    flex-shrink: 0;
}

.selection-panel > .selection-content-wrapper[b-y0pp2hsf9u] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* La poignée : un bandeau qui traverse le haut du panneau, à cheval sur son bord arrondi — la
   zone qu'on peut saisir dépasse largement la barre qu'on y voit, parce que 5 px de haut ne se
   visent pas au doigt. */
.panel-resize-handle[b-y0pp2hsf9u] {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 96px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: ns-resize;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    z-index: 1;
}

.panel-resize-handle-bar[b-y0pp2hsf9u] {
    width: 44px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.35);
    transition: background 160ms ease, width 160ms ease;
}

.panel-resize-handle:hover .panel-resize-handle-bar[b-y0pp2hsf9u],
.panel-resize-handle:focus-visible .panel-resize-handle-bar[b-y0pp2hsf9u] {
    background: var(--sh-gold);
    width: 56px;
}

/* Le voile qui capte la souris pendant le glissement. La poignée ne fait que 28 px de haut : au
   deuxième pixel de mouvement, le curseur n'est déjà plus sur elle, et sans ce voile plein écran
   sous lui, plus aucun « mousemove » n'atteindrait le geste. Le doigt n'en a pas besoin — un
   contact reste sur son élément de départ pour toute sa durée. */
.panel-resize-overlay[b-y0pp2hsf9u] {
    position: fixed;
    inset: 0;
    z-index: calc(var(--sh-z-panel) + 1);
    cursor: ns-resize;
}

/* Les boutons de durée. Quarante-quatre pixels de côté : c'est le seul réglage qui rende
   la session allongeable au doigt, et les rater fait revenir au défaut qu'ils corrigent. */
.duration-stepper[b-y0pp2hsf9u] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.duration-step[b-y0pp2hsf9u] {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: #fff;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease;
}

.duration-step:not(:disabled):hover[b-y0pp2hsf9u] {
    background: rgba(240, 180, 0, 0.14);
    border-color: var(--sh-gold);
}

/* Éteint mais lisible : un bouton effacé laisse chercher s'il existe. */
.duration-step:disabled[b-y0pp2hsf9u] {
    color: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.07);
    cursor: not-allowed;
}

.duration-value[b-y0pp2hsf9u] {
    min-width: 2.6rem;
    color: var(--sh-gold);
    font-size: 1.05rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.selection-header[b-y0pp2hsf9u] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 900;
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    color: var(--sh-gold);
    opacity: 0.9;
}

.selection-content-wrapper[b-y0pp2hsf9u] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Une grille plutôt qu'une ligne qui déborde.

   En flex, le curseur d'acompte réclamait 300 px et « flex: 1 » : il prenait toute la place
   restante et rejetait la durée à la ligne suivante. Le volet gagnait un rang entier pour un
   seul champ, et la colonne de droite restait vide sur toute cette hauteur.

   En grille, les six champs se répartissent d'eux-mêmes et se replient par colonnes entières. */
.selection-details-row[b-y0pp2hsf9u] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.85rem 1.5rem;
    align-items: start;
}

.detail-item[b-y0pp2hsf9u] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.detail-label[b-y0pp2hsf9u] {
    font-size: 0.65rem;
    font-weight: 800;
    color: rgba(255,255,255,0.4);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.detail-value[b-y0pp2hsf9u] {
    font-size: 1.1rem;
    font-weight: 800;
    color: white;
}

/* Deux colonnes chacun : le menu des ingénieurs et le curseur ont besoin de largeur, mais
   ils ne doivent plus imposer un minimum qui casse la grille. */
.engineer-item[b-y0pp2hsf9u] { grid-column: span 2; min-width: 0; }
.slider-item[b-y0pp2hsf9u] { grid-column: span 2; min-width: 0; }

.slider-container[b-y0pp2hsf9u] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 4px;
}

.stepped-slider[b-y0pp2hsf9u] {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
    cursor: pointer;
    -webkit-appearance: none;
}

.stepped-slider[b-y0pp2hsf9u]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: var(--sh-gold);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(217, 166, 83, 0.5);
}

.slider-value[b-y0pp2hsf9u] {
    background: var(--sh-gold);
    color: black;
    font-weight: 900;
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    min-width: 55px;
    text-align: center;
    transition: all 0.3s ease;
}

.slider-value.locked[b-y0pp2hsf9u] {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: none;
}

.stepped-slider:disabled[b-y0pp2hsf9u] {
    opacity: 0.3;
    cursor: not-allowed;
}

.stepped-slider:disabled[b-y0pp2hsf9u]::-webkit-slider-thumb {
    background: rgba(255, 255, 255, 0.3);
    box-shadow: none;
}

.x-small[b-y0pp2hsf9u] { font-size: 0.6rem; }

.selection-footer-row[b-y0pp2hsf9u] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.pricing-summary[b-y0pp2hsf9u] {
    display: flex;
    gap: 40px;
}

.price-block[b-y0pp2hsf9u] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.price-label[b-y0pp2hsf9u] {
    font-size: 0.65rem;
    font-weight: 800;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
}

.price-amount[b-y0pp2hsf9u] {
    font-size: 1.8rem;
    font-weight: 900;
    color: white;
}

/* Le total et l'acompte versés par l'artiste sont des bruts : blancs, comme .price-amount par
   défaut, même quand l'acompte couvre toute la séance. Seul « reste à payer » change de ton —
   ambre tant qu'il y a un solde, vert quand il n'y en a plus : c'est une confirmation, pas un
   second brut. */
.price-amount.amber[b-y0pp2hsf9u] { color: var(--sh-amber); }
.price-amount.green[b-y0pp2hsf9u] { color: #67cf91; }

/* Le reste dû est une information de second rang : présent, chiffré, mais il ne dispute pas
   la vedette au montant qu'on s'apprête à payer. */
.price-block.rest .price-amount[b-y0pp2hsf9u] { font-size: 1.25rem; }
.price-block.paid-in-full .price-label[b-y0pp2hsf9u] { color: #67cf91; }

.selection-actions[b-y0pp2hsf9u] {
    display: flex;
    gap: 16px;
}

.btn-clear-elite[b-y0pp2hsf9u] {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: white;
    padding: 12px 24px;
    border-radius: 14px;
    font-weight: 700;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-clear-elite:hover[b-y0pp2hsf9u] {
    background: rgba(220, 53, 69, 0.1);
    border-color: #dc3545;
    color: #dc3545;
}

.btn-confirm-elite[b-y0pp2hsf9u] {
    background: linear-gradient(135deg, var(--sh-gold) 0%, var(--sh-gold-deep) 100%);
    border: none;
    color: black;
    padding: 12px 32px;
    border-radius: 14px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: var(--sh-elev-2-shadow);
    cursor: pointer;
}

.btn-confirm-elite:hover:not(:disabled)[b-y0pp2hsf9u] {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 15px 30px var(--sh-gold-glow);
    background: linear-gradient(135deg, #ffcc00 0%, var(--sh-gold) 100%);
}

.btn-confirm-elite:disabled[b-y0pp2hsf9u] {
    opacity: 0.5;
    filter: grayscale(1);
    cursor: not-allowed;
}

/* Responsive */
@media (max-width: 992px) {
    .selection-details-row[b-y0pp2hsf9u] { gap: 20px; }
    .slider-item[b-y0pp2hsf9u] { grid-column: 1 / -1; order: 3; }
    .pricing-summary[b-y0pp2hsf9u] { gap: 20px; }
}

/* ── Le volet sur téléphone : tout, d'un seul tenant ──────────────────────────

   Il défilait à l'intérieur de lui-même. Six blocs empilés sur une colonne, des montants à
   1,4 rem et deux boutons pleine largeur l'un sous l'autre : le récapitulatif dépassait sa
   propre hauteur, et « Confirmer & Payer » se découvrait en faisant glisser un volet posé
   par-dessus la grille — geste que rien n'annonçait, sur un écran où l'on vient justement
   d'apprendre que glisser sélectionne des heures.

   Deux colonnes, des libellés au ras du lisible et des boutons côte à côte le ramènent sous les
   300 px : il tient en entier sur un écran de téléphone, sans rien perdre de ce qu'il dit. La
   hauteur maximale reste, en filet — un nom de salle démesuré ne doit pas emporter le bouton
   hors de l'écran. */
@media (max-width: 768px) {
    .selection-panel[b-y0pp2hsf9u] {
        padding: 0.7rem 0.8rem;
        gap: 0.55rem;
        border-radius: 18px 18px 0 0;
        max-height: 60vh;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        /* La barre du téléphone mange le bas de l'écran : le bouton « Confirmer » se retrouvait
           dessous. */
        padding-bottom: max(0.7rem, env(safe-area-inset-bottom));
    }

    .selection-header[b-y0pp2hsf9u] { font-size: 0.62rem; letter-spacing: 0.14em; gap: 6px; }
    .selection-content-wrapper[b-y0pp2hsf9u] { gap: 0.55rem; }

    /* Deux colonnes, toujours : « auto-fit » retombait à une seule sous 380 px, et le volet
       s'allongeait d'autant. minmax(0, 1fr) plutôt que 1fr — sans le zéro, un menu déroulant
       impose sa largeur intrinsèque et la colonne déborde. */
    .selection-details-row[b-y0pp2hsf9u] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 0.7rem; }

    .detail-item[b-y0pp2hsf9u] { gap: 2px; }
    .detail-label[b-y0pp2hsf9u] { font-size: 0.55rem; letter-spacing: 0.06em; }
    .detail-value[b-y0pp2hsf9u] { font-size: 0.92rem; }

    /* L'ordre des champs, sur téléphone, est dicté par le pouce.
       
       Les boutons de durée passent à droite : c'est de ce côté que la main tient l'appareil, et
       le geste qu'on répète — allonger la séance heure par heure — ne doit pas obliger à
       traverser l'écran. L'horaire passe à gauche, en échange, parce qu'il était juste sous ce
       pouce : on réglait la durée sans pouvoir lire jusqu'à quelle heure allait la séance, qui
       est précisément l'information qu'on cherche en la réglant.
       
       Les rangs, de haut en bas : salle et durée, ingénieur, acompte, horaire et date. */
    .room-item[b-y0pp2hsf9u]     { order: 1; }
    .duration-item[b-y0pp2hsf9u] { order: 2; }
    .engineer-item[b-y0pp2hsf9u] { order: 3; }
    .slider-item[b-y0pp2hsf9u]   { order: 4; }
    .time-item[b-y0pp2hsf9u]     { order: 5; }
    .date-item[b-y0pp2hsf9u]     { order: 6; }

    /* Les commandes se rangent à droite de leur colonne, contre le bord où se trouve le pouce. */
    .duration-item .duration-stepper[b-y0pp2hsf9u] { justify-content: flex-end; }
    .duration-item .detail-label[b-y0pp2hsf9u] { text-align: right; }

    .duration-step[b-y0pp2hsf9u] { width: 38px; height: 38px; font-size: 1.05rem; border-radius: 8px; }
    .duration-value[b-y0pp2hsf9u] { min-width: 2.1rem; font-size: 0.92rem; }

    /* L'horaire est ce qu'on relit à chaque appui sur « + » : il ne se met pas en sourdine. */
    .time-item .detail-value[b-y0pp2hsf9u] { font-size: 1rem; }

    .engineer-item[b-y0pp2hsf9u], .slider-item[b-y0pp2hsf9u] { grid-column: 1 / -1; }
    .slider-container[b-y0pp2hsf9u] { gap: 8px; margin-top: 0; }
    .slider-value[b-y0pp2hsf9u] { min-width: 44px; padding: 2px 8px; font-size: 0.75rem; }
    .x-small[b-y0pp2hsf9u] { font-size: 0.55rem; }

    /* Les trois montants sur un rang, les deux boutons sur le suivant. Côte à côte sur la même
       ligne, il ne restait à 393 px ni de quoi écrire « 120,00 € » sans le couper en deux, ni de
       quoi lire « Confirmer & Payer » en entier. */
    .selection-footer-row[b-y0pp2hsf9u] { flex-direction: column; align-items: stretch; gap: 0.5rem; padding-top: 0.5rem; }
    .pricing-summary[b-y0pp2hsf9u] { gap: 0.5rem; justify-content: space-between; }
    .price-block[b-y0pp2hsf9u] { gap: 1px; min-width: 0; }
    .price-label[b-y0pp2hsf9u] { font-size: 0.52rem; line-height: 1.15; }

    /* Un montant ne se coupe pas : le symbole tombait seul à la ligne suivante. */
    .price-amount[b-y0pp2hsf9u] { font-size: 1.05rem; white-space: nowrap; }
    .price-block.rest .price-amount[b-y0pp2hsf9u] { font-size: 0.9rem; }

    .selection-actions[b-y0pp2hsf9u] { flex-direction: row; gap: 0.5rem; }
    .btn-clear-elite[b-y0pp2hsf9u] { flex: 0 0 auto; }
    .btn-confirm-elite[b-y0pp2hsf9u] { flex: 1; }
    .btn-clear-elite[b-y0pp2hsf9u], .btn-confirm-elite[b-y0pp2hsf9u] { padding: 10px 12px; font-size: 0.8rem; border-radius: 10px; white-space: nowrap; }
    .min-duration-message[b-y0pp2hsf9u] { font-size: 0.6rem; align-self: center; }
}

/* La barre de commandes temporelle, au-dessus de la grille.

   Le mois, deux flèches, sept onglets et « Aujourd'hui » tenaient sur une seule ligne flexible :
   sur 393 px, le mois réclamait ses 180 px, les onglets se réduisaient à rien et le bouton du
   jour sortait de l'écran. Deux rangs — les commandes, puis la semaine — et chacun a sa place.

   Les flèches y avancent d'un jour et non d'une semaine : c'est une seule journée qui est
   dessinée en dessous. Cette décision-là est prise dans le composant, pas ici.

   Trois rangs, pas deux : mesuré à 375 px, « Aujourd'hui » sur la même ligne que les flèches et
   le mois ne laissait plus que 70 px à un texte qui en réclame 116 (« SEPTEMBRE 2026 ») — le mois
   se lisait « EPTEMBRE », sa fin coupée sous la flèche suivante. « flex: 1 » sur .month-display
   ne pouvait donner que l'espace qui restait une fois .today-btn et les deux flèches servis, et
   il n'en restait pas assez. Le bouton « Aujourd'hui » gagne sa propre ligne, entre les commandes
   et la semaine : les flèches et le mois n'ont plus personne avec qui se partager la première. */
@media (max-width: 768px) {
    .day-navigation[b-y0pp2hsf9u] { flex-wrap: wrap; gap: 0.4rem; padding: 0.5rem; }

    .nav-btn[b-y0pp2hsf9u] { width: 38px; height: 38px; font-size: 1rem; }
    .nav-btn.prev[b-y0pp2hsf9u] { order: 1; }

    .month-display[b-y0pp2hsf9u] {
        order: 2;
        flex: 1;
        min-width: 0;
        margin-right: 0;
        padding: 0.45rem 0.5rem;
        font-size: 0.75rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .nav-btn.next[b-y0pp2hsf9u] { order: 3; }

    .today-btn[b-y0pp2hsf9u] {
        order: 4;
        flex: 0 0 100%;
        justify-content: center;
        padding: 0.45rem 0.7rem;
        font-size: 0.75rem;
    }

    .day-tabs[b-y0pp2hsf9u] { order: 5; flex: 0 0 100%; gap: 0.35rem; padding: 0.15rem 0; }
    .day-tab[b-y0pp2hsf9u] { min-width: 44px; padding: 0.35rem 0.4rem; }
    .tab-date[b-y0pp2hsf9u] { font-size: 0.9rem; }
}

/* Legend dots - matching slot cell styles */
.legend-dot[b-y0pp2hsf9u] {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.2);
    display: inline-block;
}

.legend-dot.available[b-y0pp2hsf9u] {
    background: transparent;
    border-color: rgba(255,255,255,0.3);
}

.legend-dot.reserved[b-y0pp2hsf9u] {
    background: rgba(220, 53, 69, 0.4);
    border-color: rgba(220, 53, 69, 0.2);
}

.legend-dot.blocked[b-y0pp2hsf9u] {
    background: rgba(255, 255, 255, 0.35);
}

.legend-dot.closed[b-y0pp2hsf9u] {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255,255,255,0.1);
}

.legend-dot.past[b-y0pp2hsf9u] {
    background: rgba(108, 117, 125, 0.1);
    border-color: rgba(255,255,255,0.1);
}

/* Trop proche : même teinte ambre que la case correspondante de BookingGrid.razor.css, pour que
   la légende et la grille se répondent. */
.legend-dot.too-soon[b-y0pp2hsf9u] {
    background: rgba(212, 165, 116, 0.2);
    border-color: rgba(212, 165, 116, 0.4);
}

.legend-dot.selected[b-y0pp2hsf9u] {
    background: rgba(217, 166, 83, 0.4);
    border: 2px solid var(--sh-gold);
}

/* Legend with tooltips */
.calendar-legend[b-y0pp2hsf9u] {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    padding: 1rem;
    background: rgba(255,255,255,0.02);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    flex-wrap: wrap;
    position: relative;
    z-index: 5;
    margin-top: 1rem;
}

.legend-item[b-y0pp2hsf9u] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.6);
    cursor: help;
    position: relative;
}

.legend-item:hover[b-y0pp2hsf9u]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.5rem 0.75rem;
    background: rgba(0,0,0,0.9);
    color: #fff;
    font-size: 0.75rem;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 100;
    margin-bottom: 0.5rem;
}

/* Responsive */
@media (max-width: 768px) {
    /* La légende suit la grille, juste en dessous : elle n'a plus besoin de tenir sur un écran
       entier. Une ligne défilante à l'horizontale, plutôt qu'un retour à la ligne qui l'allongerait
       et repousserait le récapitulatif d'autant. */
    .calendar-legend[b-y0pp2hsf9u] {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        gap: 0.9rem;
        padding: 0.6rem 0.75rem;
        -webkit-overflow-scrolling: touch;
    }

    .legend-item[b-y0pp2hsf9u] { flex: 0 0 auto; font-size: 0.78rem; gap: 0.35rem; white-space: nowrap; }
    .legend-dot[b-y0pp2hsf9u] { width: 12px; height: 12px; }
}
/* /Pages/StudioDashboard.razor.rz.scp.css */

/* L'en-tête du tableau de bord.

   Il tenait sur cinq lignes : un liseré ambre, un titre en capitales qui répétait ce que la
   barre latérale disait déjà, le nom du studio en sous-titre, et une pastille dorée à droite
   portant ce même nom. Le nom apparaissait cinq fois sur l'écran, en comptant le fil d'Ariane
   et la barre REC. Il le dit une fois. */
.dash-head[b-ddni8fmdxq] {
    margin-bottom: 1.5rem;
}

.dash-head h1[b-ddni8fmdxq] {
    margin: 0;
    color: #fff;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.dash-head p[b-ddni8fmdxq] {
    margin: 0.15rem 0 0;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.82rem;
}

.studio-dashboard-loading-host[b-ddni8fmdxq] { position: relative; min-height: 460px; }
.studio-dashboard-loading-space[b-ddni8fmdxq] { min-height: 460px; }
/* /Pages/StudioDetails.razor.rz.scp.css */
/* Fiche publique d'un studio — une vitrine dans un cadre imposé, pas un annuaire.
   Prefixe « psp » (Public Studio Page) pour ne recouper aucune classe existante ; vérifié :
   aucune de ces classes n'est posée ni définie ailleurs, et aucun sélecteur ne vise un composant
   enfant en dehors des icônes Bootstrap (CSS uniquement — data-bs-* est inerte dans ce dépôt). */

.psp[b-y03iw4qys7] {
    min-height: 100vh;
    background: var(--sh-black);
    color: rgba(255, 255, 255, 0.92);
}

.admin-banner[b-y03iw4qys7] {
    backdrop-filter: blur(10px);
    z-index: 100;
}

/* ── Couverture ── */
/* Pleine largeur et assez haute pour porter nom, ville, note, prix d'appel et le bouton de
   réservation sans qu'aucun n'oblige à défiler : c'est la condition posée par le brief. */
.psp-hero[b-y03iw4qys7] {
    position: relative;
    min-height: 46vh;
    display: flex;
    align-items: flex-end;
    background-color: var(--sh-gray-900);
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid var(--sh-glass-border);
}

.psp-hero.is-clickable[b-y03iw4qys7] { cursor: zoom-in; }

.psp-hero__scrim[b-y03iw4qys7] {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 5, 5, 0.15) 0%, rgba(5, 5, 5, 0.55) 55%, var(--sh-black) 100%);
}

.psp-hero__content[b-y03iw4qys7] {
    position: relative;
    padding: 2.5rem 1rem 2.25rem;
}

.psp-hero__name[b-y03iw4qys7] {
    font-weight: 800;
    font-size: clamp(2rem, 4vw, 3.25rem);
    margin: 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.psp-hero__meta[b-y03iw4qys7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255, 255, 255, 0.75);
    margin: 0.5rem 0 0;
    font-size: 1.02rem;
}

.psp-hero__dot[b-y03iw4qys7] { color: rgba(255, 255, 255, 0.35); }

.psp-hero__price[b-y03iw4qys7] {
    color: #fff;
    font-weight: 700;
}

/* ── Corps ── */
.psp-body[b-y03iw4qys7] {
    padding-top: 2.5rem;
    padding-bottom: 4rem;
}

.psp-section[b-y03iw4qys7] {
    margin-bottom: 2.75rem;
}

.psp-section__title[b-y03iw4qys7] {
    font-weight: 700;
    font-size: 1.4rem;
    margin-bottom: 1rem;
    color: #fff;
}

.psp-story__text[b-y03iw4qys7] {
    font-size: 1.08rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    white-space: pre-line;
    max-width: 70ch;
}

/* .psp-tag vit désormais dans wwwroot/css/app.css (feuille globale, non isolée) : la fiche du
   studio et la page publique d'une salle doivent dessiner la même pastille, ce qu'une feuille
   « .razor.css » scopée par composant ne peut pas garantir. */

/* Pastille à deux tons : un équipement nommé (« TLM 103 ») ne disait à personne qui ne
   reconnaît pas la marque s'il regardait un micro ou une console. Le type occupe son propre
   compartiment, soudé au nom plutôt que juxtaposé — une seule pastille, deux fonds. */
.psp-tag-2t[b-y03iw4qys7] {
    display: inline-flex;
    align-items: stretch;
    border-radius: 100px;
    overflow: hidden;
    border: 1px solid var(--sh-glass-border);
    font-size: 0.8rem;
    font-weight: 600;
}

.psp-tag-2t__type[b-y03iw4qys7] {
    display: flex;
    align-items: center;
    padding: 5px 12px;
    background: rgba(240, 180, 0, 0.16);
    color: var(--sh-gold);
    white-space: nowrap;
}

.psp-tag-2t__name[b-y03iw4qys7] {
    display: flex;
    align-items: center;
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
}

/* ── Galerie de salles ── */
.psp-rooms-grid[b-y03iw4qys7] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.psp-room-card[b-y03iw4qys7] {
    display: flex;
    flex-direction: column;
    background: var(--sh-glass-bg);
    border: 1px solid var(--sh-glass-border);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
}

.psp-room-card:hover[b-y03iw4qys7] {
    transform: translateY(-4px);
    box-shadow: var(--sh-elev-3-shadow);
}

.psp-room-card.highlight[b-y03iw4qys7] {
    outline: 4px solid var(--sh-gold);
    outline-offset: 4px;
    box-shadow: 0 0 30px rgba(217, 166, 83, 0.6);
    transform: scale(1.02);
    z-index: 10;
}

.psp-room-card__body[b-y03iw4qys7] {
    padding: 1.1rem 1.25rem 0.25rem;
    flex: 1;
}

.psp-room-card__name[b-y03iw4qys7] {
    font-weight: 700;
    font-size: 1.15rem;
    margin: 0;
    color: #fff;
}

/* ── Vignette de salle ── */
/* Elle vidait son sac : description entière, six équipements, un seul bouton. On lisait tout et
   on n'avait envie de rien. Photo, nom, tarif, trois faits, trois équipements, une phrase de
   disponibilité, deux issues. Le reste est sur la page de la salle.
   Remplace les anciennes règles __photo (hauteur fixe, incompatible avec le 16:9 ci-dessous),
   __desc (marges/couleur reprises ici), __price (le bloc n'existe plus dans le balisage) et
   __facts (la mise en page venait alors des classes Bootstrap du balisage, disparues) : les
   garder à côté aurait laissé des règles mortes ou, pour __photo, activement en conflit. */

.psp-room-card__photo[b-y03iw4qys7] {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    padding: 0;
    position: relative;
    background-color: var(--sh-gray-900);
    background-size: cover;
    background-position: center;
    cursor: zoom-in;
}

.psp-room-card__photo.is-empty[b-y03iw4qys7],
.psp-room-card__photo:disabled[b-y03iw4qys7] {
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.25);
}

.psp-room-card__count[b-y03iw4qys7] {
    position: absolute;
    right: 0.6rem;
    bottom: 0.6rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: rgba(5, 5, 5, 0.65);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.78rem;
}

.psp-room-card__head[b-y03iw4qys7] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.psp-room-card__rate[b-y03iw4qys7] {
    color: var(--sh-semantic-gold);
    font-weight: 700;
    white-space: nowrap;
}

/* Deux lignes, pas davantage : le texte entier est sur la page de la salle. */
.psp-room-card__desc[b-y03iw4qys7] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0.4rem 0 0;
    color: rgba(255, 255, 255, 0.7);
}

.psp-room-card__facts[b-y03iw4qys7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 0.6rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.65);
}

.psp-room-card__gear[b-y03iw4qys7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.6rem;
}

.psp-room-card__when[b-y03iw4qys7] {
    margin: 0.7rem 0 0;
    font-size: 0.9rem;
    color: var(--sh-semantic-vert);
}

.psp-room-card__when.is-full[b-y03iw4qys7] { color: rgba(255, 255, 255, 0.5); }

.psp-room-card__footer[b-y03iw4qys7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    padding: 0.75rem;
    border-top: 1px solid var(--sh-glass-border);
}

.psp-room-card__action[b-y03iw4qys7] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid var(--sh-glass-border);
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 0.92rem;
}

.psp-room-card__action--go[b-y03iw4qys7] {
    background: var(--sh-semantic-gold);
    border-color: var(--sh-semantic-gold);
    color: #050505;
    font-weight: 700;
}

/* ── Avis ── */
.psp-reviews__summary[b-y03iw4qys7] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.1rem;
    color: #fff;
}

.psp-reviews-grid[b-y03iw4qys7] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.psp-review-card[b-y03iw4qys7] {
    background: var(--sh-glass-bg);
    border: 1px solid var(--sh-glass-border);
    border-radius: 12px;
    padding: 1rem 1.15rem;
}

.psp-review-card__stars[b-y03iw4qys7] { font-size: 0.85rem; }

.psp-review-card__comment[b-y03iw4qys7] {
    color: rgba(255, 255, 255, 0.85);
    margin: 0.5rem 0;
    font-size: 0.94rem;
    line-height: 1.5;
}

.psp-review-card__author[b-y03iw4qys7] {
    margin: 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.82rem;
    font-weight: 600;
}

/* ── L'état d'ouverture, dans la ligne d'en-tête ─────────────────────────────────────────
   Un point et une phrase : vert quand la porte est ouverte, sourd quand elle ne l'est pas. Le
   rouge est réservé aux erreurs — un studio fermé à 8 h du matin n'en est pas une. */
.psp-open[b-y03iw4qys7] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
}

.psp-open__dot[b-y03iw4qys7] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
}

.psp-open.is-open[b-y03iw4qys7] { color: var(--sh-green, #2fbf71); }
.psp-open.is-open .psp-open__dot[b-y03iw4qys7] { background: var(--sh-green, #2fbf71); box-shadow: 0 0 0 3px rgba(47, 191, 113, 0.2); }
.psp-open.is-closed[b-y03iw4qys7] { color: rgba(255, 255, 255, 0.7); }

/* ── Infos pratiques : deux blocs côte à côte, l'un sous l'autre sur téléphone ─────────── */
.psp-info[b-y03iw4qys7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
}

.psp-info__block[b-y03iw4qys7] {
    padding: 1.1rem 1.2rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
}

.psp-info__title[b-y03iw4qys7] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.8rem;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
}

.psp-hours[b-y03iw4qys7] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0;
}

.psp-hours > div[b-y03iw4qys7] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.15rem 0;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.88rem;
}

.psp-hours dt[b-y03iw4qys7] { font-weight: 600; }
.psp-hours dd[b-y03iw4qys7] { margin: 0; font-variant-numeric: tabular-nums; }

/* Le jour du studio se détache : c'est la ligne qu'on vient lire. */
.psp-hours > .is-today[b-y03iw4qys7] { color: #fff; }
.psp-hours > .is-today dt[b-y03iw4qys7] { color: var(--sh-gold); }

.psp-info__note[b-y03iw4qys7] {
    margin: 0.6rem 0 0;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
}

.psp-rules[b-y03iw4qys7] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.psp-rules li[b-y03iw4qys7] {
    position: relative;
    padding-left: 1.1rem;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.88rem;
    line-height: 1.45;
}

.psp-rules li[b-y03iw4qys7]::before {
    content: "";
    position: absolute;
    top: 0.55rem;
    left: 0;
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: var(--sh-gold);
}

/* ── Couverture : logo et accroche du studio, quand il les a fournis ── */
.psp-hero__logo[b-y03iw4qys7] {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 0.75rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.psp-hero__tagline[b-y03iw4qys7] {
    max-width: 42rem;
    margin: 0.5rem 0 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.05rem;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

/* ── Équipe : une liste de noms, pas des cartes ── */
/* .psp-crew et ses descendants vivent désormais dans wwwroot/css/app.css : voir la note à côté
   de .psp-tag plus haut dans ce fichier. */

/* ── Contact : l'icône dit le canal, pas de puce en plus ── */
.psp-contact[b-y03iw4qys7] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
}

.psp-contact i[b-y03iw4qys7] {
    color: rgba(255, 255, 255, 0.5);
    margin-right: 0.4rem;
}
/* /Pages/StudioPlans.razor.rz.scp.css */
/* Trois à quatre offres côte à côte, comparables d'un coup d'œil : le taux d'abord, puisque
   c'est ce qui change d'une formule à l'autre, le reste ensuite. */

.plans-head[b-131mqlm48u] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 2rem;
}

.plans-head h1[b-131mqlm48u] {
    margin: 0;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.plans-head p[b-131mqlm48u] {
    max-width: 62ch;
    margin: 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.9rem;
    line-height: 1.55;
}

.plans-grid[b-131mqlm48u] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
}

.plan[b-131mqlm48u] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
}

.plan.is-current[b-131mqlm48u] {
    background: rgba(240, 180, 0, 0.07);
    border-color: var(--sh-gold);
}

.plan-head[b-131mqlm48u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.plan-head h2[b-131mqlm48u] {
    margin: 0;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.plan-chip[b-131mqlm48u] {
    padding: 0.15rem 0.55rem;
    color: var(--sh-gold);
    background: var(--sh-gold-glow);
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.plan-rate[b-131mqlm48u] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin: 0;
}

.plan-rate-value[b-131mqlm48u] {
    color: var(--sh-gold);
    font-size: 1.75rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.plan-rate-unit[b-131mqlm48u] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.78rem;
    font-weight: 650;
}

.plan-price[b-131mqlm48u] {
    margin: 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.85rem;
    font-weight: 650;
}

.plan-desc[b-131mqlm48u] {
    margin: 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.82rem;
    line-height: 1.5;
}

.plan-features[b-131mqlm48u] {
    margin: 0;
    padding-left: 1.1rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
    line-height: 1.6;
}

.plan .sh-action[b-131mqlm48u] {
    margin-top: auto;
    justify-content: center;
    text-align: center;
    text-decoration: none;
}

.plans-note[b-131mqlm48u] {
    max-width: 70ch;
    margin: 1.5rem 0 0;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.8rem;
    line-height: 1.55;
}

/* L'abonnement du compte : la formule, son état, et la porte vers Stripe.

   Il vit sous la grille et non dans une carte : il ne parle pas d'un palier en particulier, mais
   de ce qui est payé — et le portail où le changer est le même quel que soit le palier visé. */
.plans-account[b-131mqlm48u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin: 1.5rem 0 0.5rem;
    padding: 1rem 1.15rem;
    background: var(--sh-glass-bg);
    border: 1px solid var(--sh-glass-border);
    border-radius: 14px;
}

.plans-account strong[b-131mqlm48u] {
    color: var(--sh-gold);
    font-size: 1rem;
}

.plans-account-state[b-131mqlm48u] {
    margin-left: 0.6rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.82rem;
}

.plans-account-until[b-131mqlm48u] {
    margin-left: 0.35rem;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.82rem;
}
/* /Pages/SupportPage.razor.rz.scp.css */
/* Le support : un accueil qui rassure, une porte vers les réponses existantes, puis le formulaire
   en deux temps — choisir, raconter — et ce qu'on a déjà demandé, à côté. */

.sup[b-wdtnm0g24c] {
    max-width: 72rem;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
}

/* ------------------------------------------------------------------ accueil */

.sup-hero[b-wdtnm0g24c] {
    max-width: 44rem;
    margin: 0 auto 2.25rem;
    text-align: center;
    animation: sup-rise-b-wdtnm0g24c 0.5s ease both;
}

.sup-hero__icon[b-wdtnm0g24c] {
    display: inline-grid;
    place-items: center;
    width: 3.6rem;
    height: 3.6rem;
    margin-bottom: 1rem;
    border-radius: 18px;
    background: radial-gradient(circle at 30% 30%, rgba(240, 180, 0, 0.35), rgba(240, 180, 0, 0.08));
    color: var(--sh-gold, #f0b400);
    font-size: 1.7rem;
    box-shadow: 0 0 40px rgba(240, 180, 0, 0.18);
}

.sup-hero__title[b-wdtnm0g24c] {
    margin: 0 0 0.75rem;
    color: #fff;
    font-size: clamp(2rem, 6vw, 3rem);
    font-weight: 900;
    line-height: 1.05;
}

.sup-hero__lead[b-wdtnm0g24c] {
    margin: 0;
    color: rgba(255, 255, 255, 0.66);
    font-size: 1.02rem;
    line-height: 1.65;
}

.sup-hero__lead strong[b-wdtnm0g24c] {
    color: #fff;
}

.sup-kicker[b-wdtnm0g24c] {
    margin: 0 0 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* ------------------------------------------------------------------ avant d'écrire */

.sup-before[b-wdtnm0g24c] {
    margin-bottom: 2rem;
    animation: sup-rise-b-wdtnm0g24c 0.5s 0.08s ease both;
}

.sup-before__grid[b-wdtnm0g24c] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.6rem;
}

.sup-shortcut[b-wdtnm0g24c] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.sup-shortcut > i:first-child[b-wdtnm0g24c] {
    color: var(--sh-blue, #4dabf7);
    font-size: 1.1rem;
}

.sup-shortcut:hover[b-wdtnm0g24c] {
    border-color: rgba(77, 171, 247, 0.35);
    background: rgba(77, 171, 247, 0.06);
    color: #fff;
    transform: translateY(-1px);
}

.sup-shortcut__go[b-wdtnm0g24c] {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.35);
}

/* ------------------------------------------------------------------ grille */

.sup-grid[b-wdtnm0g24c] {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
    animation: sup-rise-b-wdtnm0g24c 0.5s 0.15s ease both;
}

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

.sup-side[b-wdtnm0g24c] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.sup-card[b-wdtnm0g24c] {
    padding: 1.35rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
}

.sup-card--quiet[b-wdtnm0g24c] {
    background: transparent;
}

.sup-card__title[b-wdtnm0g24c] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1rem;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
}

.sup-card__title--plain i[b-wdtnm0g24c] {
    color: var(--sh-gold, #f0b400);
}

.sup-step[b-wdtnm0g24c] {
    display: inline-grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--sh-gold, #f0b400);
    color: #111;
    font-size: 0.8rem;
    font-weight: 900;
}

/* ------------------------------------------------------------------ catégories */

.sup-cats[b-wdtnm0g24c] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.sup-cat[b-wdtnm0g24c] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.02);
    color: rgba(255, 255, 255, 0.8);
    text-align: left;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}

.sup-cat:hover[b-wdtnm0g24c] {
    border-color: rgba(240, 180, 0, 0.3);
    transform: translateY(-1px);
}

.sup-cat i[b-wdtnm0g24c] {
    margin-bottom: 0.3rem;
    color: var(--sh-gold, #f0b400);
    font-size: 1.15rem;
}

.sup-cat__name[b-wdtnm0g24c] {
    color: #fff;
    font-size: 0.88rem;
    font-weight: 800;
}

.sup-cat__hint[b-wdtnm0g24c] {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.74rem;
    line-height: 1.35;
}

.sup-cat.is-on[b-wdtnm0g24c] {
    border-color: var(--sh-gold, #f0b400);
    background: rgba(240, 180, 0, 0.1);
    box-shadow: 0 0 0 3px rgba(240, 180, 0, 0.12);
}

/* ------------------------------------------------------------------ champs */

.sup-fields[b-wdtnm0g24c] {
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    animation: sup-unfold-b-wdtnm0g24c 0.4s ease both;
}

.sup-fields .sup-card__title[b-wdtnm0g24c] {
    margin-bottom: 0.1rem;
}

.sup-row[b-wdtnm0g24c] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.75rem;
}

.sup-field[b-wdtnm0g24c] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.sup-field__label[b-wdtnm0g24c] {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.8rem;
    font-weight: 700;
}

.sup-field__label em[b-wdtnm0g24c] {
    color: rgba(255, 255, 255, 0.4);
    font-style: normal;
    font-weight: 500;
}

.sup-input[b-wdtnm0g24c] {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 0.93rem;
}

.sup-input:focus[b-wdtnm0g24c] {
    outline: none;
    border-color: var(--sh-gold, #f0b400);
    box-shadow: 0 0 0 3px rgba(240, 180, 0, 0.15);
}

select.sup-input option[b-wdtnm0g24c] {
    background: #111;
}

.sup-textarea[b-wdtnm0g24c] {
    min-height: 8rem;
    line-height: 1.55;
    resize: vertical;
}

.sup-count[b-wdtnm0g24c] {
    align-self: flex-end;
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.72rem;
}

.sup-note[b-wdtnm0g24c] {
    display: flex;
    gap: 0.45rem;
    margin: -0.2rem 0 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
    line-height: 1.5;
}

.sup-note i[b-wdtnm0g24c] {
    color: var(--sh-blue, #4dabf7);
}

.sup-note a[b-wdtnm0g24c],
.sup-tips a[b-wdtnm0g24c] {
    color: var(--sh-gold, #f0b400);
}

/* Le piège : hors de l'écran, hors du clavier, hors des lecteurs d'écran. */
.sup-trap[b-wdtnm0g24c] {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.sup-error[b-wdtnm0g24c] {
    margin: 0;
    padding: 0.6rem 0.8rem;
    border-radius: 10px;
    background: rgba(255, 71, 71, 0.1);
    color: #ff9c9c;
    font-size: 0.85rem;
}

.sup-submit[b-wdtnm0g24c] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.sup-send[b-wdtnm0g24c] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.8rem 1.5rem;
    border: 0;
    border-radius: 12px;
    background: var(--sh-gold, #f0b400);
    color: #111;
    font-weight: 900;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.sup-send:hover[b-wdtnm0g24c] {
    box-shadow: 0 8px 24px rgba(240, 180, 0, 0.25);
    transform: translateY(-1px);
}

.sup-send:disabled[b-wdtnm0g24c] {
    opacity: 0.6;
    transform: none;
}

.sup-submit__hint[b-wdtnm0g24c] {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.8rem;
}

/* ------------------------------------------------------------------ envoyée */

.sup-sent[b-wdtnm0g24c] {
    padding: 1.5rem 0.5rem;
    text-align: center;
    animation: sup-unfold-b-wdtnm0g24c 0.45s ease both;
}

.sup-sent__icon[b-wdtnm0g24c] {
    display: inline-grid;
    place-items: center;
    width: 3.4rem;
    height: 3.4rem;
    margin-bottom: 0.8rem;
    border-radius: 50%;
    background: rgba(74, 222, 128, 0.14);
    color: var(--sh-green, #4ade80);
    font-size: 1.6rem;
}

.sup-sent__title[b-wdtnm0g24c] {
    margin: 0 0 0.5rem;
    color: #fff;
    font-size: 1.3rem;
    font-weight: 900;
}

.sup-sent__text[b-wdtnm0g24c] {
    max-width: 30rem;
    margin: 0 auto 1.2rem;
    color: rgba(255, 255, 255, 0.66);
    line-height: 1.6;
}

/* ------------------------------------------------------------------ mes demandes */

.sup-empty[b-wdtnm0g24c] {
    margin: 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.88rem;
    line-height: 1.55;
}

.sup-list[b-wdtnm0g24c] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sup-item[b-wdtnm0g24c] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem 0.7rem;
    border: 1px solid transparent;
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.sup-item:hover[b-wdtnm0g24c] {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
}

.sup-item__icon[b-wdtnm0g24c] {
    display: grid;
    flex: 0 0 2.1rem;
    place-items: center;
    height: 2.1rem;
    border-radius: 10px;
    background: rgba(240, 180, 0, 0.1);
    color: var(--sh-gold, #f0b400);
}

.sup-item__main[b-wdtnm0g24c] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.sup-item__subject[b-wdtnm0g24c] {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.88rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sup-item.is-unread .sup-item__subject[b-wdtnm0g24c] {
    color: #fff;
    font-weight: 900;
}

.sup-item__meta[b-wdtnm0g24c] {
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.74rem;
}

.sup-item .status-pill[b-wdtnm0g24c] {
    flex: 0 0 auto;
    font-size: 0.7rem;
}

/* ------------------------------------------------------------------ à côté */

.sup-steps[b-wdtnm0g24c] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.86rem;
    line-height: 1.55;
    counter-reset: etape;
}

.sup-steps li[b-wdtnm0g24c] {
    position: relative;
    padding-left: 2.1rem;
    counter-increment: etape;
}

.sup-steps li[b-wdtnm0g24c]::before {
    content: counter(etape);
    position: absolute;
    left: 0;
    top: 0.05rem;
    display: grid;
    place-items: center;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 50%;
    background: rgba(79, 209, 232, 0.14);
    color: var(--sh-aqua, #4fd1e8);
    font-size: 0.75rem;
    font-weight: 900;
}

.sup-steps strong[b-wdtnm0g24c],
.sup-tips strong[b-wdtnm0g24c] {
    color: #fff;
}

/* ------------------------------------------------------------------ bon à savoir */

/* Pleine largeur désormais (voir markup) : un rappel en trois cartes plutôt qu'une
   liste étirée sur 72rem, dont les lignes deviendraient illisibles. */
.sup-tips-card[b-wdtnm0g24c] {
    margin-top: 1.5rem;
}

.sup-tips[b-wdtnm0g24c] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sup-tips li[b-wdtnm0g24c] {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.02);
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.86rem;
    line-height: 1.55;
}

.sup-tips i[b-wdtnm0g24c] {
    flex: 0 0 auto;
    margin-top: 0.15rem;
    color: var(--sh-gold, #f0b400);
    font-size: 1rem;
}

@keyframes sup-rise-b-wdtnm0g24c {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

@keyframes sup-unfold-b-wdtnm0g24c {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sup-hero[b-wdtnm0g24c],
    .sup-before[b-wdtnm0g24c],
    .sup-grid[b-wdtnm0g24c],
    .sup-fields[b-wdtnm0g24c],
    .sup-sent[b-wdtnm0g24c] {
        animation: none;
    }
}
/* /Pages/SupportRequestPage.razor.rz.scp.css */
.sreq[b-xlcrrwkcp2] {
    max-width: 50rem;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 4rem;
}

.sreq-back[b-xlcrrwkcp2] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}

.sreq-back:hover[b-xlcrrwkcp2] {
    color: var(--sh-gold, #f0b400);
}
/* /Pages/TeamManagement.razor.rz.scp.css */
/* Styles du composant, auparavant dans un <style> en ligne — donc globaux et injectés dans le DOM le temps de l'affichage. Scopés ici, ils ne visent plus que son propre balisage.\n\n   Vérifié : aucune de ces classes n'est posée ni définie ailleurs, et aucun sélecteur ne vise un composant enfant. */

/* Un disque, et il le reste.

   En enfant de flex sans base fixe, il se laissait comprimer par le nom qui le suit : sur un
   nom long, ou sur un écran étroit, le cercle devenait un ovale. La largeur ne se négocie pas. */
.avatar-circle[b-jpx5qwr7go] {
    flex: 0 0 40px;
    aspect-ratio: 1;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    color: #000;
}

.avatar-neutral[b-jpx5qwr7go] {
    background: rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.9) !important;
    border: 1px solid rgba(255,255,255,0.12);
}
.avatar-circle-sm[b-jpx5qwr7go] {
    flex: 0 0 32px;
    aspect-ratio: 1;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    color: #000;
}

/* L'en-tête de colonnes de la liste : la section commune fournit la surface, il ne reste que la
   séparation entre l'intitulé des colonnes et ce qu'elles décrivent. */
/* ── L'équipe : un tableau sur grand écran, des fiches sur téléphone ──────────────
   La liste était bâtie en grille Bootstrap (row / col-md-*). Sous 768 px, ces colonnes
   s'empilent : on lisait « MEMBRE / RÔLE / TARIF / MEMBRE DEPUIS / ACTIONS » l'un sous l'autre
   avant même d'atteindre le premier membre, puis chaque membre en cinq lignes sans repère.
   Les colonnes sont désormais écrites ici, et le téléphone reçoit des fiches — la même
   grammaire que la liste des réservations. */
.team-head[b-jpx5qwr7go],
.team-row[b-jpx5qwr7go] {
    display: grid;
    /* La dernière colonne est fixe, et non « auto » : sinon sa largeur suit son contenu — le mot
       « Actions » dans l'en-tête, un bouton dans la ligne — et les deux grilles se décalent de
       quelques pixels, assez pour qu'aucune colonne ne tombe en face de son intitulé. */
    grid-template-columns: minmax(0, 4fr) minmax(0, 2fr) minmax(0, 3fr) minmax(0, 2fr) 5.5rem;
    align-items: center;
    gap: 0.75rem;
}

.team-head[b-jpx5qwr7go] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.team-head-actions[b-jpx5qwr7go],
.team-cell--actions[b-jpx5qwr7go] { justify-self: end; }

.team-row[b-jpx5qwr7go] {
    padding: 0.65rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* La ligne que désigne une notification de tarif — même langage ambre et même pulsation à
   l'arrivée que ReservationTable.res-row--focus, adapté à une grille plutôt qu'un tableau. */
.team-row--focus[b-jpx5qwr7go] {
    background: rgba(217, 166, 83, 0.14);
    box-shadow: inset 0 1px 0 rgba(217, 166, 83, 0.55), inset 0 -1px 0 rgba(217, 166, 83, 0.55);
    animation: team-focus-arrivee-b-jpx5qwr7go 1.6s ease-out;
}

@keyframes team-focus-arrivee-b-jpx5qwr7go {
    0% { background: rgba(217, 166, 83, 0.38); }
    100% { background: rgba(217, 166, 83, 0.14); }
}

@media (prefers-reduced-motion: reduce) {
    .team-row--focus[b-jpx5qwr7go] { animation: none; }
}

.team-cell[b-jpx5qwr7go] { min-width: 0; }

/* Une invitation n'a pas de tarif : quatre colonnes au lieu de cinq. */
.team-row--invite[b-jpx5qwr7go] {
    grid-template-columns: minmax(0, 5fr) minmax(0, 2fr) minmax(0, 3fr) 5.5rem;
}

.team-who[b-jpx5qwr7go] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.team-who-text[b-jpx5qwr7go] { min-width: 0; }

.team-who-name[b-jpx5qwr7go] {
    overflow: hidden;
    color: var(--sh-white, #fff);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-who-mail[b-jpx5qwr7go],
.team-since[b-jpx5qwr7go] { color: rgba(255, 255, 255, 0.5); }

.team-who-mail[b-jpx5qwr7go] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    /* Les intitulés de colonnes n'ont plus d'objet : chaque cellule porte le sien. */
    .team-head[b-jpx5qwr7go] { display: none; }

    .team-row[b-jpx5qwr7go],
    .team-row--invite[b-jpx5qwr7go] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.4rem;
        padding: 0.85rem 0.9rem;
    }

    /* Chaque champ annonce ce qu'il est, à gauche de sa valeur — sauf le nom, qui se lit seul,
       et les actions, qui se rangent au bout. */
    .team-cell[data-col][b-jpx5qwr7go]::before {
        content: attr(data-col);
        margin-right: 0.6rem;
        color: rgba(255, 255, 255, 0.45);
        font-size: 0.63rem;
        font-weight: 700;
        letter-spacing: 0.09em;
        text-transform: uppercase;
    }

    .team-cell[data-col][b-jpx5qwr7go] {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.6rem;
    }

    .team-cell--actions[b-jpx5qwr7go] { justify-self: start; }
}

/* Le geste sur un membre, posé dans la ligne.

   Il vivait dans un menu déroulant qui n'a jamais fonctionné au doigt — la surface de
   fermeture au clic extérieur recevait l'appui avant lui. */
.team-cell--actions[b-jpx5qwr7go] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.team-remove[b-jpx5qwr7go] { padding: 0.3rem 0.6rem; font-size: 0.76rem; }

.team-protected[b-jpx5qwr7go] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.76rem;
}

/* Le propriétaire derrière la console : l'interrupteur, et ce qu'il change, juste dessous. */
.team-owner-engineer[b-jpx5qwr7go] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.team-owner-engineer-hint[b-jpx5qwr7go] {
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.84rem;
    line-height: 1.5;
}

/* Le motif du retrait : un champ de texte dans la question, pas un second écran. */
.team-remove-reason[b-jpx5qwr7go] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
}

.team-remove-reason textarea[b-jpx5qwr7go] {
    width: 100%;
    padding: 0.5rem 0.65rem;
    color: #fff;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    font-size: 0.85rem;
    resize: vertical;
}

.team-remove-reason small[b-jpx5qwr7go] { color: rgba(255, 255, 255, 0.4); }

/* Les quatre places et ce qu'elles permettent : une liste, pas une grille Bootstrap dont les
   colonnes s'empilaient sans repère sous 768 px. */
.team-roles-legend[b-jpx5qwr7go] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.team-roles-legend li[b-jpx5qwr7go] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.82rem;
}

/* Le tarif convenu avec un ingénieur : le montant, sa provenance (accord ou vitrine), et le
   geste pour le régler, empilés dans la même cellule plutôt qu'étalés sur la ligne. */
.member-rate[b-jpx5qwr7go] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
}

/* Le montant convenu : plus petit que le nom du membre — ce n'est pas ce qu'on lit en premier
   dans une équipe — et dans l'or du studio, qui est la couleur de son argent partout ailleurs. */
.member-rate-amount[b-jpx5qwr7go] {
    color: var(--sh-gold);
    font-size: 0.85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.member-rate-edit[b-jpx5qwr7go] {
    padding: 0.15rem 0.4rem;
    font-size: 0.72rem;
    margin-top: 0.1rem;
}

.member-rate-edit i[b-jpx5qwr7go] {
    margin-right: 0.25rem;
}


/* Le tarif proposé par l'ingénieur : gris et barré d'aucune décision — il s'affiche pour être
   retenu ou remplacé, pas pour être lu comme un montant dû. */
.member-rate-proposed[b-jpx5qwr7go] {
    color: rgba(255, 255, 255, 0.45);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* La demande de l'ingénieur et le geste pour la retenir, groupés à part du tarif convenu :
   l'état (pastille), le montant demandé, puis le bouton — dans cet ordre de lecture. */
.member-rate-request[b-jpx5qwr7go] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    margin-top: 0.2rem;
}

/* Sur grand écran, la cellule s'étale plutôt qu'elle ne s'empile.
   Tarif convenu, sa mention, l'état de la demande, le montant demandé et les deux gestes
   faisaient jusqu'à six lignes superposées : une ligne de membre devenait trois fois plus haute
   que ses voisines, et le tableau perdait sa forme de tableau. En rang, la même information tient
   sur une ou deux lignes et la hauteur reste celle des autres. */
@media (min-width: 768px) {
    .member-rate[b-jpx5qwr7go],
    .member-rate-request[b-jpx5qwr7go] {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.4rem;
        margin-top: 0;
    }

    /* « Tarif convenu » suit son montant au lieu de le surmonter. */
    .member-rate[b-jpx5qwr7go]  small {
        display: inline !important;
    }

    .member-rate-edit[b-jpx5qwr7go],
    .member-rate-retain[b-jpx5qwr7go] {
        margin-top: 0;
    }
}

.member-rate-retain[b-jpx5qwr7go] {
    padding: 0.15rem 0.4rem;
    font-size: 0.72rem;
}

.member-rate-retain i[b-jpx5qwr7go] {
    margin-right: 0.25rem;
}