/* ─── 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;
    /* Spec 139 lot contraste (2026-09-16, route B) — assombri de #1D9E75 a #15795a.
       Le blanc pose dessus passait a 3,39:1, sous le seuil AA, dans LES DEUX themes : ce token
       n'a pas de valeur propre en sombre, il herite. Desormais 5,36:1.
       ⚠️ Les indicateurs SANS TEXTE ne suivent pas — cf `--rm-success-signal`. */
    --rm-success: #15795a;
    --rm-success-light: #E1F5EE;
    --rm-info: #378ADD;
    --rm-info-light: #E6F1FB;
    /* Spec 139 lot contraste — assombri de #e74c3c a #c0392b. Blanc : 3,82 → 5,44:1. */
    --rm-danger: #c0392b;
    --rm-danger-light: #fdecea;
    /* Spec 139 lot contraste — assombri de #e67e22 a #b35a12. Blanc : 2,85 → 4,79:1. */
    --rm-warning: #b35a12;
    --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;
    /* F-40 — le gris lisible sur fond discret, et le fond d'une pastille neutre.
       `--rm-text-muted` sur `--rm-card-bg-subtle` mesurait 4,27:1 en sombre pour 4,5 exigés, et
       la pastille ne se détachait de la carte qu'à 1,09:1 — elle cessait d'en être une. Deux
       tokens dédiés plutôt qu'un remède global : remonter `--rm-text-muted` pour tout le monde
       ferait crier les fonds volontairement discrets. */
    --rm-badge-neutral-bg: #e9ebee;
    --rm-badge-neutral-text: #575d65;
    /* Le meilleur tour. Remplace un `rgba(155, 89, 182, 0.15)` code en dur, identique dans les
       deux themes — la bande n'etait qu'a 1,16:1 de la carte en sombre et se lisait a peine.
       L'encre est violette et non blanche : sur une bande claire, du blanc est illisible. */
    --rm-best-lap-bg: #ebdff2;
    --rm-best-lap-ink: #4a2a63;
    --rm-best-lap-pill: #d3b8e6;
    --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;

    /* Spec 141 axe B — palette de SÉRIES, sémantiquement neutre.
       Aucun token existant ne convenait : --rm-warning et --rm-gold tombent sous 3:1 en clair,
       et --rm-danger / --rm-success portent un jugement — une ligne rouge se lirait « mauvais ».
       Contraste vérifié sur les fonds de carte réels (#ffffff / #252830).

       Spec 141 §14 (BR-141-33) — passée de 4 à 8 : chaque pilote reçoit sa couleur, plus
       seulement les sélectionnés. Contraste mesuré : 4,66:1 au pire des 16 valeurs, très
       au-dessus du seuil de 3:1 et accordé à la famille d'origine (5,1+).

       ⚠️ L'ORDRE COMPTE — il n'est pas décoratif. Le motif de trait vaut `index % 3`
       (plein / tirets / pointillés), si bien que les séries 1-4-7 partagent le trait plein,
       2-5-8 les tirets, 3-6 les pointillés. La palette est ordonnée pour que deux couleurs
       de MÊME motif restent séparées en déutéranopie : ΔE minimal **29,3** intra-motif,
       contre **1,8** avec l'ordre naïf 1..8. Réordonner ces lignes casserait la règle.

       Conséquence de ce ré-ordonnancement : `--rm-series-3` et `--rm-series-4` ont échangé
       leurs valeurs (violet ↔ vert, désormais 3 et 5). Sans risque : ces tokens n'ont aucun
       consommateur hors du graphique, et la couleur y était attribuée par ordre de sélection —
       aucun pilote n'avait de couleur stable à conserver.

       ⚠️ Toutes paires confondues, le ΔE déutéranope descend à 1,8 : huit teintes séparées
       n'existent pas pour un déutéranope. C'est précisément pourquoi le motif n'est pas un
       secours mais une nécessité (BR-141-34). Défaut préexistant mesuré au passage : les 4
       couleurs d'origine contenaient déjà une paire confusable — bleu vs violet, ΔE 4,7. */
    --rm-series-1: #1F6FB2;   /* bleu    · plein      */
    --rm-series-2: #C1440E;   /* orange  · tirets     */
    --rm-series-3: #8E44AD;   /* violet  · pointillés */
    --rm-series-4: #9A6400;   /* ambre   · plein      */
    --rm-series-5: #0F7B5A;   /* vert    · tirets     */
    --rm-series-6: #5D6B00;   /* olive   · pointillés */
    --rm-series-7: #B32D6B;   /* magenta · plein      */
    --rm-series-8: #0E6E85;   /* cyan    · tirets     */

    --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%);

    /* Spec 139 lot contraste — assombri de #f97316 a #c2410c. Blanc : 2,80 → 5,18:1.
       ⚠️ Vaut desormais la meme chose que `--rm-accent-orange-text` : ce dernier existait
       precisement parce que la teinte vive ne portait pas de texte. Les deux sont conserves
       distincts, leurs INTENTIONS restant differentes — fond plein contre encre sur fond clair. */
    --rm-accent-orange: #c2410c;
    /* 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). */
    /* ⚠️ Sans valeur sombre, ce token tombait a 2,85:1 sur la carte #252830 — defaut
       ANTERIEUR au lot contraste, revele en le relisant. Surcharge ajoutee ci-dessous. */
    --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;

    /* ─── Spec 139 lot contraste — l'ENCRE de ces familles, et non leur fond ──────────
       ⚠️ `--rm-success`, `--rm-danger`, `--rm-warning` et `--rm-accent-orange` ont ete
       ASSOMBRIS pour porter du blanc. Employes comme couleur de TEXTE sur une carte, ils
       varient donc dans le mauvais sens en theme sombre : `--rm-warning` y est tombe de
       5,17 a 3,08:1, `--rm-accent-orange` de 5,26 a 2,85:1 — deux familles conformes
       devenues non conformes. Mesure a la revue du 2026-09-16, apres avoir ete introduite
       le meme jour.

       Ces tokens-ci varient dans l'autre sens : fonces sur fond clair, clairs sur fond
       sombre. `--rm-success-text` le faisait deja depuis la spec 61 ; ses trois freres
       manquaient. */
    --rm-warning-text: #8a4408;
    --rm-danger-text: #b02a2a;
    /* Spec 139 §10.3 bis (2026-09-20) — le quatrieme frere manquait, et son absence se voyait :
       faute d'encre bleue, sept sites employaient `text-info` de Bootstrap (#0dcaf0), soit
       **1,96:1** sur une carte. Illisible, et invisible aux gardes, qui ne mesuraient que les
       jetons `--rm-*`. #1d6fbf sur #fff = 5,15:1. */
    --rm-info-text: #1d6fbf;
    /* Spec 162 `BR-162-7` — le titre d'une actualite porte le bleu des onglets organisateur, pour
       qu'une entree se detache de la suivante. ⚠️ Ce bleu (#3498db) ne fait que 3,2:1 sur une
       carte blanche : le theme clair prend une variante foncee. #1f6fb2 sur #fff = 5,28:1.
       ⚠️⚠️ La navigation organisateur NE le consomme PAS : elle vit sur l'en-tete, bleu nuit dans
       les deux themes, ou cette variante claire serait illisible. */
    --rm-news-title-text: #1f6fb2;

    /* Spec 144 volet B — echelle de gomme de piste (UX_DESIGN_SYSTEM §6.7).
       L'echelle part du VERT parce que le niveau s'appelle `Green`, puis se charge jusqu'au noir
       comme la piste se gomme. Une premiere proposition allait du rouge au vert — elle affichait
       le niveau nomme `Green` en rouge. */
    --rm-grip-green:     #128a3d;
    --rm-grip-natural:   #6b9c14;
    --rm-grip-light:     #c8860a;
    --rm-grip-medium:    #de6b14;
    --rm-grip-heavy:     #c62828;
    --rm-grip-saturated: #111111;

    /* Couvertures chauffantes — le pneu arrive chaud, ou froid. */
    --rm-warmers-on:  #c62828;
    --rm-warmers-off: #1565c0;


    /* ─── Spec 139 lot contraste — les fonds qui ne portent AUCUN texte ───────────────
       Point de presence, barre de progression, pulsation, soulignement d'onglet actif : leur
       seule fonction est d'etre VUS, et aucun texte ne rattrape s'ils se fondent. Le seuil
       non-textuel de 3:1 y est la regle (WCAG 1.4.11), pas un confort.

       ⚠️ Ils ne peuvent PAS suivre `--rm-success` / `--rm-danger` assombris. En theme sombre,
       une teinte assez foncee pour porter du blanc lisible est trop proche de la carte #252830 :
       le point de presence tombe a 2,75:1, la barre a 2,85:1. La fenetre ou les deux seuils
       coexistent fait 0,0196 de luminance — elle ne survit pas au premier ajustement.

       D'ou deux tokens qui suivent la SURFACE et non la teinte : fonce sur fond clair, vif sur
       fond sombre. Declares dans les deux blocs (U23). */
    --rm-success-signal: #15795a;
    --rm-danger-signal: #c0392b;

    --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;

        /* Override obligatoire (U23) : les valeurs claires tombent sous 3:1 sur #252830.
           Même ordre que le bloc clair — cf. l'avertissement sur l'ordre en tête de fichier. */
        --rm-series-1: #7FD4F5;   /* bleu    */
        --rm-series-2: #E8823C;   /* orange  */
        --rm-series-3: #E8A9D8;   /* violet  */
        --rm-series-4: #E9A72C;   /* ambre   */
        --rm-series-5: #2FA37A;   /* vert    */
        --rm-series-6: #C3CF3A;   /* olive   */
        --rm-series-7: #F08BB4;   /* magenta */
        --rm-series-8: #57C8E0;   /* cyan    */

        --rm-border: #333845;
        --rm-border-light: #2a2e38;
        --rm-card-bg: #252830;
        --rm-card-bg-subtle: #2a2e38;
        /* F-40 — texte 5,33:1 sur la pastille et 7,41:1 sur le fond discret ; la pastille se
           détache de la carte à 1,51:1 au lieu de 1,09. */
        --rm-badge-neutral-bg: #3d4453;
        --rm-badge-neutral-text: #b9c0ca;
        /* Meilleur tour — encre 8,76:1 sur la bande, pastille 5,36:1. */
        --rm-best-lap-bg: #3b2f4d;
        --rm-best-lap-ink: #e2d4ee;
        --rm-best-lap-pill: #5f4a80;
        --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;

        /* Spec 144 volet B — echelle de gomme, version sombre (UX_DESIGN_SYSTEM §6.7).
           Override obligatoire (U23) : les valeurs claires sont trop sombres sur #252830.

           ⚠️ `--rm-grip-saturated` N'EST PAS une eclaircie de sa valeur claire : il passe du NOIR
           au PRESQUE-BLANC. La rampe s'assombrit donc du vert au rouge, puis remonte d'un coup.
           Ce n'est pas un bug — c'est l'arbitrage du 2026-09-15, pris sur maquette apres avoir
           compare six rendus. Le noir applique tel quel etait INVISIBLE ici, et sur les cartes ce
           picto n'a aucun texte a cote pour rattraper : le pilote aurait vu une case vide et conclu
           que le championnat n'annonce pas son grip.

           Ne pas « corriger » cette inversion. Cf UX_DESIGN_SYSTEM §6.7 pour le prix assume. */
        --rm-grip-green:     #3ddc84;
        --rm-grip-natural:   #a8d423;
        --rm-grip-light:     #ffc14d;
        --rm-grip-medium:    #ff9142;
        --rm-grip-heavy:     #ff5f52;
        --rm-grip-saturated: #ededed;

        --rm-warmers-on:  #ff5f52;
        --rm-warmers-off: #5aa9ff;

        /* Spec 139 lot contraste — les indicateurs sans texte reprennent la teinte VIVE ici.
           Sur #252830, la version assombrie tombe a 2,75:1 (presence) et 2,71:1 (onglet actif) :
           invisible, et sans texte pour compenser. Vif : 4,35:1 et 3,86:1. */
        --rm-success-signal: #1D9E75;
        --rm-danger-signal: #e74c3c;

        /* Spec 139 lot contraste — l'encre s'eclaircit ici, a l'inverse du fond.
           Sur #252830 : 6,51 · 7,38 · 6,49:1. */
        --rm-accent-orange-text: #fb923c;
        --rm-warning-text: #f0a955;
        --rm-danger-text: #ff8a8a;
        /* #93c5fd sur la carte #252830 = 8,17:1. Deja la teinte de `.alert-info` en sombre :
           une encre de plus, pas une couleur de plus. */
        --rm-info-text: #93c5fd;
        /* Spec 162 — le bleu d'origine des onglets organisateur. #3498db sur #252830 = 4,68:1. */
        --rm-news-title-text: #3498db;
    }

    /* ─── 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-badge-neutral-text) !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-badge-neutral-bg) !important; color: var(--rm-badge-neutral-text); }
    .badge.bg-light { background-color: var(--rm-badge-neutral-bg) !important; color: var(--rm-badge-neutral-text) !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-dark);
    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-dark);
    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);
    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;

        /* Spec 163 — la LARGEUR VISIBLE de la voiture, en multiple de la hauteur de la barre, que
           `header-partners.js` lit pour ne pas poser de logo dessus. Écrite ICI, à côté de la règle
           qu'elle décrit : changer `auto 65%` sans elle ferait chevaucher la voiture.
           Mesurée dans le fichier le 2026-09-27 : 1 600 × 180 px, dont les 64 % de droite seulement
           sont visibles (le reste est un fondu noir que `lighten` efface).
           0,65 × (1 600 / 180) × 0,65 ≈ 3,76. */
        --rm-header-car-width-ratio: 3.76;
    }
}

/* 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-text);
    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;
}

/* Spec 162 `BR-162-12` — l'entrée « Accueil » : icône + libellé dans le menu replié du téléphone,
   icône seule sur ordinateur, où chaque pixel de l'en-tête d'un admin compte (mesuré : 44 px de
   marge à 1 280 px, le mot en prenait plus). Le libellé reste lu par les lecteurs d'écran. */
