/* ─── Design System Variables — spec 49 volet B (dark/light auto) ─── */

/* Light mode (default) — beige chaud, identite RFRO bleue */
:root {
    --rm-bg: #f5f4f0;
    --rm-primary: #2563eb;          /* bleu RFRO (remplace violet #534AB7) */
    --rm-primary-light: #dbeafe;
    --rm-primary-dark: #1d4ed8;
    --rm-success: #1D9E75;
    --rm-success-light: #E1F5EE;
    --rm-info: #378ADD;
    --rm-info-light: #E6F1FB;
    --rm-danger: #e74c3c;
    --rm-danger-light: #fdecea;
    --rm-warning: #e67e22;
    --rm-warning-light: #fef5e7;
    --rm-text: #1a1a1a;
    --rm-text-muted: #6b7280;
    --rm-text-light: #999;
    --rm-border: #e0ddd5;
    --rm-border-light: #f0ede8;
    --rm-card-bg: #fff;
    --rm-card-bg-subtle: #f8f9fa;
    --rm-card-bg-dim: #fafbfc;
    --rm-card-radius: 12px;
    --rm-pill-radius: 20px;

    /* ─── Spec 61 : tokens card layout / typo / grid ─── */
    --rm-card-padding-desktop:   1.5rem;       /* 24px : desktop >= 992 px (breathing room BR-10) */
    --rm-card-padding-mobile:    1rem;         /* 16px : < 576 px */
    --rm-card-gap-zones:         0.875rem;     /* 14px : espace vertical entre zones (remplace border-top internes) */
    --rm-card-title-size:        1.0625rem;    /* 17px : titre card liste desktop */
    --rm-card-title-size-mobile: 1rem;         /* 16px : titre card mobile (< 576 px) */
    --rm-card-title-weight:      700;
    --rm-card-title-lineheight:  1.3;
    --rm-card-label-size:        0.75rem;      /* 12px : micro-label "NEXT ROUND", caps, tracking 0.05em */
    --rm-card-body-size:         0.875rem;     /* 14px : corps secondaire (track, date, meta) */
    --rm-card-footer-size:       0.8125rem;    /* 13px : footer stats (N entries, teams engaged) */
    --rm-card-stat-size:         0.9375rem;    /* 15px : chiffres mis en avant (X / Y closed) */
    --rm-grid-gap-desktop:       1.25rem;      /* 20px : gap grille cards desktop */
    --rm-grid-gap-mobile:        0.75rem;      /* 12px : gap grille cards mobile */
    --rm-page-max-width: 1280px;
    --rm-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --rm-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, "JetBrains Mono", monospace;

    /* ─── Spec 57 : tokens podium & navbar (invariants light/dark) ───
       Les couleurs metalliques (or, argent, bronze, platine) restent identiques
       en light et dark mode par design (evoquent les medailles reelles).
       Navbar cockpit : dark signature racing quelle que soit la preference OS. */
    --rm-gold:        #fbbf24;
    --rm-silver:      #94a3b8;
    --rm-bronze:      #cd7f32;
    --rm-platinum:    #c0c0c0;

    --rm-gradient-gold:     linear-gradient(135deg, #ffd700 0%, #daa520 50%, #ffd700 100%);
    --rm-gradient-silver:   linear-gradient(135deg, #c0c0c0 0%, #a8a8a8 50%, #c0c0c0 100%);
    --rm-gradient-bronze:   linear-gradient(135deg, #cd7f32 0%, #b8860b 50%, #cd7f32 100%);
    --rm-gradient-platinum: linear-gradient(135deg, #e5e4e2 0%, #c0c0c0 50%, #e5e4e2 100%);
    --rm-gradient-podium:   linear-gradient(180deg, #fbbf24 0%, #f97316 100%);

    --rm-accent-orange: #f97316;
    /* Spec 61 BR-9 : teinte orange plus claire pour dark mode (>=4.5:1 sur --rm-card-bg dark #252830). */
    --rm-accent-orange-light: #fb923c;
    /* Spec 61 BR-9 : teinte orange plus foncee pour texte sur fond clair (tag teams light mode).
       #f97316 sur #fff = 2.97:1 (echec WCAG AA). #c2410c sur #fff = 5.13:1 (AA compliant). */
    --rm-accent-orange-text: #c2410c;
    /* Spec 61 BR-11 : teinte verte pour texte sur fond --rm-success-light (pill next-start).
       --rm-success (#1D9E75) sur #E1F5EE = 3.1:1 (echec AA). #065f46 sur #E1F5EE = 6.2:1 (AA). */
    --rm-success-text: #065f46;
    --rm-navbar-bg:     linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);

    /* Override des variables internes Bootstrap pour qu'elles suivent
       automatiquement notre theme (light OU dark). Ainsi chaque composant
       Bootstrap (tables, forms, cards, badges, etc.) herite de la bonne
       couleur sans override specifique par classe. */
    --bs-body-color:        var(--rm-text);
    --bs-body-bg:           var(--rm-bg);
    --bs-border-color:      var(--rm-border);
    --bs-table-color:       var(--rm-text);
    --bs-table-bg:          transparent;
    --bs-table-border-color:var(--rm-border);
    --bs-table-hover-bg:    var(--rm-card-bg-subtle);
    --bs-table-hover-color: var(--rm-text);
    --bs-table-striped-bg:  var(--rm-card-bg-dim);
    --bs-table-striped-color:var(--rm-text);
    --bs-card-bg:           var(--rm-card-bg);
    --bs-card-border-color: var(--rm-border);
    --bs-link-color:        var(--rm-primary);
    --bs-link-hover-color:  var(--rm-primary-dark);
    --bs-secondary-color:   var(--rm-text-muted);
    --bs-tertiary-color:    var(--rm-text-light);
    --bs-tertiary-bg:       var(--rm-card-bg-subtle);
}

/* Dark mode "Dusk" — auto systeme, zero JS. Ambiance cockpit racing. */
@media (prefers-color-scheme: dark) {
    :root {
        --rm-bg: #1c1f26;
        --rm-primary: #3b82f6;       /* bleu RFRO legerement plus clair pour contraste */
        --rm-primary-light: #1e2a4a;
        --rm-primary-dark: #2563eb;
        --rm-success-light: #0f2922;
        --rm-info-light: #162236;
        --rm-danger-light: #2d1515;
        --rm-warning-light: #2d1f0e;
        --rm-text: #e8e6e3;
        --rm-text-muted: #8891a0;
        --rm-text-light: #6b7280;
        --rm-border: #333845;
        --rm-border-light: #2a2e38;
        --rm-card-bg: #252830;
        --rm-card-bg-subtle: #2a2e38;
        --rm-card-bg-dim: #22252c;
        /* Spec 61 BR-11 : texte vert clair pour pill next-start sur fond success-light dark (#0f2922).
           #6ee7b7 (emerald-300) sur #0f2922 = ~11.5:1 (AAA). */
        --rm-success-text: #6ee7b7;
    }

    /* ─── Bootstrap overrides specifiques au dark mode ───
       La plupart des overrides texte/table/card sont desormais geres par les
       variables --bs-* dans :root qui pointent vers var(--rm-*). Seuls les
       elements qui n'honorent PAS les --bs-* necessitent un override ici. */

    /* Forms — Bootstrap ne lit pas --bs-body-bg pour les champs */
    .form-control, .form-select {
        background-color: var(--rm-card-bg) !important;
        color: var(--rm-text) !important;
        border-color: var(--rm-border) !important;
    }
    .form-control:focus, .form-select:focus {
        background-color: var(--rm-card-bg-subtle) !important;
        border-color: var(--rm-primary) !important;
        box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25) !important;
    }
    .form-control::placeholder { color: var(--rm-text-muted) !important; }
    .form-check-input { background-color: var(--rm-card-bg-subtle); border-color: var(--rm-border); }
    .form-check-input:checked { background-color: var(--rm-primary); border-color: var(--rm-primary); }
    .form-text { color: var(--rm-text-muted) !important; }

    /* File inputs */
    input[type="file"], .form-control[type="file"] {
        background-color: var(--rm-card-bg) !important;
        color: var(--rm-text) !important;
        border-color: var(--rm-border) !important;
    }
    input[type="file"]::file-selector-button {
        background-color: var(--rm-card-bg-subtle);
        color: var(--rm-text);
        border-color: var(--rm-border);
    }

    /* bg-light / bg-white — ces classes Bootstrap ne lisent pas --bs-* */
    .bg-light { background-color: var(--rm-card-bg-subtle) !important; }
    .bg-white { background-color: var(--rm-card-bg) !important; }

    /* Alerts — couleurs specifiques dark (pastels attenues) */
    .alert-success { background-color: var(--rm-success-light); color: #a7f3d0; border-color: #065f46; }
    .alert-danger { background-color: var(--rm-danger-light); color: #fca5a5; border-color: #7f1d1d; }
    .alert-warning { background-color: var(--rm-warning-light); color: #fcd34d; border-color: #78350f; }
    .alert-info { background-color: var(--rm-info-light); color: #93c5fd; border-color: #1e3a5f; }

    /* thead — Bootstrap ne propage pas toujours --bs-table-color dans thead */
    thead th { background-color: var(--rm-card-bg-subtle) !important; color: var(--rm-text-muted) !important; }

    /* table-warning */
    .table-warning { --bs-table-bg: rgba(230, 126, 34, 0.15) !important; color: var(--rm-text) !important; }

    /* Borders */
    .border { border-color: var(--rm-border) !important; }
    hr { border-color: var(--rm-border); opacity: 0.3; }

    /* Dropdowns — pas de --bs-* pour les dropdowns */
    .dropdown-menu { background-color: var(--rm-card-bg); border-color: var(--rm-border); }
    .dropdown-item { color: var(--rm-text); }
    .dropdown-item:hover, .dropdown-item:focus { background-color: var(--rm-card-bg-subtle); color: var(--rm-text); }

    /* Modals */
    .modal-content { background-color: var(--rm-card-bg); color: var(--rm-text); border-color: var(--rm-border); }
    .modal-header, .modal-footer { border-color: var(--rm-border); }
    .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

    /* Nav tabs */
    .nav-tabs { border-color: var(--rm-border); }
    .nav-tabs .nav-link { color: var(--rm-text-muted); }
    .nav-tabs .nav-link.active { background-color: var(--rm-card-bg); color: var(--rm-text); border-color: var(--rm-border) var(--rm-border) var(--rm-card-bg); }

    /* Badges */
    .badge.bg-secondary { background-color: var(--rm-card-bg-subtle) !important; color: var(--rm-text-muted); }
    .badge.bg-light { background-color: var(--rm-card-bg-subtle) !important; color: var(--rm-text-muted) !important; }

    /* Buttons outline */
    .btn-outline-secondary { color: var(--rm-text-muted); border-color: var(--rm-border); }
    .btn-outline-secondary:hover { background-color: var(--rm-card-bg-subtle); color: var(--rm-text); }

    /* Text utilities */
    .text-muted { color: var(--rm-text-muted) !important; }
    /* .text-dark intentionnellement NON override en dark mode :
       text-dark est utilise sur des fonds colores (badges bg-warning,
       bg-info, etc.) ou le texte doit rester sombre pour la lisibilite.
       Overrider vers var(--rm-text) rendrait le texte clair sur fond
       jaune/orange = illisible. */

    /* Pre / code */
    pre, code { background-color: var(--rm-card-bg-dim); color: var(--rm-text); }

    /* Pagination */
    .page-link { background-color: var(--rm-card-bg); color: var(--rm-text); border-color: var(--rm-border); }
    .page-item.active .page-link { background-color: var(--rm-primary); border-color: var(--rm-primary); }

    /* List groups */
    .list-group-item { background-color: var(--rm-card-bg); color: var(--rm-text); border-color: var(--rm-border); }

    /* Scrollbar (webkit) */
    ::-webkit-scrollbar { width: 8px; }
    ::-webkit-scrollbar-track { background: var(--rm-bg); }
    ::-webkit-scrollbar-thumb { background: var(--rm-border); border-radius: 4px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--rm-text-muted); }
}

html, body {
    font-family: var(--rm-font);
    margin: 0;
    padding: 0;
    background: var(--rm-bg);
    color: var(--rm-text);
}

a, .btn-link {
    color: var(--rm-primary);
}

.btn-primary {
    color: #fff;
    background-color: var(--rm-primary);
    border-color: var(--rm-primary-dark);
}
.btn-primary:hover, .btn-primary:active {
    background-color: var(--rm-primary-dark);
    border-color: var(--rm-primary-dark);
}

.btn-outline-primary {
    color: var(--rm-primary);
    border-color: var(--rm-primary);
}
.btn-outline-primary:hover, .btn-outline-primary:active {
    background-color: var(--rm-primary);
    border-color: var(--rm-primary);
    color: #fff;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--rm-primary-light);
}

h1:focus { outline: none; }

.valid.modified:not([type=checkbox]) { outline: 1px solid var(--rm-success); }
.invalid { outline: 1px solid var(--rm-danger); }
.validation-message { color: var(--rm-danger); }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}
.blazor-error-boundary::after { content: "An error has occurred."; }

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1000;
    padding: 0.7rem 1.2rem;
    background-color: var(--rm-warning-light);
    color: var(--rm-warning);
    text-align: center;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    margin-left: 1rem;
}

/* ─── RaceMarshal Layout ─── */

.layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.rm-navbar {
    background: var(--rm-navbar-bg);
    padding: 0.5rem 1rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* Decorative car image on the right of the navbar (desktop only).
   Mobile is excluded because the navbar wraps to multi-line and the image
   would sit behind the expanded menu.
   `background-blend-mode: lighten` keeps the car's blue saturation intact
   (max() per channel) while neutralising the PNG's black background.
   Sized at ~65% of the navbar height and anchored top-right so the car
   hovers on the brand row, leaving the menu row underneath uncovered. */
@media (min-width: 768px) {
    .rm-navbar {
        background:
            linear-gradient(to left, rgba(0,0,0,0.35), rgba(0,0,0,0) 35%),
            url('images/rfro-header-car-1600.png') right top / auto 65% no-repeat,
            var(--rm-navbar-bg);
        background-blend-mode: normal, lighten, normal;
    }
}

/* Navbar layout — desktop inline, mobile collapsible via CSS-only checkbox hack */
.rm-nav-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
}

.rm-nav-brand {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.rm-nav-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 0 0 auto;
    margin-left: auto;
}

.rm-nav-menu {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Hidden checkbox driving the mobile collapse. Placed as sibling of .rm-nav-menu
   so that .rm-nav-toggle-input:checked ~ .rm-nav-menu works. */
.rm-nav-toggle-input {
    display: none;
}

/* Hamburger label (mobile-only) */
.rm-nav-toggle-label {
    display: none;
    cursor: pointer;
    padding: 0.375rem;
    color: white;
    line-height: 0;
    border-radius: 4px;
    transition: background 0.15s;
}
.rm-nav-toggle-label:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Desktop (≥ md) : reorder items so the menu sits between brand and actions.
   DOM order is [brand, actions, input, menu]. With flex order, visual order
   becomes [brand, menu, actions]. */
@media (min-width: 768px) {
    .rm-nav-brand {
        order: 1;
    }
    .rm-nav-menu {
        order: 2;
        margin-left: auto;
    }
    .rm-nav-actions {
        order: 3;
        margin-left: 0;
    }
}

/* Mobile quick-access row (authenticated only).
   Full-width row with 3 tap targets : My Races 2/5, Events 2/5, Bell 1/5.
   Wrapped in AuthorizeView on the razor side so non-authenticated visitors
   don't see this row at all (they use the hamburger to reach Events). */
.rm-nav-quick-access {
    width: 100%;
    gap: 0.5rem;
    margin-top: 0.25rem;
}
.rm-nav-quick-btn {
    flex: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.5rem 0.25rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.15s;
}
.rm-nav-quick-btn:hover,
.rm-nav-quick-btn:focus {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    text-decoration: none;
}
.rm-nav-quick-notif {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    transition: background 0.15s;
}
.rm-nav-quick-notif:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Mobile (< md) : collapse the menu behind the hamburger */
@media (max-width: 767.98px) {
    .rm-nav-toggle-label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .rm-nav-menu {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
        padding-top: 0.75rem;
        margin-top: 0.5rem;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }

    .rm-nav-toggle-input:checked ~ .rm-nav-menu {
        display: flex;
    }

    /* Tenant logo smaller on mobile to free space in the navbar */
    .rm-tenant-logo {
        height: 28px;
        max-width: 100px;
    }

    /* Link items inside the collapsed panel : full width, comfortable padding */
    .rm-nav-menu .rm-nav-member,
    .rm-nav-menu .rm-nav-organizer,
    .rm-nav-menu .rm-nav-admin {
        display: block;
        padding: 0.7rem 0.5rem;
        width: 100%;
        border-radius: 4px;
    }
    .rm-nav-menu .rm-nav-member:hover,
    .rm-nav-menu .rm-nav-organizer:hover,
    .rm-nav-menu .rm-nav-admin:hover {
        background: rgba(255, 255, 255, 0.05);
    }

    /* Language selector in the collapsed panel : stack vertically, full width */
    .rm-nav-menu .rm-lang-selector {
        width: 100%;
        padding: 0.5rem;
    }

    /* Auth area full-width inside the panel. The vertical stacking and stretch
       alignment are driven by the responsive Bootstrap utilities in the markup
       (flex-column flex-md-row align-items-stretch align-items-md-center). */
    .rm-nav-menu .rm-nav-auth-area {
        width: 100%;
        padding: 0.5rem 0;
    }
    .rm-nav-menu .rm-nav-auth-area > a,
    .rm-nav-menu .rm-nav-auth-area > .btn {
        width: 100%;
        justify-content: center;
    }
}

.rm-main {
    flex: 1;
    background: var(--rm-bg);
}
.rm-main .container-fluid {
    max-width: var(--rm-page-max-width);
    margin: 0 auto;
}

/* Spec 88 fix UX UAT 2026-05-04 — pages admin avec tables larges (TrackCrud + CarClassCrud
   ont 8-9 colonnes : checkbox + logo + name + specif + verified + paid + DLC + status + actions
   inline) ont besoin de plus que 1100px. Les pages /admin/* sont desktop-only par convention
   (cf memory feedback_admin_organizer_desktop_only) → étendre full-width sans risque mobile.
   Pattern : la page Razor wrappe son contenu dans <div class="rm-page-fluid"> ; le selector
   :has() (Chrome/Edge 105+, Safari 15.4+, Firefox 121+) override la max-width ici.
   Browsers anciens : fallback gracieux 1100px (toujours fonctionnel, juste contraint). */
.rm-main .container-fluid:has(.rm-page-fluid) {
    max-width: none;
}

.rm-footer {
    background: var(--rm-card-bg);
    border-top: 0.5px solid var(--rm-border);
    padding: 0.75rem 1rem;
    font-size: 0.8rem;
    color: var(--rm-text-muted);
}
.rm-footer-link {
    color: var(--rm-text-muted);
    text-decoration: none;
}
.rm-footer-link:hover {
    color: var(--rm-text);
}

.rm-tenant-logo {
    height: 40px;
    max-width: 160px;
    object-fit: contain;
}

/* Season badge — Platinum tier (Admin) */
.rm-badge-platinum {
    background: var(--rm-gradient-platinum);
    color: #1a1a2e;
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.3em 0.8em;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Admin nav link (red) */
.rm-nav-admin {
    color: var(--rm-danger);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.rm-nav-admin:hover {
    color: #ff6b6b; /* hover saturation du danger — volontairement plus clair */
}

/* Position badges */
.rm-badge-gold {
    background: var(--rm-gradient-gold);
    color: #1a1a1a; /* texte sombre sur fond dore — intentionnel, self-contained */
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.3em 0.8em;
    border-radius: 20px;
}
.rm-badge-silver {
    background: var(--rm-gradient-silver);
    color: #1a1a1a; /* texte sombre sur fond argente — intentionnel */
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.3em 0.8em;
    border-radius: 20px;
}

/* Season badge — Bronze tier (Member) */
.rm-badge-bronze {
    background: var(--rm-gradient-bronze);
    color: white;
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.3em 0.8em;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Member nav link (white) */
.rm-nav-member {
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.rm-nav-member:hover {
    color: #ecf0f1;
}

/* Organizer nav link (blue) */
.rm-nav-organizer {
    color: #3498db;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.rm-nav-organizer:hover {
    color: #5dade2;
}

/* Language selector (CSS-only dropdown, SSR compatible) */
.rm-lang-selector {
    position: relative;
    outline: none;
}
.rm-lang-toggle {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    opacity: 0.85;
    transition: opacity 0.2s;
}
.rm-flag {
    display: inline-block;
    vertical-align: middle;
    border-radius: 2px;
    box-shadow: 0 0 0 0.5px rgba(0,0,0,0.15);
}
.rm-lang-selector:hover .rm-lang-toggle,
.rm-lang-selector:focus-within .rm-lang-toggle { opacity: 1; }
.rm-lang-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    background: var(--rm-card-bg);
    border: 0.5px solid var(--rm-border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1050;
    min-width: 150px;
    overflow: hidden;
}
.rm-lang-selector:focus-within .rm-lang-dropdown {
    display: block;
}
.rm-lang-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    color: var(--rm-text);
    font-size: 0.85rem;
    transition: background 0.15s;
    /* Spec 65 BR-6 : le switcher est passe de <a> a <button> pour forcer
       un NavigateTo(forceLoad: true). Reset des styles natifs button pour
       preserver l'apparence d'un item de menu. */
    width: 100%;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font: inherit;
}
.rm-lang-option:hover {
    background: var(--rm-bg);
    color: var(--rm-text);
    text-decoration: none;
}
.rm-lang-option.active {
    background: var(--rm-primary-light);
    font-weight: 600;
}
.rm-lang-name {
    white-space: nowrap;
}

/* Avatar */
.rm-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.3);
}

.rm-avatar-initials {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--rm-primary);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    border: 2px solid rgba(255,255,255,0.3);
}

/* Home page */
.rm-home-hero {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.rm-home-image {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
    display: block;
}
.rm-home-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
}
.rm-home-overlay h1 {
    color: white;
    font-weight: 700;
    margin: 0;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.rm-select-medium { max-width: 300px; }
.rm-select-auto { width: auto; }
.rm-clickable { cursor: pointer; }
.cursor-pointer { cursor: pointer; }
.rm-icon-input { width: 3em; }
.rm-card-light { background: var(--rm-bg); }
.rm-raw-data { max-height: 400px; overflow: auto; }
.rm-modal-backdrop { background-color: rgba(0, 0, 0, 0.5); }

/* Spec 97 B22-2 BR-CLEAN-MEM-2 — couleur d'équipe via CSS custom property `--team-color`.
   Le call-site set la variable inline (`style="--team-color: #RRGGBB;"` via TeamBadgeHelper.TeamColorVar).
   Classe générique pour éléments SANS classe existante (<tr> standings, <li> engages-list).
   Les classes spécialisées .rm-claim-team-row, .rm-claim-card__team-chip et .rm-team-card__logo
   consomment --team-color directement dans leur règle (cf §rm-team-card__logo, §rm-claim-team-row, §rm-claim-card__team-chip). */
.rm-team-bordered { border-left: 3px solid var(--team-color, transparent); }

/* Spec 96 B15 BR-CCR-2 — width helpers pour Referential CRUD tables (remplacent
   inline styles `width:Xpx`). Naming : `.rm-input-w-*` pour inputs, `.rm-th-*`
   pour table headers. Cohérent design system close. */
.rm-input-w-sm    { width: 80px; }   /* numeric input (displayOrder, etc.) */
.rm-input-w-md    { width: 110px; }  /* medium input (layout name short) */
.rm-input-w-color { width: 48px; }   /* color picker swatch */
.rm-th-w-toggle   { width: 32px; }   /* toggle column header (active/inactive) */
.rm-th-min-w-md   { min-width: 140px; } /* DLC label column min-width */

/* Class/model listbox */
.rm-listbox {
    max-height: 180px;
    overflow-y: scroll;
    border: 0.5px solid var(--rm-border);
    border-radius: 8px;
    padding: 0.5rem;
    background: var(--rm-card-bg);
    scrollbar-width: thin;
}
.rm-listbox::-webkit-scrollbar {
    width: 6px;
}
.rm-listbox::-webkit-scrollbar-thumb {
    background: #adb5bd;
    border-radius: 3px;
}
.rm-listbox .form-check {
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
}

/* Scoring scheme inputs */
.rm-score-position { width: 60px; }

/* Manual bonus form (spec 04B) */
.rm-manual-bonus-points { max-width: 180px; }

/* Results header — Variante A (spec 04B) : date · participants / track */
.rm-results-header {
    line-height: 1.3;
}
.rm-results-header-line {
    font-size: 1rem;
}
.rm-results-header-track {
    font-weight: 500;
    color: var(--rm-text-muted);
}

/* Round inline 1-click confirm (spec 07) — combo + button on a single line */
.rm-confirm-inline {
    min-width: 0; /* allow children to shrink instead of wrapping */
}
.rm-confirm-model {
    max-width: 180px;
    min-width: 0;
    flex-shrink: 1;
}

/* ─── Spec 49 : Paddock timing tower + layout grid 2 colonnes ─── */

.rm-layout-body {
    display: grid;
    grid-template-columns: 1fr;
    min-height: calc(100vh - 60px);
}
@media (min-width: 1200px) {
    .rm-layout-body {
        grid-template-columns: 280px 1fr;  /* Paddock a gauche */
    }
}

.rm-feed-aside {
    /* Conteneur aside — le composant LeagueFeed gere son propre sticky/overflow */
}

.rm-feed {
    position: sticky;
    top: 60px;
    height: calc(100vh - 60px);
    overflow: hidden;
    background: linear-gradient(180deg, #1a1a2e 0%, #0f1923 100%);
    color: #e8e6e3;
    padding: 0;
}
.rm-feed::before {
    content: "";
    display: block;
    height: 4px;
    background: linear-gradient(90deg, var(--rm-danger), var(--rm-accent-orange));
}

.rm-feed__header { padding: 12px 12px 8px; }
.rm-feed__title {
    font-weight: 800;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #fff;
    border-bottom: 2px solid var(--rm-danger);
    padding-bottom: 4px;
    display: inline-block;
}
.rm-feed__season {
    font-size: 0.7rem;
    color: #888;
    display: block;
    margin-top: 4px;
}

.rm-feed__scroll-area {
    overflow: hidden;
    height: calc(100% - 60px);
    padding: 0 10px 10px;
}
.rm-feed__scroll {
    animation: rm-feed-scroll var(--rm-feed-duration, 40s) linear infinite;
}
.rm-feed:hover .rm-feed__scroll {
    animation-play-state: paused;
}
@keyframes rm-feed-scroll {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

.rm-feed-card {
    display: block;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 3px solid;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 8px;
    text-decoration: none;
    color: #e8e6e3;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
.rm-feed-card:hover {
    background: rgba(255, 255, 255, 0.07);
    box-shadow: 0 0 8px rgba(231, 76, 60, 0.15);
    text-decoration: none;
    color: #e8e6e3;
}

.rm-feed-card__title { font-weight: 700; font-size: var(--rm-card-title-size); color: #fff; margin-bottom: 1px; letter-spacing: -0.01em; line-height: var(--rm-card-title-lineheight); }
.rm-feed-card__subtitle { font-size: 0.7rem; color: var(--rm-silver); margin-bottom: 8px; }
.rm-feed-card__subtitle--accent { color: var(--rm-accent-orange); }

.rm-feed-card__sim-logo { width: 16px; height: 16px; border-radius: 3px; object-fit: contain; margin-right: 6px; vertical-align: middle; }
.rm-feed-card__sim-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

.rm-feed-card__driver {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px;
    font-size: 0.75rem;
    border-radius: 2px;
}
.rm-feed-card__driver--gold   { border-left: 3px solid var(--rm-gold); background: rgba(251, 191, 36, 0.08); padding-left: 6px; }
.rm-feed-card__driver--silver { border-left: 3px solid var(--rm-silver); background: rgba(148, 163, 184, 0.08); padding-left: 6px; }
.rm-feed-card__driver--bronze { border-left: 3px solid var(--rm-bronze); background: rgba(205, 127, 50, 0.08); padding-left: 6px; }
.rm-feed-card__pos { font-weight: 800; font-family: var(--rm-font-mono); width: 22px; text-align: right; flex-shrink: 0; color: #fff; }
.rm-feed-card__name { flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-feed-card__points { font-family: var(--rm-font-mono); flex-shrink: 0; color: var(--rm-silver); }

.rm-feed-card__meta { font-size: 0.65rem; color: #666; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.06); }

.rm-feed-card__progress { display: flex; align-items: center; gap: 6px; font-size: 0.65rem; color: #666; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.06); }
.rm-feed-card__progress-bar { flex: 1; height: 3px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; }
.rm-feed-card__progress-fill { height: 100%; background: linear-gradient(90deg, var(--rm-danger), var(--rm-accent-orange)); border-radius: 2px; }

.rm-feed__sep-light { border-top: 1px dashed rgba(255, 255, 255, 0.15); margin: 6px 0; }
.rm-feed__sep-sim   { height: 2px; margin: 10px 0; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.2) 20%, rgba(255,255,255,0.2) 80%, transparent 100%); }

/* ─── Spec 40 : Annonces de championnat (option A minimale) ─── */
.rm-announcement {
    border-bottom: 1px solid var(--rm-border-light);
    padding-bottom: 0.75rem;
}
.rm-announcement:last-child { border-bottom: none; }
.rm-announcement__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--rm-text);
    margin: 0 0 0.5rem;
}
.rm-announcement__body {
    color: var(--rm-text);
    font-size: 0.9rem;
    line-height: 1.65;
}
.rm-announcement__body p { margin: 0 0 0.5rem; }
.rm-announcement__body p:last-child { margin-bottom: 0; }
.rm-announcement__body a { color: var(--rm-primary); }
.rm-announcement__body strong { font-weight: 700; }
.rm-announcement__meta {
    font-size: 0.75rem;
    color: var(--rm-text-muted);
    margin-top: 0.5rem;
}

/* Footer social icon strip (spec 01) — only renders when at least one URL is set */
.rm-footer-social-link {
    color: #6c757d;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: color 0.15s ease-in-out;
}
.rm-footer-social-link:hover,
.rm-footer-social-link:focus {
    color: #0d6efd;
}

/* Paid icons — spec 48 v2 : two distinct visuals for two distinct notions.
   Alignment is handled by the consuming markup via d-inline-flex
   align-items-center gap-* (no vertical-align here, it was fragile on
   uppercase text like "LMU" where the SVG drifts off baseline). */
.rm-paid-servers-icon { color: #e67e22; }  /* orange fort : signal impact cout */
.rm-paid-addon-icon   { color: #0ea5e9; }  /* bleu ciel : info DLC (visible sur fond blanc) */

/* ─── Spec 45 : Agenda View — calendrier mensuel ─── */

/* Mobile fallback : sur < 768px on masque la grille et on montre le message.
   Sur >= 768px on masque le message et on montre la grille. CSS-only, pas de JS.
   Spec 107 Bloc 2 (v1.25.1) — classe `.rm-mobile-unavailable` générique (renommage
   depuis `.rm-agenda-mobile-fallback`) réutilisable hors Agenda (ex : pages `/admin/*`
   non-optimisées mobile). L'agenda garde son toggle dédié `.rm-agenda-grid-wrapper`. */
.rm-mobile-unavailable    { display: block; }
.rm-agenda-grid-wrapper   { display: none; }
@media (min-width: 768px) {
    .rm-mobile-unavailable { display: none; }
    .rm-agenda-grid-wrapper { display: block; }
}

.rm-agenda-month-label {
    min-width: 180px;
    text-align: center;
    text-transform: capitalize;
}

.rm-agenda-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: minmax(140px, auto);
    gap: 2px;
    background: var(--rm-border-light, #dee2e6);
    border: 1px solid var(--rm-border-light, #dee2e6);
    border-radius: 4px;
    overflow: hidden;
}

.rm-agenda-weekday {
    background: var(--rm-card-bg-subtle);
    font-weight: 600;
    font-size: 0.8rem;
    padding: 6px 8px;
    text-align: center;
    color: var(--rm-text-muted);
    text-transform: capitalize;
}

.rm-agenda-cell {
    background: var(--rm-card-bg);
    padding: 4px;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}
.rm-agenda-cell--other-month .rm-agenda-day-num { color: var(--rm-text-light); }
.rm-agenda-cell--other-month { background: var(--rm-card-bg-dim); }
.rm-agenda-cell--today       { box-shadow: inset 0 0 0 2px #22c55e; }

.rm-agenda-day-num {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--rm-text-muted, #6b7280);
    padding: 2px 4px;
}

/* Spec 45 : chaque event occupe 2 lignes — ligne 1 marker + nom championnat,
   ligne 2 nom du circuit en plus petit. La cellule du jour accepte 3 events
   (donc jusqu'a 6 lignes) avant le "+N autres". */
.rm-agenda-event {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: var(--rm-card-label-size);  /* Spec 61 BR-7 C12 : label-size comme defaut (exception densite calendrier 7 cols). */
    line-height: 1.2;
    padding: 3px 5px;
    border-radius: 3px;
    border-left: 4px solid;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    text-decoration: none;
    text-align: left;
    color: #0a0c0f;
    overflow: hidden;
    transition: filter 0.15s ease;
    /* Spec 67 §4 — element devenu <button> pour ouvrir popover : reset styles natifs */
    font-family: inherit;
    font-weight: inherit;
    cursor: pointer;
    width: 100%;
}
.rm-agenda-event:hover {
    filter: brightness(0.95);
    text-decoration: none;
    color: #0a0c0f;
}
.rm-agenda-event:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.rm-agenda-event__row1 {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
}
.rm-agenda-event__marker { flex-shrink: 0; display: inline-flex; align-items: center; }
.rm-agenda-event__title {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rm-agenda-event__track {
    color: var(--rm-text-muted, #4b5563);
    font-size: 0.65rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 15px; /* aligne sous le titre, pas sous l'icone marker */
}
/* Spec 42 §BR-26 — badge numerique pour les soirees multi-heat sur l'agenda.
   Petit pill orange qui rappelle le badge "N HEATS" du ChampionshipDetail.
   Spec 61 BR-7 C12 : chiffre en mono pour homogeneite sim racing. */
.rm-agenda-event__multi-heat-count {
    flex-shrink: 0;
    margin-left: auto;
    min-width: 14px;
    padding: 0 4px;
    font-size: 0.6rem;                 /* exception densite calendrier 7 cols */
    font-family: var(--rm-font-mono);
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    background: var(--rm-accent-orange);
    color: #fff;
    border-radius: 999px;
}

.rm-agenda-event-more {
    font-size: 0.65rem;
    color: var(--rm-text-muted, #6b7280);
    padding: 0 4px;
    font-style: italic;
}

/* Spec 106 §10 — palette agenda V2 (post-UAT visuel 2026-05-21) :
   - 8 fonds pastel light (sims) + leurs équivalents dark (alpha 30%)
   - 24 borders light recalibrées -900/-500/-300 (vs initial -900/-700/-500)
     pour écart luminosité ~30% percible à l'œil (avant : ~10-15% imperceptible).
     Sémantique conservée : shade-0 = le plus tranchant (couleur la plus foncée),
     shade-2 = le plus subtil (couleur la plus claire).
   - 24 borders dark recalibrées -200/-400/-700 (vs initial -300/-400/-500)
     Sémantique conservée : shade-0 = le plus tranchant (-200 clair vif sur fond
     sombre), shade-2 = le plus subtil (-700 foncé saturé sur fond sombre).
   - LARGEUR BORDER VARIABLE 7px/5px/3px selon ShadeIndex (BR-AGD-COL-6) — 2e
     vecteur visuel orthogonal à la couleur, signal "épais/moyen/fin" perceptible
     même en vision périphérique. Sur shade-2 (border 3px), c'est la largeur fine
     qui devient le vecteur visuel principal, le contraste WCAG sur fond pastel
     étant sous le seuil 3:1 (compromis volontaire validé UAT 2026-05-21 — cf
     spec 106 §12 limite V1 documentée).
   - OneShot v2 : fond hérité de la sim de rattachement (PAS d'override --bg) ;
     border violet/indigo invariante #7c3aed (light) / #c4b5fd (dark) ; largeur
     5px fixe (override des --sN) ; badge orthogonal [OPEN] dans l'étiquette */

/* ── Fonds pastel light + 3 borders shades par sim (light) ────────────── */
.rm-agenda-event--c0 { --rm-agenda-event-bg: #fee2e2;
    --rm-agenda-c-border-0: #7f1d1d; --rm-agenda-c-border-1: #ef4444; --rm-agenda-c-border-2: #fca5a5; }
.rm-agenda-event--c1 { --rm-agenda-event-bg: #dbeafe;
    --rm-agenda-c-border-0: #1e3a8a; --rm-agenda-c-border-1: #3b82f6; --rm-agenda-c-border-2: #93c5fd; }
.rm-agenda-event--c2 { --rm-agenda-event-bg: #dcfce7;
    --rm-agenda-c-border-0: #14532d; --rm-agenda-c-border-1: #22c55e; --rm-agenda-c-border-2: #86efac; }
.rm-agenda-event--c3 { --rm-agenda-event-bg: #ffedd5;
    --rm-agenda-c-border-0: #7c2d12; --rm-agenda-c-border-1: #f97316; --rm-agenda-c-border-2: #fdba74; }
.rm-agenda-event--c4 { --rm-agenda-event-bg: #f3e8ff;
    --rm-agenda-c-border-0: #581c87; --rm-agenda-c-border-1: #a855f7; --rm-agenda-c-border-2: #d8b4fe; }
.rm-agenda-event--c5 { --rm-agenda-event-bg: #cffafe;
    --rm-agenda-c-border-0: #164e63; --rm-agenda-c-border-1: #06b6d4; --rm-agenda-c-border-2: #67e8f9; }
.rm-agenda-event--c6 { --rm-agenda-event-bg: #fef9c3;
    --rm-agenda-c-border-0: #713f12; --rm-agenda-c-border-1: #eab308; --rm-agenda-c-border-2: #fde047; }
.rm-agenda-event--c7 { --rm-agenda-event-bg: #fce7f3;
    --rm-agenda-c-border-0: #831843; --rm-agenda-c-border-1: #ec4899; --rm-agenda-c-border-2: #f9a8d4; }

/* Application : --bg sur le fond, --shade sur la border-left selon ShadeIndex.
   Largeur border-left variable 7/5/3px (BR-AGD-COL-6) — 2e vecteur visuel
   indépendant de la teinte pour différenciation perceptible à l'œil. */
.rm-agenda-event {
    background: var(--rm-agenda-event-bg, transparent);
    border-left-color: var(--rm-agenda-event-border, currentColor);
}
.rm-agenda-event--s0 { border-left-width: 7px; --rm-agenda-event-border: var(--rm-agenda-c-border-0); }
.rm-agenda-event--s1 { border-left-width: 5px; --rm-agenda-event-border: var(--rm-agenda-c-border-1); }
.rm-agenda-event--s2 { border-left-width: 3px; --rm-agenda-event-border: var(--rm-agenda-c-border-2); }

/* ── OneShot v2 (PO 2026-05-21) : fond hérité de la sim de rattachement ;
   border violet/indigo invariante ; largeur 5px fixe (override --sN width).
   Triple distinction : fond sim + border violet + badge [OPEN]. */
.rm-agenda-event--oneshot {
    /* PAS d'override --rm-agenda-event-bg : laisse hériter du --cN parent */
    --rm-agenda-event-border: #7c3aed;
    border-left-width: 5px;
}

/* Marqueur orthogonal "OPEN" — BR-AGD-OS-5/6 anti-collision sim c4.
   font-size: 0.6rem = 9.6px à base 16px (BR-AGD-OS-6 lisibilité mobile ≥ 9px). */
.rm-agenda-event__open-marker {
    display: inline-block;
    padding: 1px 4px;
    margin-right: 4px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: #7c3aed;
    color: #ffffff;
    border-radius: 3px;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ── Dark mode V1 (spec 106 §10.2 recalibré post-UAT 2026-05-21) ────────
   Fond saturé -900 + alpha 30% pour glow subtil sur app dark.
   Borders recalibrées -200/-400/-700 (écart luminosité ~30%) — corrige la
   non-perceptibilité observée capture Agenda_Couleurs_LMU.png (3 shades
   indistinguables avec -300/-400/-500 trop proches).
   Sémantique shade conservée : shade-0 = le plus tranchant (-200 clair vif). */
@media (prefers-color-scheme: dark) {
    /* Token dark-aware projet pour le texte. L'override remplace le
       color:#0a0c0f hérité du bloc principal (l. 1042-1064) qui devient
       illisible sur les fonds saturés sombres. */
    .rm-agenda-event { color: var(--rm-text); }

    .rm-agenda-event--c0 { --rm-agenda-event-bg: rgba(127, 29, 29, 0.30);
        --rm-agenda-c-border-0: #fecaca; --rm-agenda-c-border-1: #f87171; --rm-agenda-c-border-2: #b91c1c; }
    .rm-agenda-event--c1 { --rm-agenda-event-bg: rgba(30, 58, 138, 0.30);
        --rm-agenda-c-border-0: #bfdbfe; --rm-agenda-c-border-1: #60a5fa; --rm-agenda-c-border-2: #1d4ed8; }
    .rm-agenda-event--c2 { --rm-agenda-event-bg: rgba(20, 83, 45, 0.30);
        --rm-agenda-c-border-0: #bbf7d0; --rm-agenda-c-border-1: #4ade80; --rm-agenda-c-border-2: #15803d; }
    .rm-agenda-event--c3 { --rm-agenda-event-bg: rgba(124, 45, 18, 0.30);
        --rm-agenda-c-border-0: #fed7aa; --rm-agenda-c-border-1: #fb923c; --rm-agenda-c-border-2: #c2410c; }
    .rm-agenda-event--c4 { --rm-agenda-event-bg: rgba(88, 28, 135, 0.30);
        --rm-agenda-c-border-0: #e9d5ff; --rm-agenda-c-border-1: #c084fc; --rm-agenda-c-border-2: #7e22ce; }
    .rm-agenda-event--c5 { --rm-agenda-event-bg: rgba(22, 78, 99, 0.30);
        --rm-agenda-c-border-0: #a5f3fc; --rm-agenda-c-border-1: #22d3ee; --rm-agenda-c-border-2: #0e7490; }
    .rm-agenda-event--c6 { --rm-agenda-event-bg: rgba(113, 63, 18, 0.30);
        --rm-agenda-c-border-0: #fef08a; --rm-agenda-c-border-1: #facc15; --rm-agenda-c-border-2: #a16207; }
    .rm-agenda-event--c7 { --rm-agenda-event-bg: rgba(131, 24, 67, 0.30);
        --rm-agenda-c-border-0: #fbcfe8; --rm-agenda-c-border-1: #f472b6; --rm-agenda-c-border-2: #be185d; }

    /* OneShot dark v2 : fond hérité de la sim (--cN dark applique déjà
       l'alpha 30%) ; border violet-300 clair pour ressortir sur fond sombre. */
    .rm-agenda-event--oneshot {
        /* PAS d'override --rm-agenda-event-bg : hérite du --cN dark */
        --rm-agenda-event-border: #c4b5fd;
    }
    .rm-agenda-event__open-marker {
        background: #c4b5fd;
        color: #1e1b4b;
    }
}

/* Pills de filtre simulation — reprennent la palette du calendrier pour faire
   le lien visuel "cette pill = ces evenements". Checkbox cachee visuellement
   mais focusable au clavier (a11y). */
.rm-agenda-sim-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 2px solid #d1d5db;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    text-decoration: line-through;
    transition: all 0.15s ease;
}
.rm-agenda-sim-pill:hover { filter: brightness(0.97); }
/* Focus englobe toute la pill pour un feedback visuel plus net au clavier
   (plutot que juste autour du nom). focus-within se declenche quand l'input
   cache recoit le focus. */
.rm-agenda-sim-pill:focus-within {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.rm-agenda-sim-pill__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.rm-agenda-sim-pill__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d1d5db;
    flex-shrink: 0;
}

/* Etat ON : classe --cX ajoutee → fond pastel + bordure de la couleur sim. */
.rm-agenda-sim-pill--c0 { background: #fee2e2; border-color: #dc2626; color: #0a0c0f; text-decoration: none; }
.rm-agenda-sim-pill--c1 { background: #dbeafe; border-color: #2563eb; color: #0a0c0f; text-decoration: none; }
.rm-agenda-sim-pill--c2 { background: #dcfce7; border-color: #16a34a; color: #0a0c0f; text-decoration: none; }
.rm-agenda-sim-pill--c3 { background: #ffedd5; border-color: #ea580c; color: #0a0c0f; text-decoration: none; }
.rm-agenda-sim-pill--c4 { background: #f3e8ff; border-color: #9333ea; color: #0a0c0f; text-decoration: none; }
.rm-agenda-sim-pill--c5 { background: #cffafe; border-color: #0891b2; color: #0a0c0f; text-decoration: none; }
.rm-agenda-sim-pill--c6 { background: #fef9c3; border-color: #ca8a04; color: #0a0c0f; text-decoration: none; }
.rm-agenda-sim-pill--c7 { background: #fce7f3; border-color: #db2777; color: #0a0c0f; text-decoration: none; }

.rm-agenda-sim-pill--c0 .rm-agenda-sim-pill__dot { background: #dc2626; }
.rm-agenda-sim-pill--c1 .rm-agenda-sim-pill__dot { background: #2563eb; }
.rm-agenda-sim-pill--c2 .rm-agenda-sim-pill__dot { background: #16a34a; }
.rm-agenda-sim-pill--c3 .rm-agenda-sim-pill__dot { background: #ea580c; }
.rm-agenda-sim-pill--c4 .rm-agenda-sim-pill__dot { background: #9333ea; }
.rm-agenda-sim-pill--c5 .rm-agenda-sim-pill__dot { background: #0891b2; }
.rm-agenda-sim-pill--c6 .rm-agenda-sim-pill__dot { background: #ca8a04; }
.rm-agenda-sim-pill--c7 .rm-agenda-sim-pill__dot { background: #db2777; }

/* Larger switch toggles */
.rm-switch-lg .form-check-input {
    width: 2.5em;
    height: 1.25em;
}

/* Spec 98B Fix #3 v3 — quand le switch n'a pas de label texte interne (eg dans
   CarModelTable Paid cell + form Add), override le padding-left Bootstrap qui
   reservait l'espace pour ce label absent. Sans cet override, l'espace vide pousse
   visuellement les elements externes (picto PaidAddonIcon) loin du switch. */
.rm-switch-no-label {
    padding-left: 0;
}
.rm-switch-no-label .form-check-input {
    margin-left: 0;
}

/* Referential tree */
.rm-tree-class { padding-left: 0; }
.rm-tree-model { padding-left: 1.5rem; }
.rm-tree-car { padding-left: 3rem; }
.rm-tree-connector {
    font-family: monospace;
    color: #adb5bd;
    margin-right: 0.25rem;
}

/* Notification bell */
.rm-notif-bell { position: relative; cursor: pointer; }
.rm-notif-icon { opacity: 0.8; transition: opacity 0.2s; }
.rm-notif-bell:hover .rm-notif-icon { opacity: 1; }
.rm-notif-badge {
    position: absolute;
    top: -6px; right: -8px;
    background: var(--rm-danger);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
}
.rm-notif-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    width: 340px;
    background: var(--rm-card-bg);
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
    z-index: 1050;
    overflow: hidden;
    margin-top: 8px;
}
.rm-notif-dropdown-header {
    padding: 0.75rem 1rem;
    border-bottom: 0.5px solid var(--rm-border);
    color: var(--rm-text);
}
.rm-notif-dropdown-empty {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--rm-text-muted);
    font-size: 0.9rem;
}
.rm-notif-dropdown-item {
    display: flex;
    align-items: flex-start;
    padding: 0.6rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid var(--rm-border-light);
    color: var(--rm-text);
    transition: background 0.15s;
}
.rm-notif-dropdown-item:hover { background: var(--rm-bg); }
.rm-notif-dropdown-item-time { font-size: 0.7rem; }
/* Fix UAT post-spec97 2026-05-14 — hex hardcoded `#eef6ff` cassait le contraste dark mode
   (texte clair sur fond bleu pastel clair = illisible). Token `--rm-primary-light` est
   dark-aware (#dbeafe light / #1e2a4a dark), cohérent avec `.rm-notif-card-unread`. */
.rm-notif-unread { background: var(--rm-primary-light); font-weight: 600; }
.rm-notif-dropdown-footer {
    padding: 0.5rem 1rem;
    text-align: center;
    border-top: 0.5px solid var(--rm-border);
}
.rm-notif-dropdown-footer a { font-size: 0.85rem; }

/* Notification page cards */
.rm-notif-card {
    background: var(--rm-card-bg);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    cursor: pointer;
    transition: background 0.15s;
}
.rm-notif-card:hover { background: var(--rm-bg); }
.rm-notif-card-unread {
    background: var(--rm-primary-light);
    border-left: 3px solid var(--rm-primary);
}
.rm-notif-type-icon { font-size: 1.3rem; }
/* Spec 61 BR-7 C8 : typo notif-card alignee sur les tokens card. */
.rm-notif-card__title {
    font-size: var(--rm-card-title-size);
    line-height: var(--rm-card-title-lineheight);
    letter-spacing: -0.01em;
}
@media (max-width: 576px) {
    .rm-notif-card__title { font-size: var(--rm-card-title-size-mobile); }
}
.rm-notif-card__body { font-size: var(--rm-card-body-size); }
.rm-notif-card__time {
    font-size: var(--rm-card-label-size);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}

/* Profile page */
.rm-profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--rm-border);
}
.rm-profile-avatar-initials {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--rm-primary);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    border: 3px solid var(--rm-border);
}

.rm-favicon-preview { height: 32px; width: 32px; }
.rm-hex-input { max-width: 120px; }
.rm-role-select { width: 140px; }

/* ─── Settings page ─── */

.rm-tabs .nav-link {
    color: var(--rm-text-muted);
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.75rem 1.25rem;
    font-weight: 500;
}
.rm-tabs .nav-link.active {
    color: var(--rm-primary);
    border-bottom-color: var(--rm-primary);
    background: none;
}

/* ─── Spec 35 Polish UX V2 — Tabbed card (sub-tabs visually attached to content) ─── */

.rm-tabbed-card {
    padding: 0;
    overflow: hidden;
}
.rm-tabbed-card__header {
    background: var(--rm-card-bg-subtle);
    border-bottom: 1px solid var(--rm-border);
    padding: 0 1rem;
}
.rm-subtabs {
    display: flex;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    border: none;
}
.rm-subtabs .nav-link {
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    padding: 0.75rem 1.25rem;
    color: var(--rm-text-muted);
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: -1px;
    background: transparent;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.rm-subtabs .nav-link:hover {
    color: var(--rm-text);
    background: var(--rm-card-bg);
}
.rm-subtabs .nav-link.active {
    background: var(--rm-card-bg);
    border-color: var(--rm-border);
    color: var(--rm-primary);
    position: relative;
}
.rm-subtabs .nav-link.active::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    top: 0;
    height: 3px;
    background: var(--rm-primary);
    border-radius: 0 0 2px 2px;
}
.rm-tabbed-card__body {
    padding: var(--rm-card-padding-desktop);
}
/* Override : neutralise la card des CRUDs enfants (TrackCrud, CarClassCrud) afin
   que la rm-tabbed-card soit l'unique enveloppe visuelle. Decision PO option B
   (zero touche aux composants enfants, blast radius minimal). */
.rm-tabbed-card__body > .rm-card {
    box-shadow: none;
    border: none;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

/* ─── Spec 35 Polish UX V2 — Sim toolbar consolidee (3 cards → 1) ─── */

.rm-sim-toolbar {
    padding: var(--rm-card-padding-desktop);
}
/* Spec 35 Polish UX V2 iter 2 — 2 panels horizontaux equilibres remplacent l'ancien __row.
   Chaque panel = 1 rangee flex avec justify-content: space-between → 2 sous-groupes
   gauche/droite (.rm-sim-toolbar__panel-side). */
.rm-sim-toolbar__panel {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: space-between;
}
.rm-sim-toolbar__panel-side {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.rm-sim-toolbar__separator {
    border-top: 1px solid var(--rm-border-light);
    margin: 0.875rem 0;
}
.rm-sim-toolbar__label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rm-text-muted);
    margin: 0;
}
.rm-sim-toolbar__logo {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--rm-card-bg-subtle);
    border: 1px solid var(--rm-border);
    transition: transform 0.15s;
}
.rm-sim-toolbar__logo:hover {
    transform: scale(1.05);
}
.rm-sim-toolbar__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.rm-sim-toolbar__logo-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
}
.rm-sim-toolbar__logo:hover .rm-sim-toolbar__logo-overlay {
    opacity: 1;
}
.rm-sim-toolbar__logo-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    /* InputFile doit recevoir les clicks par-dessus l'overlay decoratif */
}

/* Organizer chip — remplace la table 1-row */
.rm-organizer-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem 0.25rem 0.25rem;
    background: var(--rm-card-bg-subtle);
    border: 1px solid var(--rm-border);
    border-radius: var(--rm-pill-radius);
    font-size: 0.875rem;
}
.rm-organizer-chip__avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}
.rm-organizer-chip__avatar-initials {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--rm-primary-light);
    color: var(--rm-primary-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 700;
}
.rm-organizer-chip__role {
    font-size: 0.6875rem;
    padding: 0.05rem 0.4rem;
    border-radius: 10px;
    background: var(--rm-card-bg);
    color: var(--rm-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.rm-organizer-chip__remove {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: transparent;
    border: none;
    opacity: 0.5;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: var(--rm-text-muted);
    transition: opacity 0.15s, color 0.15s;
}
.rm-organizer-chip__remove:hover {
    opacity: 1;
    color: var(--rm-danger);
}

.rm-card {
    background: var(--rm-card-bg);
    border-radius: var(--rm-card-radius);
    border: 0.5px solid var(--rm-border);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: none;
}

.rm-card-title {
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 1rem;
    color: var(--rm-text);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.rm-card-disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* ─── Bootstrap overrides for design system ─── */
.badge {
    border-radius: var(--rm-pill-radius);
    font-weight: 500;
    font-size: 0.75rem;
    padding: 0.35em 0.75em;
}
.border, .border-bottom, .border-top {
    border-color: var(--rm-border) !important;
}
/* ─── Theme-aware global overrides (light AND dark via var) ───
   Bootstrap 5 compile des couleurs en dur dans son CSS. Les --bs-* ne suffisent
   pas a propager var(--rm-text) dans tous les cas. Ces regles forcent
   l'heritage de la bonne couleur via var(--rm-*) — valeurs qui changent
   automatiquement entre light (#1a1a1a) et dark (#e8e6e3). */

/* Tables — forcer la couleur sur TOUS les elements table */
.table,
.table thead,
.table thead th,
.table tbody,
.table tbody td,
.table tbody tr,
.table tfoot,
.table tfoot td {
    color: var(--rm-text) !important;
    border-color: var(--rm-border-light);
}

/* Standings table custom */
.rm-standings-table tbody td {
    color: var(--rm-text);
}

/* Headings */
h1, .h1 { font-size: 1.5rem; font-weight: 600; color: var(--rm-text); }
h2, .h2 { font-size: 1.25rem; font-weight: 600; color: var(--rm-text); }
h3, .h3 { font-size: 1.1rem; font-weight: 500; color: var(--rm-text); }
h4, .h4, h5, .h5, h6, .h6 { color: var(--rm-text); }

/* Inline text elements — inherit from parent (body already has var(--rm-text)) */
p, li, span, label, legend, strong, em, small, summary { color: inherit; }

/* Bootstrap text utilities */
.text-muted { color: var(--rm-text-muted) !important; }
/* .text-dark : pas d'override — utilise intentionnellement sur fonds colores */
.text-body { color: var(--rm-text) !important; }
.form-text { color: var(--rm-text-light); }
.form-label { color: var(--rm-text); }

/* Borders */
.border-rounded, .rounded { border-radius: var(--rm-card-radius); }

/* Links (global) */
a { color: var(--rm-primary); }
a:hover { color: var(--rm-primary-dark); }

/* Cards */
.card { color: var(--rm-text); }

/* Dropdowns */
.dropdown-item { color: var(--rm-text); }

/* Footer social */
.rm-footer-social-link { color: var(--rm-text-muted); }

/* ─── Access gate ─── */
.rm-access-gate {
    max-width: 500px;
    width: 100%;
}

/* ─── Conditional coloring (fill rate / attendance) ─── */
.rm-fill-green { color: var(--rm-success); font-weight: 600; }
.rm-fill-orange { color: var(--rm-warning); font-weight: 600; }
.rm-fill-red { color: var(--rm-danger); font-weight: 600; }

/* ─── Stat cards (dashboard / my races) ─── */
.rm-stat-card {
    background: var(--rm-card-bg);
    border: 0.5px solid var(--rm-border);
    border-radius: var(--rm-card-radius);
    padding: 1.25rem;
    text-align: center;
}
.rm-stat-value {
    font-size: 1.5rem;                 /* KPI focal : exception legitime BR-7 */
    font-weight: 700;
    font-family: var(--rm-font-mono);  /* chiffres en mono (sim racing signature) */
    color: var(--rm-text);
    line-height: 1.2;
}
.rm-stat-label {
    font-size: var(--rm-card-label-size);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rm-text-light);
    margin-top: 0.25rem;
}

/* Schedule items */
.rm-schedule-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 0.5px solid var(--rm-border-light);
}
.rm-schedule-item:last-child { border-bottom: none; }

.rm-countdown-pill {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25em 0.6em;
    border-radius: var(--rm-pill-radius);
    background: var(--rm-info-light);
    color: var(--rm-info);
    white-space: nowrap;
}
.rm-countdown-pill--danger { background: var(--rm-danger-light); color: var(--rm-danger); }
.rm-countdown-pill--success { background: var(--rm-success-light); color: var(--rm-success); }
.rm-countdown-pill--muted { background: var(--rm-border-light); color: var(--rm-text-muted); }

/* ─── Shared cards grid (Spec 28, harmonisee spec 61 BR-8) — 2 cols desktop, 1 col mobile. ─── */
/* Spec 104 v3.3 — `minmax(0, 1fr)` force partage strict (cf rm-champ-grid, rm-event-summary). */
.rm-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rm-grid-gap-desktop);
}
@media (max-width: 576px) {
    .rm-cards-grid {
        grid-template-columns: 1fr;
        gap: var(--rm-grid-gap-mobile);
    }
}

/* ─── My Races: Upcoming cards (Spec 28) ─── */
.rm-upcoming-card {
    background: var(--rm-card-bg);
    border-radius: var(--rm-card-radius);
    border: 0.5px solid var(--rm-border);
    padding: 1rem;
}
.rm-upcoming-card--pending {
    border-left: 3px solid var(--rm-warning);
}
.rm-upcoming-card__header {
    font-size: var(--rm-card-body-size);
    color: var(--rm-text-muted);
    margin-bottom: 0.5rem;
    font-weight: 600;
}
.rm-upcoming-card__body {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}
.rm-upcoming-card__track {
    font-weight: 600;
    font-size: var(--rm-card-title-size);
    color: var(--rm-text);
    line-height: var(--rm-card-title-lineheight);
    letter-spacing: -0.01em;
    margin-bottom: 0.5rem;  /* Spec 61 BR-11 A1 : separe titre du bloc heats. */
}
.rm-upcoming-card__date {
    font-size: var(--rm-card-label-size);
    color: var(--rm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
    line-height: 1.5;            /* Spec 61 BR-11 A1 : aeration lignes heats (au lieu du compact par defaut). */
    margin-bottom: 0.2rem;       /* Spec 61 BR-11 A1 : gap entre heats successives. */
}

/* Spec 61 BR-11 A2 : pill vert "Next Start" — info actionnable en evidence visuelle.
   Token --rm-success-text : teinte texte WCAG AA auto-adaptee (foncee en light, claire en dark). */
.rm-upcoming-card__next-start {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.35rem 0.5rem;
    border-radius: 4px;
    background: var(--rm-success-light);
    color: var(--rm-success-text);
    font-size: var(--rm-card-label-size);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.rm-upcoming-card__badges {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
}
.rm-upcoming-card__actions {
    display: flex;
    margin-top: 0.75rem;
    gap: 0.5rem;
}
.rm-upcoming-card__actions--inline {
    flex-direction: row;
}
.rm-upcoming-card__actions--inline .btn {
    flex: 1;
    min-height: 44px;
}
/* Spec 67 entry point #3 — EntrylistLink Button dans la card MyRaces.
   Desktop : align droite, max-width 240px. Mobile : full-width (B7). */
.rm-upcoming-card__entrylist {
    display: flex;
    justify-content: flex-end;
}
.rm-upcoming-card__entrylist .rc-entrylist-link--button {
    max-width: 280px;
}
@media (max-width: 991.98px) {
    .rm-upcoming-card__entrylist { justify-content: stretch; }
    .rm-upcoming-card__entrylist .rc-entrylist-link--button {
        max-width: none;
        width: 100%;
    }
}

/* ─── Round cards (mobile — Spec 37) ─── */
.rm-round-card {
    background: var(--rm-card-bg);
    border-radius: var(--rm-card-radius);
    border: 0.5px solid var(--rm-border);
    padding: 1rem;
    margin-bottom: 0.75rem;
}
.rm-round-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}
.rm-round-card__track {
    font-weight: 600;
    font-size: var(--rm-card-title-size);
    letter-spacing: -0.01em;
}
.rm-round-card__date {
    font-size: var(--rm-card-label-size);
    color: var(--rm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}
.rm-round-card__actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.rm-round-card__actions--inline {
    flex-direction: row;
}
.rm-round-card__actions .btn {
    min-height: 44px;
}
.rm-round-card__actions--inline .btn {
    flex: 1;
}
.rm-round-card__actions:not(.rm-round-card__actions--inline) .btn {
    width: 100%;
}

/* ─── Mobile result cards (Spec 34 P2 — Variante B ultra-compacte) ─── */
.rm-result-card {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--rm-border);
}
.rm-result-card:last-child { border-bottom: none; }
.rm-result-card--dnf { opacity: 0.6; }
.rm-result-card__line1 {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
}
.rm-result-card__pos {
    font-weight: 700;
    font-family: var(--rm-font-mono);
    min-width: 2rem;
}
.rm-result-card__driver {
    flex: 1;
    font-weight: 600;
    font-size: var(--rm-card-body-size);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rm-result-card__points {
    font-weight: 600;
    font-family: var(--rm-font-mono);
    white-space: nowrap;
    margin-left: auto;
}
.rm-result-card__status {
    color: var(--rm-accent, #dc3545);
    margin-right: 0.25rem;
}
.rm-result-card__bonus {
    font-weight: 400;
    font-size: var(--rm-card-footer-size);
    font-family: var(--rm-font-mono);
    opacity: 0.7;
}
.rm-result-card__line2 {
    font-size: var(--rm-card-footer-size);
    color: var(--rm-text-muted);
    padding-left: 2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rm-pos-gold { color: var(--rm-gold); }
.rm-pos-silver { color: var(--rm-silver); }
.rm-pos-bronze { color: var(--rm-bronze); }

/* ─── Spec 43: badge pole position (badge `P` a cote du nom du pilote) ─── */
.rc-badge-pole {
    display: inline-block;
    font-weight: 700;
    font-size: 0.65rem;
    line-height: 1;
    padding: 2px 5px;
    margin-left: 0.375rem;
    border-radius: 3px;
    background: var(--rm-gradient-podium);
    color: #0a0c0f;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    vertical-align: middle;
}

/* Spec 43: tooltip "voitures recentes" sur le nom du pilote (standings desktop) */
.rc-driver-name--with-tooltip {
    cursor: help;
    border-bottom: 1px dotted var(--rm-text-muted);
    text-decoration: none;
}
.rc-driver-name--with-tooltip:hover {
    border-bottom-color: var(--rm-warning);
}

/* Spec 43: ligne 3 des cards standings mobile (voitures recentes) */
.rm-result-card__line3 {
    font-family: var(--rm-font-mono);
    font-size: 0.75rem;
    color: var(--rm-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 2rem;
    margin-top: 0.125rem;
}

/* ─── Spec 107 Bloc 2 (v1.25.1) — pages admin mobile (dérogation règle "admin desktop-only").
   Pattern table → cards calqué sur .rm-result-card (StandingsSection / RaceResultsByClass).
   Toggle via Bootstrap .d-md-none (mobile < 768px = cards) / .d-none .d-md-block (desktop = table).
   Utilisé par : LicensesTab tab Licenses pending + MembersTab sub-tab Pending (AccessRequest).
   Cf docs/specs/active/107_WEB_PUSH_NOTIFICATIONS.md §4.5 + §5.5 + §5.5b. */
.rm-admin-card {
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--rm-border);
}
.rm-admin-card:last-child { border-bottom: none; }

.rm-admin-card__line1 {
    font-weight: 600;
    font-size: var(--rm-card-body-size);
    color: var(--rm-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rm-admin-card__line2 {
    font-size: var(--rm-card-footer-size);
    color: var(--rm-text-muted);
    margin-top: 0.125rem;
}

.rm-admin-card__actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.625rem;
}
/* Boutons d'action mobile : full-width chacun + touch target >= 44px (standard projet, cf
   rm-rsvp-confirm-btn:396, rm-action-btn:423, etc.).
   Sélecteur `> *` (enfants directs only) au lieu de `> .btn` pour stretch également les
   composants wrappers (ex : <RevokeButton> rend `<div class="rm-revoke">` qui doit prendre
   sa part du flex). Évite la cascade dans le popover ouvert de RevokeButton (qui a son
   propre layout flex avec `justify-content-end`). */
.rm-admin-card__actions > * {
    flex: 1;
}
.rm-admin-card__actions > .btn,
.rm-admin-card__actions > .rm-revoke > .btn {
    min-height: 44px;
}

/* Modificateur état "pending" : border-left accent pour signaler "à traiter".
   Couleur warning (orange/jaune projet) cohérente avec le statut Pending visible
   dans le badge desktop (rm-badge bg-warning). */
.rm-admin-card--pending {
    border-left: 4px solid var(--rm-warning);
    padding-left: calc(0.75rem - 4px);
}

/* ─── Spec 107 Bloc 3 (v1.25.2) — Guide PWA install iOS (page publique /help/install-pwa) ───
   Mobile-first : layout vertical empilé, max-width container Bootstrap.
   Tokens projet uniquement → dark mode automatique. */
.rm-help-pwa {
    max-width: 720px;
}

.rm-help-pwa__steps {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.rm-help-pwa__step {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: var(--rm-card-bg);
    border: 1px solid var(--rm-border);
    border-radius: 6px;
}

.rm-help-pwa__step-num {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--rm-font);
    font-size: 1.25rem;
    font-weight: 700;
    /* Texte blanc sur fond --rm-primary (bleu RFRO) — cohérent Bootstrap .btn-primary
       (qui hardcode color:#fff pour contraste optimal sur primary background). */
    color: #fff;
    background: var(--rm-primary);
    border-radius: 50%;
}

.rm-help-pwa__step-content {
    flex: 1;
}

.rm-help-pwa__step-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    color: var(--rm-text);
}

.rm-help-pwa__step-body {
    margin: 0;
    color: var(--rm-text);
    font-size: var(--rm-card-body-size);
    line-height: 1.5;
}

.rm-help-pwa__note {
    padding: 1rem 1.25rem;
    background: var(--rm-warning-light);
    color: var(--rm-text);
    border-left: 4px solid var(--rm-warning);
    border-radius: 4px;
    font-size: var(--rm-card-body-size);
}

/* ─── Spec 107 Bloc 4 (v1.25.3) — PushOptInPrompt (toast bottom post-1er Steam login) ─── */
.rm-push-prompt {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    max-width: 480px;
    margin: 0 auto;
    background: var(--rm-card-bg);
    border: 1px solid var(--rm-border);
    border-left: 4px solid var(--rm-primary);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    z-index: 1050;
}

.rm-push-prompt__content {
    padding: 1rem 1.25rem;
}

.rm-push-prompt__title {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--rm-text);
}

.rm-push-prompt__body {
    margin: 0 0 0.75rem 0;
    font-size: var(--rm-card-body-size);
    color: var(--rm-text);
    line-height: 1.4;
}

.rm-push-prompt__actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* ─── Spec 107 Bloc 4 (v1.25.3) — PushBanner (inline backfill users existants) ─── */
.rm-push-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background: var(--rm-info-light);
    border-left: 4px solid var(--rm-primary);
    border-radius: 4px;
}

.rm-push-banner__body-wrap {
    flex: 1;
}

.rm-push-banner__body {
    margin: 0;
    font-size: var(--rm-card-body-size);
    color: var(--rm-text);
    line-height: 1.4;
}

.rm-push-banner__actions {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    flex-shrink: 0;
}

.rm-push-banner__dismiss {
    /* Bouton croix × discret, taille fixe carré pour zone tactile correcte. */
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--rm-text-muted);
    text-decoration: none;
}

.rm-push-banner__dismiss:hover {
    color: var(--rm-text);
}

/* ─── Spec 107 Bloc 3 — IosPushHint bannière conditionnelle (info iOS) ─── */
.rm-ios-push-hint {
    padding: 0.875rem 1rem;
    background: var(--rm-info-light);
    border-left: 4px solid var(--rm-primary);
    border-radius: 4px;
    margin-bottom: 1rem;
    font-size: var(--rm-card-body-size);
}

.rm-ios-push-hint__body {
    margin: 0 0 0.5rem 0;
    color: var(--rm-text);
}

.rm-ios-push-hint__link {
    color: var(--rm-primary);
    font-weight: 600;
    text-decoration: none;
}

.rm-ios-push-hint__link:hover {
    text-decoration: underline;
}

/* ─── My Races: History cards (Spec 28) ─── */
.rm-history-card {
    display: block;
    background: var(--rm-card-bg);
    border-radius: var(--rm-card-radius);
    border: 0.5px solid var(--rm-border);
    padding: 1rem;
    text-decoration: none;
    color: var(--rm-text);
    transition: box-shadow 0.15s, transform 0.15s;
}
.rm-history-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transform: translateY(-1px);
    color: var(--rm-text);
    text-decoration: none;
}
.rm-history-card__header {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--rm-text-muted);
    margin-bottom: 0.5rem;
}
.rm-history-card__result {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.rm-history-card__position {
    font-weight: 800;
    font-size: 1.25rem;
    min-width: 2.5rem;
}
.rm-history-card__position--gold { color: var(--rm-warning); }
.rm-history-card__position--silver { color: var(--rm-text-light); }
.rm-history-card__position--bronze { color: var(--rm-bronze); }
.rm-history-card__track {
    font-weight: 600;
    font-size: 0.9rem;
    flex-grow: 1;
}
.rm-history-card__points {
    font-weight: 700;
    font-size: 1rem;
    text-align: right;
    white-space: nowrap;
}

/* ─── My Races: Empty states (Spec 28) ─── */
.rm-empty-state {
    background: var(--rm-card-bg);
    border-radius: var(--rm-card-radius);
    border: 0.5px solid var(--rm-border);
    padding: 2rem;
    text-align: center;
    color: var(--rm-text-muted);
}
.rm-empty-state p {
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .rm-upcoming-card__body { flex-wrap: wrap; }
    .rm-upcoming-card__badges { margin-top: 0.375rem; }
}

/* ─── Admin form: 2-column grid (Spec 30, desktop only) ─── */
.rm-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.rm-form-col {
    min-width: 0;
}
.rm-form-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 0.5px solid var(--rm-border-light);
}
.rm-form-section-title {
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--rm-text-muted);
    margin-bottom: 0.75rem;
}
.rm-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

/* ─── Event timeline (unified bar) ─── */
.rm-timeline-unified { padding: 1.5rem; }

.rm-timeline-markers {
    position: relative;
    height: 20px;
    margin-bottom: 2px;
}
.rm-timeline-marker {
    position: absolute;
    transform: translateX(-50%);
}
.rm-timeline-hour {
    font-size: 0.7rem;
    color: var(--rm-text-light);
    white-space: nowrap;
}

.rm-timeline-bar {
    position: relative;
    height: 12px;
    background: var(--rm-border-light);
    border-radius: 6px;
    overflow: hidden;
}
.rm-timeline-segment {
    position: absolute;
    top: 0;
    height: 100%;
    border-right: 1.5px solid var(--rm-card-bg);
}
.rm-timeline-seg-done { background: var(--rm-primary-light); }
.rm-timeline-seg-active { background: var(--rm-success-light); }
.rm-timeline-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--rm-success);
    border-radius: 6px 0 0 6px;
    opacity: 0.6;
    transition: width 0.5s;
}

.rm-timeline-labels {
    position: relative;
    height: 22px;
    margin-top: 2px;
}
.rm-timeline-label {
    position: absolute;
    font-size: 0.7rem;
    color: var(--rm-text-muted);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─── Standings table ─── */
.rm-standings-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 0.5px solid var(--rm-border);
    border-radius: 10px;
    overflow: hidden;
}
.rm-standings-table thead th {
    background: var(--rm-bg);
    color: var(--rm-text-light);
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.5rem 0.75rem;
    border-bottom: 0.5px solid var(--rm-border);
}
.rm-standings-table tbody td {
    padding: 0.5rem 0.75rem;
    border-bottom: 0.5px solid var(--rm-border-light);
    font-size: 0.85rem;
}
.rm-standings-table tbody tr:last-child td {
    border-bottom: none;
}
.rm-rank {
    color: var(--rm-primary-dark);
    font-weight: 700;
    font-size: 0.9rem;
}
.rm-best-score {
    color: var(--rm-success);
    font-weight: 600;
}
.rm-no-score {
    color: #ccc;
}

/* ─── Championship detail: event summary (Spec 26) ─── */
/* Spec 104 v3.3 — `minmax(0, 1fr)` force le partage strict des colonnes. Sans ça, un
   contenu interne avec long texte/grid imbriqué (ex: RaceConditionsPanel) peut faire
   grandir une colonne au détriment des voisines (voir bug observé 2026-05-19). */
.rm-event-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.rm-event-summary--two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.rm-summary-col {
    background: var(--rm-card-bg);
    border-radius: var(--rm-card-radius);
    border: 0.5px solid var(--rm-border);
    padding: 1rem;
    /* Spec 104 v3.2 fix layout — empêche le contenu interne (panel grid, longs textes)
       de pousser la colonne au-delà de sa fraction 1fr. Sans ce min-width: 0, un
       grid imbriqué avec items en white-space:nowrap force le min-content du parent
       et casse la répartition 1fr 1fr 1fr. */
    min-width: 0;
}
.rm-summary-col .rm-card-title {
    margin-bottom: 0.75rem;
}
.rm-summary-schedule-item {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.25rem 0;
}
.rm-summary-schedule-item .rm-schedule-time {
    font-weight: 600;
    min-width: 3rem;
}
.rm-summary-schedule-item .rm-schedule-duration {
    color: var(--rm-text-light);
    font-size: 0.8rem;
    margin-left: auto;
}
.rm-summary-info-row {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
    font-size: 0.875rem;
}
.rm-summary-info-row .rm-info-label {
    color: var(--rm-text-light);
}
.rm-summary-info-row .rm-info-value {
    font-weight: 500;
}
@media (max-width: 768px) {
    .rm-event-summary,
    .rm-event-summary--two-col {
        grid-template-columns: 1fr;
    }
    .rm-summary-col--round { order: -1; }
}

/* Next race banner */
.rm-next-race-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--rm-success-light);
    color: var(--rm-success);
    border-radius: var(--rm-card-radius);
    font-weight: 500;
    font-size: 0.875rem;
}
.rm-dot-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rm-success);
    animation: pulse 1.5s infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ─── Sim badges ─── */
.sim-badge {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    object-fit: contain;
    background: var(--rm-bg);
    flex-shrink: 0;
}
.sim-badge-lg {
    width: 52px;
    height: 52px;
}
.sim-badge-sm {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    font-size: 8px !important;
}
.sim-badge-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    background: var(--rm-border);
    color: var(--rm-text);
}

/* ─── Spec 87 — Logos référentiel composants visuels ─── */
/* Pattern : 3 fallback SVG (Sim/Track/CarClass) + 3 *LogoDisplay intelligents.
   Tokens utilisés (UX_DESIGN_SYSTEM §3.4 close, theme-aware light + dark) :
   --rm-card-bg-subtle / --rm-border / --rm-text / --rm-font-mono / --rm-primary.
   Classes BEM dédiées, zero collision avec legacy .sim-badge.
*/

.rm-logo-fallback {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

.rm-logo-fallback--sim   { /* ratio 2:1 bandeau — viewBox 0 0 200 100 */ }
.rm-logo-fallback--track { /* ratio 1:1 carré — viewBox 0 0 100 100, livré Lot 2 */ }
.rm-logo-fallback--class { /* ratio 3:1 étiré — viewBox 0 0 300 100, livré Lot 3 */ }

/* SimLogoDisplay — taille via classe + style inline height calculé Razor */
.rm-sim-logo {
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 6px;
}
.rm-sim-logo--xs { /* height ≤24px */ }
.rm-sim-logo--sm { /* height ≤32px */ }
.rm-sim-logo--md { /* height ≤48px (default) */ }
.rm-sim-logo--lg { /* height ≤96px */ }
.rm-sim-logo--xl { /* height >96px */ }

/* TrackLogoDisplay — taille via classe + style inline height/width calculé Razor (carré 1:1).
   ⚠️ La classe .rm-track-logo est partagée avec le legacy ligne 2768 (badge coin 32x32 utilisé
   par TrackCrud.razor + RoundCard.razor). Les 2 définitions cohabitent : le legacy fournit
   width/height/border-radius:4px, mon ajout fournit object-fit/flex-shrink. PAS de redéfinition
   de border-radius ici pour préserver le 4px legacy et éviter une régression visuelle
   sur les 2 sites legacy en attendant la migration Lot 5.B vers <TrackLogoDisplay>. */
.rm-track-logo {
    object-fit: contain;
    flex-shrink: 0;
}
.rm-track-logo--xs { /* size ≤24px */ }
.rm-track-logo--sm { /* size ≤32px */ }
.rm-track-logo--md { /* size ≤48px (default) */ }
.rm-track-logo--lg { /* size ≤96px */ }
.rm-track-logo--xl { /* size >96px */ }

/* CarClassLogoDisplay — taille via classe + style inline height calculé Razor (rectangle 3:1 étiré) */
.rm-class-logo {
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 4px;
}
.rm-class-logo--xs { /* height ≤24px */ }
.rm-class-logo--sm { /* height ≤32px */ }
.rm-class-logo--md { /* height ≤48px (default) */ }
.rm-class-logo--lg { /* height ≤96px */ }
.rm-class-logo--xl { /* height >96px */ }

/* LogoSlugPicker — admin only — picker visuel pour Track.LogoSlug / CarClass.LogoSlug.
   Grille auto-fill responsive, scroll vertical max-height 320px. */
.rm-logo-slug-picker {
    /* container — pas de styling spécifique */
}

.rm-logo-slug-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 0.5rem;
    max-height: 320px;
    overflow-y: auto;
    padding: 0.25rem;
    border: 1px solid var(--rm-border);
    border-radius: 6px;
    background: var(--rm-card-bg-subtle);
}

.rm-logo-slug-tile {
    border: 1px solid var(--rm-border);
    border-radius: 6px;
    background: var(--rm-bg);
    padding: 0.4rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.rm-logo-slug-tile:hover { border-color: var(--rm-primary); }
.rm-logo-slug-tile:focus-visible {
    outline: 2px solid var(--rm-primary);
    outline-offset: 2px;
}
.rm-logo-slug-tile--selected {
    border-color: var(--rm-primary);
    box-shadow: 0 0 0 2px var(--rm-primary-light);
}
.rm-logo-slug-tile img {
    max-width: 100%;
    height: 48px;
    object-fit: contain;
}
.rm-logo-slug-tile__label {
    display: block;
    font-size: 0.7rem;
    color: var(--rm-text-muted);
    margin-top: 0.25rem;
    word-break: break-all;
}

/* Spec 87 Lot 5.B — bouton wrapper rendu cliquable autour d'une cellule logo
   (TrackCrud + CarClassCrud) pour ouvrir EditLogoSlugDialog (trigger T2).
   Affordance hover/focus = outline primary (cohérent autres boutons admin). */
.rm-logo-cell-btn {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    border-radius: 4px;
    transition: outline 0.15s ease-in-out;
    line-height: 0; /* évite gap baseline parasite autour du SVG/img enfant */
}
.rm-logo-cell-btn:hover {
    outline: 2px solid var(--rm-primary);
    outline-offset: 1px;
}
.rm-logo-cell-btn:focus-visible {
    outline: 2px solid var(--rm-primary);
    outline-offset: 1px;
}

/* Spec 87 Lot 4bis-bis — empty state du picker quand aucun fichier disponible
   ou aucun résultat search. Discret (text-muted) + padding centré. */
.rm-logo-slug-empty {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--rm-text-muted);
    font-size: 0.875rem;
    border: 1px dashed var(--rm-border);
    border-radius: 6px;
    background: var(--rm-card-bg-subtle);
}

/* ─── Championship cards (Spec 61 refonte) ─── */
/* Spec 104 v3.4 — `auto-fit + minmax(380px, 1fr)` : grid adaptatif intelligent qui choisit
   le nombre de colonnes selon la largeur dispo, en garantissant que chaque card a au moins
   380px (= suffisant pour strip race conditions complète + margin). Comportement :
   - Viewport ≥ ~1180 (= 3×380 + 2×gap + paddings) : 3 cards par ligne
   - Viewport 780-1180 : 2 cards plus larges (strip tient toujours)
   - Viewport < 780 : 1 card pleine largeur
   Élimine le besoin de breakpoints viewport explicites pour transitions 3↔2↔1. */
.rm-champ-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: var(--rm-grid-gap-desktop);
}
@media (max-width: 576px) {
    .rm-champ-grid {
        gap: var(--rm-grid-gap-mobile);
    }
}

.rm-champ-card {
    position: relative;
    display: block;
    background: var(--rm-card-bg);
    border-radius: var(--rm-card-radius);
    border: 0.5px solid var(--rm-border);
    padding: var(--rm-card-padding-desktop);
    text-decoration: none;
    color: var(--rm-text);
    transition: box-shadow 0.15s, transform 0.15s;
    border-top: 3px solid var(--rm-border);
}
@media (max-width: 576px) {
    .rm-champ-card { padding: var(--rm-card-padding-mobile); }
}
.rm-champ-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transform: translateY(-1px);
    color: var(--rm-text);
    text-decoration: none;
}
/* Spec 61 BR-9 : focus visible clavier explicite — outline externe a la card,
   non masquee par le ribbon absolu (z-index 2 = ribbon, outline = externe). */
.rm-champ-card:focus-visible {
    outline: 2px solid var(--rm-primary);
    outline-offset: 2px;
}
.rm-champ-card--active { border-top-color: var(--rm-success); }
.rm-champ-card--upcoming { border-top-color: var(--rm-info); }
.rm-champ-card--completed { border-top-color: var(--rm-text-light); }
.rm-champ-card--active:hover { border-top-color: var(--rm-success); filter: brightness(1.05); }
.rm-champ-card--upcoming:hover { border-top-color: var(--rm-info); filter: brightness(1.05); }

/* Ribbon statut absolu desktop, badge inline mobile (BR-2 / BR-6). */
.rm-champ-card__status-ribbon {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
}
@media (max-width: 576px) {
    .rm-champ-card__status-ribbon {
        position: static;
        display: block;
        margin-bottom: 0.5rem;
    }
}

/* SimBadge : 48 px desktop / 40 px mobile dans le contexte champ card (BR-6 §3).
   Conservé pour les call sites ChampionshipCard qui utilisent encore SimBadge legacy
   (cf 7 sites legacy spec 87 §5.A — refonte ViewModel hors scope). */
.rm-champ-card .sim-badge { width: 48px; height: 48px; }
@media (max-width: 576px) {
    .rm-champ-card .sim-badge { width: 40px; height: 40px; }
}

/* Spec 87 Lot 5.A — SimLogoDisplay (rectangle 2:1) dans .rm-champ-card zone identity.
   Desktop : Size=48 → height: 48px (style inline) + width auto = 96px max.
   Mobile : downscale via height: 32px → width auto = 64px max (préserve la place pour le titre).
   Mobile-first overlay : .rm-sim-logo a juste object-fit: contain + border-radius (cf §spec 87 base CSS). */
@media (max-width: 575.98px) {
    .rm-champ-card .rm-sim-logo {
        height: 32px !important;
    }
}

/* Titre : padding-right 5rem desktop pour reserver la place du ribbon (seule la ligne 1
   du titre est verticalement dans la zone du ribbon — la ligne meta est au-dessous).
   Mobile : padding-right 0 (ribbon devenu badge inline, pas de reservation necessaire). */
.rm-champ-card-title {
    font-size: var(--rm-card-title-size);
    font-weight: var(--rm-card-title-weight);
    letter-spacing: -0.01em;
    margin: 0;
    line-height: var(--rm-card-title-lineheight);
    padding-right: 5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (max-width: 576px) {
    .rm-champ-card-title {
        font-size: var(--rm-card-title-size-mobile);
        padding-right: 0;
    }
}

/* Tag teams inline (BR-3) — texte orange + icone herite via currentColor, sans background.
   Spec 61 BR-9 : couleur adaptee par theme pour garantir contraste WCAG AA (>=4.5:1).
   - Light mode : --rm-accent-orange-text (#c2410c, 5.13:1 sur fond card blanc).
   - Dark mode  : --rm-accent-orange-light (#fb923c, ~6:1 sur fond card #252830). */
.rm-champ-card__team-label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--rm-accent-orange-text);
    font-weight: 600;
    white-space: nowrap;
}
@media (prefers-color-scheme: dark) {
    .rm-champ-card__team-label { color: var(--rm-accent-orange-light); }
}

/* Card zones — espacement vertical, plus de border-top internes (BR-4). */
.rm-champ-card__round { margin-top: var(--rm-card-gap-zones); }
.rm-champ-card__track {
    font-weight: 600;
    font-size: var(--rm-card-body-size);
    color: var(--rm-text);
    line-height: 1.3;
}
.rm-champ-card__date {
    font-size: var(--rm-card-label-size);
    color: var(--rm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}
.rm-champ-card__meta { margin-top: var(--rm-card-gap-zones); }
.rm-champ-card__meta-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--rm-card-body-size);
}
.rm-champ-card__durations {
    color: var(--rm-text-muted);
    font-size: var(--rm-card-body-size);
    margin-left: auto;
    white-space: nowrap;
}
/* Compteur X / Y rounds en mono, mis en avant. */
.rm-champ-card__rounds-count {
    font-size: var(--rm-card-stat-size);
    font-family: var(--rm-font-mono);
    font-weight: 600;
    color: var(--rm-text-muted);
    margin-top: 0.25rem;
}
.rm-champ-card-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: var(--rm-card-footer-size);
    color: var(--rm-text-muted);
    /* BR-5 §4 : chiffres stats en mono. i18n empeche un wrap granulaire des nombres
       ("N teams engaged (M pilots)" etc.) donc on applique mono au footer entier —
       lecture cockpit-like, stats ressortent, zero fragilite i18n. */
    font-family: var(--rm-font-mono);
    font-feature-settings: "tnum";
}
/* Mobile : footer en colonne (BR-6 §6). */
@media (max-width: 576px) {
    .rm-champ-card-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
}

/* Spec 82 §7.5 Lot 6.4 — zone 3 footer Requirements (DLCs requis Compact).
   Petit gap above pour séparer du meta-line existant. */
.rm-champ-card__requirements {
    margin-top: 0.5rem;
}
.rm-champ-card__requirements:empty {
    display: none;
}

/* ─── Status badges on event cards (Step 17 P3) ─── */
.rm-status-badge-row {
    display: flex;
    justify-content: flex-end;
}

.rm-status-badge {
    display: inline-block;
    padding: 0.25em 0.7em;
    border-radius: var(--rm-pill-radius);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.rm-status-pending {
    background: var(--rm-warning-light);
    color: var(--rm-warning);
    border: 1px solid var(--rm-warning);
}

.rm-status-confirmed {
    background: var(--rm-success-light);
    color: var(--rm-success);
    border: 1px solid var(--rm-success);
}

.rm-status-waitlisted {
    background: var(--rm-border-light);
    color: var(--rm-text-muted);
    border: 1px solid var(--rm-border);
}

.rm-status-declined {
    background: var(--rm-danger-light);
    color: var(--rm-danger);
    border: 1px solid var(--rm-danger-light);
}

.rm-status-withdrawn {
    background: var(--rm-danger);
    color: white;
    border: 1px solid var(--rm-danger);
}

.rm-status-notready {
    background: var(--rm-info-light);
    color: var(--rm-info);
    border: 1px solid var(--rm-info);
}

/* ─── Quick confirm button (Step 17 P3, BR-6) ───
   Mobile (< 768px) : full width, ≥ 44px touch target, prominent.
   Desktop (≥ 768px) : compact btn-sm aligned right, less obtrusive. */
.rm-quick-confirm {
    display: block;
    width: 100%;
    min-height: 44px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

@media (min-width: 768px) {
    .rm-quick-confirm {
        display: inline-block;
        width: auto;
        min-height: 0;
        padding: 0.25rem 0.75rem;
        font-size: 0.8rem;
        margin-left: auto;
    }
}

.rm-pill-muted {
    background: var(--rm-border-light);
    color: var(--rm-text-light);
    font-weight: 500;
    font-size: 0.7rem;
}

/* Progress bar */
.rm-progress-bar {
    height: 4px;
    background: var(--rm-border-light);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 0.5rem;
}
.rm-progress-fill {
    height: 100%;
    background: var(--rm-success);
    border-radius: 2px;
    transition: width 0.3s;
}

.rm-color-preview {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 2px solid var(--rm-border);
    display: inline-block;
    vertical-align: middle;
}

.rm-logo-preview {
    max-height: 80px;
    max-width: 200px;
    object-fit: contain;
    border-radius: 8px;
    border: 0.5px solid var(--rm-border);
    padding: 4px;
    background: var(--rm-card-bg);
}

.rm-success-alert {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ─── Ad Banners ─── */
.rm-ad-slot {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rm-ad-banner img.rm-ad-banner-img {
    display: block;
    max-width: 100%;
    height: auto;
}

.rm-ad-slot-topbar {
    width: 100%;
    background: var(--rm-bg);
    border-bottom: 1px solid var(--rm-border);
    padding: 6px 12px;
}

.rm-ad-slot-topbar .rm-ad-banner-img {
    max-height: 60px;
    width: auto;
    margin: 0 auto;
}

.rm-ad-slot-footer {
    width: 100%;
    background: var(--rm-bg);
    border-top: 1px solid var(--rm-border);
    padding: 10px 12px;
}

.rm-ad-slot-footer .rm-ad-banner-img {
    max-height: 90px;
    width: auto;
    margin: 0 auto;
}

.rm-ad-slot-sidebar {
    width: 100%;
    position: sticky;
    top: 16px;
}

.rm-ad-slot-sidebar .rm-ad-banner-img {
    width: 100%;
    max-width: 300px;
    border-radius: 8px;
    border: 1px solid var(--rm-border);
}

.rm-ad-slot-championshipdetail {
    margin: 16px 0 24px;
}

.rm-ad-slot-championshipdetail .rm-ad-banner-img {
    max-height: 140px;
    width: auto;
    margin: 0 auto;
    border-radius: 8px;
}

.rm-banner-preview {
    max-height: 120px;
    max-width: 400px;
    object-fit: contain;
    border-radius: 8px;
    border: 0.5px solid var(--rm-border);
    padding: 4px;
    background: var(--rm-card-bg);
}

.rm-card-inner {
    background: var(--rm-primary-light);
    border: 1px solid var(--rm-border);
}

/* ─── Mobile responsive baseline (Step 17 P1) ─── */
@media (max-width: 768px) {
    /* Ad banners mobile : masquage TopBar + ChampDetail, Footer réduite */
    .rm-ad-slot-topbar {
        display: none;
    }
    .rm-ad-slot-championshipdetail {
        display: none;
    }
    .rm-ad-slot-footer {
        padding: 6px 12px;
    }
    .rm-ad-slot-footer .rm-ad-banner-img {
        max-height: 50px;
    }

    /* Touch targets : actions d'engagement ≥ 44px sur mobile.
       Cible les 4 classes Bootstrap utilisées pour les actions (submit, confirm,
       enroll, withdraw, save, delete) à l'intérieur de .rm-main. Le préfixe
       .rm-main exclut la navbar. Les boutons en btn-sm sont aussi élargis
       (28 occurrences de btn-primary btn-sm dans le projet, toutes des actions
       légitimes). Les filtres de navigation utilisent btn-outline-primary/
       secondary/warning/info/success et restent compacts. */
    .rm-main .btn-primary,
    .rm-main .btn-danger,
    .rm-main .btn-success,
    .rm-main .btn-outline-danger {
        min-height: 44px;
    }

    /* Timeline : réduction du padding pour gagner de l'espace vertical */
    .rm-timeline-unified {
        padding: 1rem 0.75rem;
    }
    .rm-timeline-hour,
    .rm-timeline-label {
        font-size: 0.65rem;
    }

    /* Footer : réduction de la taille du texte pour que copyright + version +
       about tiennent confortablement. Le flex-wrap et le gap responsive sont
       gérés directement dans MainLayout.razor via les classes utilitaires
       Bootstrap (flex-wrap, gap-2 gap-md-3). */
    .rm-footer .container-fluid {
        font-size: 0.75rem;
    }
}

/* ScoringTab column widths */
.rm-col-name { width: 45%; }
.rm-col-points { width: 20%; }
.rm-col-actions { width: 25%; }

/* Spec 25 — Results & Standings highlights */
.rm-fastest-lap { background-color: rgba(155, 89, 182, 0.15); }
/* .rm-pole supprimee (spec 43) — pole position materialisee via .rc-badge-pole dans la colonne Driver */
.rm-cell-win { background-color: rgba(241, 196, 15, 0.25); }
.rm-cell-podium { background-color: rgba(46, 204, 113, 0.15); }
.rm-cell-dnf { background-color: rgba(231, 76, 60, 0.15); }
.rm-cell-absent { background-color: rgba(149, 165, 166, 0.1); }
.rm-row-dnf { opacity: 0.6; }


/* ─── Spec 41 — Image library ─── */
.rm-image-picker {
    background: var(--rm-surface);
    border: 1px solid var(--rm-border);
    border-radius: 8px;
    padding: 0.75rem;
}
.rm-image-picker--empty {
    border-style: dashed;
    text-align: center;
}
.rm-image-picker__preview {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}
.rm-image-picker__thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    background: var(--rm-muted-bg, #f0f0f0);
}
.rm-image-picker__meta {
    flex: 1;
    min-width: 0;
}
.rm-image-picker__name {
    font-weight: 600;
    color: var(--rm-text);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.rm-image-picker__usage {
    font-size: 0.8rem;
    color: var(--rm-text-muted, #777);
}
.rm-image-picker__actions {
    margin-top: 0.5rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Library grid */
.rm-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
}
.rm-image-tile {
    background: var(--rm-surface);
    border: 1px solid var(--rm-border);
    border-radius: 6px;
    padding: 0.5rem;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s;
    position: relative;
}
.rm-image-tile:hover {
    border-color: var(--rm-primary);
    transform: translateY(-2px);
}
.rm-image-tile__thumb {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 4px;
    background: var(--rm-muted-bg, #f0f0f0);
}
.rm-image-tile__name {
    font-size: 0.85rem;
    color: var(--rm-text);
    margin-top: 0.4rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-weight: 500;
}
.rm-image-tile__usage {
    font-size: 0.75rem;
    color: var(--rm-text-muted, #777);
}
.rm-image-tile__usage--orphan {
    color: var(--rm-warning, #c80);
}

/* Track logo badge — coin 32x32 */
.rm-track-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 4px;
    display: inline-block;
    vertical-align: middle;
}
.rm-track-logo-fallback {
    width: 32px;
    height: 32px;
    color: var(--rm-text-muted, #777);
    opacity: 0.5;
}

/* Event poster — desktop 200px max, mobile 120px */
.rm-event-poster {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}
@media (max-width: 575.98px) {
    .rm-event-poster { max-height: 120px; }
}
.rm-event-poster--thumb {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

/* ─── Spec 04C / 53 — Claims UX ─── */
/* Truncate long claim/comment cells with ellipsis + tooltip via title="" */
.rm-claim-cell {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 575.98px) {
    .rm-claim-cell { max-width: 160px; }
}

/* Member-side claim submission form — theme-aware "subtle" surface so the
   form contrasts the surrounding card in both light and dark modes. */
.rm-claim-form {
    background: var(--rm-card-bg-subtle);
    border: 1px solid var(--rm-border);
    border-radius: 8px;
    padding: 1rem;
}

/* Organizer-side accept/reject inline forms inside the claims tab — same idea. */
.rm-claim-resolve-form {
    background: var(--rm-card-bg-subtle);
    border-color: var(--rm-border) !important;
}

/* ─── Spec 54 — Claim status color coding (rows + cards) ─── */
.rm-claim-row--pending   { border-left: 4px solid #f59e0b; }
.rm-claim-row--accepted  { border-left: 4px solid #22c55e; }
.rm-claim-row--rejected  { border-left: 4px solid #ef4444; }
.rm-claim-row--revoked   { border-left: 4px solid var(--rm-silver); }
.rm-claims-table > tbody > tr.rm-claim-row { /* keep the colored edge visible even with Bootstrap table-hover */
    border-left-width: 4px;
    border-left-style: solid;
}

/* ─── Spec 54 — Claim expandable cards ─── */
.rm-claim-cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.rm-claim-card {
    background: var(--rm-card-bg);
    border: 1px solid var(--rm-border);
    border-left-width: 4px;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.rm-claim-card:hover {
    border-color: var(--rm-primary);
}
.rm-claim-card--pending   { border-left-color: #f59e0b; }
.rm-claim-card--accepted  { border-left-color: #22c55e; }
.rm-claim-card--rejected  { border-left-color: #ef4444; }
.rm-claim-card--revoked   { border-left-color: var(--rm-silver); }

.rm-claim-card__header {
    margin-bottom: 0.5rem;
}
.rm-claim-card__parties {
    color: var(--rm-text);
}
.rm-claim-card__header-meta {
    margin-top: 0.1rem;
}
.rm-claim-card__preview {
    margin-top: 0.4rem;
    color: var(--rm-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.rm-claim-card--expanded .rm-claim-card__preview { display: none; }

.rm-claim-card__actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 0.5rem;
}

.rm-claim-card__body {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--rm-border-light, var(--rm-border));
}
.rm-claim-card__description {
    white-space: pre-wrap;
    color: var(--rm-text);
}
.rm-claim-card__context {
    background: var(--rm-card-bg-subtle);
    padding: 0.6rem 0.75rem;
    border-radius: 6px;
}

/* ─── Spec 57 Phase 3 : zone d'upload image avec hint "cliquer ou deposer" ───
   Le <InputFile> natif Blazor est masque (visually-hidden) et enrobe dans un
   <label> drop zone qui capture le click. Le drag-and-drop reel est gere
   nativement par le navigateur qui redirige le fichier vers l'input masque. */
.rm-image-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 1.5rem 1rem;
    border: 2px dashed var(--rm-border);
    border-radius: var(--rm-card-radius);
    background: var(--rm-card-bg-subtle);
    color: var(--rm-text-muted);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
    text-align: center;
}
.rm-image-drop:hover,
.rm-image-drop:focus-within {
    border-color: var(--rm-primary);
    background: var(--rm-primary-light);
    color: var(--rm-text);
}
.rm-image-drop__icon { color: var(--rm-primary); }
.rm-image-drop__hint { font-weight: 600; font-size: 0.9rem; }
.rm-image-drop__constraints { font-size: 0.75rem; color: var(--rm-text-muted); }
.rm-image-drop__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ─── Spec 39 : Organizer note sur une manche (RaceEvent.Description) ───
   Carte distincte des .rm-card standards — liseree gauche orange "highlight"
   signalant une info humaine et contextuelle, pas un bloc d'information structure. */
.rc-event-note {
    background: var(--rm-card-bg-subtle);
    border: 1px solid var(--rm-border-light);
    border-left: 3px solid var(--rm-accent-orange);
    border-radius: var(--rm-card-radius);
    padding: var(--rm-event-note-padding, 1rem 1.25rem);
    margin-bottom: 1rem;
}
.rc-event-note__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--rm-text);
    margin-bottom: 0.5rem;
}
.rc-event-note__title-icon { color: var(--rm-accent-orange); }
.rc-event-note__body {
    color: var(--rm-text);
    font-size: 0.9rem;
    line-height: 1.5;
}
.rc-event-note__body a {
    color: var(--rm-accent-orange);
    text-decoration: none;
}
.rc-event-note__body a:hover { text-decoration: underline; }
.rc-event-note__body p:last-child { margin-bottom: 0; }

/* ─── Spec 58 : Wizard creation championnat / one-shot (desktop-only) ─── */
.rm-wizard {
    background: var(--rm-card-bg);
    border: 1px solid var(--rm-border);
    border-radius: var(--rm-card-radius);
    padding: 1.25rem;
    margin-bottom: 1rem;
}
.rm-wizard__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--rm-border-light);
}
.rm-wizard__title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
    flex-grow: 1;
}
.rm-wizard__sim-badge {
    background: var(--rm-primary-light);
    color: var(--rm-primary-dark);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3em 0.7em;
    border-radius: var(--rm-pill-radius);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.rm-wizard__close {
    color: var(--rm-text-muted);
    font-size: 1.4rem;
    line-height: 1;
    padding: 0 0.5rem;
    text-decoration: none;
}
.rm-wizard__close:hover { color: var(--rm-danger); }

.rm-wizard__progress {
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
    gap: 0.5rem;
    position: relative;
}
.rm-wizard__progress::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 24px;
    right: 24px;
    height: 2px;
    background: var(--rm-border);
    z-index: 0;
}
.rm-wizard__step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    color: var(--rm-text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    position: relative;
    z-index: 1;
    background: var(--rm-card-bg);
    padding: 0 0.5rem;
}
.rm-wizard__step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--rm-card-bg-subtle);
    border: 2px solid var(--rm-border);
    font-weight: 700;
    font-size: 0.8rem;
}
.rm-wizard__step--active .rm-wizard__step-num {
    background: var(--rm-primary);
    border-color: var(--rm-primary);
    color: #fff;
}
.rm-wizard__step--active {
    color: var(--rm-text);
    font-weight: 600;
}
.rm-wizard__step--done .rm-wizard__step-num {
    background: var(--rm-success);
    border-color: var(--rm-success);
    color: #fff;
}

.rm-wizard__body { margin-bottom: 1.25rem; }

/* Inputs etroits pour numeros / dates dans les wizards */
.rm-input-narrow { max-width: 140px; }
.rm-input-medium { max-width: 320px; }

.rm-wizard__nav {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding-top: 0.75rem;
    border-top: 1px solid var(--rm-border-light);
}

.rm-wizard__preview {
    display: flex;
    gap: 1rem;
    padding: 0.75rem;
    background: var(--rm-card-bg-subtle);
    border-radius: var(--rm-card-radius);
    border: 1px solid var(--rm-border-light);
}
.rm-wizard__preview-poster {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: var(--rm-card-radius);
    flex-shrink: 0;
}
.rm-wizard__preview-body { flex-grow: 1; display: flex; flex-direction: column; gap: 0.25rem; }
.rm-wizard__preview-title { font-weight: 700; font-size: 1rem; }

.rm-wizard-desktop-fallback {
    text-align: center;
    padding: 2rem;
    background: var(--rm-card-bg-subtle);
    border-radius: var(--rm-card-radius);
    border: 1px dashed var(--rm-border);
}

/* ─── Spec 58 : poster du championnat (surfaces publiques) ─── */
.rm-championship-poster {
    width: 100%;
    max-height: 280px;
    object-fit: cover;
    border-radius: var(--rm-card-radius);
    display: block;
}
.rm-champ-card__poster {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--rm-card-radius);
    margin-bottom: 0.75rem;
    position: relative;
    z-index: 1;  /* Spec 61 BR-2 §6 : ribbon statut (z-index 2) doit toujours rester au-dessus. */
}

/* ── Spec 42 — RaceSession grouping (admin ChampionshipRoundsList) ──
   Une soiree = un rm-session-block qui regroupe ses heats enfants.
   Multi-heat badge rappelle visuellement une soiree doublee. */
.rm-session-block {
    border-left: 3px solid var(--rm-primary);
    padding-left: 0.75rem;
    margin-bottom: 1.5rem;
}
.rm-session-block__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}
.rm-session-block__entrylist {
    margin-left: auto;
}
@media (max-width: 767.98px) {
    /* Mobile : EntrylistLink prend toute la largeur sous le titre (B7 spec 67) */
    .rm-session-block__entrylist {
        margin-left: 0;
        width: 100%;
    }
}
.rm-session-block__title {
    font-size: var(--rm-card-title-size);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--rm-text);
    margin: 0;
}
@media (max-width: 576px) {
    .rm-session-block__title { font-size: var(--rm-card-title-size-mobile); }
}
.rm-session__multi-heat-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    background: var(--rm-accent-orange);
    color: #fff;
    font-size: var(--rm-card-label-size);
    font-family: var(--rm-font-mono);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 999px;
    line-height: 1.2;
}

/* Spec 42 §BR-25 — grille des heats d'une soiree sur la page publique.
   Mobile first : 1 colonne stacked ; >=md : 2 colonnes cote a cote pour
   les soirees multi-heat. Spec 61 BR-8 : tokens gap unifies. */
.rm-session__heats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--rm-grid-gap-mobile);
}
@media (min-width: 768px) {
    .rm-session__heats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--rm-grid-gap-desktop);
    }
}
.rm-session__heat-card {
    background: var(--rm-card-bg-subtle);
    border-radius: var(--rm-card-radius);
    border: 0.5px solid var(--rm-border);
    padding: 0.75rem 1rem;
}
.rm-session__heat-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}
.rm-session__heat-durations {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}
/* Spec 42 §BR-28 — podium preview top 3 pour heats Closed (tokens spec 57/61). */
.rm-session__podium {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.5rem;
    font-size: var(--rm-card-body-size);
}
.rm-session__podium-entry {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.rm-session__podium-pos {
    font-family: var(--rm-font-mono);
    font-weight: 700;
    min-width: 1.2em;
    text-align: right;
}
.rm-session__heat-reg {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Spec 42 §BR-23 — dots d'etat MyRaces. 1 dot par heat, colore par le statut
   individuel de la Registration. L'etat agrege (Confirmed / Pending /
   Withdrawn / Partial) est affiche en label texte a cote. */
.rm-session__state-dots {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}
.rm-session__state-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.5px solid transparent;
    box-sizing: border-box;
}
.rm-session__state-dot--confirmed { background: var(--rm-success); }
.rm-session__state-dot--pending {
    background: transparent;
    border-color: var(--rm-warning);
}
.rm-session__state-dot--withdrawn { background: var(--rm-danger); }
.rm-session__state-dot--waitlisted {
    background: transparent;
    border-color: var(--rm-info);
}
/* Variantes de carte MyRaces selon etat agrege session (BR-23). */
.rm-upcoming-card--muted {
    opacity: 0.7;
}
.rm-upcoming-card--partial {
    border-left: 3px solid var(--rm-info);
}

/* ───── Spec 56 batch 2 — Team management ─────────────────────────── */
/* Spec 61 BR-8 : gap unifie via tokens, mobile 1fr explicite. */
.rm-team-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--rm-grid-gap-mobile);
}
@media (min-width: 576px) {
    .rm-team-cards { gap: var(--rm-grid-gap-desktop); }
}
@media (min-width: 768px) {
    .rm-team-cards {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }
}
.rm-team-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--rm-bg-elevated, #fff);
    border: 1px solid var(--rm-border, #e5e7eb);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.rm-team-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    color: inherit;
}
.rm-team-card--invite {
    border-left: 3px solid var(--rm-info, #3b82f6);
}
.rm-team-card__logo {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    /* Spec 97 B22-2 BR-CLEAN-MEM-2 — consomme --team-color via custom property
       inline (set par TeamBadgeHelper.TeamColorVar). Fallback chained sur token projet. */
    background-color: var(--team-color, var(--rm-border, #e5e7eb));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
}
.rm-team-card__logo--lg {
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    font-size: 1.5rem;
}
.rm-team-card__body {
    flex: 1 1 auto;
    min-width: 0;
}
.rm-team-card__name {
    font-weight: 700;
    font-size: var(--rm-card-title-size);
    letter-spacing: -0.01em;
    line-height: var(--rm-card-title-lineheight);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
@media (max-width: 576px) {
    .rm-team-card__name { font-size: var(--rm-card-title-size-mobile); }
}
.rm-team-card__meta {
    color: var(--rm-text-muted, #6b7280);
    font-size: var(--rm-card-label-size);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}
.rm-team-card__role-badge {
    background: var(--rm-accent-primary, #e8372a);
    color: #fff;
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
}
.rm-teams-header {
    row-gap: 0.5rem;
}
.rm-team-detail__header {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.rm-team-detail__header-body {
    flex: 1 1 auto;
    min-width: 0;
}
.rm-team-detail__section {
    background: var(--rm-bg-elevated, #fff);
    border: 1px solid var(--rm-border, #e5e7eb);
    border-radius: 8px;
    padding: 1rem;
}
.rm-team-detail__section--danger {
    border-color: var(--rm-danger, #dc2626);
}
.rm-team-members-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.rm-team-members-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--rm-border, #e5e7eb);
    flex-wrap: wrap;
}
.rm-team-members-list__item:last-child {
    border-bottom: none;
}
.rm-team-members-list__name {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.rm-team-members-list__self {
    color: var(--rm-text-muted, #6b7280);
    font-size: 0.875rem;
}
.rm-team-members-list__actions {
    display: inline-flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.rm-team-form-container {
    max-width: 560px;
}
.rm-team-invite-page {
    max-width: 560px;
    text-align: center;
    margin: 0 auto;
    padding: 2rem 1rem;
}
.rm-team-invite-page .rm-team-card__logo--lg {
    margin: 0 auto;
}
/* Spec 56 batch 5a — Team standings + Engages variant */
.rm-team-card__logo--inline {
    display: inline-flex;
    width: 24px;
    height: 24px;
    font-size: 0.7rem;
    flex: 0 0 24px;
    vertical-align: middle;
}
.rm-team-standings tbody tr {
    transition: background-color 0.12s ease;
}
.rm-team-engages-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.rm-team-engages-list__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--rm-border, #e5e7eb);
}
.rm-team-engages-list__item:last-child {
    border-bottom: none;
}
.rm-team-engages-list__body {
    flex: 1 1 auto;
    min-width: 0;
}

/* Spec 56 batch 4 — preview sections unifiees (invitation UX-1) */
.rm-invite-preview-section {
    border-radius: 6px;
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--rm-border, #e5e7eb);
    background: var(--rm-bg-elevated, #fff);
}
.rm-invite-preview-section h6 {
    margin-bottom: 0.5rem;
}
.rm-invite-preview-section--info {
    border-left-color: var(--rm-info, #3b82f6);
    background: color-mix(in srgb, var(--rm-info, #3b82f6) 6%, transparent);
}
.rm-invite-preview-section--warning {
    border-left-color: var(--rm-warning, #f59e0b);
    background: color-mix(in srgb, var(--rm-warning, #f59e0b) 6%, transparent);
}

/* Spec 56 UX-10 batch 7f — invitation preview sections use native <details>/<summary>.
   On desktop (>= md): always expanded, summary non-interactive (visual header only).
   On mobile (< md): collapsed by default (override via `open` attr), summary clickable.
   Chevron drawn via CSS borders (no unicode glyph, no SVG file — BR-34 conformant). */
.rm-invite-preview-section--details > summary {
    list-style: none; /* hide default triangle */
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    font-size: 0.95rem;
    font-weight: 600;
}
.rm-invite-preview-section--details > summary::-webkit-details-marker {
    display: none;
}
.rm-invite-preview-section--details > summary::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--rm-text-muted, #9ca3af);
    transition: transform 150ms ease;
    flex-shrink: 0;
}
.rm-invite-preview-section--details[open] > summary::after {
    transform: rotate(180deg);
}
.rm-invite-preview-section__count {
    margin-left: auto;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: var(--rm-bg-muted, #e5e7eb);
    color: var(--rm-text-muted, #6b7280);
    font-size: 0.7rem;
    font-weight: 600;
}
/* Collapse to a single-line summary on mobile; expand with list on tap */
@media (max-width: 767.98px) {
    .rm-invite-preview-section--details:not([open]) > ul {
        display: none;
    }
}
/* Desktop : always expanded + summary non-interactive so clicking does nothing confusing. */
@media (min-width: 768px) {
    .rm-invite-preview-section--details > ul {
        display: block !important;
    }
    .rm-invite-preview-section--details > summary {
        pointer-events: none;
        cursor: default;
    }
    .rm-invite-preview-section--details > summary::after {
        display: none;
    }
}

/* Spec 56 UX-10 batch 7f — sticky footer for invitation CTAs on mobile. */
.rm-invite-ctas {
    position: static;
}
@media (max-width: 767.98px) {
    .rm-invite-ctas {
        position: sticky;
        bottom: 0;
        background: var(--rm-bg, #fff);
        padding: 0.75rem;
        margin: 1rem -0.75rem -0.75rem;
        border-top: 1px solid var(--rm-border, #e5e7eb);
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
        z-index: 10;
    }
    .rm-invite-ctas .btn {
        flex: 1 1 auto;
        min-height: 44px;
    }
}

/* Spec 56 batch 6b — team-claim file & defend pages (minimal layout, richer visuals deferred to batch 7) */
.rm-claim-team-file,
.rm-claim-team-defend {
    max-width: 820px;
}
.rm-claim-team-row {
    display: flex;
    align-items: center;
    padding: 0.6rem 0.85rem;
    border-radius: 6px;
    border: 1px solid var(--rm-border, #e5e7eb);
    /* Spec 97 B22-2 BR-CLEAN-MEM-2 — consomme --team-color custom property
       inline (set par TeamBadgeHelper.TeamColorVar). Chained fallback. */
    border-left: 3px solid var(--team-color, var(--rm-border, #e5e7eb));
    background: var(--rm-bg-elevated, #fff);
}
.rm-claim-team-defend__description-body {
    white-space: pre-wrap;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    background: var(--rm-bg-elevated, #fff);
    border: 1px solid var(--rm-border, #e5e7eb);
}

/* Spec 56 BR-20 batch 7b — country dropdown with inline flag preview on team forms. */
.rm-country-select {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.rm-country-select .fi {
    width: 24px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 2px;
}

/* Spec 56 BR-20 batch 7e — ClaimCard Relay team chips in the header ("TeamA vs TeamB"
   rendered with logo + flag + ColorHex border). */
.rm-claim-card__team-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    border: 1px solid var(--rm-border, #e5e7eb);
    /* Spec 97 B22-2 BR-CLEAN-MEM-2 — consomme --team-color custom property
       inline (set par TeamBadgeHelper.TeamColorVar). Chained fallback. */
    border-left: 3px solid var(--team-color, var(--rm-border, #e5e7eb));
    background: var(--rm-bg-elevated, #fff);
}
.rm-claim-card__vs {
    font-weight: 600;
    color: var(--rm-text-muted, #9ca3af);
    text-transform: lowercase;
    font-size: 0.85rem;
}

/* Spec 56 BR-20 batch 7c — team logo badge (image path). The inline style from
   TeamLogoBadge sets width/height, we provide crop + rounding + inline flow. */
.rm-team-logo-badge {
    object-fit: cover;
    border-radius: 4px;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Spec 56 BR-20 batch 7c — inline country flag badge used in team cards, standings,
   engages, and TeamDetail header. Shape is controlled via inline style on the .fi span. */
.rm-country-flag {
    display: inline-flex;
    vertical-align: middle;
}
.rm-country-flag .fi {
    border-radius: 2px;
}

/* Spec 56 BR-20 batch 7c — Entrylist row : profile car thumbnail 160x90 (16:9)
   with fallback silhouette. Aligned alongside logo + team body. */
.rm-team-engages-list__car-thumb {
    width: 160px;
    height: 90px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    background: var(--rm-bg-muted, #f3f4f6);
}
.rm-team-engages-list__car-thumb--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rm-text-muted, #9ca3af);
    border: 1px dashed var(--rm-border, #e5e7eb);
}
@media (max-width: 575.98px) {
    /* Collapse thumbs on mobile to keep the row compact. */
    .rm-team-engages-list__car-thumb {
        width: 80px;
        height: 45px;
    }
}

/* Spec 56 BR-20 batch 7c — TeamDetail hero header with profile car cover-blur-fade. */
.rm-team-detail__header--hero {
    position: relative;
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    overflow: hidden;
    padding: 2.5rem 1.5rem;
    color: var(--rm-text-on-dark, #fff);
}
.rm-team-detail__header--hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(15, 23, 42, 0.55) 0%,
        rgba(15, 23, 42, 0.85) 100%);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 0;
}
.rm-team-detail__header--hero .rm-team-detail__header-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.rm-team-detail__header--hero h1,
.rm-team-detail__header--hero .text-muted {
    color: #fff !important;
}

/* Spec 56 BR-30 + UX-C10 — MyRaces informational team-penalty banner.
   Animation (shake + orange glow) runs once on first paint. Respects
   prefers-reduced-motion (no animation, static amber tone fallback). */
.rm-team-penalty-section {
    display: grid;
    gap: 0.5rem;
}
.rm-team-penalty-banner {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--rm-warning, #f59e0b);
    background: color-mix(in srgb, var(--rm-warning, #f59e0b) 8%, transparent);
    color: inherit;
    text-decoration: none;
    transition: background-color 150ms ease;
    animation: rm-team-penalty-enter 200ms ease-out;
}
.rm-team-penalty-banner:hover {
    background: color-mix(in srgb, var(--rm-warning, #f59e0b) 14%, transparent);
}
.rm-team-penalty-banner__icon {
    color: var(--rm-warning, #f59e0b);
    flex-shrink: 0;
    margin-top: 2px;
}
.rm-team-penalty-banner__title {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--rm-warning, #f59e0b);
    margin-bottom: 0.15rem;
}
.rm-team-penalty-banner__text {
    font-size: 0.875rem;
    line-height: 1.4;
}
@keyframes rm-team-penalty-enter {
    0%   { transform: translateX(-6px); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
    40%  { transform: translateX(4px);  box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.25); }
    70%  { transform: translateX(-2px); box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15); }
    100% { transform: translateX(0);    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .rm-team-penalty-banner { animation: none; }
}

/* ============================================================================
   Spec 63 — Members Management Refonte (UX amendements A→N)
   Adapted from spec dark-mode tokens to project rm-* light-mode tokens.
   ============================================================================ */

/* ─── Tabs (amendements I + K) ─── */
.rm-members-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--rm-border);
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.rm-tab-btn {
    background: transparent;
    border: none;
    padding: 12px 20px;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rm-text-muted);
    cursor: pointer;
    position: relative;
    transition: color 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.rm-tab-btn:hover { color: var(--rm-text); }
.rm-tab-btn--active { color: var(--rm-text); }
.rm-tab-btn--active::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 12px;
    right: 12px;
    height: 2px;
    background: var(--rm-danger);
    box-shadow: 0 0 8px rgba(231, 76, 60, 0.4);
}

/* ─── Tab badges (amendement E) ─── */
.rm-tab-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-family: var(--bs-font-monospace, 'JetBrains Mono', monospace);
    font-weight: 700;
    font-size: 0.7rem;
    line-height: 1.4;
}
.rm-tab-badge--pending {
    background: var(--rm-warning);
    color: #fff;
    box-shadow: 0 0 8px rgba(230, 126, 34, 0.4);
}
.rm-tab-badge--neutral { background: var(--rm-card-bg-subtle); color: var(--rm-text-muted); }
.rm-tab-badge--muted   { background: var(--rm-card-bg-subtle); color: var(--rm-text-light); }

/* ─── Tab hint (amendement M) ─── */
.rm-tab-hint {
    color: var(--rm-text-muted);
    font-size: 0.875rem;
    margin: 4px 0 16px;
}

/* ─── Search bar (amendement G) ─── */
.rm-search-bar {
    display: flex;
    align-items: center;
    background: var(--rm-card-bg);
    border: 1px solid var(--rm-border);
    border-radius: 4px;
    padding: 0 12px;
    transition: border-color 0.15s, box-shadow 0.15s;
    margin-bottom: 8px;
    max-width: 480px;
}
.rm-search-bar:focus-within {
    border-color: var(--rm-danger);
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.15);
}
.rm-search-bar input {
    background: transparent;
    border: none;
    color: var(--rm-text);
    flex: 1;
    padding: 8px 0;
    outline: none;
}
.rm-search-bar input::placeholder { color: var(--rm-text-light); font-style: italic; }
.rm-search-icon { color: var(--rm-text-light); margin-right: 8px; flex-shrink: 0; }
.rm-search-clear {
    background: transparent;
    border: none;
    color: var(--rm-text-light);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.rm-search-clear:hover { color: var(--rm-danger); }
.rm-search-counter {
    font-size: 0.8rem;
    color: var(--rm-text-muted);
    margin-bottom: 8px;
}

/* ─── Sort headers (amendement D) ─── */
.rm-table thead th {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.75rem;
    color: var(--rm-text-muted);
}
.rm-th-sortable { cursor: pointer; user-select: none; transition: color 0.15s; white-space: nowrap; }
.rm-th-sortable:hover { color: var(--rm-text); }
.rm-th-sortable--active {
    color: var(--rm-danger);
    border-bottom: 2px solid var(--rm-danger);
}
.rm-th-sort-icon {
    margin-left: 4px;
    transition: transform 0.15s;
    vertical-align: -2px;
}
.rm-th-sort-icon--desc { transform: rotate(180deg); }

/* ─── Row transition (amendement L) ─── */
.rm-table tbody tr { transition: opacity 0.15s, background 0.15s; }

/* ─── Online dot (amendement F) ─── */
.rm-avatar-wrap {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 36px;
}
.rm-online-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--rm-success);
    box-shadow: 0 0 8px rgba(29, 158, 117, 0.5), 0 0 0 2px var(--rm-card-bg);
    animation: rm-online-pulse 2s ease-in-out infinite;
}
@keyframes rm-online-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.6; }
}
@media (prefers-reduced-motion: reduce) {
    .rm-online-dot { animation: none; }
}

/* ─── Inline editable cell (amendement A) ─── */
.rm-editable {
    cursor: text;
    border-radius: 3px;
    padding: 2px 6px;
    transition: background 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 24px;
}
.rm-editable:hover { background: rgba(231, 76, 60, 0.06); }
.rm-editable:hover .rm-editable-icon { opacity: 0.5; }
.rm-editable:focus-visible { outline: 2px solid var(--rm-danger); outline-offset: 1px; }
.rm-editable-icon {
    opacity: 0;
    transition: opacity 0.15s;
    flex-shrink: 0;
    color: var(--rm-text-muted);
}
.rm-editable-edit {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.rm-editable-input {
    border: 1px solid var(--rm-border);
    background: var(--rm-card-bg);
    color: var(--rm-text);
    padding: 4px 8px;
    border-radius: 3px;
    font-size: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
    min-width: 120px;
    outline: none;
}
.rm-editable-input:focus {
    border-color: var(--rm-danger);
    box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.15);
}
/* Invalid : thicker border + saturated halo to differentiate from valid focus */
.rm-editable-input--invalid {
    border-width: 2px;
    border-color: var(--rm-danger);
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.4);
}
.rm-editable-error {
    color: var(--rm-danger);
    font-size: 0.75rem;
    margin-top: 2px;
    font-weight: 500;
    width: 100%;
}
.rm-editable-save, .rm-editable-cancel { line-height: 1; padding: 0.15rem 0.4rem; }

/* ─── Inline confirm button (amendement C — generalized from spec 37) ─── */
.rm-inline-confirm {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.rm-inline-confirm__action { font-weight: 600; }

/* ─── Empty state (amendement J) ─── */
.rm-empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--rm-text-muted);
}
.rm-empty-icon {
    color: var(--rm-text-light);
    margin-bottom: 16px;
}
.rm-empty-title {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 1rem;
    color: var(--rm-text);
    margin-bottom: 8px;
}
.rm-empty-hint {
    font-size: 0.875rem;
    color: var(--rm-text-light);
    max-width: 400px;
    margin: 8px auto 0;
}

/* ─── Tier badges (amendement H — 4 tiers future-proof) ─── */
.rc-tier-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
}
.rc-tier-badge--gold     { background: #d4af37; }
.rc-tier-badge--silver   { background: #a0a0a0; }
.rc-tier-badge--bronze   { background: #cd7f32; }
.rc-tier-badge--platinum { background: #3498db; }

/* ============================================================================
   Spec 35 W1 — counts dans les card titles (referentiel admin)
   ============================================================================ */
.rm-count-badge {
    font-family: var(--bs-font-monospace, 'JetBrains Mono', monospace);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--rm-text-muted);
    margin-left: 8px;
    letter-spacing: 0.02em;
}

/* Spec 66 — OneShot multi-sessions : liste editable de sessions dans le wizard.
   Layout inline (desktop-only) avec # + label + qual + race + ↑↓× boutons. */
.rm-oneshot-sessions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.rm-oneshot-session-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.rm-oneshot-session-num {
    font-family: var(--bs-font-monospace, 'JetBrains Mono', monospace);
    font-weight: 600;
    color: var(--rm-text-muted);
    min-width: 2rem;
}
.rm-oneshot-session-label {
    flex: 1 1 auto;
    min-width: 0;
}
.rm-oneshot-session-duration {
    flex: 0 0 180px;
}

/* ─── Dropdown click-outside backdrop ─── */
/* Bootstrap JS n'est pas charge dans le projet (decision « CSS-only SSR »).
   Pattern partage : un backdrop invisible plein-ecran capture les clicks
   exterieurs au dropdown et le ferme via @onclick. z-index < menu pour
   que les items du dropdown restent cliquables. */
.rm-dropdown-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: transparent;
    cursor: default;
}

/* Spec 98B Fix #1 — bouton reset color CarClassActionBar : padding compact
   pour alignement vertical avec input color picker (height ~24px par defaut).
   Substitue le glyphe `×` ambigu par RotateCcwIcon + tooltip dedie. */
.rm-color-reset-btn {
    padding: 0.125rem 0.375rem;
    line-height: 1;
}

/* Spec 98 follow-up bonus — CarClassDeletionDialog replacement class picker
   custom dropdown (UX_PATTERNS §4). Rend CarClassLogoDisplay dans chaque option
   pour sélection visuelle riche vs `<select>` natif (incapable de rendre des
   composants Razor). Pattern button toggle + backdrop click-outside + dropdown
   panel — réutilisable par d'autres pickers admin si besoin. */
.rm-classpicker-wrap { position: relative; }
.rm-classpicker-toggle {
    text-align: left;
    cursor: pointer;
}
.rm-classpicker-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--rm-card-bg);
    border: 1px solid var(--rm-border);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 1050;
    max-height: 240px;
    overflow-y: auto;
    margin-top: 2px;
}
.rm-classpicker-option {
    background: transparent;
    border: none;
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    color: var(--rm-text);
    transition: background 0.15s;
}
.rm-classpicker-option:hover,
.rm-classpicker-option[aria-selected="true"] { background: var(--rm-bg); }
.dropdown-menu.show {
    /* Force au-dessus du backdrop (Bootstrap default 1000) */
    z-index: 1041 !important;
}

/* Spec 91 V2 lot L6.E.2 P2 — animation cascade fade-out 300ms avant reload après
   soft-delete Circuit. Appliquee sur la card Circuit qui contient les Layouts via
   _fadingCircuitIds (CircuitCrud). Cf §7.6 spec 91 — nice-to-have peut etre
   désactivée si terrain remonte un glitch (Blazor diffing peut interrompre la
   transition lors du re-render parent).
   Tech Lead review fix #4 — pointer-events: none empêche le re-click admin sur
   la card pendant la transition (300ms). */
.rm-fading {
    transition: opacity 300ms ease-out;
    opacity: 0;
    pointer-events: none;
}

/* ─── Spec 67 §4 — Agenda popover (View championship + EntrylistLink TextOnly) ─── */
.rm-agenda-popover {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1050;
    background: var(--rm-card-bg, #fff);
    border: 1px solid var(--rm-border, #e0ddd5);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
    min-width: 280px;
    max-width: 360px;
    padding: 0;
}
.rm-agenda-popover__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--rm-border, #e0ddd5);
}
.rm-agenda-popover__body {
    padding: 0.75rem 1rem;
    color: var(--rm-text-secondary, #6b7280);
    font-size: 0.9rem;
}
.rm-agenda-popover__track {
    color: var(--rm-text, #1a1a1a);
    font-weight: 500;
    margin-bottom: 0.25rem;
}
.rm-agenda-popover__date {
    font-family: var(--bs-font-monospace, 'JetBrains Mono', monospace);
    font-size: 0.85rem;
}
.rm-agenda-popover__actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--rm-border, #e0ddd5);
}
.rm-agenda-popover__actions .rc-entrylist-link--text {
    /* Aligne le link discret a gauche, comme un sous-bouton */
    align-self: flex-start;
}

/* ─── Spec 67B — Entrylist identity card (Profile) ─── */

.rm-card--public-display {
    border-left: 3px solid var(--rm-accent);
}
.rm-card-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: 0.5rem;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--rm-accent);
    vertical-align: middle;
}

.rm-entrylist-identity-options {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.5rem;
}
.rm-entrylist-identity-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--rm-border);
    border-radius: 6px;
    cursor: pointer;
    flex-wrap: wrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.rm-entrylist-identity-option:hover {
    background: var(--rm-bg-card-subtle, rgba(0, 0, 0, 0.02));
    border-color: var(--rm-border-strong);
}
.rm-entrylist-identity-option:has(input[type="radio"]:checked) {
    border-color: var(--rm-accent);
    background: var(--rm-bg-card-subtle, rgba(0, 0, 0, 0.02));
}
.rm-entrylist-identity-option--disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.rm-entrylist-identity-option__label {
    flex: 1 1 auto;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--rm-text);
}

/* Spec 67B BR-4f — badge source (pill compact, font-mono pour metadonnees) */
.rm-source-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.6rem;
    background: var(--rm-bg-subtle, #242833);
    border-radius: 999px;
    font-family: var(--bs-font-monospace, 'JetBrains Mono', monospace);
    font-size: 0.78rem;
    color: var(--rm-text-muted);
}
.rm-source-badge__icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
    flex-shrink: 0;
}
.rm-source-badge__age {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.82rem;
    color: var(--rm-text-muted);
}

/* Spec 67B BR-4e — live preview clone fidele a 60% de .rc-entrylist-entry */
.rm-entrylist-identity-preview-wrapper {
    background: var(--rm-bg-card);
    border: 1px solid var(--rm-border);
    border-radius: 6px;
    padding: 0.75rem;
}
.rc-entrylist-entry--preview {
    /* Inherits .rc-entrylist-entry de spec 67. Echelle 60% via font-size. */
    font-size: 0.85rem;
    background: var(--rm-bg-card);
    color: var(--rm-text-primary);
}
.rc-entrylist-entry--preview .rc-entrylist-entry__number {
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
}
/* Spec 67B BR-4g — animation fade transition au changement radio */
.rc-entrylist-preview__name {
    transition: opacity 0.15s ease;
}
.rc-entrylist-preview__name--changing {
    opacity: 0.4;
}

/* ─── Spec 67 — EntrylistLink (3 variants × 3 states) ─── */

.rc-entrylist-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    font-family: var(--bs-body-font-family, system-ui, sans-serif);
    font-weight: 500;
    line-height: 1.2;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.15s ease;
    white-space: nowrap;
}

.rc-entrylist-link:focus-visible {
    outline: 2px solid var(--rm-primary);
    outline-offset: 2px;
}

.rc-entrylist-link__icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.rc-entrylist-link__label {
    font-variant-numeric: tabular-nums;
}

.rc-entrylist-link__arrow {
    margin-left: 0.15rem;
    font-size: 1.05em;
    transition: transform 0.15s ease;
}

.rc-entrylist-link--button:hover .rc-entrylist-link__arrow {
    transform: translateX(2px);
}

/* Variant Badge — pill compact */
.rc-entrylist-link--badge {
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    border: 1px solid var(--rm-border, #e0ddd5);
    background: var(--rm-bg-card, #fff);
}

.rc-entrylist-link--badge:hover {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* Variant Button — btn-sm style */
.rc-entrylist-link--button {
    padding: 0.5rem 1rem;
    min-height: 36px;
    border-radius: 0.4rem;
    font-size: 0.9rem;
    border: 1px solid var(--rm-border, #e0ddd5);
    background: var(--rm-bg-card, #fff);
}

.rc-entrylist-link--button:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

/* Variant TextOnly — link discret */
.rc-entrylist-link--text {
    padding: 0;
    font-size: 0.85rem;
    border: none;
    background: transparent;
}

.rc-entrylist-link--text:hover .rc-entrylist-link__label {
    text-decoration: underline;
}

/* States — Pre-release (gray) */
.rc-entrylist-link--state-prerelease {
    color: var(--rm-text-muted, #6b7280);
}
.rc-entrylist-link--state-prerelease.rc-entrylist-link--badge,
.rc-entrylist-link--state-prerelease.rc-entrylist-link--button {
    border-color: var(--rm-border, #e0ddd5);
}

/* States — Provisional (orange + pulse) */
.rc-entrylist-link--state-provisional {
    color: var(--rm-accent-orange-text, #c2410c);
}
.rc-entrylist-link--state-provisional.rc-entrylist-link--badge,
.rc-entrylist-link--state-provisional.rc-entrylist-link--button {
    background: var(--rm-warning-light, #fef5e7);
    border-color: var(--rm-accent-orange, #f97316);
}

/* States — Official (green + check) */
.rc-entrylist-link--state-official {
    color: var(--rm-success-text, #065f46);
}
.rc-entrylist-link--state-official.rc-entrylist-link--badge,
.rc-entrylist-link--state-official.rc-entrylist-link--button {
    background: var(--rm-success-light, #E1F5EE);
    border-color: var(--rm-success, #1D9E75);
}

/* Pulse animation for Provisional state — outer ring expanding */
.rc-pulse-icon {
    overflow: visible;
}
.rc-pulse-icon__outer {
    transform-origin: center;
    animation: rc-pulse-ring 1.6s ease-out infinite;
    opacity: 0.7;
}
@keyframes rc-pulse-ring {
    0%   { transform: scale(0.85); opacity: 0.8; }
    70%  { transform: scale(1.4);  opacity: 0; }
    100% { transform: scale(1.4);  opacity: 0; }
}

/* Touch target on mobile (B7 — min 44×44) */
@media (max-width: 767.98px) {
    .rc-entrylist-link--button {
        min-height: 44px;
        width: 100%;
        justify-content: center;
    }
    .rc-entrylist-link--badge {
        min-height: 32px;
        padding: 0.35rem 0.75rem;
    }
}

/* Reduced motion — disable pulse animation */
@media (prefers-reduced-motion: reduce) {
    .rc-pulse-icon__outer {
        animation: none;
        opacity: 0.6;
    }
    .rc-entrylist-link {
        transition: none;
    }
}

/* ─── Spec 67 — EntrylistPage public (WEC/IMSA style) ─── */

.rc-entrylist-page {
    color: var(--rm-text-primary, #f1f5f9);
    background: var(--rm-bg, #0a0c0f);
    min-height: 100vh;
    position: relative;
    --class-color: var(--rm-primary, #2563eb);
}
.rc-entrylist-page--prerelease {
    background: var(--rm-bg, #0a0c0f);
}

/* Watermark "PROVISIONAL" diagonal, opacity 0.07 */
.rc-entrylist-watermark {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Orbitron', 'Rajdhani', sans-serif;
    font-size: clamp(6rem, 18vw, 14rem);
    font-weight: 900;
    color: var(--rm-warning, #e67e22);
    opacity: 0.07;
    letter-spacing: 0.05em;
    transform: rotate(-25deg);
    pointer-events: none;
    z-index: 1;
    user-select: none;
    white-space: nowrap;
}

/* Zone 1 — Hero track-strip */
.rc-entrylist-hero {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 260px;
    padding: 2.5rem 1.5rem;
    color: #f1f5f9;
}
@media (min-width: 992px) {
    .rc-entrylist-hero {
        min-height: 360px;
        padding: 4rem 3rem;
    }
}
.rc-entrylist-hero__overlay {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 1rem;
    z-index: 2;
}
.rc-entrylist-hero__title {
    flex: 1 1 auto;
    max-width: 720px;
}
.rc-entrylist-hero__champ {
    font-family: 'Orbitron', 'Rajdhani', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: clamp(0.95rem, 2vw, 1.25rem);
    opacity: 0.85;
}
.rc-entrylist-hero__round {
    font-family: 'Orbitron', 'Rajdhani', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.05;
    margin-top: 0.4rem;
}
.rc-entrylist-hero__track {
    margin-top: 0.6rem;
    font-size: clamp(1rem, 1.6vw, 1.3rem);
    font-weight: 500;
    opacity: 0.92;
}
.rc-entrylist-hero__date {
    margin-top: 0.4rem;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.95rem;
    opacity: 0.85;
}
.rc-entrylist-hero__layout {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    width: clamp(80px, 18vw, 180px);
    height: auto;
    object-fit: contain;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    padding: 4px;
}
.rc-entrylist-hero__layout--logo {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
}
.rc-entrylist-hero__sim-logo {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 60px;
    height: 60px;
    object-fit: contain;
    background: rgba(0, 0, 0, 0.55);
    padding: 6px;
    border-radius: 8px;
    z-index: 2;
}
/* Spec 67B BR-7 — suppression de l'override desktop qui poussait le logo simulation
   en `left: 1rem` (collision avec le titre __round). Les actions Copy/Print quittent
   le hero pour la status bar, le logo reste en top-right partout. */
/* Spec 67B BR-7 — anciennes classes .rc-entrylist-hero__actions* supprimees.
   Les actions Copy link + Print PDF vivent maintenant dans la status bar
   (cf .rc-entrylist-statusbar__actions ci-dessous). */

/* Zone 2 — Status bar */
.rc-entrylist-statusbar {
    background: var(--rm-bg-elevated, #1c2029);
    color: #cbd5e1;
    padding: 0.8rem 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    font-size: 0.88rem;
    border-top: 1px solid var(--rm-border-strong, #2d3748);
    border-bottom: 1px solid var(--rm-border-strong, #2d3748);
    position: relative;
    z-index: 2;
}
.rc-entrylist-statusbar__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.rc-entrylist-statusbar__badge--official {
    background: var(--rm-success, #1D9E75);
    color: #fff;
}
.rc-entrylist-statusbar__badge--provisional {
    background: var(--rm-accent-orange, #f97316);
    color: #fff;
}
.rc-entrylist-statusbar__meta {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.82rem;
}
.rc-entrylist-statusbar__counts {
    margin-left: auto;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-weight: 600;
    color: #f1f5f9;
}

/* Spec 67B BR-7 — actions Copy link + Print PDF deplacees du hero vers la status bar.
   Desktop : icon-only 32x32 a l'extreme droite. Mobile : 44x44 (touch target),
   ordre flex `1` pour rester sur la ligne 1 a droite du badge. */
.rc-entrylist-statusbar__actions {
    display: inline-flex;
    gap: 0.4rem;
}
.rc-entrylist-statusbar__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    color: #cbd5e1;
    border: 1px solid var(--rm-border-strong, #2d3748);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.rc-entrylist-statusbar__action:hover {
    background: var(--rm-bg-subtle, #242833);
    color: #f1f5f9;
}
.rc-entrylist-statusbar__action:focus-visible {
    outline: 2px solid var(--rm-primary, #2563eb);
    outline-offset: 2px;
}

/* Mobile <768px : status bar wrap en 3 lignes — Badge+Actions / Meta / Counts.
   Avec flex-wrap: wrap, l'ordre flex decide qui passe en premier. Badge order=0,
   Actions order=1 (juste apres badge), Meta order=2 + flex-basis:100% (force wrap),
   Counts order=3 + flex-basis:100% (force wrap). Resultat :
     ligne 1 : Badge | Actions
     ligne 2 : Meta
     ligne 3 : Counts */
@media (max-width: 767.98px) {
    .rc-entrylist-statusbar__badge { order: 0; }
    .rc-entrylist-statusbar__actions { order: 1; margin-left: auto; }
    .rc-entrylist-statusbar__meta { order: 2; flex: 1 1 100%; margin-left: 0; }
    .rc-entrylist-statusbar__counts { order: 3; flex: 1 1 100%; margin-left: 0; }
    .rc-entrylist-statusbar__action {
        width: 44px;    /* touch target minimum tactile */
        height: 44px;
    }
}

/* Zone 3 — Class banner + entries */
.rc-entrylist-class {
    position: relative;
    z-index: 2;
    margin: 1.5rem 0 0 0;
    padding: 0 1rem;
}
@media (min-width: 992px) {
    .rc-entrylist-class { padding: 0 2rem; }
}
.rc-entrylist-class__banner {
    background: var(--class-color);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    font-family: 'Orbitron', 'Rajdhani', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.75rem 1.5rem;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 4px;
    font-size: 1.1rem;
}
.rc-entrylist-class__count {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.85rem;
    opacity: 0.9;
}
.rc-entrylist-class__entries {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.6rem;
}

.rc-entrylist-entry {
    position: relative;
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 1rem;
    align-items: center;
    padding: 0.85rem 1rem;
    background: var(--rm-bg-card, #13161c);
    color: var(--rm-text-primary, #f1f5f9);
    border-left: 6px solid var(--class-color);
    border-radius: 4px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
@media (min-width: 992px) {
    .rc-entrylist-entry:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
    }
}
.rc-entrylist-entry__livery {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.12;
    pointer-events: none;
    /* Spec 97 B22-3 BR-CLEAN-MEM-3 — image set inline via CSS custom property --livery-url. */
    background-image: var(--livery-url, none);
}
.rc-entrylist-entry__number {
    position: relative;
    width: 64px;
    height: 64px;
    background: var(--class-color);
    color: #fff;
    font-family: 'Orbitron', 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    z-index: 1;
}
.rc-entrylist-entry__body {
    position: relative;
    z-index: 1;
    min-width: 0;
}
.rc-entrylist-entry__team,
.rc-entrylist-entry__driver-solo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 1.05rem;
}
.rc-entrylist-entry__team-logo {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.04);
}
.rc-entrylist-entry__team-fallback {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    /* Spec 97 B22-3 BR-CLEAN-MEM-3 — couleur set inline via --team-color, fallback projet token. */
    background: var(--team-color, var(--rm-primary));
}
.rc-entrylist-entry__team-name {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'Inter', system-ui, sans-serif;
}
.rc-entrylist-entry__model {
    font-size: 0.82rem;
    color: var(--rm-text-muted, #6b7280);
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    margin-top: 0.2rem;
}
.rc-entrylist-entry__drivers {
    margin-top: 0.4rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.92rem;
}
.rc-entrylist-entry__driver {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.rc-entrylist-entry__separator {
    opacity: 0.45;
    margin: 0 0.1rem;
}
.rc-entrylist-entry__flag {
    font-size: 1.1em;
    line-height: 1;
}
.rc-entrylist-entry__flag img.emoji {
    /* Twemoji renders emoji as <img class="emoji"> — normalize size */
    height: 1em;
    width: 1em;
    vertical-align: -0.1em;
    margin: 0;
}

/* Pre-release teaser */
.rc-entrylist-prerelease {
    text-align: center;
    padding: 4rem 1rem;
    position: relative;
    z-index: 2;
}
.rc-entrylist-prerelease__title {
    font-family: 'Orbitron', 'Rajdhani', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}
.rc-entrylist-prerelease__countdown {
    font-family: 'Orbitron', 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 4vw, 3rem);
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.25);
    padding: 1rem 2rem;
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 1.2rem;
}
.rc-entrylist-prerelease__available {
    color: var(--rm-text-muted, #94a3b8);
    margin-bottom: 1rem;
}
.rc-entrylist-prerelease__count {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--rm-text-secondary, #cbd5e1);
}
.rc-entrylist-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rm-success, #1D9E75);
    animation: rc-entrylist-dot-pulse 2.5s ease-in-out infinite;
}
@keyframes rc-entrylist-dot-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; box-shadow: 0 0 8px var(--rm-success, #1D9E75); }
}

/* Empty states */
.rc-entrylist-empty {
    text-align: center;
    color: var(--rm-text-muted, #6b7280);
    padding: 2rem 1rem;
    margin: 0;
}
.rc-entrylist-empty--class {
    padding: 1rem;
}

/* Footer */
.rc-entrylist-footer {
    margin-top: 3rem;
    padding: 1.5rem;
    background: var(--rm-bg-elevated, #1c2029);
    color: var(--rm-text-secondary, #94a3b8);
    text-align: center;
    font-size: 0.82rem;
    border-top: 1px solid var(--rm-border-strong, #2d3748);
    position: relative;
    z-index: 2;
}
.rc-entrylist-footer__counts {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    margin-bottom: 0.4rem;
}
.rc-entrylist-footer__brand a {
    color: inherit;
    text-decoration: underline;
}

/* Copy link toast */
.rc-entrylist-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--rm-bg-elevated, #1c2029);
    color: #f1f5f9;
    padding: 0.7rem 1.5rem;
    border-radius: 999px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    z-index: 1100;
    font-size: 0.95rem;
    border: 1px solid var(--rm-success, #1D9E75);
}

/* ─── Print CSS — A4 landscape, color preservation ─── */
@page {
    size: A4 landscape;
    margin: 12mm;
}

@media print {
    /* Hide UI chrome */
    .rm-navbar,
    .rm-footer,
    .navbar,
    .rc-entrylist-hero__actions { display: none !important; }

    /* Preserve class colors in print (critical for WEC identity) */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
    }

    .rc-entrylist-page {
        background: #fff !important;
        color: #000 !important;
    }

    .rc-entrylist-watermark { opacity: 0.05 !important; }

    .rc-entrylist-statusbar {
        background: #f1f5f9 !important;
        color: #000 !important;
    }
    .rc-entrylist-statusbar__counts { color: #000 !important; }

    /* Class banner keeps its color (WEC identity) */
    .rc-entrylist-class__banner {
        background: var(--class-color) !important;
        color: #fff !important;
    }
    .rc-entrylist-class { page-break-inside: auto; }
    .rc-entrylist-class__banner { page-break-after: avoid; }

    .rc-entrylist-entry {
        background: #fff !important;
        color: #000 !important;
        border-left: 6px solid var(--class-color) !important;
        page-break-inside: avoid;
    }
    .rc-entrylist-entry__livery { opacity: 0.25 !important; }
    .rc-entrylist-entry__number {
        background: var(--class-color) !important;
        color: #fff !important;
    }
    .rc-entrylist-entry__model { color: #444 !important; }

    .rc-entrylist-footer {
        background: #fff !important;
        color: #000 !important;
        border-top: 1px solid #ccc !important;
    }
}

/* ─────── Spec 19A — Payments HelloAsso Settings ─────────────────────────── */

/*
 * Bandeau global Mode Test, sticky en haut de page (BR-5 + revue /ux).
 * Hauteur ~40 px, animation pulse subtile pour rappeler en permanence le mode.
 * Visible aux admins uniquement quand HelloAssoMode == Test (logique Razor).
 */
.rm-test-mode-banner {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: #facc15; /* jaune podium */
    color: #000;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.5rem 1rem;
    text-align: center;
    border-bottom: 2px solid #f97316;
    animation: rm-test-pulse 5s ease-in-out infinite;
}
@keyframes rm-test-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.85; }
}

/*
 * Settings → Payment tab : 5 cards distinctes avec bordure gauche accent
 * (sectioning visuel demande par /ux). Reuse le pattern .rm-card existant.
 */
.rm-payment-card {
    border-left: 3px solid #2980b9;
    margin-bottom: 1.5rem;
}

/*
 * Webhook URL display (input readonly avec masquage) — police mono pour
 * l'identification visuelle, fond gris clair pour signaler readonly.
 */
.rm-payment-key {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.875rem;
    background: #f8f9fa;
}

.rm-payment-key-revealed {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 0.75rem;
    word-break: break-all;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.875rem;
}

/*
 * Spec 19A — Member pay button (CTA fort sur Championship detail).
 * Style aligne avec le primary button Bootstrap mais avec icone cadenas + emphase.
 */
.rc-pay-button {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
}
.rc-pay-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/*
 * Spec 19A — Hero overlay au retour `?payment=success`. Plein viewport, auto-dismiss 5s.
 * Reutilise par 19B Stripe (composant agnostique du provider).
 */
.rm-payment-success-hero {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, #0a0c0f 0%, #1a3008 50%, #0a0c0f 100%);
    color: #f1f5f9;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem;
    animation: rm-payment-success-fade-in 300ms ease-out;
}
@keyframes rm-payment-success-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.rm-payment-success-hero__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #f1f5f9;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}
.rm-payment-success-hero__close:hover {
    background: rgba(255, 255, 255, 0.1);
}
.rm-payment-success-hero__icon {
    width: 5rem;
    height: 5rem;
    color: #22c55e;
    border: 3px solid #22c55e;
    border-radius: 50%;
    padding: 1rem;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.4);
    animation: rm-payment-success-scale 300ms ease-out 100ms both;
}
@keyframes rm-payment-success-scale {
    from { transform: scale(0.6); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
.rm-payment-success-hero__icon svg {
    width: 100%;
    height: 100%;
}
.rm-payment-success-hero__title {
    font-weight: 800;
    font-size: 2rem;
    color: #22c55e;
    letter-spacing: 0.05em;
    text-align: center;
    margin: 0;
}
.rm-payment-success-hero__body {
    color: #cbd5e1;
    text-align: center;
    margin: 0;
    max-width: 30rem;
}
.rm-payment-success-hero__amount {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 1.5rem;
    color: #94a3b8;
    margin: 0;
}
.rm-payment-success-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
    justify-content: center;
}

/*
 * Spec 19A — Status pills pour /admin/payments (commit 7).
 * Reuse du pattern Bootstrap badge mais avec semantic naming par status payment.
 */
.rm-status-pill {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1;
}
.rm-status-pill--success { background: #d1e7dd; color: #0f5132; }
.rm-status-pill--neutral { background: #e9ecef; color: #495057; }
.rm-status-pill--danger  { background: #f8d7da; color: #842029; }
.rm-status-pill--warning { background: #fff3cd; color: #664d03; }

.rm-payment-mono {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.8125rem;
}

/*
 * Spec 07B Addendum 19A A2 — RevokeButton mini popover progressif (commit 8).
 * Pattern UX : « propre par defaut, riche a la demande ». Le bouton seul est visible ;
 * le popover s'ancre au clic et expose le dropdown motif + Confirmer/Annuler.
 */
.rm-revoke {
    position: relative;
    display: inline-block;
}
.rm-revoke__backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: transparent;
    cursor: default;
}
.rm-revoke__popover {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.25rem;
    z-index: 1050;
    min-width: 18rem;
    max-width: 22rem;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    padding: 0.875rem;
}
.rm-revoke__title {
    margin: 0 0 0.5rem 0;
    font-weight: 700;
    font-size: 0.9375rem;
}

/*
 * Spec 19A BR-13 — Ko-fi support button (commit 9).
 * Style subtil au repos (text-muted) pour ne pas concurrencer les CTA principaux ;
 * passe en accent orange au hover (cohérent avec la palette Ko-fi).
 */
.rm-footer-kofi {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--rm-text-muted);
    text-decoration: none;
    font-size: 0.8rem;
    transition: color 150ms ease;
}
.rm-footer-kofi:hover,
.rm-footer-kofi:focus-visible {
    color: #f97316; /* orange Ko-fi */
}

/*
 * Spec 19A BR-13 (decision /ux maintained) — footer sticky en desktop ≥768px,
 * en flux normal en mobile pour preserver l'espace ecran.
 */
@media (min-width: 768px) {
    .rm-footer {
        position: sticky;
        bottom: 0;
        z-index: 1020; /* sous le navbar et la TestModeBanner mais au-dessus du contenu */
    }
}

/*
 * Spec 68 UX-6 — pulse animation pour le badge Championship Status = InProgress.
 * Dot vert 8px clignotant 1.5s avant le texte du badge, donne l'identite
 * « course en cours » (timing screen WEC / iRacing dashboard).
 *
 * Applique automatiquement par ChampionshipStatusHelper.GetBadgeCss quand
 * Status == InProgress (cumule avec bg-success Bootstrap pour la couleur de fond).
 *
 * Le ::before est un dot inline rempli en blanc (contraste sur fond green) plutot
 * qu'en couleur tierce, pour rester lisible sur n'importe quel theme. La pulse
 * varie l'opacite + le scale pour donner un battement "live".
 */
.rm-status-live::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffffff;
    margin-right: 6px;
    vertical-align: middle;
    animation: rm-pulse-live 1.5s infinite ease-in-out;
}

@keyframes rm-pulse-live {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(0.75);
    }
}

/* Reduced-motion : neutralise l'animation, garde juste le dot statique pour
   la lisibilite, conforme prefers-reduced-motion (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
    .rm-status-live::before {
        animation: none;
    }
}

/* ───────────────────────────────────────────────────────────────────────
   Spec 66C BR-1 / BR-9 — Section headers OneShot (icone + titre uppercase
   + counter mono optionnel) avec divider gradient racing rouge → orange
   → fade. Compense l'absence de tabs sur OneShot (decision 66B Q1=B) en
   marquant visuellement les zones SETTINGS et SESSIONS.
   ─────────────────────────────────────────────────────────────────────── */
.rm-section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--rm-text);
}

.rm-section-header h2 {
    font-size: 1.05rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

.rm-section-divider {
    height: 2px;
    background: linear-gradient(90deg,
        var(--rm-primary) 0%,
        var(--rm-primary-light) 30%,
        transparent 70%);
    margin-bottom: 1rem;
    opacity: 0.6;
    border-radius: 1px;
}

/* ───────────────────────────────────────────────────────────────────────
   Spec 66C BR-5 / BR-9 — Save settings sticky bar OneShot. Bandeau bottom
   avec backdrop blur + gradient fondu pour effet timing screen. Bouton
   gradient accent en etat dirty, pulse glow anime (coupe sous reduced-motion).
   ─────────────────────────────────────────────────────────────────────── */
.rm-oneshot-save-bar {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: flex;
    justify-content: flex-end;
    padding: 1rem 1.25rem;
    margin-top: 1rem;
    background: linear-gradient(180deg,
        transparent 0%,
        var(--rm-bg) 30%,
        var(--rm-bg) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.rm-oneshot-save-bar__btn {
    border: 0;
    border-radius: 6px;
    padding: 0.55rem 1.5rem;
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: var(--rm-card-bg);
    color: var(--rm-text-muted);
    cursor: not-allowed;
    transition: box-shadow 200ms ease, transform 100ms ease;
    display: inline-flex;
    align-items: center;
}

.rm-oneshot-save-bar__btn--dirty {
    background: linear-gradient(90deg, var(--rm-primary), var(--rm-primary-dark));
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(37, 99, 235, 0.35);
    animation: rm-pulse-accent 2s ease-in-out infinite;
}

.rm-oneshot-save-bar__btn--dirty:hover {
    box-shadow: 0 0 20px rgba(37, 99, 235, 0.55), 0 0 40px rgba(37, 99, 235, 0.25);
    transform: translateY(-1px);
}

.rm-oneshot-save-bar__btn:disabled {
    background: var(--rm-card-bg);
    color: var(--rm-text-muted);
    cursor: not-allowed;
    box-shadow: none;
    animation: none;
    transform: none;
}

@keyframes rm-pulse-accent {
    0%, 100% {
        box-shadow: 0 0 12px rgba(37, 99, 235, 0.35);
    }
    50% {
        box-shadow: 0 0 24px rgba(37, 99, 235, 0.55), 0 0 48px rgba(37, 99, 235, 0.20);
    }
}

@media (prefers-reduced-motion: reduce) {
    .rm-oneshot-save-bar__btn--dirty {
        animation: none;
    }
}

/* ──────────────────────────────────────────────────────────────────────
   Spec 82 §7.9 Lot 6.2 — DLC requirements list (Compact + Expanded + Popover)
   ────────────────────────────────────────────────────────────────────── */

.rm-dlc-requirements-list {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.rm-dlc-requirements-list--compact {
    color: var(--rm-text-muted);
    font-size: 0.875rem;
    text-decoration: none;
    border: none;
    background: transparent;
}
.rm-dlc-requirements-list--compact:hover {
    color: var(--rm-primary, #2563eb);
}

.rm-dlc-requirements-list--expanded {
    display: block;
    padding: 1rem;
    background: var(--rm-card-bg-subtle);
    color: var(--rm-text);
    border: 1px solid var(--rm-border);
    border-radius: 8px;
    margin: 1rem 0;
}

.rm-dlc-requirements-list__title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rm-text-muted);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.rm-dlc-requirements-list__items {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.rm-dlc-requirements-list__item {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--rm-border, #e0ddd5);
}
.rm-dlc-requirements-list__item:last-child {
    border-bottom: none;
}

.rm-dlc-requirements-list__name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--rm-text);
    margin-bottom: 0.25rem;
}

.rm-dlc-requirements-list__sources {
    font-size: 0.875rem;
    color: var(--rm-text-muted);
    line-height: 1.4;
}
.rm-dlc-requirements-list__sources strong {
    font-weight: 600;
    color: var(--rm-text);
}

.rm-dlc-requirements-list__store-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

/* ─── Popover compact (déclenché par bouton Compact) ─── */
.rm-dlc-popover-wrap {
    position: relative;
    display: inline-block;
}

.rm-dlc-popover {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1042;
    margin-top: 0.5rem;
    min-width: 240px;
    max-width: 360px;
    padding: 0.75rem 1rem;
    background: var(--rm-card-bg);
    color: var(--rm-text);
    border: 1px solid var(--rm-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.rm-dlc-popover__list {
    margin: 0 0 0.5rem;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.rm-dlc-popover__item {
    padding: 0.25rem 0;
    font-size: 0.875rem;
    color: var(--rm-text);
}
.rm-dlc-popover__item::before {
    content: "•";
    margin-right: 0.5rem;
    color: var(--rm-text-muted);
}

.rm-dlc-popover__see-full {
    display: inline-block;
    margin-top: 0.25rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--rm-border);
    font-size: 0.8125rem;
    color: var(--rm-primary);
    text-decoration: none;
}
.rm-dlc-popover__see-full:hover {
    text-decoration: underline;
}

/* Popover responsive : déborde rarement, mais on contraint sur mobile pour éviter scroll horizontal. */
@media (max-width: 575.98px) {
    .rm-dlc-popover {
        position: fixed;
        left: 1rem;
        right: 1rem;
        top: auto;
        bottom: 1rem;
        max-width: none;
        margin-top: 0;
    }
}

/* ─── Inline form admin (DlcInlineForm.razor — Lot 5).
   Le background est géré par .rm-card (dark-aware). On ajuste juste le padding et
   la couleur du titre pour qu'il reste lisible en thème dark. */
.rm-dlc-inline-form {
    padding: 1rem 1.25rem;
}

.rm-dlc-inline-form__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--rm-text);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/* ─── Badge inline (référence row TrackCrud / CarModels — usage futur) ─── */
.rm-dlc-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--rm-text-muted);
    background: var(--rm-card-bg-subtle);
    border: 0.5px solid var(--rm-border);
    border-radius: 4px;
    padding: 2px 6px;
    text-decoration: none;
}
.rm-dlc-badge:hover {
    color: var(--rm-primary);
}
.rm-dlc-badge--disabled {
    opacity: 0.5;
    text-decoration: line-through;
}

/* Spec 88 Lot 4 — AddSimulationFromCatalogModal (card inline expandable, PAS Bootstrap modal).
   Pattern UX_PATTERNS §12 "éviter modals". Le nom CSS .rm-add-sim-modal est conservé pour
   fidélité spec §4.0 (historique wireframe). Tokens canoniques UX_DESIGN_SYSTEM §3.4.
   Responsive : grid auto-fill 160px → 2 colonnes < 576px naturellement. */
.rm-add-sim-modal {
    border: 1px solid var(--rm-primary);
}
.rm-add-sim-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
}
.rm-add-sim-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid var(--rm-border);
    border-radius: 8px;
    background: var(--rm-card-bg);
    color: var(--rm-text);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.rm-add-sim-card:hover:not(:disabled) {
    border-color: var(--rm-primary);
    background: var(--rm-card-bg-subtle);
}
.rm-add-sim-card:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}
.rm-add-sim-card--selected {
    border-color: var(--rm-primary);
    background: var(--rm-primary-light);
}
.rm-add-sim-card__logo {
    height: 48px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}
.rm-add-sim-card__name {
    font-weight: 600;
    margin-top: 0.5rem;
    color: var(--rm-text);
    word-break: break-word;
}
.rm-add-sim-card__counts {
    font-size: 0.875rem;
    color: var(--rm-text-muted);
    margin-top: 0.25rem;
}


/* ─── Spec 89 (UX-02 + UX-03) — MemberPicker ─────────────────────────
   Autocomplete dropdown reutilise par les forms admin enroll + grant license.
   Pattern aligne sur §4 UX_PATTERNS (backdrop click-outside, jamais Bootstrap JS Dropdown). */
.rm-member-picker {
    position: relative;
    display: block;
}

.rm-member-picker__list {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    background: var(--rm-card-bg);
    border: 1px solid var(--rm-border);
    border-radius: 0.375rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    z-index: 1041;
    max-height: 280px;
    overflow-y: auto;
}

.rm-member-picker__item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.4rem 0.75rem;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--rm-border-light);
    text-align: left;
    color: var(--rm-text);
    cursor: pointer;
    font-size: 0.875rem;
}

.rm-member-picker__item:last-child {
    border-bottom: 0;
}

.rm-member-picker__item:hover:not(.rm-member-picker__item--disabled) {
    background: var(--rm-card-bg-subtle);
}

.rm-member-picker__item--disabled {
    color: var(--rm-text-muted);
    cursor: not-allowed;
}

.rm-member-picker__name {
    flex: 1 1 auto;
}

.rm-member-picker__empty,
.rm-member-picker__more {
    padding: 0.5rem 0.75rem;
}

/* ─── Spec 90 v2 — ReconcileNamesDialog (Q19 simplifié, desktop-only) ───
   3 classes BEM, tokens existants only, pas de media query, pas d'animation. */
.rm-reconcile-section-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--rm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}
.rm-reconcile-section-title:first-child {
    margin-top: 0;
}

.rm-reconcile-item {
    border: 1px solid var(--rm-border);
    border-radius: var(--rm-card-radius);
    background: var(--rm-card-bg-subtle);
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
}

/* Spec 93 §G — wrapper liste reconcile (Tracks ET Names mismatches). Pattern
   harmonisé avec .rm-rename-list §F : items collés sans gap, séparateurs
   internes uniquement. Les .rm-reconcile-item nestés héritent du fond et
   perdent leur margin-bottom + border externes au profit du wrapper. */
.rm-reconcile-list {
    background: var(--rm-card-bg);
    border: 1px solid var(--rm-border);
    border-radius: var(--rm-card-radius);
    overflow: hidden;
}
.rm-reconcile-list .rm-reconcile-item {
    border: none;
    border-bottom: 1px solid var(--rm-border-light);
    border-radius: 0;
    margin-bottom: 0;
    background: var(--rm-card-bg);
    padding: 0.75rem 1rem;
    transition: background 0.15s ease;
}
.rm-reconcile-list .rm-reconcile-item:last-child {
    border-bottom: none;
}
.rm-reconcile-list .rm-reconcile-item:hover {
    background: var(--rm-card-bg-subtle);
}

.rm-reconcile-item__source {
    font-family: var(--rm-font-mono, ui-monospace, monospace);
    font-weight: 600;
    color: var(--rm-text);
    margin-bottom: 0.5rem;
}

/* ─── Spec 91 V2 lot L7 — ReconcileTracksDialog v3 (post-revue UX 2026-05-06 amendements
   B1+B2+B3+A1+A2+P1+P3). Composant dédié Circuits/Variantes coexistant avec
   ReconcileNamesDialog legacy (Class/Model). Réutilise les classes BEM rm-reconcile-*
   ci-dessus — ajoute uniquement les éléments propres à L7 :
   - Header item différencié (X/N + état décision)
   - Sub-fields radio par action avec indentation gauche
   - Section recap pré-validation
   - Item replié (compact summary) pour items décidés (A2)
*/
.rm-reconcile-item__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.rm-reconcile-item__header--pending {
    color: var(--rm-warning);
}

.rm-reconcile-item__header--done {
    color: var(--rm-success);
}

.rm-reconcile-item__index {
    font-weight: 600;
    color: var(--rm-text-muted);
}

.rm-reconcile-item--collapsed {
    /* A2 : items décidés repliés — réduction du bruit visuel pour focus sur le pending. */
    background: var(--rm-card-bg-subtle);
    opacity: 0.85;
}

.rm-reconcile-item__action-group {
    /* Indentation visuelle des sub-fields sous chaque radio Action. */
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
}

.rm-reconcile-item__skip {
    /* P1 : Skip = lien texte discret en bas, pas un radio principal. */
    display: inline-block;
    font-size: 0.875rem;
    color: var(--rm-text-muted);
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    margin-top: 0.5rem;
}
.rm-reconcile-item__skip:hover {
    color: var(--rm-text);
}
.rm-reconcile-item__skip--active {
    /* Item Skip choisi : lien colorisé warning pour confirmer la sélection visuellement. */
    color: var(--rm-warning);
    font-weight: 600;
}

.rm-reconcile-recap {
    border-top: 2px solid var(--rm-border);
    margin-top: 1rem;
    padding-top: 1rem;
}

.rm-reconcile-recap__title {
    /* P1 identité racing : Orbitron + uppercase + accent. Cohérent avec rm-reconcile-section-title legacy. */
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--rm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.rm-reconcile-recap__list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.rm-reconcile-recap__bullet {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    font-size: 0.875rem;
}

/* ─── Spec 93 §F option G — Mismatches checkboxes natives.
   Pattern : grid 5 cols (checkbox · type · source · arrow · target).
   Décocher = exclure rename. Click row = toggle. Tokens DS canoniques only. */
.rm-rename-list__intro {
    font-size: 0.95rem;
    color: var(--rm-text);
    margin: 0 0 0.25rem;
}
.rm-rename-list__intro strong {
    color: var(--rm-primary);
}
.rm-rename-list__hint {
    font-size: 0.85rem;
    color: var(--rm-text-muted);
    margin: 0 0 0.75rem;
}

.rm-rename-list {
    background: var(--rm-card-bg);
    border: 1px solid var(--rm-border);
    border-radius: var(--rm-card-radius);
    overflow: hidden;
}

.rm-rename-row {
    display: grid;
    grid-template-columns: 24px 70px 1fr auto 1fr;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--rm-border-light);
    cursor: pointer;
    transition: opacity 0.15s ease, background 0.15s ease;
}
.rm-rename-row:last-child {
    border-bottom: none;
}
.rm-rename-row:hover {
    background: var(--rm-card-bg-subtle);
}
.rm-rename-row--unchecked {
    opacity: 0.45;
}
.rm-rename-row--unchecked .rm-rename-row__name {
    text-decoration: line-through;
    text-decoration-color: var(--rm-text-muted);
}

.rm-rename-row__check {
    width: 18px;
    height: 18px;
    accent-color: var(--rm-primary);
    cursor: pointer;
}

.rm-rename-row__type {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rm-text-muted);
    font-weight: 600;
}

.rm-rename-row__name {
    font-family: var(--rm-font-mono, ui-monospace, monospace);
    font-size: 0.875rem;
    color: var(--rm-text);
    background: var(--rm-card-bg-subtle);
    padding: 0.125rem 0.4rem;
    border-radius: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rm-rename-row__name--target {
    font-weight: 500;
}

.rm-rename-row__arrow {
    color: var(--rm-info);
    font-size: 0.95rem;
}

/* ─── Spec 104 v3.1 — `.rm-time-speed-badge` (+ __icon, __label) supprimée 2026-05-19.
   Remplacé intégralement par `.rm-race-conditions-strip` (5 conditions toujours visibles,
   ordre canonique v3.1, weather hors strip). Cf spec 104 §6.3 Q-104-9 à Q-104-18. */

/* ─── Spec 104 Gotcha U17 — Emoji exception pour TireIcon (Lucide gap tire).
   Wrapper inline pour alignement vertical cohérent avec les SVG voisins
   (gauge, fuel, clock). font-size géré inline par le composant via param Size. */
.rm-emoji-icon {
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
}

/* ─── Spec 104 v3.1 — Glyph infini ∞ (Unicode U+221E) utilisé pour TireSetsAllowed = 0
   (illimité). Le caractère rend visuellement plus petit que les chiffres mono voisins
   (~70% du x-height). Facteur ×1.4 + bold pour matcher la lisibilité des autres
   valeurs du strip/panel. */
.rm-infinity-glyph {
    font-size: 1.4em;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
}

/* ─── Spec 104 AC-104-23 — section repliable Round form (<details>/<summary>).
   Garde le marker natif (chevron ▶/▼ — signal collapsible standard + a11y native).
   Style <summary> pour matcher visuellement form-label small des autres champs. */
.rm-form-section-collapsible summary {
    cursor: pointer;
    padding: 0.5rem 0;
    font-size: 0.875rem;
    color: var(--rm-text-muted);
    font-weight: 500;
    user-select: none;
}
.rm-form-section-collapsible summary:hover {
    color: var(--rm-text);
}

/* ─── Spec 104 AC-104-8 — Panel "Race conditions" pour pages détail event/championship.
   Affiche 5 race conditions effectives (heure ingame + ×N speed + sets pneus + ×N wear + ×N fuel)
   TOUJOURS visibles. Style cohérent WeatherWidget Panel : block card + grid items 1-5 cols
   selon viewport. Mobile-first : 1 col xs, 2 cols sm, 3 cols md, 5 cols lg+. */
.rm-race-conditions-panel {
    margin-bottom: 1rem;
}
/* Spec 104 v3.2 fix layout — adaptive au conteneur (pas au viewport).
   auto-fit + minmax(120px, 1fr) permet au panel de s'adapter à la largeur de
   sa colonne parente (rm-summary-col en grid 1fr 1fr 1fr). Évite l'overflow
   horizontal qui poussait les colonnes voisines sur les pages détail event. */
.rm-race-conditions-panel__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.rm-race-conditions-panel__item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    background: var(--rm-card-bg-subtle);
    border: 1px solid var(--rm-border-light);
    border-radius: 6px;
}
.rm-race-conditions-panel__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--rm-text-muted);
    flex-shrink: 0;
}
/* Note : `__icon--text` (variante texte "×" pour TimeSpeed pré-v3) supprimée 2026-05-19.
   Remplacée par SpeedIcon Lucide fast-forward dans RaceConditionsPanel.razor v3. */
.rm-race-conditions-panel__text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}
.rm-race-conditions-panel__label {
    font-size: 0.6875rem;
    color: var(--rm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rm-race-conditions-panel__value {
    font-family: var(--rm-font-mono);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--rm-text);
}

/* ─── Spec 104 v3.3 — Strip race conditions pour ChampionshipCard (listing).
   Comportement DÉTERMINISTE post-review : `flex-wrap: nowrap` interdit explicitement
   le wrap, indépendamment du calcul flexbox sub-pixel du browser. Si vraiment overflow
   (viewport extrême), `overflow: hidden` clip plutôt qu'un wrap mal aligné. Mobile
   <576px déjà géré par __value display:none (mode picto-only à ~110px). */
.rm-race-conditions-strip {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.25rem;
    font-family: var(--rm-font-mono);
    font-size: 0.75rem;
    color: var(--rm-text);
    min-width: 0;
}
.rm-race-conditions-strip__item {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    line-height: 1;
    flex: 0 0 auto;
    white-space: nowrap;
}
.rm-race-conditions-strip__item:not(:last-child)::after {
    content: "·";
    margin-left: 0.25rem;
    color: var(--rm-text-muted);
    font-weight: 700;
}
.rm-race-conditions-strip__icon {
    display: inline-flex;
    align-items: center;
    color: var(--rm-text-muted);
    line-height: 1;
}
.rm-race-conditions-strip__value {
    line-height: 1;
    font-weight: 600;
}
/* Spec 104 v3.4 — mobile : valeurs gardées visibles (avec auto-fit grid, sur mobile la
   card est pleine largeur → la place existe pour le strip complet). Si overflow malgré
   tout, flex-wrap: nowrap garde la 1 ligne, clipping naturel du flow inline si vraiment
   trop étroit. */

/* ─── Spec 94 §D — WeatherWidget (Pill + Panel variants).
   Approche picto-first : background neutre uniforme, l'icône fait le signal sémantique.
   Tokens DS canoniques --rm-* uniquement. Fail soft : composant absent si pas de data. */
.rm-weather-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--rm-card-bg-subtle);
    border: 1px solid var(--rm-border-light);
    border-radius: var(--rm-pill-radius);
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    color: var(--rm-text);
}
.rm-weather-pill__icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--rm-text);
}
.rm-weather-pill__label {
    font-weight: 500;
}
.rm-weather-pill__temp {
    font-family: var(--rm-font-mono);
    font-weight: 600;
}
.rm-weather-pill__sep {
    color: var(--rm-border);
}
.rm-weather-pill__rain {
    font-family: var(--rm-font-mono);
    color: var(--rm-text-muted);
    font-size: 0.8125rem;
}
.rm-weather-pill--skeleton {
    background: var(--rm-card-bg-subtle);
    width: 120px;
    height: 28px;
    animation: rm-weather-skeleton-pulse 1.2s ease-in-out infinite;
}

/* Spec 94 §H — pill cliquable wrap dans <a target="_blank">. */
a.rm-weather-pill--link {
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
a.rm-weather-pill--link:hover {
    background: var(--rm-card-bg-dim);
    border-color: var(--rm-border);
}
a.rm-weather-pill--link:focus-visible {
    outline: 2px solid var(--rm-primary);
    outline-offset: 2px;
}

.rm-weather-panel {
    background: var(--rm-card-bg);
    border: 1px solid var(--rm-border);
    border-radius: var(--rm-card-radius);
    padding: 1.25rem;
    margin-bottom: 1rem;
}
.rm-weather-panel--manual {
    border-left: 3px solid var(--rm-primary);
}
.rm-weather-panel--skeleton {
    height: 110px;
    animation: rm-weather-skeleton-pulse 1.2s ease-in-out infinite;
}

/* Spec 94 §H — panel cliquable wrap dans <a target="_blank">. Tente de garder
   le rendu identique au panel non-link (pas de soulignement, color hérité). */
a.rm-weather-panel--link {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
a.rm-weather-panel--link:hover {
    background: var(--rm-card-bg-subtle);
}
a.rm-weather-panel--link:focus-visible {
    outline: 2px solid var(--rm-primary);
    outline-offset: 2px;
}
.rm-weather-panel__head {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rm-text-muted);
    font-weight: 600;
    margin-bottom: 0.75rem;
}
.rm-weather-panel__body {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.rm-weather-panel__icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--rm-text);
}
.rm-weather-panel__main {
    flex-grow: 1;
    min-width: 0;
}
.rm-weather-panel__label {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--rm-text);
    margin-bottom: 0.25rem;
}
.rm-weather-panel__stats {
    display: flex;
    gap: 0.75rem;
    font-family: var(--rm-font-mono);
    font-size: 0.875rem;
    color: var(--rm-text-muted);
}
.rm-weather-panel__source {
    text-align: right;
    font-size: 0.75rem;
    color: var(--rm-text-light);
    flex-shrink: 0;
}
.rm-weather-panel__source-tag {
    margin-bottom: 0.125rem;
}
.rm-weather-panel__stale {
    color: var(--rm-warning);
    font-size: 0.6875rem;
    margin-top: 0.125rem;
}

@keyframes rm-weather-skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

/* Mobile : panel source passe sous body */
@media (max-width: 540px) {
    .rm-weather-panel__source {
        flex-basis: 100%;
        text-align: left;
        margin-top: 0.5rem;
    }
}

/* Mobile : grid se replie, type+arrow se cachent visuellement (espace prioritaire) */
@media (max-width: 540px) {
    .rm-rename-row {
        grid-template-columns: 24px 1fr;
        grid-template-rows: auto auto;
        row-gap: 0.25rem;
    }
    .rm-rename-row__type {
        grid-row: 1;
        grid-column: 2;
    }
    .rm-rename-row__name,
    .rm-rename-row__arrow,
    .rm-rename-row__name--target {
        grid-row: 2;
        grid-column: 2;
        display: inline;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   Spec 98 PR-4b UX-6 — micro-feedback inline save tick
   Affiche un ✓ vert à côté du champ qui vient d'être sauvegardé
   (CarClassActionBar : DisplayOrder + ColorHex). Pattern moderne
   universel (iCloud / Gmail / Notion) — éphémère, scale-in + fade-out
   1.5s, puis disparait via animation-fill-mode: forwards.
   Couleur : --rm-success invariant (#1D9E75 racing-themed green).
   Doc : quality/UX_DESIGN_SYSTEM.md §10.7
   ───────────────────────────────────────────────────────────────────────── */
@keyframes rmSaveTickFade {
    0%   { opacity: 0; transform: scale(0.5); }
    20%  { opacity: 1; transform: scale(1.25); }
    40%  { transform: scale(1); }
    100% { opacity: 0; transform: scale(1); }
}

.rm-save-tick {
    display: inline-block;
    color: var(--rm-success);
    font-weight: 700;
    font-size: 1rem;
    animation: rmSaveTickFade 1.5s ease-out forwards;
    pointer-events: none;
}

/* a11y guard §10.2 : motion-sensitive users → no animation, just brief flash */
@media (prefers-reduced-motion: reduce) {
    .rm-save-tick {
        animation: none;
        opacity: 1;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   Spec 98 PR-5b UX-3 — chip discret "Utilisé" par row CarModel
   1 token agrégé par row (point coloré + count), masqué si 0 (signal implicite
   "OK à supprimer"). Tooltip hover détaille via attribute title.
   Couleur point : --rm-info (#378ADD invariant) — informatif neutre,
   différencié visuellement de --rm-success (save tick).
   Doc : quality/UX_DESIGN_SYSTEM.md §10.8
   ───────────────────────────────────────────────────────────────────────── */
.rm-usage-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--rm-text-muted);
    font-family: var(--rm-font-mono);
    font-size: 0.75rem;
    cursor: help;        /* signal tooltip natif */
    user-select: none;
}

.rm-usage-chip::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--rm-info);
}

/* ─────────────────────────────────────────────────────────────────────────
   Spec 108 v1.25.5 — RaceConditionField composant utilitaire bas-niveau
   pour la chrome des champs override race conditions (label + badge
   hérité/personnalisé + bouton × Réinitialiser + hint valeur héritée).
   Réutilise tokens existants theme-aware (--rm-text-muted, --rm-success-light,
   --rm-success, --rm-text). 0 nouveau token CSS.
   ───────────────────────────────────────────────────────────────────────── */
.rm-cond-field {
    margin-bottom: 0.75rem;
}
.rm-cond-field__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
    flex-wrap: wrap;
}
.rm-cond-field__status {
    font-size: 0.75rem;
    color: var(--rm-text-muted);
    font-style: italic;
}
.rm-cond-field__status--custom {
    color: var(--rm-success);
    font-weight: 500;
    font-style: normal;
}
.rm-cond-field__reset {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--rm-text-muted);
    text-decoration: none;
    font-size: 0.8125rem;
    line-height: 1;
}
.rm-cond-field__reset:hover {
    color: var(--rm-success);
    text-decoration: underline;
}
.rm-cond-field__hint {
    margin-top: 0.25rem;
    font-style: italic;
}
.rm-cond-field--override input.rm-cond-input--custom,
.rm-cond-field--override select.rm-cond-input--custom {
    border-color: var(--rm-success);
    box-shadow: 0 0 0 0.1rem var(--rm-success-light);
}

/* ─────────────────────────────────────────────────────────────────────────
   Spec 108 §6.1 — Indicateur visuel du niveau édité (Championship / Round / Session).
   Palette thermique racing : froid (cadre stable) → tiède (approche) → chaud (action).
   0 nouveau token CSS — réutilisation des paires existantes theme-aware.

   - Championship : --rm-info-light / --rm-info (bleu = planification, défaut global)
   - Round : --rm-success-light / --rm-success (vert = soirée vivante, override soirée)
   - Session (réservé v1.25.6) : --rm-warning-light / --rm-warning (orange chaud, manche)
   ───────────────────────────────────────────────────────────────────────── */
.rm-edit-level {
    padding: 0.75rem 1rem;
    border-left-width: 4px;
    border-left-style: solid;
    border-radius: 0 6px 6px 0;
    margin-bottom: 1rem;
}
.rm-edit-level--championship {
    background: var(--rm-info-light);
    border-left-color: var(--rm-info);
}
.rm-edit-level--round {
    background: var(--rm-success-light);
    border-left-color: var(--rm-success);
}
.rm-edit-level--session {
    background: var(--rm-warning-light);
    border-left-color: var(--rm-warning);
}
.rm-edit-level__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
    font-weight: 600;
    font-size: 0.9375rem;
}
.rm-edit-level__header--championship { color: var(--rm-info); }
.rm-edit-level__header--round { color: var(--rm-success); }
.rm-edit-level__header--session { color: var(--rm-warning); }
.rm-edit-level__hint {
    font-size: 0.8125rem;
    color: var(--rm-text-muted);
    font-style: italic;
    margin-bottom: 0.5rem;
}

/* Spec 108 Bloc 2 v1.25.6 §18.2.C — breadcrumb 3 niveaux non-cliquable. */
.rm-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.125rem;
}