/* Onglets LGB (composant LgbTabs) : un bandeau aux couleurs de la course, les onglets découpés dedans
   comme les intercalaires d'un classeur, l'onglet actif de la couleur de la page. Sur téléphone, la barre
   du haut prend la même couleur (TopBarTheme) et le bandeau la prolonge ; au bureau, il ouvre la colonne
   de contenu. Couleurs --race-* : race-style-card.css ; jetons --lgb-* : lgb-tiles.css.

   --lgb-tabs-h est la hauteur du bandeau ; les contenus qui calculent leur hauteur sur l'écran
   (calc(100dvh - …), pensé pour les 48 px de MudTabs) retirent --lgb-tabs-extra, hérité du bandeau. */

.lgb-tabs {
    --lgb-tabs-h: 56px;
    --lgb-tabs-extra: calc(var(--lgb-tabs-h) - 48px);
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
}

/* Avec la ligne d'état (ligue) */
.lgb-tabs--meta { --lgb-tabs-h: 80px; }

.lgb-tabs-band {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-sizing: border-box;
    height: var(--lgb-tabs-h);
    background: var(--race-bg, var(--lgb-violet, #6B42FE));
    color: var(--race-ink, #FFFFFF);
    font-family: 'LGB-Equip', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Ligne d'état, alignée sur le titre de la barre du haut (après la flèche retour) */
.lgb-tabs-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    height: 24px;
    padding: 0 12px 8px 3rem;
    overflow: hidden;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    white-space: nowrap;
}

.lgb-tabs-meta span { flex-shrink: 0; }
.lgb-tabs-meta span:last-child { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.lgb-tabs-meta i {
    flex-shrink: 0;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.6;
}

.lgb-tabs-bar {
    display: grid;
    grid-template-columns: repeat(var(--tabs, 4), minmax(0, 1fr));
    box-sizing: border-box;
    height: 56px;
    padding: 0 4px;
}

.lgb-tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    margin: 0;
    padding: 8px 0;
    border: 0;
    border-radius: 12px 12px 0 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.lgb-tab-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lgb-tab-ico {
    position: relative;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
}

.lgb-tab-ico svg {
    display: block;
    width: 22px;
    height: 22px;
    opacity: 0.85;
}

.lgb-tab--on {
    background: var(--lgb-page, #F2F2F2);
    color: var(--lgb-ink, #15121F);
    font-weight: 800;
    cursor: default;
}

.lgb-tab--on .lgb-tab-ico svg {
    color: var(--lgb-violet, #6B42FE);
    opacity: 1;
}

/* Les deux congés qui raccordent l'onglet actif à la page */
.lgb-tab--on::before,
.lgb-tab--on::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 12px;
    height: 12px;
    pointer-events: none;
}

.lgb-tab--on::before {
    left: -12px;
    background: radial-gradient(circle at 0 0, transparent 11.5px, var(--lgb-page, #F2F2F2) 12px);
}

.lgb-tab--on::after {
    right: -12px;
    background: radial-gradient(circle at 100% 0, transparent 11.5px, var(--lgb-page, #F2F2F2) 12px);
}

.lgb-tab:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -4px;
}

/* Du nouveau derrière l'onglet : point rouge (messages), point doré (temps forts) */
.lgb-tab-mark {
    position: absolute;
    top: -2px;
    right: -4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #FFFFFF;
}

.lgb-tab-mark--news { background: var(--lgb-red, #E2001A); }
.lgb-tab-mark--fresh { background: #F2B705; }

.lgb-tab-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.lgb-tabs-panel {
    position: relative;
    flex: 1;
    min-height: 0;
}

/* Après un glissé (téléphone, js/lgb-tabs-swipe.js) : l'onglet voisin entre par le côté d'où vient le doigt */
.lgb-tabs-panel--from-right { animation: lgb-tabs-enter-right 200ms ease-out; }
.lgb-tabs-panel--from-left { animation: lgb-tabs-enter-left 200ms ease-out; }

@keyframes lgb-tabs-enter-right {
    from { opacity: 0.35; transform: translateX(28px); }
}

@keyframes lgb-tabs-enter-left {
    from { opacity: 0.35; transform: translateX(-28px); }
}

@media (prefers-reduced-motion: reduce) {
    .lgb-tabs-panel--from-right,
    .lgb-tabs-panel--from-left { animation: none; }
}

/* Bureau : le bandeau ouvre la colonne, les onglets en ligne */
@media (min-width: 577px) {
    .lgb-tabs { --lgb-tabs-h: 50px; }
    .lgb-tabs--meta { --lgb-tabs-h: 88px; }

    .lgb-tabs-band { border-radius: 10px 10px 0 0; }

    .lgb-tabs-meta {
        height: 38px;
        padding: 2px 20px 0 20px;
        font-size: 13px;
    }

    .lgb-tabs-bar {
        display: flex;
        gap: 4px;
        height: 50px;
        padding: 0 14px;
    }

    .lgb-tab {
        flex-direction: row;
        gap: 8px;
        padding: 0 18px 0 14px;
        font-size: 14px;
        letter-spacing: 0;
    }

    .lgb-tab-ico,
    .lgb-tab-ico svg {
        width: 19px;
        height: 19px;
    }
}