.rm-nav-home {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

@media (min-width: 768px) {
    .rm-nav-home__label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

/* 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;
}

/* `F-86` (2026-10-03) — le menu « Gestion » de l'en-tête : Référentiel, Images, Statistiques et, pour un
   admin, Paramètres. « Organiser » reste à côté, en lien direct. Même mécanique que le choix de la
   langue : ouvert au survol et au focus — clavier comme toucher —, sans JavaScript. Sur téléphone,
   le groupe s'efface (`display: contents`) : ses liens redeviennent des entrées du menu replié, sous
   un petit titre, sans menu dans le menu. */
.rm-nav-group {
    position: relative;
    outline: none;
}
.rm-nav-group__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
}
.rm-nav-group--active .rm-nav-group__toggle {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}
.rm-nav-group:focus-visible .rm-nav-group__toggle {
    outline: 2px solid #ffffff;
    outline-offset: 4px;
    border-radius: 2px;
}
.rm-nav-group__heading {
    display: none;
}

@media (min-width: 768px) {
    .rm-nav-group__menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        margin-top: 10px;
        min-width: 200px;
        padding: 0.25rem 0;
        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;
    }
    /* Le pont : sans lui, la souris perd le survol en traversant l'écart entre le libellé et le menu. */
    .rm-nav-group__menu::before {
        content: "";
        position: absolute;
        top: -10px;
        left: 0;
        right: 0;
        height: 10px;
    }
    .rm-nav-group:hover .rm-nav-group__menu,
    .rm-nav-group:focus-within .rm-nav-group__menu {
        display: block;
    }
    .rm-nav-group__menu .rm-nav-organizer,
    .rm-nav-group__menu .rm-nav-admin {
        display: block;
        padding: 0.5rem 0.9rem;
        font-size: 0.85rem;
    }
    /* Le bleu et le rouge de l'en-tête sont faits pour son fond sombre ; le menu est une carte. */
    .rm-nav-group__menu .rm-nav-organizer {
        color: var(--rm-info-text);
    }
    .rm-nav-group__menu .rm-nav-admin {
        color: var(--rm-danger-text);
        border-top: 1px solid var(--rm-border);
        margin-top: 0.25rem;
    }
    .rm-nav-group__menu .rm-nav-organizer:hover,
    .rm-nav-group__menu .rm-nav-admin:hover {
        background: var(--rm-bg);
    }
}

@media (max-width: 767.98px) {
    .rm-nav-group,
    .rm-nav-group__menu {
        display: contents;
    }
    .rm-nav-group__toggle {
        display: none;
    }
    .rm-nav-group__heading {
        display: block;
        padding: 0.7rem 0.5rem 0.2rem;
        color: rgba(255, 255, 255, 0.6);
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }
}
.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-dark);
    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 ─── */

/* ⚠️⚠️ `minmax(0, 1fr)` et non `1fr` — trouvé en revue de la spec 163, mesuré dans un navigateur.
   Une piste `1fr` vaut `minmax(auto, 1fr)` : elle s'ÉLARGIT au contenu le plus large de la page. Avec
   douze partenaires sur l'accueil, la colonne passait à 828 px sur un téléphone de 390 : toute la page
   défilait de côté, et le bandeau — qui ne débordait donc jamais — ne défilait jamais (`BR-157-3`).
   Un contenu vraiment trop large déborde toujours de la colonne ; il n'élargit plus la page. */
.rm-layout-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: calc(100vh - 60px);
}
@media (min-width: 1200px) {
    .rm-layout-body {
        grid-template-columns: 280px minmax(0, 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; }

/* ⚠️⚠️ ET LE LIEN VERS `/agenda` DISPARAIT AVEC LA PAGE — revue du 2026-09-25.
   Le bloc agenda de l'accueil (spec 157 lot 3) renvoyait vers `/agenda` a TOUTE largeur. Sous
   768 px, cette page n'affiche que « non disponible sur mobile » : un membre voyait donc ses six
   prochaines courses, touchait « Agenda », et tombait sur un refus. Un cul-de-sac que le lot 3 a
   cree et que le retrait de la redirection mobile (`§12.4`) vient de rendre atteignable.

   ⚠️ LE SEUIL EST ECRIT ICI, UNE FOIS, pour les deux consequences : la page se cache et le lien
   qui y mene se cache avec elle. Le poser en `d-md-*` sur le balisage en ferait deux valeurs qui
   doivent rester d'accord sans que rien ne le verifie — c'est la faute corrigee au lot 4 sur
   l'indice de defilement. */
/* ⚠️ Spec 162 — le lien a quitte l'en-tete du bloc pour sa ligne « il y en a plus », qui porte
   aussi le NOMBRE de manches restantes. C'est la ligne ENTIERE qui se cache : un compte sans
   moyen de voir la suite serait une promesse que le telephone ne tient pas. */
.rm-home-more--agenda .rm-home-more__action { display: none; }

@media (min-width: 768px) {
    .rm-mobile-unavailable { display: none; }
    .rm-agenda-grid-wrapper { display: block; }
    .rm-home-more--agenda .rm-home-more__action { display: inline; }
}

.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);
    border: 1px solid var(--rm-border-light);
    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-badge-neutral-text);
    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);
    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);
    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);
    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);
}
.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 var(--rm-border);
    /* ⚠️ Fiche `T-23` — la paire etait #6b7280 sur #f3f4f6, soit 4,39:1 : sous les 4,5:1 exiges
       d'un texte. Deux litteraux, donc identiques en thème sombre — une pastille gris clair sur
       fond sombre. La paire `--rm-badge-neutral-*` est prevue pour un fond discret : 5,57:1 en
       clair, 5,33:1 en sombre, et elle suit le theme. */
    background: var(--rm-badge-neutral-bg);
    color: var(--rm-badge-neutral-text);
    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-dark);
    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-text);
}

.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) ─── */
/* ─── Spec 157 — l'ossature partagee des blocs de l'accueil ────────────────
   ⚠️ EXTRAITE AU TROISIEME EXEMPLAIRE (fiche `T-13`). Les regles du titre et de son lien etaient
   ecrites DEUX fois, a l'identique, sous `rm-home-stats__` et `rm-home-agenda__`. Deux copies
   d'une meme regle divergent a la premiere correction — celle qu'on n'applique qu'a l'une. */
.rm-home-block__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.rm-home-block__link {
    font-size: var(--rm-card-label-size);
    font-weight: 400;
    color: var(--rm-primary);
    text-decoration: none;
}

.rm-home-block__link:hover {
    text-decoration: underline;
}

/* ─── Spec 157 lot 5 — l'ecran de redaction de l'actualite ──────────────────
   ⚠️ Ecran d'administration : bureau uniquement, conformement a la regle du projet. */
.rm-news-notice {
    font-size: var(--rm-card-label-size);
    color: var(--rm-text-muted);
    margin-bottom: 1rem;
}

.rm-news-admin__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rm-news-admin__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0;
}

.rm-news-admin__row + .rm-news-admin__row {
    border-top: 0.5px solid var(--rm-border-light);
}

.rm-news-admin__main {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.rm-news-admin__title {
    font-weight: 600;
}

.rm-news-admin__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: var(--rm-card-label-size);
    color: var(--rm-text-muted);
}

.rm-news-admin__expiry {
    font-size: var(--rm-card-label-size);
    color: var(--rm-text-muted);
}

.rm-news-admin__actions {
    display: flex;
    gap: 0.5rem;
    flex: none;
}

/* ─── Spec 157 lot 5 — l'actualite du club ──────────────────────────────────
   Le seul bloc de cette page dont le contenu est ECRIT. Son corps vient d'un rendu Markdown, donc
   les regles portent sur des balises qu'on ne pose pas soi-meme : `p`, `ul`, `a`, `blockquote`. */
.rm-home-news__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

/* Un filet entre deux entrees, jamais au-dessus de la premiere : la carte a deja son bord. */
.rm-home-news__item + .rm-home-news__item {
    border-top: 0.5px solid var(--rm-border-light);
    padding-top: 0.8rem;
}

.rm-home-news__date {
    margin: 0 0 0.15rem;
    font-size: var(--rm-card-label-size);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rm-text-muted);
}

.rm-home-news__title {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--rm-news-title-text);
}

.rm-home-news__title a {
    color: inherit;
    text-decoration: none;
}

.rm-home-news__title a:hover {
    text-decoration: underline;
}

.rm-home-news__image {
    display: block;
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    border-radius: var(--rm-card-radius);
    margin-bottom: 0.6rem;
}

/* ⚠️ Le corps est du HTML GENERE : on ne controle pas ses balises, seulement leur rythme. Sans
   cette regle, le `<p>` de Markdig apporte sa marge par defaut et l'espacement du fil devient
   irregulier d'une entree a l'autre selon qu'elle tient sur un ou deux paragraphes. */
.rm-home-news__body {
    font-size: 0.875rem;
    color: var(--rm-text);
}

.rm-home-news__body > :last-child {
    margin-bottom: 0;
}

.rm-home-news__body ul,
.rm-home-news__body ol {
    margin-bottom: 0.5rem;
    padding-left: 1.25rem;
}

.rm-home-news__body blockquote {
    margin: 0 0 0.5rem;
    padding-left: 0.75rem;
    border-left: 2px solid var(--rm-border);
    color: var(--rm-text-muted);
}

/* ⚠️⚠️ Spec 162 `BR-162-3` — DEUX LIGNES, puis « Lire la suite ». La coupe n'est posee que par
   `home-news-clamp.js`, apres MESURE : sans le script, le texte reste entier et le bouton cache.
   Un texte entier n'est pas une panne ; un texte coupe sans moyen de le lire en serait une.
   ⚠️ Une hauteur plutot que `line-clamp` : le corps est du HTML GENERE (paragraphes, listes), et
   `line-clamp` ne coupe proprement qu'un contenu en ligne. */
.rm-home-news__body--clamped {
    max-height: 3em;
    overflow: hidden;
}

.rm-home-news__more {
    display: none;
    padding: 0;
    border: 0;
    background: none;
    color: var(--rm-primary);
    font-size: var(--rm-card-label-size);
}

.rm-home-news__item--cut .rm-home-news__more {
    display: inline;
}

.rm-home-news__more:hover {
    text-decoration: underline;
}

/* Les deux libellés sont dans la page ; la classe `--open`, posée par le script, choisit. */
.rm-home-news__more-open {
    display: none;
}

.rm-home-news__item--open .rm-home-news__more-open {
    display: inline;
}

.rm-home-news__item--open .rm-home-news__more-closed {
    display: none;
}

/* ─── Spec 157 lot 4, révisé par la spec 162 lot 2 — les championnats en vitrine ───
   ⚠️ Spec 162 `BR-162-9` — les cartes s'EMPILENT, à toutes les largeurs. Le rail horizontal de
   `BR-157-8 quater` (défilement au doigt, indice « glisser ») est retiré : deux cartes compactes
   au plus (`D11`) tiennent sans défiler, et la ligne « N autres championnats » dit ce qui reste. */
.rm-home-champs__list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ─── Spec 157 lot 3 — l'agenda du club, en apercu ────────────────────────── */
.rm-home-agenda__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rm-home-agenda__row + .rm-home-agenda__row {
    border-top: 1px solid var(--rm-border-light);
}

.rm-home-agenda__go {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    gap: 0.6rem;
    align-items: baseline;
    padding: 0.45rem 0.2rem;
    text-decoration: none;
    color: inherit;
    border-radius: 0.25rem;
}

.rm-home-agenda__go:hover {
    background: var(--rm-card-bg-subtle);
}

.rm-home-agenda__date {
    font-family: var(--rm-font-mono);
    font-size: var(--rm-card-label-size);
    color: var(--rm-text-muted);
    text-align: right;
    white-space: nowrap;
}

