/* /Components/Layout/AdminLayout.razor.rz.scp.css */
/* Admin layout — scoped styles.
   Scoped CSS from the Client project ships via JkrStudio.Web.styles.css
   which is linked explicitly from App.razor / wwwroot/index.html. */

[b-d7ivay4ib3] .jkr-admin-appbar {
    background: rgba(0, 0, 0, 0.92) !important;
    backdrop-filter: blur(0.625rem);
    -webkit-backdrop-filter: blur(0.625rem);
    border-bottom: 0.0625rem solid #1f1f1f;
}

[b-d7ivay4ib3] .jkr-admin-pagetitle {
    font-family: 'Montserrat', sans-serif !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: #fff;
}

[b-d7ivay4ib3] .jkr-admin-drawer {
    background: #0A0A0A !important;
    border-right: 0.0625rem solid #1f1f1f;
    display: flex;
    flex-direction: column;
}

[b-d7ivay4ib3] .jkr-admin-brand {
    padding: 1.5rem 1.25rem 1rem;
    border-bottom: 0.0625rem solid #1f1f1f;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

[b-d7ivay4ib3] .jkr-admin-logo {
    height: 2.4rem;
    width: auto;
}

[b-d7ivay4ib3] .jkr-admin-brand-tag {
    color: #b0b0b0 !important;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.7rem !important;
}

[b-d7ivay4ib3] .jkr-admin-nav {
    padding: 0.75rem 0;
    flex-grow: 1;
}

[b-d7ivay4ib3] .jkr-admin-nav .mud-nav-link {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.85rem;
    color: #d0d0d0 !important;
    border-left: 0.1875rem solid transparent;
    border-radius: 0;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

[b-d7ivay4ib3] .jkr-admin-nav .mud-nav-link:hover {
    background: rgba(212, 0, 0, 0.08) !important;
    color: #fff !important;
}

[b-d7ivay4ib3] .jkr-admin-nav .mud-nav-link.active {
    background: rgba(212, 0, 0, 0.14) !important;
    color: #fff !important;
    border-left-color: #D40000;
}

[b-d7ivay4ib3] .jkr-admin-nav .mud-nav-link.active .mud-nav-link-icon {
    color: #D40000 !important;
}

[b-d7ivay4ib3] .jkr-admin-drawer-foot {
    padding: 0.5rem 0.5rem 1rem;
}

[b-d7ivay4ib3] .jkr-admin-main {
    background: #050505;
    min-height: 100vh;
}

[b-d7ivay4ib3] .jkr-admin-content {
    padding: 2rem;
}

@media (max-width: 60rem) {
    [b-d7ivay4ib3] .jkr-admin-content {
        padding: 1.25rem;
    }
}
/* /Components/Layout/AuthLayout.razor.rz.scp.css */
/* Conteneur plein écran centrant la carte d'authentification (login, reset). */
.jkr-auth-shell[b-bvkjziba6j] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
#components-reconnect-modal[b-5ox9zutxpq] {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1400;
    overflow: hidden;
    background-color: transparent;
    border: none;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
}

    #components-reconnect-modal[b-5ox9zutxpq]::backdrop {
        background: rgba(10, 16, 28, 0.5);
    }

    #components-reconnect-modal.components-reconnect-show[b-5ox9zutxpq],
    #components-reconnect-modal[open][b-5ox9zutxpq],
    #components-reconnect-modal.components-reconnect-failed[b-5ox9zutxpq],
    #components-reconnect-modal.components-reconnect-repeated-attempt[b-5ox9zutxpq],
    #components-reconnect-modal.components-reconnect-paused[b-5ox9zutxpq],
    #components-reconnect-modal.components-reconnect-resume-failed[b-5ox9zutxpq],
    #components-reconnect-modal.components-pause[b-5ox9zutxpq],
    #components-reconnect-modal.components-resume-failed[b-5ox9zutxpq] {
        display: flex;
        align-items: center;
        justify-content: center;
    }

