/* Couche visuelle finale de la console de compte. Elle transpose les memes
   rayons, surfaces, espacements et etats que le theme commun Yapuka. */

:root {
    --yapuka-hub-ink: color-mix(in srgb, var(--yapuka-hub-accent) 15%, #1a1a1a);
    --yapuka-hub-muted: color-mix(in srgb, var(--yapuka-hub-accent) 17%, #777771);
    --yapuka-hub-canvas: color-mix(in srgb, var(--yapuka-hub-accent) 6%, #ffffff);
    --yapuka-hub-line: color-mix(in srgb, var(--yapuka-hub-accent) 17%, #ffffff);
    --yapuka-radius-card: 21px;
    --yapuka-radius-block: 15px;
    --yapuka-radius-menu: 12px;
    --yapuka-radius-control: 11px;
    --yapuka-shadow-card: 0 16px 42px rgba(37, 28, 61, .07);
}

.pf-v5-c-masthead {
    min-height: 78px;
    background: #0d0d0d;
    box-shadow: none;
}

.pf-v5-c-masthead::before {
    height: 5px;
    background: linear-gradient(90deg, #1e3a8a, var(--yapuka-hub-accent), var(--yapuka-hub-accent-soft), #22d3ee);
    box-shadow: 0 2px 18px rgba(var(--yapuka-hub-accent-rgb), .32);
}

.pf-v5-c-page__sidebar,
.pf-v5-c-page__sidebar-body {
    width: 252px;
    background:
        radial-gradient(circle at 20% 0%, rgba(var(--yapuka-hub-accent-rgb), .2), transparent 28%),
        #0d0d0d;
}

.pf-v5-c-nav {
    padding: 18px 13px;
}

.pf-v5-c-nav__item {
    margin: 3px 0;
}

.pf-v5-c-nav__link {
    min-height: 43px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: var(--yapuka-radius-control);
    color: #a7a7a1;
    font-size: 13px;
    font-weight: 600;
}

.pf-v5-c-nav__link:hover,
.pf-v5-c-nav__link:focus-visible {
    background: rgba(255, 255, 255, .045);
    color: #fff;
}

.pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-nav__link[aria-current="page"] {
    border-color: rgba(var(--yapuka-hub-accent-rgb), .32);
    background: linear-gradient(90deg, rgba(var(--yapuka-hub-accent-rgb), .22), rgba(var(--yapuka-hub-accent-rgb), .07));
    color: #fff;
    box-shadow: inset 0 0 25px rgba(var(--yapuka-hub-accent-rgb), .12), 0 0 24px rgba(var(--yapuka-hub-accent-rgb), .12);
}

.pf-v5-c-page__main {
    background:
        radial-gradient(circle at 94% 0%, rgba(var(--yapuka-hub-accent-rgb), .1) 0, transparent 22%),
        var(--yapuka-hub-canvas);
}

.pf-v5-c-page__main-section {
    padding: 40px clamp(28px, 5vw, 76px) 64px;
}

h1,
h2,
h3,
.pf-v5-c-title {
    color: var(--yapuka-hub-ink);
    font-family: "Bricolage Grotesque", Inter, ui-sans-serif, system-ui, sans-serif;
    font-weight: 650;
    letter-spacing: -.035em;
}

.pf-v5-c-card,
.pf-v5-c-data-list,
.pf-v5-c-panel,
.pf-v5-c-modal-box {
    border: 1px solid var(--yapuka-hub-line);
    border-radius: var(--yapuka-radius-card);
    background: var(--yapuka-hub-surface);
    box-shadow: var(--yapuka-shadow-card);
}

.pf-v5-c-form-control,
.pf-v5-c-select__toggle,
.pf-v5-c-menu-toggle,
.pf-v5-c-dropdown__toggle,
.pf-v5-c-text-input-group {
    min-height: 42px;
    border-color: var(--yapuka-hub-line);
    border-radius: var(--yapuka-radius-control);
    background: var(--yapuka-hub-surface);
    color: var(--yapuka-hub-ink);
}

.pf-v5-c-form-control:focus-within,
.pf-v5-c-select__toggle:focus,
.pf-v5-c-menu-toggle:focus-visible,
.pf-v5-c-text-input-group:focus-within {
    border-color: color-mix(in srgb, var(--yapuka-hub-accent) 58%, var(--yapuka-hub-surface));
    outline: 0;
    box-shadow: 0 0 0 3px rgba(var(--yapuka-hub-accent-rgb), .14);
}

body .pf-v5-c-button {
    border-radius: var(--yapuka-radius-control);
    font-weight: 700;
}

body .pf-v5-c-button.pf-m-primary {
    border: 1px solid var(--yapuka-hub-accent);
    background: var(--yapuka-hub-accent);
    box-shadow: 0 7px 20px rgba(var(--yapuka-hub-accent-rgb), .2);
}

body .pf-v5-c-button.pf-m-primary:hover,
body .pf-v5-c-button.pf-m-primary:focus-visible {
    border-color: #1d4ed8;
    background: #1d4ed8;
    box-shadow: 0 10px 25px rgba(var(--yapuka-hub-accent-rgb), .28);
}

.pf-v5-c-alert {
    border-radius: var(--yapuka-radius-control);
}

.pf-v5-c-menu,
.pf-v5-c-dropdown__menu {
    border: 1px solid var(--yapuka-hub-line);
    border-radius: var(--yapuka-radius-menu);
    background: var(--yapuka-hub-surface);
    box-shadow: var(--yapuka-shadow-card);
}

@media (max-width: 768px) {
    .pf-v5-c-page__main-section { padding: 28px 20px 48px; }
    .pf-v5-c-masthead { min-height: 68px; }
}