.rm-home-agenda__what {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Un nom de manche long se tronque plutot que de pousser la colonne de dates. */
.rm-home-agenda__name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rm-home-agenda__meta {
    font-size: var(--rm-card-label-size);
    color: var(--rm-text-muted);
    display: flex;
    gap: 0.4rem;
    min-width: 0;
    white-space: nowrap;
}

/* ⚠️ Spec 162 — le nom du championnat se TRONQUE, l'heure reste entiere. Trouve a l'oeil sur le
   rendu : dans les panneaux du membre, la colonne statut/compte a rebours retrecit celle-ci, et
   « E2E Published Championship » renvoyait l'heure a la ligne — trois lignes par course au lieu
   d'une. `min-width: 0` est ce qui permet a un enfant de flex de retrecir sous son contenu. */
.rm-home-agenda__champ {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ⚠️ L'heure a SON element : `DateTimeDisplay` rend du texte nu, et une premiere version visait
   `:last-child` — qui designait alors le nom du championnat, seul enfant element, et lui
   INTERDISAIT de retrecir. Mesure dans le navigateur : le nom gardait ses 165 px, l'heure debordait
   sous le badge. Un selecteur structurel suppose une structure ; mieux vaut nommer ce qu'on vise. */
.rm-home-agenda__time {
    flex-shrink: 0;
}

/* Spec 162 — `BR-157-8 quinquies` est devenue sans objet : trois lignes au plus tiennent sans
   defiler, et une liste defilante dans une carte cachait precisement ce qu'on venait chercher.

   Les panneaux du MEMBRE reprennent la ligne de l'agenda — meme role, meme lecture — avec une
   colonne de plus a droite : le statut et le compte a rebours, ou la position et les points. */
.rm-home-agenda__go--side {
    /* `minmax(0, 1fr)` : une piste `1fr` ne descend pas sous la largeur minimale de son contenu.
       ⚠️ Ce n'etait PAS la cause du debordement vu sur le rendu (c'est `.rm-home-agenda__time`,
       plus bas) — verifie en le retirant, le test de bout en bout reste vert. C'est une seconde
       defense, pour un contenu futur qui n'aurait pas son `min-width: 0`. */
    grid-template-columns: 3.5rem minmax(0, 1fr) auto;
    align-items: center;
}

.rm-home-agenda__go--result {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.rm-home-agenda__side {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    white-space: nowrap;
}

.rm-home-agenda__points {
    font-size: var(--rm-card-label-size);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ─── Spec 162 `BR-162-2` — la ligne « il y en a plus » ────────────────────
   Un filet pointille la separe de la liste : ce n'est pas une ligne de plus, c'est ce qui reste. */
.rm-home-more {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--rm-border-light);
    font-size: var(--rm-card-label-size);
    color: var(--rm-text-muted);
}

.rm-home-more__action {
    padding: 0;
    border: 0;
    background: none;
    color: var(--rm-primary);
    font-size: inherit;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.rm-home-more__action:hover {
    text-decoration: underline;
}

/* ⚠️⚠️ Spec 162 — un panneau qui montre MOINS sur telephone (l'actualite : une au lieu de deux).
   La ligne rend les deux comptes et la largeur choisit : le serveur ne la connait pas. Meme seuil
   que `.rm-mobile-unavailable` (`F-71`) — une seule frontiere telephone / reste sur cette page. */
@media (max-width: 767.98px) {
    .rm-home-news__item--wide-only,
    .rm-home-more__count--wide {
        display: none;
    }
}

@media (min-width: 768px) {
    .rm-home-more--phone-only,
    .rm-home-more__count--phone {
        display: none;
    }
}

/* Spec 162 — les blocs de l'accueil sont un cran plus serrés que la carte générique, et deux sur
   téléphone : six cartes empilées y payaient chacune 3 rem de marge intérieure, près d'un
   demi-écran à elles seules. La page se juge à l'écran près (`AC-162-10/11`). */
.rm-home-block {
    padding: 1.25rem;
}

@media (max-width: 767.98px) {
    .rm-home-block {
        padding: 1rem;
    }

    .rm-home-block .rm-card-title {
        margin-bottom: 0.75rem;
    }

    /* Sur téléphone, « Mes courses » est déjà un bouton de l'en-tête (`.rm-nav-quick-access`,
       visible sous le même seuil) : le répéter ici coûtait une ligne pour une destination affichée
       juste au-dessus. */
    .rm-home-stats__link {
        display: none;
    }
}

/* ─── Spec 157 lot 2 — le bandeau de partenaires ───────────────────────────
   ⚠️ IMMOBILE PAR DEFAUT. L'animation ne s'applique que sous `.rm-partners--overflowing`, classe
   posee par `partners-strip.js` apres MESURE. `BR-157-3` : animer ce qui tient deja a l'ecran
   fatigue sans rien apporter. */
.rm-partners {
    background: var(--rm-card-bg);
    border: 0.5px solid var(--rm-border);
    border-radius: var(--rm-card-radius);
    padding: 0.6rem 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.rm-partners__label {
    font-size: var(--rm-card-label-size);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--rm-text-muted);
    margin: 0;
    flex: none;
}

.rm-partners__viewport {
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

.rm-partners__track,
.rm-partners__echo {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* La copie du ruban n'existe QUE pour refermer la boucle : sans debordement, elle ne doit pas
   occuper de place ni s'afficher. */
.rm-partners__echo {
    display: none;
}

.rm-partners--overflowing .rm-partners__echo {
    display: flex;
}

.rm-partners--overflowing .rm-partners__track {
    animation: rm-partners-slide 32s linear infinite;
    width: max-content;
}

@keyframes rm-partners-slide {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ⚠️ `BR-157-4` — le mouvement est INTERRUPTIBLE. Au survol pour viser un logo, au focus clavier
   pour ne pas voir la cible se derober sous la tabulation. */
.rm-partners:hover .rm-partners__track,
.rm-partners:focus-within .rm-partners__track {
    animation-play-state: paused;
}

.rm-partners .rm-ad-banner-img {
    max-height: 2.2rem;
    width: auto;
    display: block;
}

/* ⚠️⚠️ `BR-157-4` — sous `prefers-reduced-motion`, l'animation NE DEMARRE PAS. Le bandeau
   redevient alors une bande que l'on fait defiler au doigt ou a la molette : le contenu reste
   atteignable, il ne bouge simplement plus tout seul. Un defilement qu'on ne peut pas arreter est
   un probleme d'accessibilite, pas un effet de style. */
/* ⚠️⚠️ DEUX raisons, UN seul comportement — et c'est pour cela qu'elles partagent leurs regles.
   · `prefers-reduced-motion` : le visiteur a demande moins d'animations. Un defilement qu'on ne
     peut pas arreter est un probleme d'accessibilite, pas un effet de style (`BR-157-4`).
   · Sous 768 px : le bandeau se fait glisser au doigt plutot que de defiler seul (`§5.2`).
   Dans les deux cas le contenu reste ATTEIGNABLE — il ne bouge simplement plus tout seul.
   ⚠️ Les deux blocs ont d'abord ete ecrits separement, a l'identique. Duplication trouvee en revue
   le 2026-09-23 : deux copies d'une meme regle finissent par diverger a la premiere correction. */
@media (prefers-reduced-motion: reduce), (max-width: 767.98px) {
    .rm-partners--overflowing .rm-partners__track {
        animation: none;
        width: auto;
    }

    .rm-partners--overflowing .rm-partners__echo {
        display: none;
    }

    .rm-partners__viewport {
        overflow-x: auto;
    }
}

/* ─── Spec 157 lot 1 — la page d'accueil devient la vitrine du club ─────────
   ⚠️ AUCUN `order:` ici, et c'est volontaire : `AC-157-15` impose que l'ordre visuel soit
   l'ordre du DOM, parce qu'un lecteur d'ecran suit le second. Le bureau elargit et met les
   DEUX DERNIERS blocs cote a cote ; il ne deplace rien. */
.rm-home {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ⚠️ Le conteneur possede l'espacement, les enfants ne le portent plus. Les blocs herites
   cumulaient `gap: 1rem` ET leur `mb-4` (1.5 rem) : le rythme vertical sautait de 1 a 2.5 rem
   d'un bloc a l'autre, selon qu'il datait d'avant ou d'apres le lot 1. Trouve en revue le
   2026-09-23. La regle vaut pour la suite : un bloc depose dans `.rm-home` n'apporte pas sa
   marge. */
/* ─── `BR-157-8 sexies` — LA MISE EN PAGE DE BUREAU, qui n'existait pas ─────────
   ⚠️⚠️ Fiche `F-67`, constatee EN PRODUCTION. `.rm-home` etait une colonne a toutes les largeurs :
   la page n'etait qu'un empilement de zones sur ordinateur. Et `Home.razor` portait un commentaire
   affirmant le contraire — une phrase qu'aucune garde ne verifiait.

   ⚠️ L'appariement est un FLEX et non une grille a deux colonnes figees, et c'est ce qui regle le
   cas du bloc absent (`BR-157-2`) : `flex: 1 1 0` fait grandir l'enfant restant jusqu'a la largeur
   entiere. Une grille `1.5fr 1fr` laisserait une colonne vide a cote d'une colonne pleine, ce qui
   se lit comme un defaut d'affichage.

   ⚠️ `min-width: 0` sur les enfants : sans lui, un contenu insecable — un titre d'actualite long,
   une rangee d'agenda — empeche le flex de rétrécir sa base et deborde la carte. */
.rm-home__pair {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 992px) {
    .rm-home__pair {
        flex-direction: row;
    }

    .rm-home__pair > * {
        flex: 1 1 0;
        min-width: 0;
    }

    /* L'actualite porte la colonne large : elle contient du texte redige, l'agenda des lignes
       courtes. ⚠️ 1,55 n'est pas un chiffre rond choisi a vue : c'est la proportion MESUREE sur
       `docs/screens/RaceMarshal-accueil-proposition.html` (582 px contre 376 px), le dessin valide. */
    .rm-home__pair > .rm-home-news,
    .rm-home__pair > .rm-home-champs {
        flex-grow: 1.55;
    }
}

.rm-home > .rm-card,
.rm-home > section,
.rm-home__pair > .rm-card,
.rm-home__pair > section {
    margin-bottom: 0;
}

.rm-home__title {
    margin: 0;
}

/* Spec 162 D3 — les compteurs tiennent sur UNE ligne nommee, et non plus quatre tuiles de 150 px.
   Le titre, les quatre valeurs et le lien vers « Mes courses » se suivent ; sur telephone la
   ligne se replie, dans le meme ordre. */
.rm-home-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 1.25rem;
}

.rm-home-stats .rm-card-title {
    margin: 0;
}

.rm-home-stats__line {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rm-home-stats__value {
    font-size: 1.1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-right: 0.3rem;
}

.rm-home-stats__label {
    font-size: var(--rm-card-label-size);
    color: var(--rm-text-muted);
}

/* Le titre porte son lien a droite — il mene la ou l'on va quand un chiffre intrigue. */
.rm-home-join__body {
    color: var(--rm-text-muted);
    margin-bottom: 0.75rem;
}

.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; }

/* Spec 162 — les regles `BR-07-GO-4` (le bouton d'acces des lignes de l'ancien tableau de bord,
   et sa ligne pleine largeur sous 768 px) sont retirees avec ce bouton : la ligne ENTIERE est
   desormais le lien (`BR-162-4`). `.rm-schedule-item` reste, `EventTimeline` l'emploie. */

.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;
    /* Spec 110 v1.26.0 Bloc 2 Phase F (P1 minimaliste) — transition CSS pour mutations
       in-place uniquement (hover, ajustement opacity dynamique futur). Note honnête :
       les transitions d'état Confirmed→Withdrawn passent par un filter `_sessions` Phase C
       (mount/unmount DOM), pas par une mutation in-place — l'animation ne se déclenche
       donc PAS sur ce flow. La vraie animation slide-out + fade-in + toast post-promotion
       waitlist (spec §6.4 P1 complet) est tracée en dette F-17. */
    transition: opacity 0.25s ease;
}
.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) ─── */

/* ─── 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-danger-text);
    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 147 — le pilote non rattache, cote admin uniquement (BR-147-2)
   ═══════════════════════════════════════════════════════════════════════════ */

/* BR-147-4 — pastille NEUTRE, pas orange : etre passif n'est pas une erreur,
   c'est le cas normal d'un evenement ouvert aux non-membres. Les deux tokens
   sont declares dans les DEUX themes (5,3:1 clair, 4,9:1 sombre). */
.rm-badge-passive {
    display: inline-block;
    margin-left: 0.375rem;
    padding: 2px 7px;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.4;
    border-radius: 4px;
    background: var(--rm-badge-neutral-bg);
    color: var(--rm-badge-neutral-text);
    vertical-align: middle;
}

/* Le curseur d'aide ne se justifie QUE la ou une infobulle existe : dans la table de resultats
   elle nomme l'ecran ou aller agir, dans le sous-onglet « Passifs » on y est deja. Un curseur
   d'aide sans aide promet une explication qui ne vient jamais. */
.rm-badge-passive[title] {
    cursor: help;
}

/* BR-147-5 — le compte, au-dessus des onglets de categorie : il porte sur la
   manche entiere, pas sur la categorie regardee. */
.rm-unlinked-banner {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    padding: 0.55rem 0.8rem;
    margin-bottom: 0.9rem;
    font-size: 0.85rem;
    background: var(--rm-card-bg-subtle);
    border: 1px solid var(--rm-border);
    /* ⚠ `--rm-warning` n'est PAS redefini en sombre — il y resterait l'orange du
       theme clair sur une carte sombre. `--rm-warning-text` l'est. Gotcha U23. */
    border-left: 3px solid var(--rm-warning-text);
    border-radius: 8px;
    color: var(--rm-text);
}

.rm-unlinked-banner__icon {
    display: inline-flex;
    flex: none;
    color: var(--rm-warning-text);
}

.rm-unlinked-banner__link {
    color: var(--rm-primary);
    font-weight: 600;
    text-decoration: none;
}

.rm-unlinked-banner__link:hover,
.rm-unlinked-banner__link:focus-visible {
    text-decoration: underline;
}

/* Spec 149 BR-149-8 — le nom brut du fichier, a cote du nom nettoye. En chasse fixe :
   c'est ce qui rend visible la difference entre « Loic CHAMPI » et « Loic Champi »,
   laquelle explique le doublon qu'on s'apprete a fusionner. */
.rm-passive-raw {
    font-family: var(--rm-font-mono);
    font-size: 0.75rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Spec 154 — les rapprochements proposes apres un import

   Une ligne par pilote non reconnu. Meme grammaire que l'onglet « Non rattaches »
   (pilote, selecteur, action) : les deux posent la meme question, ils ne doivent
   pas se lire comme deux ecrans differents.
   ═══════════════════════════════════════════════════════════════════════════ */

.rm-proposal {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.5rem 0.65rem;
    margin-bottom: 0.4rem;
    background: var(--rm-card-bg-subtle);
    border: 1px solid var(--rm-border);
    border-radius: 8px;
}

.rm-proposal__driver {
    font-weight: 600;
    min-width: 12rem;
}

/* `BR-154-8` — la portee reelle du clic. Discrete, mais jamais absente : c'est
   elle qui distingue « je corrige cette course » de « je reecris une saison ». */
.rm-proposal__scope {
    color: var(--rm-text-muted);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Spec 152 — le classement nomme ce qu'il ecarte

   Meme famille visuelle que `.rm-unlinked-banner` (spec 147), et c'est voulu :
   les deux disent la meme chose sous deux angles — « ce pilote n'est rattache
   a personne ». Deux traitements differents pour un meme fait se liraient
   comme deux problemes distincts.
   ═══════════════════════════════════════════════════════════════════════════ */

.rm-unranked {
    margin-top: 0.9rem;
    padding: 0.55rem 0.8rem;
    font-size: 0.85rem;
    background: var(--rm-card-bg-subtle);
    border: 1px solid var(--rm-border);
    /* ⚠ `--rm-warning` n'est PAS redefini en sombre. `--rm-warning-text` l'est. Gotcha U23. */
    border-left: 3px solid var(--rm-warning-text);
    border-radius: 8px;
    color: var(--rm-text);
}

.rm-unranked__title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.35rem;
    font-weight: 600;
    color: var(--rm-warning-text);
}

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

.rm-unranked__item {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.rm-unranked__driver {
    font-weight: 600;
}

.rm-unranked__reason {
    color: var(--rm-text-muted);
}

.rm-unranked__heats {
    color: var(--rm-text-muted);
    font-variant-numeric: tabular-nums;
}

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

.rm-unranked__fix:hover,
.rm-unranked__fix:focus-visible {
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Spec 148 — les penalites de la simulation
   ═══════════════════════════════════════════════════════════════════════════ */

.rm-penalty-count {
    font-variant-numeric: tabular-nums;
}

.rm-penalty-count span {
    font-weight: 700;
    color: var(--rm-warning-text);
}

/* BR-148-12 — TROIS etats, TROIS couleurs, et elles ne sont pas decoratives.
   Une purge n'est pas une sanction : c'est une dette reglee. Les peindre pareil
   ferait lire quatre sanctions la ou un pilote en a pris deux et regle deux.

   ⚠ Les six paires sont des tokens declares dans les DEUX themes. `--rm-success-text`
   existe precisement parce que `--rm-success` echoue a 3,1:1 sur `--rm-success-light` :
   prendre le mauvais des deux reproduirait un defaut deja corrige. Mesures :
   6,67 / 6,77 / 5,72 en clair, 8,00 / 10,13 / 7,53 en sombre. */
.rm-lap-penalty td {
    background: var(--rm-penalty-bg);
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}

.rm-lap-penalty--issued {
    --rm-penalty-bg: var(--rm-warning-light);
    --rm-penalty-ink: var(--rm-warning-text);
}

.rm-lap-penalty--served {
    --rm-penalty-bg: var(--rm-success-light);
    --rm-penalty-ink: var(--rm-success-text);
}

.rm-lap-penalty--unserved {
    --rm-penalty-bg: var(--rm-danger-light);
    --rm-penalty-ink: var(--rm-danger-text);
}

.rm-lap-penalty__line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.8125rem;
}

.rm-lap-penalty__line svg {
    flex: none;
    color: var(--rm-penalty-ink);
}

.rm-lap-penalty__kind {
    font-weight: 700;
    color: var(--rm-penalty-ink);
}

.rm-lap-penalty__reason {
    color: var(--rm-text-muted);
    font-family: var(--rm-font-mono);
    font-size: 0.75rem;
}

.rm-lap-penalty__state {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: var(--rm-pill-radius);
    color: var(--rm-penalty-ink);
    border: 1px solid currentColor;
}

@media (max-width: 575.98px) {
    .rm-lap-penalty__state {
        margin-left: 0;
    }
}

/* 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-dark);
    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;
}

/* ─── Spec 150 — plafonds par classe (réglages championnat, desktop) ─── */
.rm-class-limits__name {
    width: 40%;
}
.rm-class-limits__input {
    width: 6rem;
}
/* Le nombre d'inscrits se lit en colonne : des chiffres qui ne s'alignent pas
   se comparent mal, et c'est exactement ce qu'on demande à l'organisateur. */
.rm-class-limits__count {
    width: 8rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.rm-class-limits__state {
    white-space: nowrap;
}

/* ─── 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-signal);
    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-text);
    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). */
/* ── Spec 129 — bloc soiree ────────────────────────────────────────────────
   Un seul conteneur pour ce que cinq blocs disaient separement. L'en-tete nomme
   la soiree et son etat : sans lui, l'utilisateur devait deduire de quoi on lui
   parlait a partir du contenu.
   Tokens issus de la liste close (UX_DESIGN_SYSTEM §3.4) — aucun invente. */
.rm-round-block {
    background: var(--rm-card-bg);
    border: 0.5px solid var(--rm-border);
    border-radius: var(--rm-card-radius);
    padding: 1.5rem;
}
.rm-round-block__header {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin-bottom: 1rem;
}
.rm-round-block__state {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rm-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
/* Une course en cours se signale par la couleur ET par le point qui pulse :
   la couleur seule ne doit jamais porter l'information (accessibilite). */
.rm-round-block__state--live { color: var(--rm-success); }
.rm-round-block__title {
    font-size: 1.125rem;
    font-weight: 600;
}
.rm-round-block__when { color: var(--rm-text-muted); }
/* L'affiche accompagne, elle ne domine plus : pleine largeur, elle prenait le pas
   sur l'information qu'elle illustre (Q-129-2). */
.rm-round-block__poster {
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    border-radius: var(--rm-card-radius);
    margin-bottom: 1rem;
}
/* Le compte a rebours est le seul element proprement emotionnel de la page :
   il fait exister l'evenement autrement qu'une date. */
.rm-round-block__countdown {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
}
.rm-round-block__schedule { margin-bottom: 1rem; }
.rm-round-block__schedule-item {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.25rem 0;
}
.rm-round-block__schedule-time {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    min-width: 3.5rem;
}
.rm-round-block__schedule-duration {
    color: var(--rm-text-muted);
    font-size: 0.875rem;
    margin-left: auto;
}
.rm-round-block__schedule-item--end { color: var(--rm-text-muted); }

/* Metadonnees remontees sous le titre (BR-129-10 bis) : elles occupaient une carte
   entiere pour quatre lignes, dont le statut deja porte par le badge. */
.rm-champ-meta { line-height: 1.7; }

/* Spec 129 — la zone de resume a disparu avec `ChampionshipEventSummary` : le programme
   est parti dans le bloc soiree, les metadonnees sont remontees sous le titre. Ne reste
   que le lien du compteur d'inscrits, qui vit desormais dans cette ligne. */
.rm-info-value--link {
    background: none;
    border: none;
    padding: 0;
    color: var(--rm-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    font: inherit;
}
.rm-info-value--link:hover,
.rm-info-value--link:focus-visible {
    color: var(--rm-primary-dark);
}


/* 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-text);
    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-signal);
    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 style inline height/width calculé Razor (carré 1:1).
   Définition unique depuis le 2026-09-07. Elle en remplace deux : la seconde était conservée
   pour `TrackCrud.razor` et `RoundCard.razor`, supprimés respectivement par la spec 91 V2 et
   par cette revue. Le `border-radius: 4px` qu'elle apportait est repris ici — c'est la seule
   propriété dont `<TrackLogoDisplay>` avait fini par dépendre, la taille venant de l'inline. */
.rm-track-logo {
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 4px;
    display: inline-block;
    vertical-align: middle;
}
.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-badge-neutral-text);
    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). */
/* F-37 — le focus se lit sur la CARTE, pas sur le seul titre. `stretched-link` pose l'anneau
   sur le lien ; sans ce report, un utilisateur au clavier verrait un liseré autour de quelques
   mots alors que toute la carte est la cible. Meme raisonnement que `BR-142-13`.
   `:focus-visible` est conserve pour le cas ou la carte redeviendrait focusable elle-meme. */
.rm-champ-card:focus-visible,
.rm-champ-card:focus-within {
    outline: 2px solid var(--rm-primary);
    outline-offset: 2px;
}

/* Le titre porte le lien : il ne doit pas se teinter ni se souligner comme un lien ordinaire,
   la carte entiere etant la cible. */
.rm-champ-card__link {
    color: inherit;
    text-decoration: none;
}

/* F-37 — ce qui reste interactif repasse AU-DESSUS de la couche `::after` du stretched-link.
   Deux elements seulement : le bouton de confirmation rapide, et le popover DLC en mode Compact
   que `DlcRequirementsList` injecte dans la carte. Sans cela, cliquer « DLC requis » naviguerait
   vers la page du championnat. `z-index: 2` = la valeur de l'echelle documentee, celle du ribbon. */
.rm-champ-card .rm-quick-confirm,
.rm-champ-card .rm-dlc-popover-wrap {
    position: relative;
    z-index: 2;
}
.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;
}

/* Spec 132 BR-132-5 — podium final en bas de carte, sur un championnat terminé.
   Tokens theme-aware uniquement : la carte doit rester lisible en dark. */
.rm-champ-card__podiums {
    margin-top: 0.6rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--rm-border-light);
}
.rm-champ-card__podiums-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rm-text-muted);
    margin-bottom: 0.3rem;
}
.rm-champ-card__podium + .rm-champ-card__podium {
    margin-top: 0.45rem;
}
.rm-champ-card__podium-class {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--rm-text-muted);
    margin-bottom: 0.15rem;
}
.rm-champ-card__podium-row {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 0.8rem;
    line-height: 1.5;
}
.rm-champ-card__podium-pos {
    flex: 0 0 1.1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--rm-text-muted);
}
/* Or, argent, bronze — la position se lit sans lire le chiffre. */
.rm-champ-card__podium-row--p1 .rm-champ-card__podium-pos { color: var(--rm-gold); }
.rm-champ-card__podium-row--p2 .rm-champ-card__podium-pos { color: var(--rm-silver); }
.rm-champ-card__podium-row--p3 .rm-champ-card__podium-pos { color: var(--rm-bronze); }
.rm-champ-card__podium-driver {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--rm-text);
}
.rm-champ-card__podium-points {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    color: var(--rm-text-muted);
}

/* Spec 132 BR-132-3 — intertitre de groupe dans « Mes événements ». */
.rm-champ-group-title {
    color: var(--rm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.78rem;
    margin-bottom: 0.6rem;
}

/* ─── 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-text);
    border: 1px solid var(--rm-warning);
}

.rm-status-confirmed {
    background: var(--rm-success-light);
    color: var(--rm-success-text);
    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-text);
    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-signal);
    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;
}

/* ─── Spec 163 — les logos des partenaires DANS l'en-tête ───────────────────────
   ⚠️⚠️ TOUT OU RIEN (`header-partners.js`). Le groupe occupe toujours la place libre de la ligne du
   logo (`flex: 1 1 0` : il ne force aucun retour à la ligne, il prend ce qui reste) — c'est sa
   largeur qui dit combien de place il y a. Ses logos restent INVISIBLES tant que le script n'a pas
   mesuré qu'ils tiennent TOUS, hauteur réduite comprise.
   ⚠️ Couleurs d'origine, image intacte (`BR-163-2`) : ni filtre, ni mélange, ni fond ajouté. La
   transparence vient du FICHIER (`D2`). */
.rm-header-partners {
    display: none;
}

@media (min-width: 768px) {
    .rm-header-partners {
        --rm-header-partner-h: 36px;
        --rm-header-partners-reserve: 0px;
        order: 1;
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1.25rem;
        padding-right: var(--rm-header-partners-reserve);
        visibility: hidden;
    }

    .rm-header-partners--fits {
        visibility: visible;
    }

    .rm-header-partners .rm-ad-banner-img {
        display: block;
        height: var(--rm-header-partner-h);
        width: auto;
        max-width: 160px;
        object-fit: contain;
    }
}

.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);
}

