:root {
    --vira-accent: #46e39a;
    --vira-accent-2: #2fc985;
    --vira-ink: #0b0d0c;
    --vira-ink-2: #121512;
    --vira-border: #e7e7ea;
    --vira-radius: 0.75rem;
}

.vira-preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--vira-ink);
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease, visibility 0s linear 0s;
}

.vira-preloader.is-hidden {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
    pointer-events: none;
}

.vira-preloader-logo {
    width: 84px;
    filter: drop-shadow(0 0 30px rgba(70, 227, 154, 0.4));
    animation: vira-preloader-pulse 1.4s ease-in-out infinite;
}

@keyframes vira-preloader-pulse {
    0%, 100% { opacity: 0.55; transform: scale(0.92); }
    50% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .vira-preloader-logo {
        animation: none;
    }
}

body {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: #f4f5f4;
    color: #1a1c1b;
}

body:has(.vira-public),
html:has(.vira-public) {
    background-color: var(--vira-ink);
}

a {
    color: var(--vira-accent-2);
}

.vira-logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: #000;
    color: var(--vira-accent);
    font-weight: 900;
    font-size: 1.05rem;
    border: 1px solid rgba(70, 227, 154, 0.4);
    box-shadow: 0 0 0 4px rgba(70, 227, 154, 0.08);
}

.vira-logo-img {
    height: 1.75rem;
    width: auto;
    flex-shrink: 0;
}

.vira-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #f4f5f4;
    color: #1a1c1b;
    border: 1px solid var(--vira-border);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.vira-social-btn:hover {
    background: var(--vira-accent);
    color: #06110b;
    transform: translateY(-2px);
}

/* ---- Admin app shell ---- */
.vira-app {
    min-height: 100vh;
}