.components-reconnect-backdrop[b-5ox9zutxpq] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: radial-gradient(90% 60% at 80% 0%, color-mix(in srgb, var(--mud-palette-primary, #594AE2) 12%, transparent), transparent 60%), radial-gradient(80% 55% at 0% 100%, color-mix(in srgb, var(--mud-palette-info, #2196f3) 16%, transparent), transparent 62%), rgba(8, 12, 20, 0.5);
}

.components-reconnect-surface[b-5ox9zutxpq] {
    width: min(30rem, 100%);
    border-radius: var(--mud-default-borderradius, 0.75rem);
    border: 0.0625rem solid color-mix(in srgb, var(--mud-palette-lines-default, #e0e0e0) 70%, transparent);
    background: var(--mud-palette-surface, #fff);
    box-shadow: var(--mud-elevation-24, 0 1rem 1.875rem rgba(0, 0, 0, 0.28));
    color: var(--mud-palette-text-primary, #1f2937);
    padding: 1.25rem 1.25rem 1.125rem;
}

.components-reconnect-header[b-5ox9zutxpq] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.5rem;
}

    .components-reconnect-header h2[b-5ox9zutxpq] {
        margin: 0;
        font-size: 1.05rem;
        font-weight: 600;
        line-height: 1.3;
    }

.components-reconnect-status-dot[b-5ox9zutxpq] {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--mud-palette-warning, #f59e0b);
    box-shadow: 0 0 0 0.375rem color-mix(in srgb, var(--mud-palette-warning, #f59e0b) 25%, transparent);
}

.components-reconnect-supporting[b-5ox9zutxpq],
.components-reconnect-message[b-5ox9zutxpq] {
    margin: 0;
    line-height: 1.45;
    font-size: 0.95rem;
}

.components-reconnect-supporting[b-5ox9zutxpq] {
    color: var(--mud-palette-text-secondary, #52607a);
    margin-bottom: 0.875rem;
}

.components-reconnect-message[b-5ox9zutxpq] {
    font-weight: 500;
}

.components-reconnect-danger[b-5ox9zutxpq] {
    color: var(--mud-palette-error, #b00020);
}

.components-reconnect-actions[b-5ox9zutxpq] {
    margin-top: 0.875rem;
    display: flex;
    gap: 0.625rem;
    justify-content: flex-end;
}

.components-reconnect-first-attempt-visible[b-5ox9zutxpq],
.components-reconnect-repeated-attempt-visible[b-5ox9zutxpq],
.components-reconnect-failed-visible[b-5ox9zutxpq],
.components-pause-visible[b-5ox9zutxpq],
.components-resume-failed-visible[b-5ox9zutxpq] {
    display: none;
}

dialog[open].components-reconnect-show .components-reconnect-first-attempt-visible[b-5ox9zutxpq] {
    display: block;
}

dialog[open].components-reconnect-show .components-rejoin-loader[b-5ox9zutxpq] {
    display: inline-flex;
}

dialog[open].components-reconnect-failed .components-reconnect-failed-visible[b-5ox9zutxpq] {
    display: block;
}

dialog[open].components-reconnect-failed #components-reconnect-button[b-5ox9zutxpq] {
    display: block;
}

dialog[open].components-reconnect-repeated-attempt .components-reconnect-repeated-attempt-visible[b-5ox9zutxpq] {
    display: block;
}

dialog[open].components-reconnect-repeated-attempt .components-rejoin-loader[b-5ox9zutxpq] {
    display: inline-flex;
}

dialog[open].components-reconnect-paused .components-pause-visible[b-5ox9zutxpq],
dialog[open].components-pause .components-pause-visible[b-5ox9zutxpq] {
    display: block;
}

dialog[open].components-reconnect-paused #components-resume-button[b-5ox9zutxpq],
dialog[open].components-pause #components-resume-button[b-5ox9zutxpq],
dialog[open].components-reconnect-resume-failed #components-resume-button[b-5ox9zutxpq],
dialog[open].components-resume-failed #components-resume-button[b-5ox9zutxpq] {
    display: block;
}

dialog[open].components-reconnect-resume-failed .components-resume-failed-visible[b-5ox9zutxpq],
dialog[open].components-resume-failed .components-resume-failed-visible[b-5ox9zutxpq] {
    display: block;
}

.components-rejoin-loader[b-5ox9zutxpq] {
    display: none;
    margin-bottom: 0.625rem;
    gap: 0.5rem;
}

    .components-rejoin-loader div[b-5ox9zutxpq] {
        width: 0.5625rem;
        height: 0.5625rem;
        border-radius: 50%;
        background-color: var(--mud-palette-primary, #594AE2);
        animation: reconnect-pulse-b-5ox9zutxpq 1.2s infinite ease-in-out both;
    }

        .components-rejoin-loader div:nth-child(1)[b-5ox9zutxpq] {
            animation-delay: -0.24s;
        }

        .components-rejoin-loader div:nth-child(2)[b-5ox9zutxpq] {
            animation-delay: -0.12s;
        }

@keyframes reconnect-pulse-b-5ox9zutxpq {
    0%, 80%, 100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1);
    }
}

#components-reconnect-button[b-5ox9zutxpq],
#components-resume-button[b-5ox9zutxpq] {
    display: none;
    min-width: 5.75rem;
    cursor: pointer;
    padding: 0.5rem 1rem;
    border: 0.0625rem solid transparent;
    border-radius: 62.4375rem;
    background-color: var(--mud-palette-primary, #594AE2);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    transition: filter 140ms ease, transform 140ms ease;
}

    #components-reconnect-button:hover[b-5ox9zutxpq],
    #components-resume-button:hover[b-5ox9zutxpq] {
        filter: brightness(0.95);
    }

    #components-reconnect-button:active[b-5ox9zutxpq],
    #components-resume-button:active[b-5ox9zutxpq] {
        transform: translateY(0.0625rem);
    }

@media (max-width: 37.5rem) {
    .components-reconnect-backdrop[b-5ox9zutxpq] {
        padding: 0.875rem;
    }

    .components-reconnect-surface[b-5ox9zutxpq] {
        padding: 1rem;
    }
}
/* /Components/Sections/Admin/AdminDashboardSection.razor.rz.scp.css */
/* Dashboard admin — scoped.
   ::deep is required for selectors that target classes placed on MudBlazor
   components (MudPaper, MudList…), because the scope attribute is only applied
   to elements declared in this .razor file, not to those rendered by children. */

[b-3nsp67crqe] .jkr-admin-stat {
    background: #0F0F0F !important;
    border: 0.0625rem solid #1f1f1f !important;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-radius: 0.25rem;
    transition: border-color 0.2s, transform 0.2s;
}

[b-3nsp67crqe] .jkr-admin-stat:hover {
    border-color: #2A2A2A !important;
    transform: translateY(-0.125rem);
}

[b-3nsp67crqe] .jkr-admin-stat-icon {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    color: #fff;
}

[b-3nsp67crqe] .jkr-admin-stat-label {
    color: #888 !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.7rem !important;
}

[b-3nsp67crqe] .jkr-admin-stat-value {
    color: #fff !important;
    font-weight: 700;
    line-height: 1.2;
    margin-top: 0.125rem;
}

[b-3nsp67crqe] .jkr-admin-stat-trend {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

/* Activity feed & protected-galleries list — borders between list items. */
[b-3nsp67crqe] .jkr-admin-feed .mud-list-item {
    border-bottom: 0.0625rem solid #181818;
}

[b-3nsp67crqe] .jkr-admin-feed .mud-list-item:last-child {
    border-bottom: none;
}

/* Quick actions cards — clickable tiles with red-tinted hover. */
[b-3nsp67crqe] .jkr-admin-action {
    background: #0A0A0A !important;
    border: 0.0625rem solid #1f1f1f !important;
    padding: 1.25rem;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.2s, background 0.2s;
}

[b-3nsp67crqe] .jkr-admin-action:hover {
    border-color: #D40000 !important;
    transform: translateY(-0.125rem);
    background: rgba(212, 0, 0, 0.06) !important;
}
/* /Components/Sections/Admin/AdminMessagesSection.razor.rz.scp.css */
/* Messages admin — scoped.
   Inbox list + detail panel. ::deep used on selectors that target classes placed
   on MudPaper / MudList / MudListItem (child components). */

[b-jsapnmn4ta] .jkr-admin-inbox {
    min-height: 35rem;
    display: flex;
    flex-direction: column;
}

[b-jsapnmn4ta] .jkr-admin-inbox-tabs {
    border-bottom: 0.0625rem solid #1f1f1f;
}

[b-jsapnmn4ta] .jkr-admin-msg-list {
    overflow-y: auto;
    max-height: 38rem;
    padding: 0 !important;
}

[b-jsapnmn4ta] .jkr-admin-msg-list .mud-list-item {
    border-bottom: 0.0625rem solid #181818;
    padding: 0.875rem 1rem;
    cursor: pointer;
    position: relative;
}

[b-jsapnmn4ta] .jkr-admin-msg-list .mud-list-item:hover {
    background: rgba(212, 0, 0, 0.06);
}

[b-jsapnmn4ta] .jkr-admin-msg-list .mud-selected-item {
    background: rgba(212, 0, 0, 0.12) !important;
    border-left: 0.1875rem solid #D40000;
}

[b-jsapnmn4ta] .jkr-admin-msg-unread .jkr-admin-msg-meta {
    font-weight: 600;
}

[b-jsapnmn4ta] .jkr-admin-msg-preview {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jkr-admin-msg-dot[b-jsapnmn4ta] {
    position: absolute;
    top: 1rem;
    right: 0.75rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #D40000;
}

[b-jsapnmn4ta] .jkr-admin-detail {
    min-height: 35rem;
    display: flex;
    flex-direction: column;
}

.jkr-admin-detail-empty[b-jsapnmn4ta] {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 4rem;
}

.jkr-admin-detail-head[b-jsapnmn4ta] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem;
}

.jkr-admin-detail-meta[b-jsapnmn4ta] {
    padding: 0.875rem 1.25rem;
    background: #0A0A0A;
    border-bottom: 0.0625rem solid #1f1f1f;
}

.jkr-admin-detail-body[b-jsapnmn4ta] {
    padding: 1.5rem 1.25rem;
    line-height: 1.7;
}

.jkr-admin-detail-reply[b-jsapnmn4ta] {
    padding: 1.25rem;
    background: #0A0A0A;
}
/* /Components/Sections/Admin/AdminPortfolioSection.razor.rz.scp.css */
/* Portfolio admin — scoped.
   ::deep needed for classes on MudPaper/MudSelect (child components). The native
   <div> and <img> elements declared inline in the .razor get the scope attr and
   don't need ::deep. */

[b-pbs8wobxah] .jkr-admin-toolbar {
    background: #0F0F0F !important;
    border: 0.0625rem solid #1f1f1f !important;
    padding: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: 0.25rem;
}

[b-pbs8wobxah] .jkr-admin-filter {
    min-width: 12rem;
}

/* Espace entre les cartes de catégorie. */
.jkr-admin-cat[b-pbs8wobxah] {
    margin-bottom: 1rem;
}

.jkr-admin-cat-head[b-pbs8wobxah] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
}

/* Couverture absente : aplat sombre au lieu d'une image cassée. */
.jkr-admin-cover-empty[b-pbs8wobxah] {
    background: #1a1a1a;
}

.jkr-admin-cat-cover[b-pbs8wobxah] {
    width: 4rem;
    height: 4rem;
    border-radius: 0.25rem;
    background-size: cover;
    background-position: center;
    border: 0.0625rem solid #1f1f1f;
    flex-shrink: 0;
}

.jkr-admin-thumb[b-pbs8wobxah] {
    width: 3rem;
    height: 3rem;
    object-fit: cover;
    border-radius: 0.25rem;
    border: 0.0625rem solid #1f1f1f;
    flex-shrink: 0;
}

/* Nested gallery row (a gallery inside a group) — indented under its parent. */
.jkr-admin-row-nested[b-pbs8wobxah] {
    padding-left: 1.5rem;
}

/* Largeurs de colonnes fixes et identiques pour TOUS les tableaux de catégorie.
   Sans ça, chaque tableau (un par catégorie) dimensionne ses colonnes selon son
   propre contenu, donc les colonnes se décalent d'une catégorie à l'autre
   (effet « diagonale »). Les largeurs réelles sont posées sur les <MudTh> du
   .razor ; table-layout: fixed les fait respecter à l'identique partout. */
[b-pbs8wobxah] .jkr-admin-table .mud-table-root {
    table-layout: fixed;
    width: 100%;
}
/* /Components/Sections/Admin/AdminSettingsSection.razor.rz.scp.css */
/* Settings admin — navigation latérale groupée + panneau, aperçu live pour l'apparence.
   Reprend les tokens du site : fonds #0A0A0A/#0F0F0F, bordures #1f1f1f, accent rouge, Montserrat. */

.jkr-settings-layout[b-srixz0ecfk] {
    display: grid;
    grid-template-columns: 12.5rem minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

/* --- Navigation latérale --- */
.jkr-settings-nav[b-srixz0ecfk] {
    background: #0A0A0A;
    border: 0.0625rem solid #1f1f1f;
    border-radius: 0.25rem;
    padding: 0.75rem 0;
    position: sticky;
    top: 1rem;
}

.jkr-settings-nav-group[b-srixz0ecfk] {
    /* Category header sits near the left edge; sub-items are indented under it
       (hierarchy) — see .jkr-settings-nav-item left padding. */
    padding: 0 0.9rem 0.4rem;
    color: #666;
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
}

.jkr-settings-nav-group:not(:first-child)[b-srixz0ecfk] {
    padding-top: 1rem;
}

.jkr-settings-nav-item[b-srixz0ecfk] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.625rem;
    width: 100%;
    box-sizing: border-box;
    /* indented past the category header for a clear parent/child hierarchy;
       all items share this left edge so they line up with each other. */
    padding: 0.5rem 0.9rem 0.5rem 1.6rem;
    border: none;
    border-left: 0.125rem solid transparent;
    background: transparent;
    color: #aaa;
    font-size: 0.8125rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.jkr-settings-nav-item:hover[b-srixz0ecfk] {
    background: #111;
    color: #fff;
}

.jkr-settings-nav-item.active[b-srixz0ecfk] {
    border-left-color: var(--mud-palette-primary, #D40000);
    background: #141414;
    color: #fff;
    font-weight: 500;
}

.jkr-settings-nav-icon[b-srixz0ecfk] {
    font-size: 1.125rem !important;
    color: #888;
}

.jkr-settings-nav-item.active .jkr-settings-nav-icon[b-srixz0ecfk],
.jkr-settings-nav-item:hover .jkr-settings-nav-icon[b-srixz0ecfk] {
    color: var(--mud-palette-primary, #D40000);
}

/* --- Panneau de contenu --- */
.jkr-settings-panel[b-srixz0ecfk] {
    min-height: 20rem;
}

.jkr-admin-settings-body[b-srixz0ecfk] {
    padding: 1.75rem;
}

/* Sous-section d'un panneau : titre discret + filet séparateur pour aérer. */
.jkr-settings-group + .jkr-settings-group[b-srixz0ecfk] {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 0.0625rem solid #1f1f1f;
}

.jkr-settings-group-title[b-srixz0ecfk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
    font-size: 0.8125rem;
}

.jkr-settings-group-title .mud-icon-root[b-srixz0ecfk] {
    font-size: 1.05rem !important;
    color: var(--mud-palette-primary, #D40000);
}

.jkr-admin-settings-foot[b-srixz0ecfk] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 0.0625rem solid #1f1f1f;
}

/* --- Apparence : split réglages + aperçu live --- */
.jkr-settings-appearance[b-srixz0ecfk] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 15rem;
    gap: 1.5rem;
    align-items: start;
}

.jkr-settings-preview[b-srixz0ecfk] {
    position: sticky;
    top: 1rem;
}

.jkr-settings-preview-label[b-srixz0ecfk],
.jkr-settings-preview-note[b-srixz0ecfk] {
    color: #666;
    font-size: 0.6875rem;
    line-height: 1.5;
}

.jkr-settings-preview-label[b-srixz0ecfk] {
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 0.625rem;
}

.jkr-settings-preview-note[b-srixz0ecfk] {
    margin-top: 0.625rem;
}

.jkr-preview-card[b-srixz0ecfk] {
    background: #0A0A0A;
    border: 0.0625rem solid #1f1f1f;
    border-radius: 0.375rem;
    overflow: hidden;
}

.jkr-preview-photo[b-srixz0ecfk] {
    position: relative;
    height: 8.75rem;
    background: linear-gradient(135deg, #3a3a3a, #1a1a1a);
    display: flex;
    align-items: center;
    justify-content: center;
}

.jkr-preview-photo-icon[b-srixz0ecfk] {
    font-size: 1.75rem !important;
    color: #4a4a4a;
}

.jkr-preview-watermark[b-srixz0ecfk] {
    position: absolute;
    bottom: 0.5rem;
    right: 0.625rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.6875rem;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    max-width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jkr-preview-body[b-srixz0ecfk] {
    padding: 0.6875rem 0.75rem;
}

.jkr-preview-title[b-srixz0ecfk] {
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 500;
}

.jkr-preview-rule[b-srixz0ecfk] {
    height: 0.125rem;
    width: 2.125rem;
    margin: 0.4375rem 0;
}

.jkr-preview-meta[b-srixz0ecfk] {
    color: #888;
    font-size: 0.6875rem;
}

/* --- Responsive : la nav et le split passent en pile --- */
@media (max-width: 59.375rem) {
    .jkr-settings-layout[b-srixz0ecfk] {
        grid-template-columns: 1fr;
    }

    .jkr-settings-nav[b-srixz0ecfk] {
        position: static;
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
        padding: 0.5rem;
    }

    .jkr-settings-nav-group[b-srixz0ecfk] {
        width: 100%;
        padding-top: 0.4rem;
    }

    .jkr-settings-nav-item[b-srixz0ecfk] {
        width: auto;
        border-left: none;
        border-bottom: 0.125rem solid transparent;
        border-radius: 0.25rem;
    }

    .jkr-settings-nav-item.active[b-srixz0ecfk] {
        border-left: none;
        border-bottom-color: var(--mud-palette-primary, #D40000);
    }

    .jkr-settings-appearance[b-srixz0ecfk] {
        grid-template-columns: 1fr;
    }

    .jkr-settings-preview[b-srixz0ecfk] {
        position: static;
        max-width: 15rem;
    }
}
/* /Components/Sections/ErrorSection.razor.rz.scp.css */
/* Centered error/404 section — large red code, accented title, divider, actions. */

.jkr-section[b-6h72e6u0nb] {
    text-align: center;
}

.jkr-error-code[b-6h72e6u0nb] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: clamp(5rem, 15vw, 9rem);
    line-height: 1;
    color: #D40000;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
    user-select: none;
}

/* Center the (globally left-aligned) shared divider under the centered title. */
.jkr-section-divider[b-6h72e6u0nb] {
    margin-left: auto;
    margin-right: auto;
}

.jkr-error-actions[b-6h72e6u0nb] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.jkr-error-actions code[b-6h72e6u0nb] {
    color: #D40000;
    font-family: monospace;
}
/* /Components/Sections/HeroSection.razor.rz.scp.css */
.jkr-hero[b-ks88b32xqu] {
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("https://picsum.photos/seed/jkr-hero/1920/1080");
    background-size: cover;
    background-position: center;
    overflow: hidden;
    padding: 0 1.5rem;
}

.jkr-hero-overlay[b-ks88b32xqu] {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.75) 60%, rgba(0,0,0,0.9) 100%);
    z-index: 1;
}

.jkr-hero-content[b-ks88b32xqu] {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 56.25rem;
}

.jkr-hero-logo[b-ks88b32xqu] {
    height: 8.75rem;
    width: auto;
    margin: 0 auto 2rem;
    display: block;
}

.jkr-hero-title[b-ks88b32xqu] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: clamp(2rem, 6vw, 4rem);
    line-height: 1.1;
    letter-spacing: 0.02em;
    color: #ffffff;
    margin: 0 0 1.5rem;
    text-transform: uppercase;
    outline: none;
}

.jkr-hero-title:focus[b-ks88b32xqu] {
    outline: none;
}

.jkr-accent[b-ks88b32xqu] {
    color: #D40000;
}

.jkr-hero-sub[b-ks88b32xqu] {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: clamp(0.95rem, 1.6vw, 1.15rem);
    color: #d8d8d8;
    margin: 0 0 2.5rem;
    letter-spacing: 0.04em;
}

.jkr-hero-actions[b-ks88b32xqu] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* 4 red corner brackets around the hero, inspired by the logo.
   ::before and ::after cover the top corners; the two empty <span>s cover the
   bottom corners (a single element can only have one ::before and one ::after). */
.hero-frame[b-ks88b32xqu]::before,
.hero-frame[b-ks88b32xqu]::after,
.hero-frame > .corner-bl[b-ks88b32xqu],
.hero-frame > .corner-br[b-ks88b32xqu] {
    content: "";
    position: absolute;
    width: 4.5rem;
    height: 4.5rem;
    border-color: #D40000;
    border-style: solid;
    border-width: 0;
    z-index: 3;
    pointer-events: none;
}

/* Top corners are pushed below the fixed MudAppBar (~4rem tall) so the brackets
   stay fully visible instead of being clipped behind the nav. */
.hero-frame[b-ks88b32xqu]::before {
    top: 6rem;
    left: 2rem;
    border-top-width: 0.1875rem;
    border-left-width: 0.1875rem;
}

.hero-frame[b-ks88b32xqu]::after {
    top: 6rem;
    right: 2rem;
    border-top-width: 0.1875rem;
    border-right-width: 0.1875rem;
}

.hero-frame > .corner-bl[b-ks88b32xqu] {
    bottom: 2rem;
    left: 2rem;
    border-bottom-width: 0.1875rem;
    border-left-width: 0.1875rem;
}

.hero-frame > .corner-br[b-ks88b32xqu] {
    bottom: 2rem;
    right: 2rem;
    border-bottom-width: 0.1875rem;
    border-right-width: 0.1875rem;
}

@media (max-width: 37.5rem) {
    .jkr-hero[b-ks88b32xqu] {
        min-height: 85vh;
    }

    .jkr-hero-logo[b-ks88b32xqu] {
        height: 6rem;
        margin-bottom: 1.5rem;
    }

    .hero-frame[b-ks88b32xqu]::before,
    .hero-frame[b-ks88b32xqu]::after,
    .hero-frame > .corner-bl[b-ks88b32xqu],
    .hero-frame > .corner-br[b-ks88b32xqu] {
        width: 2.5rem;
        height: 2.5rem;
    }

    .hero-frame[b-ks88b32xqu]::before { top: 4.5rem; left: 1rem; }
    .hero-frame[b-ks88b32xqu]::after { top: 4.5rem; right: 1rem; }
    .hero-frame > .corner-bl[b-ks88b32xqu] { bottom: 1rem; left: 1rem; }
    .hero-frame > .corner-br[b-ks88b32xqu] { bottom: 1rem; right: 1rem; }
}