/* Spec 163 `BR-163-6` — l'aperçu d'un logo d'en-tête, sur le fond de l'en-tête. */
.rm-banner-preview--header {
    background: var(--rm-navbar-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 ChampDetail, Footer réduite (TopBar : cf spec 163, en-tête) */
    .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 */
/* Le meilleur tour — partage par la cellule du tableau de resultats et la ligne du tableau
   des tours (BR-141-11 : un seul idiome). Poser `color` ici le fait descendre aux cellules
   quand la classe porte sur un `<tr>`, et s'applique directement quand elle porte sur un `<td>`. */
.rm-fastest-lap {
    background-color: var(--rm-best-lap-bg);
    color: var(--rm-best-lap-ink);
}

/* Le marqueur devient une pastille nommee : `*` demandait de savoir ce qu'il voulait dire. */
.rm-lap-best {
    display: inline-block;
    background: var(--rm-best-lap-pill);
    color: var(--rm-best-lap-ink);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    margin-right: 0.3rem;
    white-space: nowrap;
}

/* Le chrono est l'information qu'on cherche : c'est lui qu'on met en avant, pas le tour. */
.rm-fastest-lap .rm-lap-table__time { font-weight: 700; }

/* ── Spec 141 axe B — le graphique des positions ─────────────────────────────
   Aucune couleur en dur : les series viennent des tokens theme-aware (BR-141-31). */

.rm-chart { margin: 0.5rem 0 0; }
.rm-chart__caption {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--rm-text-muted);
    margin-bottom: 0.25rem;
}
/* Le graphique defile dans SON conteneur, jamais le corps de page. */
.rm-chart__scroll { overflow-x: auto; }
.rm-chart__svg {
    width: 100%;
    min-width: 520px;
    height: auto;
    display: block;
}

.rm-chart__grid {
    stroke: var(--rm-border-light);
    stroke-width: 1;
}
.rm-chart__axis {
    fill: var(--rm-text-muted);
    font-family: var(--rm-font-mono);
    font-size: 9px;
}
.rm-chart__axis-title {
    fill: var(--rm-text-muted);
    font-size: 9px;
    font-weight: 600;
}

/* BR-141-30 — les non selectionnes portent une information (la forme de la course),
   donc tiennent 3:1. JAMAIS d'opacity : elle les ferait replonger sous le seuil.
   La selection se signale par l'epaisseur du trait et l'etiquette, pas par le contraste. */
/* Spec 141 §14 BR-141-39 — plancher a 1.5. A l'epaisseur precedente de 1, un pointille
   produisait des segments qui se perdaient dans le fond : le motif ne peut porter l'identite
   que s'il se voit. Les courbes non selectionnees s'epaississent donc legerement — coherent
   avec BR-141-32, qui les fait passer de decor a information. */
.rm-chart__line {
    fill: none;
    stroke: var(--rm-text-muted);
    stroke-width: 1.5;
    stroke-linejoin: round;
    stroke-linecap: round;
    /* Spec 141 §14 BR-141-39 — le plancher de 1,5 est exprime dans le viewBox, large de 1000
       depuis que la colonne des noms occupe la marge gauche. Au plus etroit le SVG tombe a
       `min-width: 520px`, soit une echelle de 0,52 : le trait serait rendu a 0,78 px et les
       points du pointille a 0,26 px — le motif redeviendrait
       invisible la ou on l'avait sauve. `non-scaling-stroke` fige l'epaisseur ET le pointille
       en pixels d'ecran, quelle que soit l'echelle : la garantie tient du telephone au
       grand ecran. */
    vector-effect: non-scaling-stroke;
}
.rm-chart__line--active { stroke-width: 2.5; }

/* BR-141-34 — le motif prend le relais quand la couleur se repete. `dasharray` proportionne
   au plancher de 1.5 ; `stroke-linecap: round` transforme le tiret court en point rond. */
.rm-chart__line--p1 { stroke-dasharray: 7 4; }
.rm-chart__line--p2 { stroke-dasharray: 0.5 4; }

.rm-chart__dot { stroke: none; }

/* Le nom du pilote devant sa courbe, au rang d'ou il part. Il porte la couleur de la ligne :
   c'est cette colonne qui sert desormais de legende, et le bandeau du dessus ne garde que son
   role de selecteur. Sans elle, lire une trajectoire imposait un aller-retour entre le code
   couleur et le trace, a refaire pour chaque pilote. */
.rm-chart__name {
    font-size: 10px;
    font-weight: 500;
}
/* La selection se lit aussi dans la colonne : sans cela, le bandeau, le trace et les noms
   auraient dit trois choses differentes du meme etat. */
.rm-chart__name--on { font-weight: 800; }

/* Le nom EST le selecteur : un bandeau de boutons le doublait au-dessus du graphique, et
   depuis que la colonne porte la couleur il ne nommait plus rien qu'elle ne dise mieux.
   Deux rangees de dix-huit boutons en moins. */
.rm-chart__pick { cursor: pointer; }

/* Zone de clic : le texte seul ferait ~12 px de haut, loin des 24 exiges pour une cible
   (WCAG 2.5.8). Ce rectangle couvre la ligne entiere. `fill: transparent` et NON
   `fill: none` — `none` ne recevrait aucun evenement de pointeur, et la cible serait
   reduite aux quelques pixels des glyphes. */
.rm-chart__pick-hit { fill: transparent; }

/* Le focus clavier doit se voir DANS le SVG. `outline` n'y est pas fiable d'un navigateur
   a l'autre : on dessine le contour sur le rectangle de la zone de clic, qui a justement
   les dimensions de la ligne. */
.rm-chart__pick:focus { outline: none; }
.rm-chart__pick:focus-visible .rm-chart__pick-hit {
    stroke: var(--rm-primary);
    stroke-width: 2;
    rx: 3;
}
.rm-chart__pick:hover .rm-chart__name { text-decoration: underline; }
.rm-chart__label {
    font-family: var(--rm-font-mono);
    font-size: 10px;
    font-weight: 600;
}

/* La mention d'abandon, sous le nom. Une seule ligne ne tenait pas dans la marge : en espagnol
   « Abandono en la vuelta 59 » reclame 165 des 193 px disponibles, et le nom tombait a quatre
   caracteres. Elle est allegee — pas eclaircie : la couleur reste celle de la courbe, sinon
   l'etiquette cesserait de designer son pilote, et une opacite la ferait passer sous le seuil
   de contraste que BR-141-30 defend. */
.rm-chart__label--note {
    font-size: 9px;
    font-weight: 400;
}

/* Les huit series. L'index vient du PILOTE, jamais de son rang dans la selection (BR-141-38).

   ⚠️ LE TRAIT ET LE REMPLISSAGE SONT DEUX FAMILLES SEPAREES, et ce n'est pas du zele.
   Ces classes posaient `stroke` ET `fill` parce qu'elles habillaient a la fois les courbes,
   les points de fin et les etiquettes. Or `.rm-chart__line` declare `fill: none` PLUS HAUT
   dans ce fichier : a specificite egale, c'est la regle la plus tardive qui gagne, donc le
   `fill` colore l'emportait et chaque `<polyline>` se refermait en aplat.

   Le defaut existait avant la spec 141 §14 mais ne touchait que les courbes selectionnees,
   seules a recevoir une couleur. En donnant sa couleur a CHAQUE pilote, l'amendement l'a
   rendu total : dix-huit aplats au lieu de dix-huit lignes. Separer les familles supprime la
   collision a la source, plutot que de la masquer sous un `!important`. */
.rm-chart__line--s1 { stroke: var(--rm-series-1); }
.rm-chart__line--s2 { stroke: var(--rm-series-2); }
.rm-chart__line--s3 { stroke: var(--rm-series-3); }
.rm-chart__line--s4 { stroke: var(--rm-series-4); }
.rm-chart__line--s5 { stroke: var(--rm-series-5); }
.rm-chart__line--s6 { stroke: var(--rm-series-6); }
.rm-chart__line--s7 { stroke: var(--rm-series-7); }
.rm-chart__line--s8 { stroke: var(--rm-series-8); }

/* Points de fin et etiquettes : eux ont besoin d'un `fill`, et d'aucun `stroke`. */
.rm-chart__fill--s1 { fill: var(--rm-series-1); }
.rm-chart__fill--s2 { fill: var(--rm-series-2); }
.rm-chart__fill--s3 { fill: var(--rm-series-3); }
.rm-chart__fill--s4 { fill: var(--rm-series-4); }
.rm-chart__fill--s5 { fill: var(--rm-series-5); }
.rm-chart__fill--s6 { fill: var(--rm-series-6); }
.rm-chart__fill--s7 { fill: var(--rm-series-7); }
.rm-chart__fill--s8 { fill: var(--rm-series-8); }



.rm-chart__hint,
.rm-chart-empty {
    color: var(--rm-text-muted);
    font-size: 0.8125rem;
    margin: 0.35rem 0 0;
}





/* Le selecteur de vue, au-dessus des onglets de classe (§13.3). */
.rm-view-switch { display: inline-flex; gap: 0.25rem; margin-bottom: 0.5rem; }

/* Le graphique des positions ne sert pas sur telephone : dix-huit courbes dans une vue qui
   defile horizontalement demandent plus d'effort qu'elles n'en epargnent. Decision du
   2026-09-09 — on le retire du mobile.

   ⚠️ C'est le SELECTEUR qu'on masque, jamais le graphique lui-meme. `_view` demarre sur
   `Table` et ces deux boutons sont le seul moyen d'en changer : sans eux, un telephone
   n'atteint jamais la vue graphique, et le composant ne la rend donc pas — rien n'est
   envoye au navigateur pour rien.

   Masquer le graphique en CSS aurait ete le piege : les deux vues sont exclusives
   (`@if (_view == …)`), et cacher celle qui est rendue aurait laisse une zone de resultats
   VIDE. On evite l'etat impossible plutot que de le rattraper. Effet de bord assume : un
   poste de bureau retreci sous 576 px conserve le graphique qu'il affichait deja — il reste
   lisible et defilant, ce qui vaut mieux qu'un blanc. */
@media (max-width: 576px) {
    .rm-view-switch { display: none; }
}
.rm-view-switch__btn {
    background: var(--rm-card-bg-subtle);
    border: 1px solid var(--rm-border);
    color: var(--rm-badge-neutral-text);
    border-radius: var(--rm-card-radius);
    padding: 0.2rem 0.7rem;
    font-size: 0.8125rem;
    cursor: pointer;
}
.rm-view-switch__btn--active {
    /* --rm-primary-dark et NON --rm-primary : le premier fonce en theme sombre, le second
       s'eclaircit pour se detacher du fond — et degrade le blanc pose dessus (3,68:1, sous le
       seuil de 4,5). Defaut attrape par Spec139_ContrastTests, qui indiquait le remede. */
    background: var(--rm-primary-dark);
    border-color: var(--rm-primary-dark);
    color: #fff;
    font-weight: 600;
}

/* ── Spec 141 axe A — le detail au tour ──────────────────────────────────────
   Tokens uniquement : aucune valeur en dur, aucun fallback hex (gotcha U23). */

/* Le chevron. Un <button> et non un <div> cliquable : il doit etre atteignable
   au clavier et annoncer son etat (aria-expanded). */
.rm-lap-toggle {
    background: none;
    border: none;
    padding: 0;
    margin-right: 0.35rem;
    color: var(--rm-text-muted);
    line-height: 1;
    vertical-align: middle;
    cursor: pointer;
    transition: transform 0.15s ease, color 0.15s ease;
}
.rm-lap-toggle:hover { color: var(--rm-primary); }
/* Une seule icone, pivotee a l'ouverture — plutot que deux composants SVG. */
.rm-lap-toggle[aria-expanded="true"] {
    transform: rotate(180deg);
    color: var(--rm-primary);
}

.rm-lap-row > .rm-lap-cell {
    background: var(--rm-card-bg-subtle);
    padding: 0.5rem 0.75rem 0.75rem 2.25rem;
}

/* Le tableau deplie defile dans SON conteneur — jamais le corps de page. */
.rm-lap-scroll {
    overflow-x: auto;
    max-width: 100%;
}

.rm-lap-table {
    width: 100%;
    border-collapse: collapse;
    /* BR-141-27 — chasse fixe : sans elle les chiffres ne s'alignent pas d'une
       ligne a l'autre, et comparer deux pilotes devient penible. */
    font-family: var(--rm-font-mono);
    font-size: 0.8125rem;
}
.rm-lap-table th {
    text-align: right;
    font-weight: 600;
    color: var(--rm-text-muted);
    border-bottom: 1px solid var(--rm-border);
    padding: 0.25rem 0.5rem;
    white-space: nowrap;
}
.rm-lap-table td {
    text-align: right;
    padding: 0.2rem 0.5rem;
    border-bottom: 1px solid var(--rm-border-light);
    white-space: nowrap;
    color: var(--rm-text);
}
.rm-lap-table__num { text-align: left; }

/* BR-141-11 — meme marqueur que le meilleur tour de la classe, une colonne plus loin. */
.rm-lap-empty,
.rm-lap-notice {
    color: var(--rm-text-muted);
    font-size: 0.8125rem;
    margin: 0.4rem 0 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* Mobile — les colonnes accessoires tombent, les secteurs restent : ce sont eux
   qu'on vient comparer. */
@media (max-width: 767.98px) {
    .rm-lap-table__optional { display: none; }
    .rm-lap-row > .rm-lap-cell { padding-left: 0.75rem; }
}
/* .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-card-bg);
    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-card-bg-subtle);
}
.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);
}
.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-card-bg);
    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-card-bg-subtle);
}
.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);
}
.rm-image-tile__usage--orphan {
    color: var(--rm-warning-text);
}


/* 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; }
/* Spec 131 — en attente d'un second avis : bleu, distinct de l'orange « personne n'a
   encore regarde ». Sans cette regle la carte perdrait tout liseré. */
.rm-claim-card--pendingsecondapproval { border-left-color: #3b82f6; }
.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);
}
.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-badge-neutral-text);
    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: 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);
    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-dark);
    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;
}
/* ─── Spec 162 `BR-162-8` — le MODE COMPACT de la carte unique (page d'accueil) ───────
   L'affiche passe à gauche en vignette, tout le reste dans la colonne de droite. ⚠️ `grid-column:
   -2` range chaque bloc dans la DERNIÈRE colonne, qu'il y en ait une (sans affiche) ou deux : une
   seule règle pour les deux cas, au lieu d'en recopier une par variante. Le ruban de statut reste
   positionné en absolu, hors de la grille. */
