/* Tuiles LGB : une seule feuille pour les cartes de toute l'appli (Radio Tour, Ligues, Palmarès, News).
   Chaque tuile est son propre conteneur (container queries) : elle s'adapte à la place qu'on lui donne,
   pas à l'écran. La même tuile vit dans la colonne du mobile, la colonne principale ou la colonne
   latérale du bureau. Les couleurs de chaque course (--race-*) viennent de race-style-card.css. */

:root {
    /* Marque */
    --lgb-violet: #6B42FE;
    --lgb-violet-deep: #3A1F9E;
    --lgb-night: #1E1446;
    --lgb-lilac: #E1D8FF;
    --lgb-lilac-2: #C9BBFF;
    --lgb-lilac-soft: #F1EDFF;

    /* Surfaces et encres */
    --lgb-page: #F2F2F2;
    --lgb-surface: #FFFFFF;
    --lgb-ink: #15121F;
    --lgb-ink-2: #6E6878;
    --lgb-line: #EEEEF2;

    /* Signaux : moi / le rival, en hausse / en baisse, en direct, victoire */
    --lgb-green: #49E886;
    --lgb-green-ink: #0B5A2C;
    --lgb-green-soft: #DDF3E6;
    --lgb-coral: #FF8A8A;
    --lgb-coral-ink: #4A0B0B;
    --lgb-red: #E2001A;
    --lgb-red-soft: #FFE5E5;
    --lgb-gold-soft: #FFF4C2;

    /* Forme : le 6 px historique reste la règle */
    --lgb-radius: var(--lgb-general-border-radius, 6px);
    --lgb-radius-sm: 4px;
    --lgb-gap: 12px;
    --lgb-shadow: 0 1px 0 rgba(21, 18, 31, 0.05);
    --lgb-shadow-hover: 0 16px 30px -18px rgba(58, 31, 158, 0.55), 0 2px 6px -2px rgba(21, 18, 31, 0.08);
    --lgb-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ==========================================================================
   Tuile de base
   ========================================================================== */

.lgb-tile {
    --tile-bg: var(--lgb-surface);
    --tile-ink: var(--lgb-ink);
    --tile-muted: var(--lgb-ink-2);
    --tile-line: var(--lgb-line);
    --tile-pad: 14px 16px;
    position: relative;
    isolation: isolate;
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-sizing: border-box;
    min-width: 0;
    padding: var(--tile-pad);
    border-radius: var(--lgb-radius);
    background: var(--tile-bg);
    color: var(--tile-ink);
    box-shadow: var(--lgb-shadow);
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.22s var(--lgb-ease), box-shadow 0.22s var(--lgb-ease);
}

/* Toute la tuile est le lien ; --link quand le lien est étiré depuis un élément intérieur
   (la tuile contient alors un autre bouton), --clickable quand c'est un @onclick */
a.lgb-tile,
a.lgb-tile:hover {
    color: var(--tile-ink);
    text-decoration: none;
}

a.lgb-tile,
.lgb-tile--clickable {
    cursor: pointer;
}

/* Tuile-bouton : sans l'habillage du navigateur */
button.lgb-tile {
    width: 100%;
    border: 0;
    font: inherit;
    text-align: inherit;
}

@media (hover: hover) {
    a.lgb-tile:hover,
    .lgb-tile--link:hover,
    .lgb-tile--clickable:hover {
        transform: translateY(-2px);
        box-shadow: var(--lgb-shadow-hover);
    }
}

.lgb-stretched,
.lgb-stretched:hover {
    color: inherit;
    text-decoration: none;
}

.lgb-stretched::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* Un bouton dans une tuile au lien étiré passe au-dessus du lien */
.lgb-above-link {
    position: relative;
    z-index: 3;
}

.lgb-tile:focus-visible,
.lgb-row:focus-visible,
.lgb-stretched:focus-visible {
    outline: 3px solid var(--lgb-violet);
    outline-offset: 2px;
}

/* Variantes de fond */

.lgb-tile--violet {
    --tile-bg: var(--lgb-violet);
    --tile-ink: #FFFFFF;
    --tile-muted: var(--lgb-lilac);
    --tile-line: rgba(255, 255, 255, 0.2);
}

.lgb-tile--night {
    --tile-bg: linear-gradient(135deg, var(--lgb-night) 0%, var(--lgb-violet-deep) 60%, var(--lgb-violet) 100%);
    --tile-ink: #FFFFFF;
    --tile-muted: var(--lgb-lilac);
    --tile-line: rgba(255, 255, 255, 0.18);
}

/* Page de cahier de La Petite Bataille */
.lgb-tile--paper {
    --tile-bg: #FDF8EA;
    --tile-ink: #22223B;
    --tile-muted: #5B5B6E;
    border: 2px solid #22223B;
    background-image:
        repeating-linear-gradient(0deg, transparent 0 31px, rgba(88, 120, 190, 0.42) 31px 32px),
        repeating-linear-gradient(0deg, transparent 0 7px, rgba(120, 150, 210, 0.2) 7px 8px),
        repeating-linear-gradient(90deg, transparent 0 31px, rgba(88, 120, 190, 0.42) 31px 32px);
    box-shadow: none;
}

/* Sans marge intérieure : listes, cartes de course */
.lgb-tile--flush {
    --tile-pad: 0;
    gap: 0;
}

/* Autour d'un <Virtualize> : Blazor prend pour zone de défilement le premier parent dont le
   débordement n'est pas « visible » ; une tuile qui coupe son contenu figerait la liste */
.lgb-tile--virtual {
    overflow: visible;
}

/* Horizontale : vignette, texte, chevron (news, trophée) */
.lgb-tile--row {
    --tile-pad: 12px;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

/* ==========================================================================
   Éléments de tuile
   ========================================================================== */

.lgb-eyebrow {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--tile-muted);
}

.lgb-eyebrow--live {
    color: var(--lgb-coral);
}

.lgb-eyebrow--accent {
    color: var(--lgb-violet);
}

.lgb-tile-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
}

