/* Espaces membre et administration — étape 0050 */

:is(
    .library-page,
    .beta-reading-page,
    .following-page,
    .profile-settings-page,
    .administration-page
) {
    --workspace-surface: var(--paper, #ffffff);
    --workspace-soft:
        color-mix(
            in srgb,
            var(--turquoise-light, #dff6f2) 46%,
            var(--paper, #ffffff)
        );
    --workspace-border: var(--border, #d7dfdd);
    --workspace-radius: var(--radius, 1.25rem);
    --workspace-small-radius:
        var(--radius-small, 0.85rem);
    --workspace-shadow:
        0 1rem 2.4rem rgb(25 52 49 / 8%);
}

:is(
    .library-page,
    .beta-reading-page,
    .following-page,
    .profile-settings-page,
    .administration-page
) .account-page {
    gap: clamp(1.25rem, 3vw, 2.25rem);
}

:is(
    .library-page,
    .beta-reading-page,
    .following-page,
    .profile-settings-page,
    .administration-page
) .account-introduction {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--workspace-border);
    background:
        linear-gradient(
            135deg,
            var(--workspace-soft),
            var(--workspace-surface) 72%
        );
}

:is(
    .library-page,
    .beta-reading-page,
    .following-page,
    .profile-settings-page,
    .administration-page
) .account-introduction::after {
    position: absolute;
    right: clamp(1rem, 5vw, 4rem);
    bottom: -3.8rem;
    color: color-mix(
        in srgb,
        var(--turquoise, #41bbae) 10%,
        transparent
    );
    font-family: Georgia, serif;
    font-size: clamp(8rem, 17vw, 14rem);
    line-height: 1;
    content: "L";
    pointer-events: none;
}

:is(
    .library-page,
    .beta-reading-page,
    .following-page,
    .profile-settings-page,
    .administration-page
) .account-introduction > * {
    position: relative;
    z-index: 1;
}

:is(
    .library-page,
    .beta-reading-page,
    .following-page,
    .profile-settings-page,
    .administration-page
) .account-introduction h1 {
    max-width: 48rem;
    text-wrap: balance;
}

:is(
    .library-page,
    .beta-reading-page,
    .following-page,
    .profile-settings-page,
    .administration-page
) .account-card {
    display: grid;
    gap: 1.5rem;
}

:is(
    .library-page,
    .beta-reading-page,
    .following-page,
    .profile-settings-page,
    .administration-page
) :is(
    .card-heading,
    .section-heading,
    .reading-list-overview-heading,
    .beta-item-heading
) {
    align-items: flex-end;
    gap: 1rem;
}

:is(
    .library-page,
    .beta-reading-page,
    .following-page,
    .profile-settings-page,
    .administration-page
) :is(
    .card-heading,
    .section-heading
) h2 {
    text-wrap: balance;
}

:is(
    .library-page,
    .beta-reading-page,
    .following-page,
    .profile-settings-page,
    .administration-page
) :is(
    .library-list,
    .recommendation-grid,
    .beta-list,
    .following-list,
    .member-list,
    .invitation-list,
    .role-audit-list,
    .contact-admin-list
) {
    gap: 1rem;
}

:is(
    .library-page,
    .beta-reading-page,
    .following-page,
    .profile-settings-page,
    .administration-page
) :is(
    .library-card,
    .recommendation-card,
    .beta-item,
    .following-card,
    .profile-form-section,
    .administration-section,
    .member-item,
    .invitation-item,
    .role-audit-item,
    .contact-admin-card,
    .forum-form-card,
    .forum-category-card,
    .writing-form-panel,
    .writing-card
) {
    border: 1px solid var(--workspace-border);
    border-radius: var(--workspace-radius);
    background: var(--workspace-surface);
    box-shadow: var(--workspace-shadow);
}

:is(
    .library-page,
    .beta-reading-page,
    .following-page,
    .profile-settings-page,
    .administration-page
) :is(
    .library-card,
    .recommendation-card,
    .beta-item,
    .following-card,
    .member-item,
    .invitation-item,
    .role-audit-item,
    .contact-admin-card,
    .writing-card
) {
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

:is(
    .library-page,
    .beta-reading-page,
    .following-page,
    .profile-settings-page,
    .administration-page
) :is(
    .library-card,
    .recommendation-card,
    .beta-item,
    .following-card,
    .member-item,
    .invitation-item,
    .role-audit-item,
    .contact-admin-card,
    .writing-card
):hover {
    border-color: var(--turquoise, #41bbae);
    box-shadow: 0 1.15rem 2.8rem rgb(25 52 49 / 12%);
    transform: translateY(-2px);
}

:is(
    .library-page,
    .beta-reading-page,
    .following-page,
    .profile-settings-page,
    .administration-page
) :is(
    .library-empty,
    .beta-empty,
    .following-empty,
    .empty-state,
    .contact-admin-empty,
    .forum-empty,
    .writing-empty
) {
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px dashed var(--workspace-border);
    border-radius: var(--workspace-radius);
    background: var(--workspace-soft);
    text-align: center;
}

:is(
    .library-page,
    .beta-reading-page,
    .following-page,
    .profile-settings-page,
    .administration-page
) :is(
    .library-message,
    .success-message,
    .form-alert,
    .following-message,
    .profile-message,
    .message,
    .message-success,
    .message-error,
    .action-feedback
) {
    margin: 0;
    padding: 0.85rem 1rem;
    border-radius: var(--workspace-small-radius);
}

:is(
    .library-page,
    .beta-reading-page,
    .following-page,
    .profile-settings-page,
    .administration-page
) :is(
    button,
    .button-link,
    .primary-button,
    .secondary-button,
    .danger-button
) {
    min-height: 2.75rem;
    border-radius: 999px;
    font-weight: 780;
}

:is(
    .library-page,
    .beta-reading-page,
    .following-page,
    .profile-settings-page,
    .administration-page
) :is(
    input,
    select,
    textarea
) {
    border-radius: var(--workspace-small-radius);
}

:is(
    .library-page,
    .beta-reading-page,
    .following-page,
    .profile-settings-page,
    .administration-page
) :is(
    input,
    select,
    textarea,
    button,
    a
):focus-visible {
    outline: 3px solid color-mix(
        in srgb,
        var(--turquoise, #41bbae) 30%,
        transparent
    );
    outline-offset: 2px;
}

/* Onglets d’administration — étape 0050 */

.administration-page .administration-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0;
    padding: 0.45rem;
    border: 1px solid var(--workspace-border);
    border-radius: var(--workspace-radius);
    background: var(--workspace-soft);
}

.administration-page .administration-tabs a {
    flex: 1 1 auto;
    min-height: 2.6rem;
    padding: 0.65rem 0.85rem;
    border-radius: 999px;
    color: var(--muted, #586765);
    background: transparent;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

.administration-page .administration-tabs a:hover,
.administration-page .administration-tabs a:focus-visible {
    color: var(--ink, #18312e);
    background: var(--workspace-surface);
}

.administration-page .administration-tabs a.active {
    color: var(--paper, #ffffff);
    background: var(--turquoise-dark, #167b70);
    box-shadow: 0 0.45rem 1rem rgb(25 52 49 / 14%);
}

.administration-page .section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.administration-page .usable-count {
    flex: 0 0 auto;
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    color: var(--turquoise-dark, #167b70);
    background: var(--workspace-soft);
    font-weight: 780;
}

/* Badges et responsive — étape 0050 */

.badge-catalog-page {
    --workspace-surface: var(--paper, #ffffff);
    --workspace-soft:
        color-mix(
            in srgb,
            var(--turquoise-light, #dff6f2) 46%,
            var(--paper, #ffffff)
        );
    --workspace-border: var(--border, #d7dfdd);
    --workspace-radius: var(--radius, 1.25rem);
    --workspace-shadow:
        0 1rem 2.4rem rgb(25 52 49 / 8%);
    display: grid;
    gap: clamp(1.4rem, 3vw, 2.25rem);
}

.badge-catalog-page .badge-catalog-header {
    padding: clamp(1.25rem, 4vw, 2.5rem);
    border: 1px solid var(--workspace-border);
    border-radius: var(--workspace-radius);
    background:
        linear-gradient(
            135deg,
            var(--workspace-soft),
            var(--workspace-surface) 74%
        );
}

.badge-catalog-page .badge-catalog-header h1 {
    max-width: 48rem;
    text-wrap: balance;
}

.badge-catalog-page .badge-catalog-grid {
    gap: 1rem;
}

.badge-catalog-page .badge-catalog-card {
    border: 1px solid var(--workspace-border);
    border-radius: var(--workspace-radius);
    background: var(--workspace-surface);
    box-shadow: var(--workspace-shadow);
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

.badge-catalog-page .badge-catalog-card:hover {
    border-color: var(--turquoise, #41bbae);
    box-shadow: 0 1.15rem 2.8rem rgb(25 52 49 / 12%);
    transform: translateY(-2px);
}

.badge-catalog-page :is(a, button):focus-visible {
    outline: 3px solid color-mix(
        in srgb,
        var(--turquoise, #41bbae) 30%,
        transparent
    );
    outline-offset: 2px;
}

@media (max-width: 760px) {
    :is(
        .library-page,
        .beta-reading-page,
        .following-page,
        .profile-settings-page,
        .administration-page
    ) .account-introduction::after {
        right: -1rem;
        bottom: -2.5rem;
        font-size: 9rem;
    }

    :is(
        .library-page,
        .beta-reading-page,
        .following-page,
        .profile-settings-page,
        .administration-page
    ) :is(
        .card-heading,
        .section-heading,
        .reading-list-overview-heading,
        .beta-item-heading
    ) {
        align-items: flex-start;
        flex-direction: column;
    }

    .administration-page .administration-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .administration-page .administration-tabs a {
        white-space: normal;
    }

    .administration-page .section-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .administration-page .administration-tabs {
        grid-template-columns: 1fr;
    }

    .badge-catalog-page .badge-catalog-header {
        padding: 1.1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(
        .library-page,
        .beta-reading-page,
        .following-page,
        .profile-settings-page,
        .administration-page
    ) :is(
        .library-card,
        .recommendation-card,
        .beta-item,
        .following-card,
        .member-item,
        .invitation-item,
        .role-audit-item,
        .contact-admin-card,
        .writing-card
    ),
    .badge-catalog-page .badge-catalog-card {
        transition: none;
    }

    :is(
        .library-page,
        .beta-reading-page,
        .following-page,
        .profile-settings-page,
        .administration-page
    ) :is(
        .library-card,
        .recommendation-card,
        .beta-item,
        .following-card,
        .member-item,
        .invitation-item,
        .role-audit-item,
        .contact-admin-card,
        .writing-card
    ):hover,
    .badge-catalog-page .badge-catalog-card:hover {
        transform: none;
    }
}

/* Tableau statistique harmonisé — étape 0051 */

.administration-statistics-page
.administration-section {
    border-color: var(--workspace-border);
    border-radius: var(--workspace-radius);
    background: var(--workspace-surface);
    box-shadow: var(--workspace-shadow);
}

.administration-statistics-page
.administration-statistics-overview {
    background:
        linear-gradient(
            135deg,
            var(--workspace-soft),
            var(--workspace-surface) 68%
        );
}

.administration-statistics-page
.statistics-grid > div {
    border-color: var(--workspace-border);
    border-radius: var(--workspace-small-radius);
    background: var(--workspace-soft);
}

.administration-statistics-page
.statistics-grid-primary > div {
    background: var(--workspace-surface);
    box-shadow: 0 0.65rem 1.6rem rgb(25 52 49 / 7%);
}

.administration-statistics-page
.statistics-periods a {
    border-color:
        color-mix(
            in srgb,
            var(--turquoise, #41bbae) 42%,
            var(--workspace-border)
        );
    background: var(--workspace-surface);
}

.administration-statistics-page
.statistics-periods a:hover,
.administration-statistics-page
.statistics-periods a:focus-visible {
    background: var(--workspace-soft);
}

.administration-statistics-page
.statistics-periods a[aria-current="page"] {
    color: var(--paper, #ffffff);
    background: var(--turquoise-dark, #167b70);
}

.administration-statistics-page
.administration-health {
    border: 1px solid transparent;
}

.administration-statistics-page
.administration-health[data-status="available"] {
    border-color: color-mix(
        in srgb,
        #22815f 25%,
        transparent
    );
}

.administration-statistics-page
.administration-health[data-status="unavailable"] {
    border-color: color-mix(
        in srgb,
        #b4233a 25%,
        transparent
    );
}

.administration-statistics-page
:is(
    .statistics-periods a,
    .administration-health
):focus-visible {
    outline: 3px solid color-mix(
        in srgb,
        var(--turquoise, #41bbae) 30%,
        transparent
    );
    outline-offset: 2px;
}

@media (max-width: 760px) {
    .administration-statistics-page
    .administration-section {
        padding: clamp(1rem, 4vw, 1.35rem);
    }

    .administration-statistics-page
    .usable-count {
        max-width: 100%;
        white-space: normal;
    }
}

@media (max-width: 480px) {
    .administration-statistics-page
    .statistics-grid dd {
        font-size: 1.3rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .administration-statistics-page
    .statistics-periods a {
        transition: none;
    }
}