.rm-champ-card--compact {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0.9rem;
    align-items: start;
    padding: 0.75rem 0.9rem;
}

.rm-champ-card--compact.rm-champ-card--with-poster {
    grid-template-columns: 150px minmax(0, 1fr);
}

.rm-champ-card--compact > * {
    grid-column: -2;
}

.rm-champ-card--compact > .rm-champ-card__poster {
    grid-column: 1;
    grid-row: 1 / span 4;
    aspect-ratio: 16 / 10;
    margin-bottom: 0;
}

.rm-champ-card--compact .rm-champ-card-title {
    margin-bottom: 0;
    padding-right: 5.5rem; /* la place du ruban de statut */
}

.rm-champ-card--compact .rm-champ-card__round {
    margin-top: 0.4rem;
}

/* Spec 162 — sur ordinateur, la date et le circuit de la prochaine manche partagent UNE ligne ; la
   météo et la progression gardent chacune la leur. Pas sur téléphone : la colonne y est trop
   étroite, la ligne se replierait et coûterait plus qu'elle ne rend (mesuré). */
@media (min-width: 768px) {
    .rm-champ-card--compact .rm-champ-card__round {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 0.4rem;
    }

    .rm-champ-card--compact .rm-champ-card__round > * {
        flex-basis: 100%;
    }

    .rm-champ-card--compact .rm-champ-card__round > .rm-champ-card__date,
    .rm-champ-card--compact .rm-champ-card__round > .rm-champ-card__track {
        flex-basis: auto;
    }
}

/* `AC-162-15` — la progression est une PHRASE (« 15 manches courues sur 21 · manche 17 à venir ») :
   la police mono du compteur « 15 / 21 » l'étirait sur deux lignes. */
.rm-champ-card--compact .rm-champ-card__rounds-count {
    font-family: inherit;
    font-size: var(--rm-card-footer-size);
    font-weight: 500;
}

@media (max-width: 576px) {
    .rm-champ-card--compact.rm-champ-card--with-poster {
        grid-template-columns: 104px minmax(0, 1fr);
    }

    .rm-champ-card--compact .rm-champ-card-title {
        padding-right: 0;
    }

    /* Le ruban passe en ligne sur téléphone (`BR-6`) ; en bloc, un badge prenait toute la largeur. */
    .rm-champ-card--compact .rm-champ-card__status-ribbon {
        justify-self: start;
        margin-bottom: 0.3rem;
    }
}

.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. */
/* Spec 120 BR-120-7 — la soiree est un CONTENANT, plus un simple liseré.
   Avant : `border-left: 3px` seul. Six manches d'une meme soiree occupaient la
   meme largeur et le meme fond que six soirees distinctes, et se lisaient donc
   comme telles — c'est ce qui a produit l'incident America's Cup (spec 120 §2).
   Le fond et le cadre expriment l'appartenance ; le liseré primaire est conserve
   pour ne pas perdre le repere visuel existant. */