.lgb-tile-sub {
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--tile-muted);
}

.lgb-tile-sub b {
    color: var(--tile-ink);
    font-weight: 600;
}

.lgb-figure {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

/* Grands chiffres : Garaje maigre */
.lgb-figure-value {
    font-family: 'LGB-Garaje', sans-serif;
    font-size: 2.6rem;
    line-height: 0.9;
}

.lgb-figure-unit {
    font-size: 0.85rem;
    color: var(--tile-muted);
}

/* Garaje n'a que des capitales : l'ordinal « e » repasse dans la police de texte */
.lgb-figure sup,
.lgb-rank sup,
.lgb-stat-value sup,
.lgb-medal sup {
    font-family: 'LGB-Equip', sans-serif;
    font-size: 0.5em;
    line-height: 0;
}

.lgb-tile-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--tile-line);
    font-size: 0.8rem;
    color: var(--tile-muted);
}

.lgb-tile-foot b {
    color: var(--tile-ink);
    font-weight: 600;
}

.lgb-tile-foot-link {
    color: var(--tile-ink);
    font-weight: 600;
    white-space: nowrap;
}

.lgb-chevron.mud-icon-root,
.lgb-chevron {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--tile-muted);
    transition: transform 0.22s var(--lgb-ease);
}

a.lgb-tile:hover .lgb-chevron,
a.lgb-row:hover .lgb-chevron {
    transform: translateX(3px);
}

.lgb-profile {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--tile-muted);
}

/* Pastille « en direct » */
.lgb-live {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #FF4D4D;
    animation: lgb-live-pulse 1.6s ease-out infinite;
}

@keyframes lgb-live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.6); }
    70% { box-shadow: 0 0 0 7px rgba(255, 77, 77, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0); }
}

/* Astérisque LGB en filigrane */
.lgb-watermark {
    position: absolute;
    z-index: -1;
    right: -28px;
    bottom: -36px;
    width: 150px;
    height: 150px;
    color: #FFFFFF;
    opacity: 0.09;
    pointer-events: none;
}

/* ==========================================================================
   Puces
   ========================================================================== */

.lgb-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--chip-bg, var(--lgb-lilac-soft));
    color: var(--chip-ink, var(--lgb-violet));
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
}

