/**
 * Pages des onglets de l'appli (Compétitions, Calendrier, Actus, Athlètes, Clubs) dans le style de l'accueil
 * (css/accueil-appli.css) : onglets en pilules, date de la couleur de la discipline, actus en cartes,
 * podium en médailles, avatars de couleur. Limité à body.pma-onglets ; les cartes de ligne restent
 * celles de css/appli-cartes.css (thread Penta Com).
 */

/* ── Onglets du haut en pilules ── */
:root body.pma-onglets .pm-comp-onglets {
    gap: 8px;
    padding: 10px 16px 6px;
    overflow-x: auto;
    scrollbar-width: none;
}
:root body.pma-onglets .pm-comp-onglets::-webkit-scrollbar { display: none; }
:root body.pma-onglets .pm-comp-onglets a {
    flex: 0 0 auto;
    padding: 8px 15px;
    border: 0;
    border-radius: 999px;
    background: var(--ink2);
    box-shadow: inset 0 0 0 1px var(--rule);
    color: color-mix(in srgb, var(--white) 70%, transparent);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}
:root body.pma-onglets .pm-comp-onglets a.actif {
    background: var(--blue);
    color: var(--sur-blue, var(--ink));
    box-shadow: none;
}

/* Filtres de discipline ou de rubrique : pilules plus douces */
:root body.pma-onglets .pm-comp-filtres { gap: 6px; padding: 4px 16px 10px; }
:root body.pma-onglets .pm-comp-filtres button,
:root body.pma-onglets .pm-comp-filtres a {
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
}

/* Titres de mois et de rubrique : casse normale */
:root body.pma-onglets .pm-cal-titre-jour,
:root body.pma-onglets .pm-comp-mois > h2 {
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.01em;
    text-transform: none;
    color: var(--white);
}
:root body.pma-onglets .pm-comp-mois > h2::first-letter,
:root body.pma-onglets .pm-cal-titre-jour::first-letter { text-transform: uppercase; }

/* ── Compétitions : date pleine de la couleur de la discipline ── */
:root body.pma-onglets .pm-comp-ligne { border-left-width: 1px; border-left-color: var(--rule); }
:root body.pma-onglets .pm-comp-jour {
    width: 48px;
    height: 52px;
    margin: 0 2px 0 0;
    border-radius: 13px;
    background: var(--disc, var(--ink3));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
:root body.pma-onglets .pm-comp-jour strong,
:root body.pma-onglets .pm-comp-jour small { color: #fff; }
:root body.pma-onglets .pm-comp-disc { color: color-mix(in srgb, var(--disc, var(--blue)) 60%, #fff); }
:root[data-theme="light"] body.pma-onglets .pm-comp-disc { color: var(--disc, var(--blue)); }
:root body.pma-onglets .pm-comp-etat {
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--blue-dim);
    color: var(--blue);
    font-size: 11px;
    letter-spacing: 0;
    text-transform: none;
}
:root body.pma-onglets .pm-comp-etat.direct { background: var(--live, #e11d2e); color: #fff; }
:root body.pma-onglets .pm-comp-etat.cours { background: color-mix(in srgb, var(--white) 8%, transparent); color: var(--white); }

/* ── Actus : grande une et lignes en cartes ── */
:root body.pma-onglets .pm-hero { display: block; margin: 12px 16px 4px; border-radius: 22px; overflow: hidden; }
:root body.pma-onglets .pm-hero-img { height: 240px; }
:root body.pma-onglets .pm-actu {
    margin: 0 12px 8px;
    padding: 10px;
    gap: 12px;
    border: 1px solid var(--rule);
    border-radius: 18px;
    background: var(--ink2);
}
:root body.pma-onglets .pm-actu-img { width: 92px; height: 72px; border-radius: 12px; overflow: hidden; }
:root body.pma-onglets .pm-actu-heure {
    width: 56px;
    padding: 8px 0;
    border-radius: 12px;
    background: var(--blue-dim);
    color: var(--blue);
    text-align: center;
}

/* « Les plus lus » : un seul bloc, rangs en pastilles */
:root body.pma-onglets .pm-lus {
    margin: 0 12px;
    padding: 10px 12px;
    align-items: center;
    background: var(--ink2);
    border: 1px solid var(--rule);
    border-bottom-width: 0;
}
:root body.pma-onglets .pm-cal-titre-jour + .pm-lus { border-radius: 18px 18px 0 0; }
:root body.pma-onglets .pm-lus:has(+ :not(.pm-lus)) { border-bottom-width: 1px; border-radius: 0 0 18px 18px; margin-bottom: 6px; }
:root body.pma-onglets .pm-lus-rang {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--blue-dim);
    color: var(--blue);
    font-size: 18px;
}

/* ── Athlètes : médailles du podium, avatars de couleur ── */
:root body.pma-onglets .pm-liste-ligne .pm-rang {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 13px;
    background: var(--ink3);
    color: var(--white);
}
:root body.pma-onglets .pm-liste-ligne .pm-rang:empty { display: none; }
:root body.pma-onglets .pm-rang.podium-1 { background: #eab308; color: #1c1300; }
:root body.pma-onglets .pm-rang.podium-2 { background: #cbd5e1; color: #111827; }
:root body.pma-onglets .pm-rang.podium-3 { background: #d97706; color: #1c0d00; }
:root body.pma-onglets .pm-liste-photo[style*="--av"] { background: var(--av); color: #fff; font-weight: 800; }
:root body.pma-onglets .pm-liste-points {
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--blue-dim);
    color: var(--blue);
}