.rm-session-block {
    border: 1px solid var(--rm-border);
    border-left: 3px solid var(--rm-primary);
    border-radius: var(--rm-card-radius);
    background: var(--rm-card-bg-subtle);
    padding: 0.75rem;
    margin-bottom: 1.5rem;
}
/* Les manches sont encartees DANS la soiree : le contraste de fond dit
   l'appartenance sans qu'aucun mot soit necessaire. */
.rm-session-block__heats {
    background: var(--rm-card-bg);
    border: 1px solid var(--rm-border-light);
    border-radius: var(--rm-card-radius);
    overflow: hidden;
}
/* BR-120-11 — rappel que le circuit vaut pour toute la soiree. Affiche
   uniquement des 2 manches : sur une soiree simple ce serait du bruit. */
.rm-session-block__scope-hint {
    font-size: 0.8125rem;
    color: var(--rm-text-muted);
    margin-bottom: 0.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);
    }
    /* Spec 142 BR-142-15 — une soiree a UNE seule manche remplissait une colonne sur deux :
       la moitie droite du bloc etait le vide constate en recette. Elle prend desormais toute
       la largeur.

       ⚠️ Ne PAS transposer a `.rm-cards-grid`, qui porte la meme declaration. Une grille de
       cartes qui n'en contient qu'une laisse un blanc — c'est le comportement attendu d'une
       liste, et etirer une carte isolee la ferait passer pour autre chose. Ici il ne s'agit pas
       d'une liste mais de la mise en page du contenu d'une soiree. */
    .rm-session__heat-card:only-child { grid-column: 1 / -1; }
}
/* Spec 142 BR-142-5 — `position: relative` ancre la zone etendue du `.stretched-link`
   pose sur « Resultats detailles ». La carte n'est PAS enveloppee dans un <a> : elle
   contient un <select> et des <button>, interdits comme descendants d'une ancre. */
.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;
    position: relative;
}
/* Spec 142 BR-142-13 — survol et focus n'existaient pas sur cette carte : tout est cree
   ici, calque sur `.rm-champ-card`. Le modificateur `--linked` les reserve aux cartes
   reellement cliquables : une manche non clotoree n'a pas de resultats, la faire reagir
   au survol promettrait une destination inexistante. */
.rm-session__heat-card--linked {
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.rm-session__heat-card--linked:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}
/* BR-142-14 — `:focus-within` remonte l'etat au niveau de la carte : `stretched-link`
   pose l'anneau sur le lien, alors que la cible cliquable est la carte entiere. L'outline
   est externe a la boite, donc jamais masque par la couche `::after` du stretched-link
   (meme raisonnement que le ribbon z-index 2 sur `.rm-champ-card`). */
.rm-session__heat-card--linked:focus-within {
    outline: 2px solid var(--rm-primary);
    outline-offset: 2px;
}
.rm-session__heat-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}
/* Spec 142 BR-142-2 — titre et pastille d'inscription forment le groupe de gauche
   (« ce qui me regarde ») ; le statut de la manche reste seul a droite. */
.rm-session__heat-headline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-width: 0;
}
/* `BR-04-W1` — la météo qu'une manche annonce pour elle-même, à côté de son nom.
   Discrète par construction : elle ne paraît que sur les manches qui divergent de leur soirée,
   et sa seule raison d'être est de montrer cette divergence. Sur une soirée mono-manche, elle
   n'apparaît jamais — `BR-04-W2`. */
.rm-session__heat-weather {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: var(--rm-text-muted);
    white-space: nowrap;
}
/* Spec 142 BR-142-5 — cette ligne porte le lien externe de la manche et le menu des
   streams : sans `z-index`, la couche `::after` du stretched-link les recouvrirait et
   un clic sur « voir le stream » naviguerait vers les resultats. */
.rm-session__heat-durations {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}
/* Spec 144 volet C — BR-144-12 / BR-144-15 : les pictos de lien externe et de diffusion.
   Ils vivaient a 14 px, noyes dans la ligne des durees. Le lien de diffusion compte le plus :
   un pilote qui rate le direct ne le rattrape pas.

   La cible de 44 px est posee SOUS 768 px seulement — convention du projet, cf les blocs
   `.rm-main .btn-primary` et `.rm-upcoming-card__actions--inline`. Le bureau garde ses controles
   compacts, et la carte conserve les 4 lignes auxquelles `BR-142-18` l'a ramenee. */
.rm-session__heat-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.125rem;
}
/* Le composant de diffusion rend un `<a>` quand il n'y a qu'un flux, et un conteneur
   `.dropdown` quand il y en a plusieurs : la cible doit exister dans les deux cas. */
.rm-session__heat-link .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 767.98px) {
    .rm-session__heat-link,
    .rm-session__heat-link .dropdown-toggle {
        min-width: 44px;
        min-height: 44px;
    }
}
/* Spec 144 volet C — `AC-144-19` : la pastille de diffusion, NOMMEE.

   L'arbitrage « B strict » a retire les libelles de la gomme et des couvertures pour que
   celle-ci soit le seul element nomme de la ligne, et donc le seul qui saute aux yeux. Le
   retrait avait ete livre sans la nomination : la ligne s'est retrouvee entierement muette,
   et le picto de diffusion aussi discret qu'avant.

   Forme reprise de `.rc-entrylist-link--badge`, deja en place sur la meme carte — meme rayon,
   meme bordure, meme fond. Une pastille de plus dans un vocabulaire existant, pas un
   vocabulaire de plus.

   La couleur ne vient PAS de `text-info` (#0dcaf0 Bootstrap, 1,96:1 sur carte : illisible et
   invisible aux gardes, qui ne mesurent que les jetons `--rm-*`). `--rm-accent-orange-text`
   est declare dans les deux themes et mesure par `Spec139_ContrastTests` : 5,18:1 en clair,
   6,51:1 en sombre. */
.rm-stream-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--rm-border);
    background: var(--rm-card-bg);
    color: var(--rm-accent-orange-text);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
}
.rm-stream-pill:hover,
.rm-stream-pill:focus-visible {
    color: var(--rm-accent-orange-text);
    border-color: var(--rm-accent-orange-text);
    text-decoration: none;
}
/* La cible tactile de 44 px reste due sous 768 px — meme regle que les pictos voisins. La
   pastille depasse deja cette largeur ; seule la hauteur a besoin d'etre garantie. */
@media (max-width: 767.98px) {
    .rm-stream-pill {
        min-height: 44px;
    }
}
/* Spec 42 §BR-28 — podium preview top 3 pour heats Closed (tokens spec 57/61). */
/* Spec 142 BR-142-16 — les categories se posent en colonnes une fois la largeur disponible.
   Empiler sept lignes dans un couloir gaspillait l'horizontale que `BR-142-15` vient de rendre,
   et sur telephone tout revient en pile : le mobile ne change pas.

   `auto-fit` + `minmax` s'en charge seul : une categorie occupe la largeur, deux se posent cote
   a cote des que 340 px sont disponibles, et la pile revient des qu'il n'y a plus la place.

   PAS DE MEDIA QUERY, et c'est delibere : la largeur qui compte est celle de la CARTE, pas celle
   de la fenetre. La carte fait pleine largeur si la soiree n'a qu'une manche (BR-142-15) et une
   demi-colonne sinon — un point de rupture sur la fenetre se tromperait dans le second cas.

   /!\ La premiere version employait `620px`, valeur qui n'existait nulle part ailleurs dans
   cette feuille : le projet s'en tient a 576 / 768 / 992 / 1200. Ce nombre a survecu jusqu'au
   2026-09-15 dans DEUX endroits — une phrase de ce commentaire, quatre lignes au-dessus de celle
   qui la dementait, et le critere `AC-142-52` de la spec 142. Les deux sont corriges. Un
   commentaire qui contredit son voisin finit par etre cru, et c'est le faux qu'on croit. */
.rm-session__podiums {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.5rem 1.5rem;
    margin-top: 0.5rem;
}

/* Spec 142 BR-142-9 — une entree par ligne. En ligne partagee, le nom de categorie se
   lisait comme un prefixe du premier pilote, et sur mobile la ligne se coupait entre les
   deux. `align-items: flex-start` evite l'etirement des enfants a taille intrinseque —
   le meme defaut que `BR-142-1` corrige plus bas. */
.rm-session__podium {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    font-size: var(--rm-card-body-size);
    min-width: 0;
}

/* Spec 142 BR-142-19 — la cellule de surplus est SUBORDONNEE, jamais habillee en categorie.
   Lui donner les capitales et l'interlettrage de `.rm-session__podium-class` en ferait une
   quatrieme categorie pour qui balaie les colonnes — l'inverse de ce qu'elle annonce. */
.rm-session__podium-more {
    align-self: end;
    font-size: var(--rm-card-label-size);
    color: var(--rm-text-muted);
    font-style: italic;
    min-width: 0;
}
.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;
}
/* Spec 137 — nom de la categorie en tete de son podium, affiche uniquement quand la manche
   en compte plusieurs. Micro-label : il situe le podium, il n'est pas le resultat. */
.rm-session__podium-class {
    font-size: var(--rm-card-label-size);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rm-text-muted);
    align-self: flex-start;
}
/* Spec 142 BR-142-1 — `align-items` vaut « stretch » par defaut dans un conteneur en
   colonne : la pastille « Confirme » s'y etirait en barre pleine largeur et ecrasait
   l'action. Ce n'etait pas le bouton qui etait trop discret, il etait ecrase.
   BR-142-5 — `z-index: 2` (valeur de l'echelle documentee) remet les boutons et le
   <select> au-dessus de la couche `::after` du stretched-link.

   Defense en profondeur assumee : aujourd'hui ce bloc et le lien etendu s'excluent — le bloc
   ne sort que sur une manche `Scheduled`, le lien que sur une manche `Closed`. Mais cet
   invariant vit dans un `@if` d'un AUTRE fichier, et le jour ou une action apparaitra sur une
   manche courue, le clic serait detourne vers les resultats sans que rien ne le signale.
   Deux lignes contre un bug silencieux : le compte est vite fait. */
.rm-session__heat-reg {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    position: relative;
    z-index: 2;
}

/* 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 110 v1.26.0 Bloc 2 Phase C — section "Mes forfaits" collapsible MyRaces.
   Toggle button discret (link style) + container avec marge supérieure. */
.rm-withdrawn-section {
    border-top: 1px dashed var(--rm-border);
    padding-top: 0.75rem;
}
.rm-withdrawn-section__toggle {
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
}
.rm-withdrawn-section__toggle:hover,
.rm-withdrawn-section__toggle:focus {
    color: var(--rm-text);
}
/* Badge muted générique : tonalité discrète (forfait par lui-même par défaut Phase C V1). */
.rm-badge-muted {
    display: inline-flex;
    align-items: center;
    background: var(--rm-badge-neutral-bg);
    color: var(--rm-badge-neutral-text);
    border: 1px solid var(--rm-border);
    border-radius: var(--rm-pill-radius);
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
}

/* Spec 110 v1.26.0 Bloc 2 Phase E — bandeau migration v1.26 dismissible.
   Theme-aware via `--rm-info-light` (fond) + `--rm-info` (border) cohérent spec 108
   wrapper Championship bleu. Layout flex : icône + body extensible + btn-close. */
.rm-migration-notice {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--rm-info-light);
    border: 1px solid var(--rm-info);
    border-radius: var(--rm-card-radius);
    color: var(--rm-text);
}
.rm-migration-notice__icon {
    color: var(--rm-info);
    flex-shrink: 0;
}
.rm-migration-notice__body {
    flex: 1;
    font-size: 0.9375rem;
    line-height: 1.4;
}
.rm-migration-notice__dismiss {
    flex-shrink: 0;
}

/* ───── 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-card-bg);
    border: 1px solid var(--rm-border);
    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);
}
.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));
    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);
    font-size: var(--rm-card-label-size);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}
.rm-team-card__role-badge {
    /* Spec 139 — `--rm-primary` est volontairement ECLAIRCI en theme sombre (#3b82f6) pour se
       detacher du fond de page ; du blanc pose dessus n'y atteint que 3,68:1. `--rm-primary-dark`
       fait l'inverse — #1d4ed8 clair, #2563eb sombre — et porte le blanc a 6,70 et 5,17.
       Le texte prime sur la separation du badge : sa forme et son padding le rendent
       identifiable, un libelle illisible ne se rattrape pas. */
    background: var(--rm-primary-dark);
    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-card-bg);
    border: 1px solid var(--rm-border);
    border-radius: 8px;
    padding: 1rem;
}
.rm-team-detail__section--danger {
    border-color: var(--rm-danger);
}
.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);
    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);
    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);
}
.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);
    background: var(--rm-card-bg);
}
.rm-invite-preview-section h6 {
    margin-bottom: 0.5rem;
}
.rm-invite-preview-section--info {
    border-left-color: var(--rm-info);
    background: color-mix(in srgb, var(--rm-info) 6%, transparent);
}
.rm-invite-preview-section--warning {
    border-left-color: var(--rm-warning);
    background: color-mix(in srgb, var(--rm-warning) 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);
    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-badge-neutral-bg);
    color: var(--rm-badge-neutral-text);
    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);
        padding: 0.75rem;
        margin: 1rem -0.75rem -0.75rem;
        border-top: 1px solid var(--rm-border);
        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);
    /* 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));
    background: var(--rm-card-bg);
}
.rm-claim-team-defend__description-body {
    white-space: pre-wrap;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    background: var(--rm-card-bg);
    border: 1px solid var(--rm-border);
}

/* 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);
    /* 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));
    background: var(--rm-card-bg);
}
.rm-claim-card__vs {
    font-weight: 600;
    color: var(--rm-text-muted);
    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-card-bg-subtle);
}
.rm-team-engages-list__car-thumb--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rm-text-muted);
    border: 1px dashed var(--rm-border);
}
@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;
    /* Invariant assume (UX_DESIGN_SYSTEM §3.4.2) : texte pose sur l'en-tete illustre,
       il ne suit pas le theme mais l'image. */
    color: #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);
    background: color-mix(in srgb, var(--rm-warning) 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) 14%, transparent);
}
.rm-team-penalty-banner__icon {
    color: var(--rm-warning-text);
    flex-shrink: 0;
    margin-top: 2px;
}
.rm-team-penalty-banner__title {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--rm-warning-text);
    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-signal);
    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-badge-neutral-bg); color: var(--rm-badge-neutral-text); }