.lgb-chip--live   { --chip-bg: var(--lgb-red); --chip-ink: #FFFFFF; }
.lgb-chip--white  { --chip-bg: #FFFFFF; --chip-ink: var(--lgb-ink); }
.lgb-chip--violet { --chip-bg: var(--lgb-violet); --chip-ink: #FFFFFF; }
.lgb-chip--soon   { --chip-bg: var(--lgb-green); --chip-ink: #0B3D1F; }
.lgb-chip--join   { --chip-bg: #FF9F1C; --chip-ink: #3D1F00; }
.lgb-chip--up     { --chip-bg: var(--lgb-green); --chip-ink: #0B3D1F; }
.lgb-chip--down   { --chip-bg: var(--lgb-coral); --chip-ink: var(--lgb-coral-ink); }
.lgb-chip--points { --chip-bg: var(--lgb-green-soft); --chip-ink: var(--lgb-green-ink); }
.lgb-chip--pink   { --chip-bg: #FFE3EE; --chip-ink: #A0124A; }
.lgb-chip--teal   { --chip-bg: #D7F5EE; --chip-ink: #0B6B57; }

.lgb-chip--live::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* ==========================================================================
   Listes : une tuile blanche, des lignes séparées par un filet en retrait
   ========================================================================== */

.lgb-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px 4px 16px;
}

.lgb-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 10px 16px;
    box-sizing: border-box;
    color: inherit;
    text-decoration: none;
    transition: background-color 0.15s;
}

.lgb-row + .lgb-row::before {
    content: "";
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    height: 1px;
    background: var(--tile-line);
}

/* Le filet démarre au texte quand la ligne a une pastille */
.lgb-row--badge + .lgb-row--badge::before {
    left: 64px;
}

a.lgb-row,
.lgb-row--clickable {
    cursor: pointer;
}

a.lgb-row:hover {
    color: inherit;
    text-decoration: none;
}

@media (hover: hover) {
    a.lgb-row:hover,
    .lgb-row--clickable:hover {
        background-color: var(--lgb-lilac-soft);
    }
}

.lgb-row-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lgb-row-title {
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lgb-row-title--wrap {
    white-space: normal;
}

.lgb-row-sub {
    font-size: 0.78rem;
    line-height: 1.3;
    color: var(--tile-muted);
}

.lgb-row-side {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    text-align: right;
}

/* Icône d'image en tête de ligne (maillot, drapeau, illustration) */
.lgb-row-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    object-fit: contain;
}

/* Valeur en bout de ligne */
.lgb-row-value {
    flex-shrink: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--lgb-violet);
    white-space: nowrap;
}

/* Ligne de total : filet violet au-dessus, texte en gras */
.lgb-row--total {
    font-weight: 700;
    box-shadow: inset 0 2px 0 var(--lgb-violet);
}

.lgb-row--total::before {
    display: none;
}

.lgb-rank {
    font-family: 'LGB-Garaje', sans-serif;
    font-weight: 900;
    font-size: 1.3rem;
    line-height: 1;
}

.lgb-rank small {
    font-family: 'LGB-Equip', sans-serif;
    font-weight: normal;
    font-size: 0.6em;
    color: var(--tile-muted);
}

/* Pastille ronde d'une ligne : temps forts, trophées */
.lgb-badge {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    box-sizing: border-box;
    border-radius: 50%;
    background: var(--badge-bg, var(--lgb-lilac-soft));
    color: var(--badge-ink, var(--lgb-violet));
}

.lgb-badge .mud-icon-root,
.lgb-badge svg {
    width: 20px;
    height: 20px;
}

.lgb-badge img {
    width: 72%;
    height: 72%;
    object-fit: contain;
}

.lgb-badge--lg {
    width: 44px;
    height: 44px;
}

.lgb-badge--gold  { --badge-bg: var(--lgb-gold-soft); --badge-ink: #8A6200; }
.lgb-badge--green { --badge-bg: var(--lgb-green-soft); --badge-ink: var(--lgb-green-ink); }
.lgb-badge--red   { --badge-bg: var(--lgb-red-soft); --badge-ink: #B3261E; }

/* Plusieurs pastilles qui se chevauchent (trophées débloqués d'un coup) */
.lgb-badges {
    flex-shrink: 0;
    display: flex;
}

.lgb-badges .lgb-badge {
    box-shadow: 0 0 0 2px var(--lgb-surface);
}

.lgb-badges .lgb-badge + .lgb-badge {
    margin-left: -10px;
}

/* ==========================================================================
   Vignettes : petites, à côté du texte
   ========================================================================== */

.lgb-thumb {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: var(--thumb, 64px);
    height: var(--thumb, 64px);
    border-radius: var(--lgb-radius-sm);
    object-fit: cover;
    background: var(--lgb-lilac-soft);
    color: var(--lgb-violet);
}

.lgb-thumb--sm { --thumb: 48px; }
.lgb-thumb--lg { --thumb: 88px; }

/* Pas d'image : l'astérisque LGB sur violet */
.lgb-thumb--empty {
    background: var(--lgb-violet);
    color: #FFFFFF;
}

.lgb-thumb--empty svg {
    width: 46%;
    height: 46%;
}

.lgb-news-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 0.72rem;
    color: var(--tile-muted);
    white-space: nowrap;
    overflow: hidden;
}

.lgb-clamp-1,
.lgb-clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lgb-clamp-1 { -webkit-line-clamp: 1; }
.lgb-clamp-2 { -webkit-line-clamp: 2; }

/* ==========================================================================
   Chiffres en grille : pied des cartes de course, saison, profil
   ========================================================================== */

.lgb-stats {
    display: grid;
    grid-template-columns: repeat(var(--stats, 3), minmax(0, 1fr));
    gap: 4px;
}

.lgb-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 0;
    text-align: center;
}

.lgb-stat-value {
    font-family: 'LGB-Garaje', sans-serif;
    font-weight: 900;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--stat-ink, var(--tile-ink));
    white-space: nowrap;
}

.lgb-stat-value small {
    font-family: 'LGB-Equip', sans-serif;
    font-weight: normal;
    font-size: 0.55em;
    color: var(--tile-muted);
}

.lgb-stat-label {
    font-size: 0.7rem;
    color: var(--tile-muted);
}

/* Chiffre-clé cliquable (palmarès) : icône, grand chiffre, libellé */
.lgb-metrics {
    display: grid;
    grid-template-columns: repeat(var(--metrics, 3), minmax(0, 1fr));
    gap: 10px;
}

.lgb-metric {
    --tile-pad: 14px 8px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
}

.lgb-metric-icon,
.lgb-metric .mud-icon-root {
    width: 34px;
    height: 34px;
    object-fit: contain;
    color: var(--lgb-violet);
}

.lgb-metric-value {
    font-family: 'LGB-Garaje', sans-serif;
    font-weight: 900;
    font-size: 1.8rem;
    line-height: 1;
    color: var(--lgb-violet);
}

.lgb-metric-label {
    font-size: 0.7rem;
    line-height: 1.2;
    color: var(--tile-muted);
}

/* La victoire ressort */
.lgb-metric--highlight {
    --tile-bg: linear-gradient(135deg, var(--lgb-lilac), var(--lgb-lilac-soft));
}

.lgb-stats-caption {
    padding-top: 2px;
    font-size: 0.7rem;
    color: var(--tile-muted);
    text-align: center;
}

/* ==========================================================================
   Carte de course : bandeau aux couleurs de la course, illustration en biais,
   et les chiffres du joueur dans la carte
   ========================================================================== */

.lgb-race {
    --tile-pad: 0;
    gap: 0;
}

.lgb-race-band {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40%;
    min-height: 132px;
    background: var(--race-bg);
    color: var(--race-ink);
}

.lgb-race-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    margin-right: -28px;
    padding: 12px 0 12px 14px;
}

/* Garaje n'a qu'une graisse : le gras synthétique (900) fait le trait épais des titres LGB */
.lgb-race-name {
    font-family: 'LGB-Garaje', sans-serif;
    font-weight: 900;
    font-size: 1.45rem;
    line-height: 0.95;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.lgb-race-league {
    font-size: 0.85rem;
    line-height: 1.2;
}

.lgb-race-date {
    font-size: 0.7rem;
    color: var(--race-muted);
}

.lgb-race-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    padding-top: 10px;
}

.lgb-race-artbox {
    position: relative;
    display: block;
    overflow: hidden;
}

/* L'image vient des classes race-style-card-img-* ; elle remplit sa case sans dicter la hauteur */
.lgb-race .lgb-race-art {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
    transform-origin: right center;
    transition: transform 0.5s var(--lgb-ease);
}

@media (hover: hover) {
    a.lgb-race:hover .lgb-race-art,
    .lgb-race.lgb-tile--link:hover .lgb-race-art,
    .lgb-race.lgb-tile--clickable:hover .lgb-race-art {
        transform: scale(1.05);
    }
}

/* Le rond violet de l'existant, décoratif : la tuile entière est le lien */
.lgb-race-go {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--lgb-violet);
    color: #FFFFFF;
    box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.55);
    transition: transform 0.22s var(--lgb-ease);
}

.lgb-race-go .mud-icon-root {
    width: 20px;
    height: 20px;
}

.lgb-race-go--join {
    background: #FF9F1C;
    color: #3D1F00;
}

@media (hover: hover) {
    a.lgb-race:hover .lgb-race-go,
    .lgb-race.lgb-tile--link:hover .lgb-race-go,
    .lgb-race.lgb-tile--clickable:hover .lgb-race-go {
        transform: translateX(3px);
    }
}

.lgb-race-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 8px 14px;
    box-sizing: border-box;
    background: var(--lgb-surface);
    color: var(--lgb-ink);
}