.vira-sidebar {
    width: 250px;
    flex-shrink: 0;
    background: linear-gradient(180deg, var(--vira-ink) 0%, var(--vira-ink-2) 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.vira-brand {
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.vira-nav-link {
    border-radius: 0.5rem;
    padding: 0.55rem 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.vira-nav-link i {
    width: 1.25rem;
    display: inline-block;
    text-align: center;
    margin-right: 0.25rem;
}

.vira-nav-link:hover {
    background-color: rgba(255, 255, 255, 0.07);
    color: #fff;
}

.vira-nav-link.active {
    background-color: var(--vira-accent);
    color: #06110b;
    font-weight: 600;
    box-shadow: 0 2px 14px rgba(70, 227, 154, 0.35);
}

.vira-theme-toggle {
    display: flex;
    gap: 0.25rem;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 0.6rem;
    padding: 0.25rem;
}

.vira-theme-toggle-btn {
    flex: 1;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.78rem;
    font-weight: 500;
    border-radius: 0.4rem;
    padding: 0.4rem 0.5rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.vira-theme-toggle-btn:hover {
    color: #fff;
}

.vira-theme-toggle-btn.is-active {
    background-color: var(--vira-accent);
    color: #06110b;
}

.vira-topbar {
    background-color: #ffffff !important;
    border-bottom: 1px solid var(--vira-border);
}

html[data-bs-theme="light"] .vira-topbar .btn-outline-light {
    --bs-btn-color: #1a1c1b;
    --bs-btn-border-color: var(--vira-border);
    --bs-btn-hover-bg: #f4f5f4;
    --bs-btn-hover-color: #1a1c1b;
    --bs-btn-hover-border-color: var(--vira-border);
}

.vira-content {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
}

.vira-sidebar-backdrop {
    display: none;
}

/* Bootstrap centers modals against the full browser viewport, oblivious to the 250px sidebar
   that sits to the left of the actual content on desktop - so every modal (task, absence,
   account creation...) visually reads as shifted left of the content area it belongs to.
   Inset the modal's own box by the sidebar's width so it centers within the visible content
   instead. Only applies at/above the breakpoint where the sidebar stops being off-canvas. */
@media (min-width: 768px) {
    #formModal,
    #confirmDeleteModal {
        padding-left: 250px;
    }
}

/* ---- Responsive sidebar (off-canvas below md) ---- */
@media (max-width: 767.98px) {
    .vira-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        z-index: 1045;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        overflow-y: auto;
    }

    .vira-sidebar.is-open {
        transform: translateX(0);
    }

    .vira-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1040;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }

    .vira-sidebar-backdrop.is-open {
        opacity: 1;
        pointer-events: auto;
    }
}

/* ---- Cards & tables ---- */
.card {
    border: 1px solid var(--vira-border);
    border-radius: var(--vira-radius);
    box-shadow: 0 1px 2px rgba(10, 15, 12, 0.04);
}

/* Every modal form (task, absence, meeting, account...) wraps its fields in a .card meant
   for full-page display. Inside #formModal that .card nests its own border/shadow inside the
   modal's, producing a "box within a box" look - flatten it so the modal chrome is the only border. */
#formModal .card {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.card-header {
    background-color: #fafbfa;
    font-weight: 600;
    border-bottom: 1px solid var(--vira-border);
}

.table thead.table-light th {
    background-color: #fafbfa;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.72rem;
    color: #6b706c;
    border-bottom-width: 1px;
}

.table-hover > tbody > tr:hover > * {
    background-color: #f2fbf7;
}

/* ---- Admin dark theme (opt-in via the sidebar toggle, stored in localStorage) ----
   Bootstrap 5.3's own [data-bs-theme=dark] already re-themes most component internals
   (table rows, form controls, dropdowns, modals); these overrides only patch the
   admin-specific rules above that hardcode light colors and would otherwise ignore it. */
html[data-bs-theme="dark"] .vira-topbar {
    background-color: var(--vira-ink-2) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

html[data-bs-theme="dark"] .vira-main {
    background-color: var(--vira-ink);
}

html[data-bs-theme="dark"] .vira-content {
    background-color: var(--vira-ink);
    color: rgba(255, 255, 255, 0.85);
}

html[data-bs-theme="dark"] .card {
    border-color: rgba(255, 255, 255, 0.08);
}

html[data-bs-theme="dark"] .card-header {
    background-color: rgba(255, 255, 255, 0.03);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

html[data-bs-theme="dark"] .table thead.table-light th {
    background-color: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.55);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

html[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * {
    background-color: rgba(70, 227, 154, 0.08);
}

html[data-bs-theme="dark"] .btn-dark {
    --bs-btn-bg: var(--vira-accent);
    --bs-btn-border-color: var(--vira-accent);
    --bs-btn-color: #06110b;
}

html[data-bs-theme="dark"] .btn-outline-dark {
    --bs-btn-color: rgba(255, 255, 255, 0.75);
    --bs-btn-border-color: rgba(255, 255, 255, 0.25);
    --bs-btn-hover-color: #06110b;
    --bs-btn-hover-bg: var(--vira-accent);
    --bs-btn-hover-border-color: var(--vira-accent);
    --bs-btn-active-color: #06110b;
    --bs-btn-active-bg: var(--vira-accent-2);
    --bs-btn-active-border-color: var(--vira-accent-2);
    --bs-btn-disabled-color: rgba(255, 255, 255, 0.35);
    --bs-btn-disabled-border-color: rgba(255, 255, 255, 0.15);
}

html[data-bs-theme="dark"] .vira-day-cell:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

html[data-bs-theme="dark"] .card.vira-day-cell-clickable:hover {
    border-color: rgba(255, 255, 255, 0.25);
}

/* .bg-white / .bg-light / .border-dark are plain Bootstrap utility classes (not
   theme-reactive component variables), so the calendar day cells that use them
   directly stay hardcoded light unless patched here. */
html[data-bs-theme="dark"] .vira-day-cell.bg-white {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-bs-theme="dark"] .vira-day-cell.bg-light {
    background-color: rgba(255, 255, 255, 0.015) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

html[data-bs-theme="dark"] .vira-content .border-dark {
    border-color: var(--vira-accent) !important;
}

html[data-bs-theme="dark"] .list-group-item.bg-light {
    background-color: rgba(70, 227, 154, 0.08) !important;
}

html[data-bs-theme="dark"] .card-footer.bg-white {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

/* ---- Dashboard KPI cards ---- */
.vira-kpi-card {
    border-top: 3px solid var(--vira-accent);
}

.vira-kpi-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(70, 227, 154, 0.12);
    color: var(--vira-accent-2);
    font-size: 1.15rem;
}

html[data-bs-theme="dark"] .vira-kpi-icon {
    color: var(--vira-accent);
}

.vira-kpi-value {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
}

/* ---- Tasks (Kanban) ---- */
.vira-task-column {
    min-height: 120px;
    max-height: 60vh;
    overflow-y: auto;
}

.vira-task-card {
    border-left: 3px solid var(--vira-accent);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.vira-task-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(10, 15, 12, 0.08);
}

html[data-bs-theme="dark"] .vira-task-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.vira-task-updates {
    max-height: 260px;
    overflow-y: auto;
}

.badge.text-bg-success {
    background-color: var(--vira-accent) !important;
    color: #06110b !important;
}

/* ---- Buttons ---- */
.btn-dark {
    --bs-btn-bg: var(--vira-ink);
    --bs-btn-border-color: var(--vira-ink);
    --bs-btn-hover-bg: var(--vira-accent);
    --bs-btn-hover-border-color: var(--vira-accent);
    --bs-btn-hover-color: #06110b;
    --bs-btn-active-bg: var(--vira-accent-2);
    --bs-btn-active-border-color: var(--vira-accent-2);
}

/* Admin: primary buttons rest in the brand green instead of black (public site keeps black at rest). */
.vira-app .btn-dark {
    --bs-btn-bg: var(--vira-accent);
    --bs-btn-border-color: var(--vira-accent);
    --bs-btn-color: #06110b;
    --bs-btn-hover-bg: var(--vira-accent-2);
    --bs-btn-hover-border-color: var(--vira-accent-2);
    --bs-btn-hover-color: #06110b;
    --bs-btn-active-bg: var(--vira-accent-2);
    --bs-btn-active-border-color: var(--vira-accent-2);
}

.btn {
    border-radius: 0.55rem;
    font-weight: 500;
}

/* The "create account" form pairs password + confirmation via Symfony's RepeatedType,
   which Symfony renders as a <fieldset>/<legend> instead of the plain <div> used by every
   other field in the admin - the only such field in the whole admin. Normalize it so it
   stacks like every other row instead of following the browser/Bootstrap fieldset defaults. */
.vira-app fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.vira-app legend {
    float: none;
    width: auto;
}

/* Browsers paint their own background (yellow in light mode, blue-grey in dark mode) behind
   autofilled fields (e.g. email/password on "Créer un compte"), ignoring the form-control's
   own background. Neutralize it so autofilled fields blend in like any other field. */
.vira-app .form-control:-webkit-autofill,
.vira-app .form-control:-webkit-autofill:hover,
.vira-app .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--bs-body-color);
    -webkit-box-shadow: 0 0 0 1000px var(--bs-body-bg) inset;
    box-shadow: 0 0 0 1000px var(--bs-body-bg) inset;
    transition: background-color 9999s ease-in-out 0s;
}

/* ---- Public site — floating glass navbar ---- */
/* The wrapper takes no layout height, so it never pushes the hero
   below it down — the hero's own background is what shows through,
   right up to the very top, behind the (transparent) navbar. */
.vira-nav-sticky {
    position: sticky;
    top: 0;
    z-index: 1030;
    height: 0;
    overflow: visible;
    background: none;
}

nav.vira-floating-nav {
    /* transform instead of margin-top: a margin here would collapse with
       the zero-height .vira-nav-sticky parent and leak a gap above it,
       at the very top of the page. */
    transform: translateY(1rem);
    background-color: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    /* the element+class selector (vs. plain .vira-floating-nav) is required here:
       Bootstrap's own .navbar rule also sets the padding shorthand (to 0 horizontally)
       with equal class specificity, and AssetMapper emits app.css before bootstrap's
       CSS, so a same-specificity selector here would lose the cascade to Bootstrap. */
    padding: 0.6rem 1.25rem;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.vira-floating-nav.is-scrolled {
    background-color: rgba(9, 11, 10, 0.55);
    border-color: rgba(70, 227, 154, 0.25);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.vira-floating-nav .nav-link {
    position: relative;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 500;
    letter-spacing: 0.01em;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    transition: color 0.15s ease;
}

.vira-floating-nav .nav-link::after {
    content: '';
    position: absolute;
    left: 0.05rem;
    right: 0.05rem;
    bottom: 0.15rem;
    height: 2px;
    background: var(--vira-accent);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.vira-floating-nav .nav-link:hover {
    color: #fff;
}

.vira-floating-nav .nav-link:hover::after,
.vira-floating-nav .nav-link.active::after {
    transform: scaleX(1);
}

.vira-floating-nav .nav-link.active {
    color: #fff;
}

.vira-floating-nav .btn-outline-light {
    --bs-btn-border-color: rgba(255, 255, 255, 0.25);
    --bs-btn-hover-bg: var(--vira-accent);
    --bs-btn-hover-border-color: var(--vira-accent);
    --bs-btn-hover-color: #06110b;
}

.vira-floating-nav .dropdown-toggle {
    --bs-btn-color: var(--vira-accent);
}

/* Locale switcher: dark dropdown to match the glass navbar, instead of
   Bootstrap's default white menu / blue ".active" highlight. */
.vira-floating-nav .dropdown-menu {
    background-color: var(--vira-ink);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.vira-floating-nav .dropdown-item {
    color: rgba(255, 255, 255, 0.75);
}

.vira-floating-nav .dropdown-item:hover,
.vira-floating-nav .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.vira-floating-nav .dropdown-item.active,
.vira-floating-nav .dropdown-item:active {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--vira-accent);
    font-weight: 600;
}

@media (max-width: 767.98px) {
    nav.vira-floating-nav {
        border-radius: 1.25rem;
    }

    /* The pill's default background is only ~8% opaque, which is fine for a
       slim bar but leaves the open mobile menu almost unreadable over the
       hero title/buttons behind it — force it opaque while expanded. */
    .vira-floating-nav:has(.navbar-collapse.show) {
        background-color: rgba(9, 11, 10, 0.92);
    }

    .vira-floating-nav .navbar-collapse {
        margin-top: 0.75rem;
    }

    .vira-floating-nav .nav-link::after {
        display: none;
    }
}

.vira-footer {
    background-color: var(--vira-ink) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ---- Hero ---- */
.vira-hero {
    position: relative;
    overflow: hidden;
    background-color: var(--vira-ink);
    background-image:
        linear-gradient(135deg, rgba(70, 227, 154, 0.14) 0%, transparent 45%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 90px),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 90px);
}

div.vira-hero-logo-wrap {
    /* element+class specificity: the sibling rule ".vira-hero > *" (position: relative;
       z-index: 1) has the same specificity as a plain class selector and comes later in
       this file, so it would otherwise win the cascade and break the absolute positioning
       below. It also puts this wrapper at the same z-index as the (later, so higher-
       painted) text column, whose transparent overflow was silently swallowing pointer
       events meant for the logo underneath it — hence the explicit higher z-index. */
    position: absolute;
    top: 50%;
    right: 6%;
    width: min(26vw, 380px);
    transform: translateY(-50%);
    perspective: 1200px;
    z-index: 2;
}

@media (max-width: 991.98px) {
    div.vira-hero-logo-wrap {
        display: none;
    }
}

.vira-hero-logo-3d {
    position: relative;
    width: 100%;
    aspect-ratio: 841.18 / 611.88;
    transform-style: preserve-3d;
    transform: rotateY(-12deg) rotateX(6deg);
    transition: transform 0.15s ease-out;
    cursor: grab;
}

/* Stacked copies of the same flat mark, offset along Z and darkened with depth,
   fake a solid extruded block so rotation reveals real parallax between the
   "front face" and "sides" instead of a single plane spinning in place. */
.vira-hero-logo-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.vira-hero-logo-layer:nth-child(1) { transform: translateZ(-18px); filter: brightness(0.15); }
.vira-hero-logo-layer:nth-child(2) { transform: translateZ(-15px); filter: brightness(0.25); }
.vira-hero-logo-layer:nth-child(3) { transform: translateZ(-12px); filter: brightness(0.35); }
.vira-hero-logo-layer:nth-child(4) { transform: translateZ(-9px); filter: brightness(0.45); }
.vira-hero-logo-layer:nth-child(5) { transform: translateZ(-6px); filter: brightness(0.6); }
.vira-hero-logo-layer:nth-child(6) { transform: translateZ(-3px); filter: brightness(0.8); }

.vira-hero-logo-front {
    filter: drop-shadow(0 0 40px rgba(70, 227, 154, 0.3));
}

@media (prefers-reduced-motion: reduce) {
    .vira-hero-logo-3d {
        transition: none;
    }
}

.vira-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 600;
}

.vira-hero-title {
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 1.02;
    font-size: clamp(2.6rem, 6vw, 5rem);
    color: #fff;
}

.vira-hero-title .vira-accent-text {
    color: var(--vira-accent);
}

.vira-ticker {
    background-color: var(--vira-accent);
    color: #06110b;
    overflow: hidden;
    white-space: nowrap;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.85rem;
}

.vira-ticker-track {
    display: flex;
    width: max-content;
    animation: vira-marquee 22s linear infinite;
}

.vira-ticker-content {
    display: inline-block;
    white-space: nowrap;
}

@keyframes vira-marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .vira-ticker-track {
        animation: none;
    }
}

/* ---- Login ---- */
body:has(.vira-login) {
    background: radial-gradient(circle at top, var(--vira-ink-2) 0%, var(--vira-ink) 60%);
}

.vira-login .card {
    border: 1px solid rgba(70, 227, 154, 0.15);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

/* ---- Calendar ---- */
.vira-day-cell {
    min-height: 92px;
    transition: background-color 0.15s ease;
}

.vira-day-cell:hover {
    background-color: #fafbfa !important;
}

.vira-day-cell-clickable,
.card.vira-day-cell-clickable {
    cursor: pointer;
}

.card.vira-day-cell-clickable:hover {
    border-color: rgba(0, 0, 0, 0.3);
}

/* ---- Notification bell ---- */
[data-controller="notification-bell"] .badge {
    font-size: 0.6rem;
}

/* ---- Scroll reveal ---- */
.vira-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.vira-reveal.is-visible {
    opacity: 1;
    transform: none;
}

.vira-reveal-delay-1.is-visible { transition-delay: 0.08s; }
.vira-reveal-delay-2.is-visible { transition-delay: 0.16s; }
.vira-reveal-delay-3.is-visible { transition-delay: 0.24s; }
.vira-reveal-delay-4.is-visible { transition-delay: 0.32s; }
.vira-reveal-delay-5.is-visible { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
    .vira-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ---- Public content sections ---- */
.vira-section-title {
    font-weight: 800;
    letter-spacing: -0.01em;
}

.vira-hover-card {
    border-top: 3px solid var(--vira-accent) !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}

.vira-hover-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(10, 15, 12, 0.1);
    border-color: rgba(70, 227, 154, 0.4);
}

.vira-avatar-ring {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(70, 227, 154, 0.15), rgba(70, 227, 154, 0.02));
    border: 1px solid rgba(70, 227, 154, 0.35);
}

.vira-btn-glow {
    position: relative;
    overflow: hidden;
}

.vira-btn-glow:hover {
    box-shadow: 0 0 0 4px rgba(70, 227, 154, 0.18);
}

/* ---- Sponsoring ---- */
.vira-sponsor-tile {
    background: #fff;
    border: 1px solid var(--vira-border);
    border-top: 3px solid var(--vira-accent);
    border-radius: var(--vira-radius);
    padding: 1.75rem 1rem;
    text-align: center;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}

.vira-sponsor-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(10, 15, 12, 0.08);
    border-color: rgba(70, 227, 154, 0.4);
}

.vira-cta-band,
.vira-cta-band-accent {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-color: var(--vira-ink);
    background-image:
        linear-gradient(135deg, rgba(70, 227, 154, 0.14) 0%, transparent 45%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 90px),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 90px);
    border-radius: 1rem;
    color: #fff;
}

.vira-cta-band::after,
.vira-cta-band-accent::after {
    content: '';
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle at 30% 30%, rgba(70, 227, 154, 0.16), transparent 60%);
    animation: vira-hero-pulse 9s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

.vira-cta-band-accent h2,
.vira-cta-band-accent p {
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .vira-cta-band::after,
    .vira-cta-band-accent::after {
        animation: none;
    }
}

/* ---- Accent card (dark, like the rest of the site, with a mint frame) ---- */
.vira-public .card.vira-accent-card {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(70, 227, 154, 0.35);
    border-top: 3px solid var(--vira-accent);
    border-radius: 1rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.vira-public .card.vira-accent-card .form-control,
.vira-public .card.vira-accent-card .form-select {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0.6rem;
    color: #fff;
    padding: 0.6rem 0.85rem;
}

.vira-public .card.vira-accent-card .form-control:focus,
.vira-public .card.vira-accent-card .form-select:focus {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--vira-accent);
    color: #fff;
    box-shadow: 0 0 0 0.2rem rgba(70, 227, 154, 0.2);
}

/* The native options list always opens with the browser's own (usually
   white) background, so the option text must stay dark or it becomes
   invisible white-on-white. The closed <select> control itself keeps
   its white text from the rule above. */
.vira-public .card.vira-accent-card .form-select option {
    color: #1a1c1b;
    background-color: #fff;
}

.vira-public .card.vira-accent-card .form-control::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.vira-public .card.vira-accent-card .btn-dark {
    --bs-btn-bg: var(--vira-accent);
    --bs-btn-border-color: var(--vira-accent);
    --bs-btn-color: #06110b;
    --bs-btn-hover-bg: var(--vira-accent-2);
    --bs-btn-hover-border-color: var(--vira-accent-2);
    --bs-btn-hover-color: #06110b;
    font-weight: 600;
}

/* ---- Hero entrance animation (plays on load, above the fold) ---- */
.vira-hero-in {
    animation: vira-hero-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.vira-hero-in-delay-1 { animation-delay: 0.1s; }
.vira-hero-in-delay-2 { animation-delay: 0.2s; }
.vira-hero-in-delay-3 { animation-delay: 0.3s; }

@keyframes vira-hero-in {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .vira-hero-in {
        animation: none;
    }
}

/* ---- Responsive hero tuning ---- */
@media (max-width: 575.98px) {
    .vira-hero-title {
        font-size: clamp(2.1rem, 9vw, 3rem);
    }

    .vira-eyebrow {
        letter-spacing: 0.12em;
    }
}

/* ---- Hero ambient glow animation ---- */
.vira-hero {
    isolation: isolate;
}

.vira-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(70, 227, 154, 0.16), transparent 55%);
    animation: vira-hero-pulse 9s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

.vira-hero > * {
    position: relative;
    z-index: 1;
}

@keyframes vira-hero-pulse {
    0%, 100% { transform: scale(1) translate(0, 0); opacity: 0.75; }
    50% { transform: scale(1.18) translate(2%, -2%); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .vira-hero::after {
        animation: none;
    }
}

/* ==========================================================
   Public site — dark theme (no more stark white sections)
   ========================================================== */
.vira-public {
    background-color: var(--vira-ink);
    color: rgba(255, 255, 255, 0.85);
}

.vira-public h1, .vira-public h2, .vira-public h3, .vira-public h4, .vira-public h5, .vira-public h6 {
    color: #fff;
}

.vira-public .text-muted {
    color: rgba(255, 255, 255, 0.55) !important;
}

.vira-public a:not(.btn):not(.navbar-brand):not(.vira-social-btn):not(.nav-link) {
    color: var(--vira-accent);
}

.vira-section-alt {
    background-color: var(--vira-ink-2);
}

.vira-public .card {
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
}

.vira-public .badge.text-bg-light {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.75) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.vira-public .vira-hover-card:hover {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.vira-public .vira-sponsor-tile {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 3px solid var(--vira-accent);
}

.vira-public .vira-sponsor-tile:hover {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.vira-public .vira-social-btn {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.14);
}

.vira-public .form-control,
.vira-public .form-select {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.vira-public .form-control:focus,
.vira-public .form-select:focus {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: var(--vira-accent);
    color: #fff;
    box-shadow: 0 0 0 0.2rem rgba(70, 227, 154, 0.15);
}

.vira-public .form-control::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.vira-public .form-label {
    color: rgba(255, 255, 255, 0.75);
}

.vira-public .form-select option {
    color: #1a1c1b;
    background-color: #fff;
}

.vira-empty-card {
    border-style: dashed !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    background-color: rgba(255, 255, 255, 0.02) !important;
}

/* ---- About / structure section ---- */
.vira-stat-value {
    font-weight: 900;
    font-size: clamp(2rem, 4vw, 2.75rem);
    color: var(--vira-accent);
    line-height: 1;
}

.vira-stat-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
}

/* ---- Game showcase cards ---- */
.vira-game-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 3px solid var(--vira-accent);
    border-radius: var(--vira-radius);
    padding: 2rem 1.5rem;
    height: 100%;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, background-color 0.25s ease;
}

.vira-game-card:hover {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.vira-game-card i {
    font-size: 2.2rem;
    color: var(--vira-accent);
}

/* Real game logos in the "Nos jeux" cards: Fortnite's mark recolors like every other icon
   (inline SVG, currentColor); Rocket League only exists as a fixed-color wordmark, so its
   slot is wider/shorter instead of square to fit a logo rather than an icon. */
.vira-game-logo-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.2rem;
}

.vira-game-logo-slot svg {
    height: 100%;
    width: auto;
    color: var(--vira-accent);
}

.vira-game-logo-slot-wide {
    height: 1.8rem;
}

.vira-game-logo-slot-wide img {
    height: 100%;
    width: auto;
    max-width: 100%;
}

/* ---- Roster game picker (Effectif page) ---- */
.vira-game-cover {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    isolation: isolate;
    aspect-ratio: 3 / 5;
    border-radius: 0;
    overflow: hidden;
    text-decoration: none;
    background-size: cover;
    background-position: center;
    /* Outline instead of a real border: a border painted on top of the
       scaled/clipped photo layer underneath produces a faint rainbow fringe
       at the edge (anti-aliasing mismatch), and an inset box-shadow gets
       painted *under* the absolutely-positioned photo/tint/vignette layers
       and disappears entirely. A zero-offset outline sits just outside the
       border-box — the one spot this element's own overflow: hidden can't
       clip (a negative offset pulls it back inside and it gets clipped too). */
    outline: 2px solid rgba(255, 255, 255, 0.1);
    outline-offset: 0;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), outline-color 0.3s ease, box-shadow 0.3s ease;
}

.vira-game-cover::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    transform: scale(1.04);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 0;
}

.vira-game-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 10, 8, 0.85) 0%, rgba(6, 10, 8, 0.15) 35%, rgba(6, 10, 8, 0.15) 65%, rgba(6, 10, 8, 0.85) 100%);
    z-index: 2;
}