.rm-tab-badge--muted   { background: var(--rm-card-bg-subtle); color: var(--rm-badge-neutral-text); }

/* ─── 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-text);
    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-signal);
    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-text);
    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 145 — tags d'administration sur un membre ═══════════════════════
   Le tag est un badge NEUTRE : la spec ecarte la couleur (§11), parce qu'une couleur
   obligerait a la choisir, donc a l'administrer, donc a l'ecran de gestion que l'arbitrage
   a justement ecarte. Les deux jetons employes ici sont declares dans les DEUX themes. */
.rm-tag-editor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
}
.rm-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    background: var(--rm-badge-neutral-bg);
    color: var(--rm-badge-neutral-text);
    border-radius: var(--rm-pill-radius);
    padding: 0.1rem 0.2rem 0.1rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}
.rm-tag__remove {
    display: inline-flex;
    align-items: center;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    padding: 0 0.15rem;
    border-radius: var(--rm-pill-radius);
    opacity: 0.65;
}
.rm-tag__remove:hover,
.rm-tag__remove:focus-visible { opacity: 1; }

.rm-tag-editor__add {
    border: 1px dashed var(--rm-border);
    background: none;
    color: var(--rm-text-muted);
    border-radius: var(--rm-pill-radius);
    padding: 0.1rem 0.55rem;
    font-size: 0.75rem;
    cursor: pointer;
    font-family: inherit;
}
.rm-tag-editor__add:hover:not(:disabled) {
    color: var(--rm-text);
    border-color: var(--rm-text-muted);
}
.rm-tag-editor__add:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.rm-tag-editor__input-wrap { position: relative; display: inline-block; }
.rm-tag-editor__input {
    width: 11rem;
    padding: 0.15rem 0.55rem;
    font-size: 0.8rem;
    font-family: inherit;
    border: 1px solid var(--rm-primary);
    border-radius: var(--rm-pill-radius);
    background: var(--rm-card-bg);
    color: var(--rm-text);
}
/* Au-dessus du backdrop (1040), sans quoi le premier clic sur une proposition ne ferait que
   fermer la liste — et la proposition serait inatteignable a la souris. */
.rm-tag-editor__menu,
.rm-tag-filter__menu {
    position: absolute;
    z-index: 1041;
    top: calc(100% + 0.25rem);
    left: 0;
    min-width: 14rem;
    max-height: 15rem;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 0.25rem;
    background: var(--rm-card-bg);
    border: 1px solid var(--rm-border);
    border-radius: 0.4rem;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.14);
}
.rm-tag-editor__option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    border: 0;
    background: none;
    text-align: left;
    padding: 0.3rem 0.5rem;
    border-radius: 0.3rem;
    font-size: 0.85rem;
    font-family: inherit;
    color: var(--rm-text);
    cursor: pointer;
}
.rm-tag-editor__option:hover,
.rm-tag-editor__option.is-selected { background: var(--rm-card-bg-subtle); }
.rm-tag-editor__option--create { color: var(--rm-primary); font-weight: 600; }
.rm-tag-editor__count {
    margin-left: auto;
    font-size: 0.72rem;
    color: var(--rm-text-muted);
    font-variant-numeric: tabular-nums;
}
.rm-tag-editor__empty,
.rm-tag-editor__error {
    padding: 0.35rem 0.5rem;
    font-size: 0.82rem;
}
.rm-tag-editor__empty { color: var(--rm-text-muted); }
/* `--rm-danger-text` et pas `--rm-danger` : le premier est le jeton concu pour porter du
   texte, mesure dans les deux themes par `Spec139_ContrastTests`. Le second est un fond. */
.rm-tag-editor__error { color: var(--rm-danger-text); }

/* La ligne qui porte le filtre, sous la barre de recherche. Une regle, pas une classe nue :
   `CssClassInventoryTests` refuse les secondes (gotcha `U23`), et elle a raison — une classe
   sans regle est un point d'accroche qui ne tient rien. */
.rm-tag-filter-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.rm-tag-filter { position: relative; display: inline-block; }
.rm-tag-filter__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    font-size: 0.875rem;
    font-family: inherit;
    border: 1px solid var(--rm-border);
    border-radius: 0.375rem;
    background: var(--rm-card-bg);
    color: var(--rm-text);
    cursor: pointer;
}
.rm-tag-filter__btn:disabled { opacity: 0.55; cursor: not-allowed; }
/* ⚠️ PAS de blanc sur `--rm-primary` : ce jeton s'eclaircit en theme sombre (#3b82f6) et le
   couple tombe a 3,68:1, sous le seuil AA. Attrape par `Spec139_ContrastTests` avant qu'il
   n'atteigne un ecran — le garde pose ce matin, qui sert des le meme jour.

   Le badge neutre est le meme que celui des tags eux-memes, declare dans les deux themes, et
   coherent avec le §11 de la spec : pas de couleur sur les tags. */
.rm-tag-filter__count {
    background: var(--rm-badge-neutral-bg);
    color: var(--rm-badge-neutral-text);
    border-radius: var(--rm-pill-radius);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.05rem 0.4rem;
}
.rm-tag-filter__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border-radius: 0.3rem;
    font-size: 0.875rem;
    color: var(--rm-text);
    cursor: pointer;
}
.rm-tag-filter__item:hover { background: var(--rm-card-bg-subtle); }
.rm-tag-filter__usage {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--rm-text-muted);
    font-variant-numeric: tabular-nums;
}

/* 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);
    border: 1px solid var(--rm-border);
    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);
}
.rm-agenda-popover__body {
    padding: 0.75rem 1rem;
    color: var(--rm-text-muted);
    font-size: 0.9rem;
}
.rm-agenda-popover__track {
    color: var(--rm-text);
    font-weight: 500;
    margin-bottom: 0.25rem;
}
.rm-agenda-popover__date {
    font-family: var(--bs-font-monospace, 'JetBrains Mono', monospace);
    font-size: 0.85rem;
}
/* Spec 142 §12.2 — meme defaut que `.rm-session__heat-reg` : conteneur en colonne sans
   `align-items`, portant des `.btn` a taille intrinseque qui s'etiraient pleine largeur.
   Recensement de la spec : 2 cas sur 16 conteneurs en colonne du projet, corriges
   ensemble — livrer l'un sans l'autre creerait l'incoherence qu'on cherchait a eviter. */
.rm-agenda-popover__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--rm-border);
}
.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-primary);
}
.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-primary);
    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-card-bg-subtle);
    border-color: var(--rm-border);
}
.rm-entrylist-identity-option:has(input[type="radio"]:checked) {
    border-color: var(--rm-primary);
    background: var(--rm-card-bg-subtle);
}
.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-badge-neutral-bg);
    border-radius: 999px;
    font-family: var(--bs-font-monospace, 'JetBrains Mono', monospace);
    font-size: 0.78rem;
    color: var(--rm-badge-neutral-text);
}
.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 {
    /* Spec 139 A0 — s'appuyait sur un token --rm-bg-card inexistant, et sans valeur de repli :
       la declaration etait invalide et le fond ne s'appliquait pas du tout. */
    background: var(--rm-card-bg);
    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;
    /* Spec 139 A0 — deux tokens inexistants SANS fallback : ces deux lignes ne faisaient rien.
       La previsualisation heritait donc du fond et de la couleur de son parent. */
    background: var(--rm-card-bg);
    color: var(--rm-text);
}
.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);
    background: var(--rm-card-bg);
}

.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);
    background: var(--rm-card-bg);
}

.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);
}
.rc-entrylist-link--state-prerelease.rc-entrylist-link--badge,
.rc-entrylist-link--state-prerelease.rc-entrylist-link--button {
    border-color: var(--rm-border);
}

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

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

/* 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 {
    /* Spec 139 A0 — `--rm-text-primary` n'existe pas : son fallback, le blanc casse de la
       palette sombre, s'appliquait donc aussi en theme clair. Sur `--rm-bg` (#f5f4f0 en clair)
       le contraste tombait a 1,00:1 — texte invisible sur une page publique. */
    color: var(--rm-text);
    background: var(--rm-bg);
    min-height: 100vh;
    position: relative;
    --class-color: var(--rm-primary);
}
.rc-entrylist-page--prerelease {
    background: var(--rm-bg);
}

/* 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-text);
    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;
    /* Invariant assume (UX_DESIGN_SYSTEM §3.4.2) : le texte est pose sur l'image du circuit,
       assombrie par .rc-entrylist-hero__overlay. Il ne depend pas du theme. */
    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-card-bg);
    color: var(--rm-text-muted);
    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);
    border-bottom: 1px solid var(--rm-border);
    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);
    color: #fff;
}
.rc-entrylist-statusbar__badge--provisional {
    background: var(--rm-accent-orange);
    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;
    /* Spec 139 A0 — etait #f1f5f9 en dur, c'est-a-dire du blanc casse sur une barre d'etat
       devenue claire : le defaut aurait simplement change d'endroit. */
    color: var(--rm-text);
}

/* 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: var(--rm-text-muted);
    border: 1px solid var(--rm-border);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.rc-entrylist-statusbar__action:hover {
    background: var(--rm-card-bg-subtle);
    color: var(--rm-text);
}
.rc-entrylist-statusbar__action:focus-visible {
    outline: 2px solid var(--rm-primary);
    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;
}
/* Spec 150 BR-150-7 — mention « classe complète » à côté du remplissage. Discrète :
   l'information utile est le rapport chiffré, la mention ne fait que le qualifier. */
.rc-entrylist-class__full {
    margin-left: 0.4rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.75;
}
.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-card-bg);
    color: var(--rm-text);
    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;
    /* Spec 139 A0 — etait un blanc a 4 %, invisible sur une ligne devenue claire. Le token
       suit le theme et garde l'emplacement du logo visible dans les deux. */
    background: var(--rm-card-bg-subtle);
}
.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);
    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);
    margin-bottom: 1rem;
}
.rc-entrylist-prerelease__count {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--rm-text-muted);
}
.rc-entrylist-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rm-success-signal);
    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); }
}

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

/* Footer */
.rc-entrylist-footer {
    margin-top: 3rem;
    padding: 1.5rem;
    background: var(--rm-card-bg);
    color: var(--rm-text-muted);
    text-align: center;
    font-size: 0.82rem;
    border-top: 1px solid var(--rm-border);
    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-card-bg);
    color: var(--rm-text);
    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);
}

/* ─── 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: var(--rm-card-bg-subtle);
}

.rm-payment-key-revealed {
    background: var(--rm-card-bg-subtle);
    border: 1px solid var(--rm-border);
    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;
    /* Spec 139 A1 (revue) — etait #fff fige : en theme sombre le texte herite, clair,
       tombait a 1,25:1 sur ce fond blanc. */
    background: var(--rm-card-bg);
    border: 1px solid var(--rm-border);
    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);
}

.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;
}

/* Spec 142 BR-142-8 bis — `.rm-dlc-requirements-list__title` supprimee avec le <h3> qu'elle
   habillait : plus aucun appelant. Laisser la regle aurait ajoute une ligne morte de plus a
   une feuille qui en compte deja trop. */

.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);
}
.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;
}

/* ──────────────────────────────────────────────────────────────────────
   Spec 111 v3 — Collapsibles sémantiques (.rm-collapsible-section)

   Pattern user-controlled (collapse desktop + mobile) — distinct de
   .rm-invite-preview-section--details (responsif : forced expanded ≥768px).
   Cf docs/design/UX_PATTERNS.md §19 et docs/specs/active/111_DLC_REQUIREMENTS_UX_REFINEMENT.md.

   Variants : --mandatory (border-left + tint --rm-warning) /
              --per-car  (border-left + tint --rm-info).
   ────────────────────────────────────────────────────────────────────── */

.rm-collapsible-section {
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid var(--rm-border);
    background: var(--rm-card-bg-subtle);
    margin-top: 0.75rem;
}

.rm-collapsible-section--mandatory {
    border-left-color: var(--rm-warning);
    background: color-mix(in srgb, var(--rm-warning) 6%, transparent);
}

.rm-collapsible-section--per-car {
    border-left-color: var(--rm-info);
    background: color-mix(in srgb, var(--rm-info) 6%, transparent);
}

/* Summary : chevron CSS borders (BR-34 — pas Unicode, pas SVG).
   Pattern hérité .rm-invite-preview-section--details::after (app.css ligne 4076-4087). */
.rm-collapsible-section > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--rm-text);
}
.rm-collapsible-section > summary::-webkit-details-marker {
    display: none;
}
/* a11y — focus visible explicite (le focus ring natif Chromium est parfois discret sur
   summary à cause de list-style:none). Outline tokenisé cohérent --rm-info. */
.rm-collapsible-section > summary:focus-visible {
    outline: 2px solid var(--rm-info);
    outline-offset: 2px;
    border-radius: 3px;
}
.rm-collapsible-section > 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);
    transition: transform 150ms ease;
    flex-shrink: 0;
}
.rm-collapsible-section[open] > summary::after {
    transform: rotate(180deg);
}

/* Badge pill compteur — cohérent .rm-invite-preview-section__count (app.css:4089-4097),
   sauf que background = --rm-card-bg-subtle (token theme-aware de la liste close)
   au lieu de --rm-bg-muted (token absent du référentiel canonique UX_DESIGN_SYSTEM §3.4). */
.rm-collapsible-section__count {
    margin-left: auto;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: var(--rm-badge-neutral-bg);
    color: var(--rm-badge-neutral-text);
    font-size: 0.7rem;
    font-weight: 600;
}

/* Liste interne : marge top pour aérer après le summary. */
.rm-collapsible-section > ul {
    margin-top: 0.5rem;
}

/* ─── 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-badge-neutral-text);
    background: var(--rm-badge-neutral-bg);
    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);
    font-weight: 600;
    color: var(--rm-text);
    margin-bottom: 0.5rem;
}
/* Spec 136 lot 5b — le motif d'une presélection, ou la raison de son absence. En retrait :
   il explique le choix proposé, il n'est pas le choix. */