.lgb-race-foot .lgb-stats {
    flex: 1;
}

.lgb-race-foot-note {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 0.8rem;
    color: var(--lgb-ink-2);
}

.lgb-race-foot-note b {
    color: var(--lgb-ink);
    font-weight: 600;
    white-space: nowrap;
}

.lgb-race-foot-note .mud-icon-root {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.lgb-race-foot-note--alert {
    color: var(--lgb-red);
    font-weight: 600;
}

.lgb-race-foot-note--end {
    margin-left: auto;
    text-align: right;
}

/* Équipe : validité, coureurs, bonus */
.lgb-team-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.lgb-team-check-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.lgb-team-check .mud-icon-root {
    width: 16px;
    height: 16px;
}

.lgb-team-check--ok { color: var(--lgb-green-ink); }
.lgb-team-check--ko { color: var(--lgb-red); }

.lgb-team-alert {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: 0;
    border-radius: 999px;
    background: var(--lgb-red-soft);
    color: var(--lgb-red);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

/* Course terminée : couleur adoucie, illustration en souvenir */
.lgb-race--over {
    --race-ink: var(--lgb-ink);
    --race-muted: var(--lgb-ink-2);
}

.lgb-race--over .lgb-race-band {
    background: color-mix(in srgb, var(--race-bg) 32%, #FFFFFF);
}

.lgb-race--over .lgb-race-art {
    filter: grayscale(0.8);
    opacity: 0.8;
}

/* Plus de place : bandeau plus haut, nom plus grand */
@container (min-width: 460px) {
    .lgb-race-band {
        min-height: 156px;
        grid-template-columns: minmax(0, 1fr) 44%;
    }

    .lgb-race-name {
        font-size: 1.7rem;
    }

    .lgb-race-body {
        padding: 16px 0 14px 18px;
    }

    .lgb-race-foot {
        padding: 8px 18px;
    }
}

/* Course à choisir (inscription, création de ligue) : le bandeau, plus bas, devient un bouton */
button.lgb-race-pick {
    align-items: stretch;
    padding: 0;
    border: 0;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
}

.lgb-race-pick .lgb-race-band {
    min-height: 92px;
}

.lgb-race-pick .lgb-race-name {
    font-size: 1.3rem;
}

.lgb-race-pick--selected {
    box-shadow: 0 0 0 3px var(--lgb-violet), 0 12px 26px -16px rgba(58, 31, 158, 0.7);
}

/* Déjà inscrit : visible mais pas choisissable */
.lgb-race-pick:disabled {
    cursor: default;
    opacity: 0.55;
}

/* Course choisie d'avance : seule et fixée */
.lgb-race-pick--locked {
    cursor: default;
}

.lgb-race-check {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--lgb-violet);
    color: #FFFFFF;
    box-shadow: 0 0 0 3px #FFFFFF;
}

.lgb-race-check .mud-icon-root {
    width: 18px;
    height: 18px;
}

/* ==========================================================================
   Tuile de choix : un bouton radio en grand (parcours d'inscription, choix d'équipe)
   ========================================================================== */

.lgb-choice {
    --tile-pad: 0;
    gap: 0;
    box-shadow: inset 0 0 0 1.5px transparent, var(--lgb-shadow);
    transition: box-shadow 0.18s, background-color 0.18s;
}

@media (hover: hover) {
    .lgb-choice:hover {
        box-shadow: inset 0 0 0 1.5px var(--lgb-lilac-2), var(--lgb-shadow);
    }
}

.lgb-choice--selected,
.lgb-choice--selected:hover {
    --tile-bg: var(--lgb-lilac-soft);
    box-shadow: inset 0 0 0 2px var(--lgb-violet), 0 10px 24px -16px rgba(58, 31, 158, 0.6);
}

.lgb-choice-btn {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.lgb-choice-btn:focus-visible {
    outline: 3px solid var(--lgb-violet);
    outline-offset: -3px;
    border-radius: var(--lgb-radius);
}

.lgb-choice-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.lgb-choice-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

.lgb-choice-tagline {
    margin-top: 3px;
    font-size: 0.76rem;
    font-style: italic;
    color: var(--lgb-violet);
}

/* Ce qui s'ouvre sous le choix retenu (un champ, une liste) */
.lgb-choice-extra {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 16px 14px 64px;
}

.lgb-radio {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2px solid #C9C4D3;
    background: #FFFFFF;
    color: #FFFFFF;
}

.lgb-radio .mud-icon-root {
    width: 14px;
    height: 14px;
}

.lgb-choice--selected .lgb-radio,
.lgb-radio--on {
    border-color: var(--lgb-violet);
    background: var(--lgb-violet);
}

/* ==========================================================================
   Tuile événement (bilan d'étape, jour de course, avant-étape) : le haut du Radio Tour
   ========================================================================== */

.lgb-hero {
    --tile-pad: 18px 20px;
    gap: 8px;
}

.lgb-hero-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.lgb-hero-title {
    font-family: 'LGB-Garaje', sans-serif;
    font-weight: 900;
    font-size: 1.9rem;
    line-height: 0.95;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.lgb-hero-figures {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.lgb-hero-figures--center {
    align-items: center;
}

.lgb-hero-rank {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.lgb-hero-rank .lgb-figure-value {
    font-size: 1.7rem;
}

/* L'illustration de la course entre en biais quand la tuile s'élargit */
.lgb-hero-art {
    display: none;
}

@container (min-width: 620px) {
    .lgb-hero-body {
        max-width: 60%;
        gap: 10px;
        padding: 4px 6px 0 6px;
    }

    .lgb-hero-figures {
        justify-content: flex-start;
        gap: 36px;
    }

    .lgb-hero-rank {
        align-items: flex-start;
    }

    .lgb-hero .lgb-figure-value {
        font-size: 3.4rem;
    }

    .lgb-hero .lgb-hero-rank .lgb-figure-value {
        font-size: 2.2rem;
    }

    .lgb-hero-title {
        font-size: 2.4rem;
    }

    .lgb-hero-art {
        display: block;
        position: absolute;
        z-index: -1;
        top: 0;
        right: 0;
        bottom: 0;
        width: 40%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%);
    }

    .lgb-hero--art .lgb-watermark {
        display: none;
    }

    .lgb-hero--art .lgb-tile-foot {
        max-width: 60%;
    }
}

/* Classique : le rang dans une médaille */
.lgb-result {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.lgb-result-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.lgb-result-verdict {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.15;
}

.lgb-medal {
    --medal-face: rgba(255, 255, 255, 0.16);
    --medal-ring: rgba(255, 255, 255, 0.45);
    --medal-ink: #FFFFFF;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 3px solid var(--medal-ring);
    background: var(--medal-face);
    color: var(--medal-ink);
    font-family: 'LGB-Garaje', sans-serif;
    font-size: 1.9rem;
    line-height: 1;
}

.lgb-medal--gold {
    --medal-face: radial-gradient(circle at 35% 30%, #FFF4C2, #F5C542 55%, #C99A1C);
    --medal-ring: #FFE48A;
    --medal-ink: #5A3F00;
}

.lgb-medal--silver {
    --medal-face: radial-gradient(circle at 35% 30%, #FFFFFF, #CDD3DC 55%, #9AA3B0);
    --medal-ring: #EEF1F5;
    --medal-ink: #39414D;
}

.lgb-medal--bronze {
    --medal-face: radial-gradient(circle at 35% 30%, #FFE0C4, #D9925A 55%, #A9622D);
    --medal-ring: #F3C29A;
    --medal-ink: #4A2507;
}

/* Avant-étape : le duel avec le rival direct, un bloc par ligue */
.lgb-duels {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: 8px;
    margin-top: 4px;
}

.lgb-duel {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 10px 12px;
    border-radius: var(--lgb-radius);
    background: rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
    text-decoration: none;
    transition: background-color 0.15s;
}

a.lgb-duel:hover {
    color: #FFFFFF;
    text-decoration: none;
}

@media (hover: hover) {
    a.lgb-duel:hover {
        background: rgba(255, 255, 255, 0.16);
    }
}

.lgb-duel-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
}

.lgb-duel-league {
    min-width: 0;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--lgb-lilac-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lgb-duel-rank {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--lgb-lilac);
}

.lgb-duel-line {
    font-size: 0.95rem;
    font-weight: 600;
}

.lgb-duel-riders {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    font-size: 0.8rem;
    color: #F1EDFF;
}

/* « Toi » et le pseudo du rival : même largeur pour aligner les noms, pseudo long coupé */
.lgb-duel-tag {
    flex-shrink: 0;
    box-sizing: border-box;
    width: 6rem;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lgb-duel-tag--mine { background: var(--lgb-green); color: #0B3D1F; }
.lgb-duel-tag--rival { background: var(--lgb-coral); color: var(--lgb-coral-ink); }

/* ==========================================================================
   Sections et mise en page
   ========================================================================== */

.lgb-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.lgb-section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 0 4px;
}

/* Le titre garde sa ligne, c'est le lien d'à côté qui se coupe */
.lgb-section-title {
    flex-shrink: 0;
    white-space: nowrap;
    margin: 0;
    font-family: 'LGB-Garaje', sans-serif;
    font-size: 25px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    color: var(--lgb-ink);
}

.lgb-section-link {
    min-width: 0;
    font-size: 0.8rem;
    color: var(--lgb-violet);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lgb-section-link:hover {
    color: var(--lgb-violet-deep);
    text-decoration: underline;
}

/* Grille qui se remplit toute seule : 1 colonne sur mobile, plus quand la place le permet */
.lgb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grid-min, 320px)), 1fr));
    gap: var(--lgb-gap);
    align-items: start;
}

/* Deux colonnes au plus ; une tuile seule sur la dernière ligne prend toute la largeur */
.lgb-grid--pairs {
    grid-template-columns: repeat(auto-fill, minmax(max(min(100%, var(--grid-min, 320px)), calc((100% - var(--lgb-gap)) / 2)), 1fr));
}

.lgb-grid--pairs > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

/* Toute la largeur d'une grille (sans effet dans une pile) */
.lgb-span-all {
    grid-column: 1 / -1;
}

.lgb-stack {
    display: flex;
    flex-direction: column;
    gap: var(--lgb-gap);
    min-width: 0;
}

/* Page : colonne unique, puis fil principal + colonne latérale */
.lgb-page {
    container-type: inline-size;
    container-name: page;
    box-sizing: border-box;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 12px 8px 28px 8px;
}

.lgb-page-head {
    display: none;
}

.lgb-feed {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
}

.lgb-main,
.lgb-rail {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}

.lgb-main:empty,
.lgb-rail:empty {
    display: none;
}

.lgb-page-title {
    margin: 0;
    font-family: 'LGB-Garaje', sans-serif;
    font-size: 44px;
    font-weight: 900;
    line-height: 0.9;
    text-transform: uppercase;
    color: var(--lgb-ink);
}

.lgb-page-date {
    font-size: 0.9rem;
    color: var(--lgb-ink-2);
}

/* Tablette, petit portable : titre de page, la colonne latérale passe dessous en deux colonnes */
@container page (min-width: 640px) {
    .lgb-page-head {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 16px;
        padding: 6px 4px 18px 4px;
    }

    .lgb-rail {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        align-items: start;
        gap: 22px;
    }
}

/* Bureau : fil principal + colonne latérale */
@container page (min-width: 980px) {
    .lgb-feed {
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 28px;
        align-items: start;
    }

    .lgb-rail {
        display: flex;
        align-items: stretch;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lgb-tile,
    .lgb-race-art,
    .lgb-race-go,
    .lgb-chevron {
        transition: none;
    }

    .lgb-live {
        animation: none;
    }
}