/* Separate real element (not baked into the background-image) so its
   opacity can be faded independently on hover, revealing the photo
   underneath — the vignette above it stays put for text legibility. */
.vira-game-cover-tint {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(160deg, rgba(34, 92, 65, 0.88) 0%, rgba(6, 10, 8, 0.94) 100%);
    mix-blend-mode: multiply;
    transition: opacity 0.35s ease;
}

.vira-game-cover:hover,
.vira-game-cover:focus-visible {
    transform: translateY(-6px);
    outline-color: var(--vira-accent);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.vira-game-cover:hover::before {
    transform: scale(1.12);
}

.vira-game-cover:hover .vira-game-cover-tint,
.vira-game-cover:focus-visible .vira-game-cover-tint {
    opacity: 0.3;
}

.vira-game-cover-overlay {
    position: relative;
    z-index: 3;
    text-align: center;
    width: 100%;
    padding: 1.5rem 0.75rem 0;
}

.vira-game-cover-logo {
    height: 2.25rem;
    width: auto;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
}

.vira-game-cover-badge {
    position: absolute;
    left: 0.75rem;
    bottom: 0.75rem;
    z-index: 3;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #06110b;
    background: var(--vira-accent);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

@media (max-width: 767.98px) {
    .vira-game-cover {
        aspect-ratio: 1 / 1;
    }
}

/* Cover art per game — plain photo; the shared green grading lives in
   .vira-game-cover-tint above so it can fade independently on hover. */
.vira-game-cover-staff { background-image: url('/images/staff.jpg'); }
.vira-game-cover-fortnite { background-image: url('/images/fortnite.jpg'); }
.vira-game-cover-rocket-league { background-image: url('/images/rl.jpg'); }

/* Softer variants reused as the team page hero background */
.vira-game-cover-staff-bg,
.vira-game-cover-fortnite-bg,
.vira-game-cover-rocket-league-bg {
    background-image: radial-gradient(circle at 20% 0%, rgba(70, 227, 154, 0.16), transparent 55%), var(--vira-ink);
}

@media (prefers-reduced-motion: reduce) {
    .vira-game-cover,
    .vira-game-cover::before {
        transition: none;
    }
}