.rm-reconcile-item__hint {
    font-size: var(--rm-card-body-size);
    color: var(--rm-text-muted);
    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-text);
}

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

.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-text);
    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);
    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. */
/* ─── 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;
}
/* Spec 144 volet B — grip et couvertures portent leur propre couleur, pas celle de la bande.
   Elles sont seules a parler sur les cartes : aucun texte a cote. */
.rm-grip-icon,
.rm-warmers-icon {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}
.rm-grip-icon--green     { color: var(--rm-grip-green); }
.rm-grip-icon--natural   { color: var(--rm-grip-natural); }
.rm-grip-icon--light     { color: var(--rm-grip-light); }
.rm-grip-icon--medium    { color: var(--rm-grip-medium); }
.rm-grip-icon--heavy     { color: var(--rm-grip-heavy); }
.rm-grip-icon--saturated { color: var(--rm-grip-saturated); }
.rm-warmers-icon--on  { color: var(--rm-warmers-on); }
.rm-warmers-icon--off { color: var(--rm-warmers-off); }

/* Spec 144 volet B AC-144-16 ter — liste de choix maison du grip.
   Safari ignore le fond d'un `<option>` (U25) : une liste native ne peut pas porter la rampe. */
.rm-grip-select {
    position: relative;
}
.rm-grip-select__trigger {
    display: flex;
    align-items: center;
    text-align: left;
    width: 100%;
}
/* Liste ouverte : le déclencheur prend la bordure d'un champ actif. Sans cela, rien ne relie
   visuellement la liste flottante au champ dont elle sort. */
.rm-grip-select--open .rm-grip-select__trigger {
    border-color: var(--rm-primary);
}
.rm-grip-select__menu {
    position: absolute;
    /* Au-dessus du backdrop partagé, qui est à 1040 — sinon il recouvre le menu et les entrées
       cessent d'être cliquables. Même valeur que `.dropdown-menu.show` pour la même raison. */
    z-index: 1041;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--rm-card-bg);
    border: 1px solid var(--rm-border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    max-height: 15rem;
    overflow-y: auto;
}
.rm-grip-select__item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.35rem 0.6rem;
    background: none;
    border: 0;
    font-size: 0.85rem;
    color: var(--rm-text);
    text-align: left;
}
.rm-grip-select__item:hover,
.rm-grip-select__item:focus-visible {
    background: var(--rm-card-bg-subtle);
}
.rm-grip-select__item--selected {
    background: var(--rm-primary-light);
    font-weight: 600;
}
/* Gabarit vide, pour que « non précisé » s'aligne sur les six niveaux qui portent un picto. */
.rm-grip-select__swatch {
    display: inline-block;
    width: 15px;
    height: 15px;
}
.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;
}
/* Spec 144 volet A `AC-144-12` — « figée le 12/10 ». Discrète à dessein : elle explique une
   météo qui ne bouge plus, elle ne la remplace pas. Sans elle, un visiteur croirait à une panne
   — c'est la leçon de la spec 138, qui a remplacé un vide muet par une raison. */
.rm-weather-pill__frozen,
.rm-weather-panel__frozen {
    color: var(--rm-text-light);
    font-size: 0.6875rem;
    font-style: italic;
    white-space: nowrap;
}
.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 138 — l'encart dit pourquoi il n'a pas de prevision, au lieu de disparaitre.
   Meme gabarit que .rm-weather-panel (bordure, rayon, marge basse) pour qu'il occupe
   la meme place, mais en retrait : c'est l'absence d'une information, pas une information. */
.rm-weather-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background: var(--rm-card-bg);
    border: 1px solid var(--rm-border);
    border-radius: var(--rm-card-radius);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    color: var(--rm-text-muted);
    font-size: var(--rm-card-body-size);
}
.rm-weather-notice__icon {
    display: inline-flex;
    flex-shrink: 0;
    /* Aligne l'icone sur la premiere ligne de texte plutot que sur le bloc. */
    margin-top: 0.1em;
}
/* Occupe la largeur restante : sans cela le texte ne se replie pas et pousse l'encart. */
.rm-weather-notice__text {
    flex: 1;
    min-width: 0;
}
.rm-weather-notice__action {
    margin-left: 0.4rem;
    color: var(--rm-primary);
}
/* Une carence de configuration appelle une action : elle se distingue d'une attente. */
.rm-weather-notice--config {
    border-left: 3px solid var(--rm-warning);
}

/* 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-text);
    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-text);
    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-text);
    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);
    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;
}

/* ── Spec 118 — Supervision des tâches de fond (onglet Logs admin) ──────────────
   Tokens existants uniquement (cf UX_DESIGN_SYSTEM §3.4) : aucun token inventé.
   Les pastilles d'état sont du CSS pur et non des icônes SVG — un disque coloré
   n'est pas un pictogramme, et l'information reste portée par le texte à côté. */
.rm-jobs__instance {
    font-size: 0.85rem;
    color: var(--rm-text-muted);
    margin-bottom: 0.75rem;
}

.rm-jobs__scope {
    display: block;
    color: var(--rm-text-light);
}

.rm-jobs__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rm-jobs__item {
    display: grid;
    grid-template-columns: 0.75rem minmax(14rem, 1.6fr) 8rem minmax(0, 1.4fr) auto;
    align-items: start;
    gap: 0.75rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--rm-border);
}

.rm-jobs__dot {
    margin-top: 0.4rem;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--rm-text-light);
}

.rm-jobs__dot--healthy  { background: var(--rm-success); }
.rm-jobs__dot--failed   { background: var(--rm-warning); }
.rm-jobs__dot--running  { background: var(--rm-info); }
.rm-jobs__dot--never,
.rm-jobs__dot--disabled { background: var(--rm-text-light); }

.rm-jobs__name { font-weight: 500; }

/* La description passe sous le nom : sur une grille à 5 colonnes, la mettre en ligne
   écraserait les colonnes suivantes. Elle reste discrète pour ne pas concurrencer l'état. */
.rm-jobs__desc {
    display: block;
    font-weight: 400;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--rm-text-muted);
    margin-top: 0.1rem;
}

.rm-jobs__when,
.rm-jobs__summary {
    font-size: 0.85rem;
    color: var(--rm-text-muted);
}

/* La grille aligne ses cellules en haut (le nom fait 2 lignes avec sa description) :
   sans cette règle le bouton s'étirerait sur toute la hauteur de la ligne. */
.rm-jobs__run {
    align-self: start;
    line-height: 1;
}

/* L'erreur occupe sa propre ligne sous le job concerné : un message tronqué dans
   une cellule de grille serait pire qu'inutile pour diagnostiquer. */
.rm-jobs__error {
    font-size: 0.8rem;
    color: var(--rm-danger-text);
    padding: 0.25rem 0 0.5rem 1.5rem;
    border-bottom: 1px solid var(--rm-border);
}

/* Spec 130 — le bouton de reclamation cotoie le lien de resultats, qui porte `stretched-link`.
   Sans `z-index`, la couche `::after` de ce lien recouvrirait le bouton et tout clic partirait
   vers les resultats sans ouvrir le formulaire. Meme piege que `BR-142-5` sur la ligne des
   streams, et meme parade. */
.rm-session__claim {
    position: relative;
    z-index: 2;
}

/* ──────────────────────────────────────────────────────────────────────
   Journal des versions (/about) — regroupement par version majeure.

   114 versions a plat noyaient les cinq qui interessent un visiteur. Chaque
   majeure porte desormais un resume visible ; le detail vit dans un
   .rm-collapsible-section (pattern spec 111 v3, reutilise tel quel).
   ────────────────────────────────────────────────────────────────────── */

.rm-changelog-major {
    margin-bottom: 1.75rem;
}
.rm-changelog-major:last-child {
    margin-bottom: 0;
}

.rm-changelog-major__head {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.rm-changelog-major__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--rm-text);
    margin: 0;
}

.rm-changelog-major__range {
    font-size: 0.72rem;
    color: var(--rm-text-muted);
    font-variant-numeric: tabular-nums;
}

/* Pastille « Current » — la majeure en cours, celle qu'on lit en arrivant.
   Fond --rm-primary-dark et non --rm-primary : ce dernier s'eclaircit en theme sombre
   pour se detacher du fond, et le blanc pose dessus tombe a 3,68:1 (spec 139). */
.rm-changelog-major__current {
    display: inline-block;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    background: var(--rm-primary-dark);
    color: #fff;
}

.rm-changelog-major__summary {
    font-size: 0.88rem;
    color: var(--rm-text-muted);
    max-width: 70ch;
    margin: 0.4rem 0 0;
}

.rm-changelog-release {
    margin-top: 0.9rem;
}

.rm-changelog-release__title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--rm-text-muted);
    margin: 0 0 0.25rem;
}

.rm-changelog-release__list {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.82rem;
    color: var(--rm-text-muted);
}
.rm-changelog-release__list li {
    margin-bottom: 0.2rem;
}

/* Texte de la licence (/about) — il s'enveloppe au lieu de pousser la page.

   Un <pre> garde `white-space: pre` : il prend la largeur de la plus longue ligne
   de son contenu, et son `overflow-x: auto` ne le retient pas tant que rien ne borne
   sa largeur. Les lignes du fichier LICENSE font ~740 px ; sur un telephone de 382 px,
   /about tout entiere se retrouvait large de 816 px et son contenu coupe a droite.
   Mesure en production le 2026-09-13, defaut anterieur au regroupement du changelog. */
.rm-license-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ──────────────────────────────────────────────────────────────────────
   Spec 143A §3ter.5 — la page de dépôt d'un fichier de résultats.
   Elle reprend `.rm-image-drop` : un organisateur qui a déjà déposé une image
   reconnaît le geste, et une seconde zone de dépôt n'apporterait rien.
   ────────────────────────────────────────────────────────────────────── */

.rm-import-upload {
    max-width: 34rem;
    margin: 2rem auto;
}

/* La manche visée. Elle se lit AVANT le dépôt : vérifier qu'on ne se trompe pas
   de course doit être possible avant, pas après. */
.rm-import-upload__target {
    color: var(--rm-text-muted);
    font-size: 0.92rem;
    margin: 0 0 1rem;
}

.rm-import-upload__expiry {
    color: var(--rm-text-muted);
    font-size: 0.82rem;
    margin: 0.75rem 0 0;
    text-align: center;
}


/* ─── Spec 139 §10.3 bis — l'encre d'information, a la place de `text-info` ───────────
   ⚠️ `text-info` est la couleur Bootstrap #0dcaf0 : **1,96:1** sur une carte, en clair comme
   en sombre puisqu'elle ne varie pas. Elle echouait donc au seuil du TEXTE (4,5:1) et a celui
   du PICTO SEUL (3:1) — les deux, pas l'un ou l'autre.

   ⚠️ Pourquoi une classe projet et non `text-primary` : les gardes de contraste ne lisent que
   les jetons `--rm-*`. Reprendre un utilitaire Bootstrap aurait re-cache la couleur a la
   mesure, ce qui est precisement le defaut qu'on ferme. */
.rm-text-info {
    color: var(--rm-info-text);
}

/* ── Spec 156 lot 2 — corriger la voiture d'un engagement ──────────────────
   Deux surfaces, un seul habillage : le panneau du membre rend un éditeur seul,
   la liste de l'organisateur en rend un par pilote. Les champs se replient sous
   le nom dès qu'ils n'ont plus la place — le panneau membre est mobile-first. */
.rm-enrolled-car {
    margin-bottom: 0.75rem;
}

.rm-enrolled-car__fields {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
}

.rm-enrolled-car__fields > div {
    flex: 1 1 10rem;
    min-width: 0;
}

.rm-enrolled-cars__list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.rm-enrolled-cars__row {
    border-top: 1px solid var(--rm-border-light);
    padding-top: 0.75rem;
}

.rm-enrolled-cars__row:first-child {
    border-top: 0;
    padding-top: 0;
}

.rm-enrolled-cars__driver {
    margin-bottom: 0.35rem;
}

/* ── Fiche F-51 — l'origine d'une licence, dans le journal des paiements ────
   Deux niveaux de lecture : d'où elle vient (badge), puis pourquoi (la phrase,
   qui est soit une raison traduite, soit les mots de l'administrateur). */
.rm-license-origin__badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border: 1px solid var(--rm-border);
    border-radius: 3px;
    color: var(--rm-text-muted);
    white-space: nowrap;
}

.rm-license-origin__why {
    display: block;
    font-size: 0.78rem;
    color: var(--rm-text-muted);
    margin-top: 0.15rem;
}

/* ── Fiche D-13 — les manches qui portent des résultats sans pilote ────────
   Un lien vers la manche, et à sa droite ce qu'on y trouvera. La liste ne
   s'affiche pas du tout quand il n'y a rien : une section vide se lirait
   comme un outil en panne. */
/* Fiche `F-59` — la carte des resultats qu'un meme pilote porte en double.
   ⚠️ Elle se DISTINGUE des cartes de statistiques qui la suivent : c'est une anomalie, pas un
   chiffre de plus. Liseré + fond d'alerte, jetons du design system (§3.4) — `--rm-warning-text`
   et `--rm-warning-light` sont redefinis dans le bloc sombre, contrairement a `--rm-warning`. */
.rm-data-health {
    background: var(--rm-warning-light);
    border-left: 3px solid var(--rm-warning-text);
}

.rm-data-health__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rm-data-health__title svg {
    flex: none;
    color: var(--rm-warning-text);
}

   Meme forme que `.rm-orphan-results` : une liste de liens vers la course, chacun suivi du
   detail en retrait. Les deux repondent a « quels resultats sont mal rattaches, et ou ». */
.rm-data-health__list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.rm-data-health__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    justify-content: space-between;
}

.rm-data-health__detail {
    font-size: 0.82rem;
    color: var(--rm-text-muted);
}

.rm-orphan-results {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rm-border);
}

.rm-orphan-results__list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.rm-orphan-results__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    justify-content: space-between;
}

.rm-orphan-results__counts {
    font-size: 0.82rem;
    color: var(--rm-text-muted);
}