/* ==========================================================================
   Haeros — Gameplay
   Affichage public : compteurs de points et classement.
   Les couleurs reprennent la direction artistique des « Livres à jouer ».

   Trois variables se règlent depuis les shortcodes, en style en ligne :
     --haeros-points-taille       taille de l'image d'un type
     --haeros-points-espace       écart entre deux compteurs
     --haeros-classement-avatar   taille des portraits du classement
   Rien d'autre n'a besoin d'être touché pour changer une mise en page.
   ========================================================================== */

.haeros-points,
.haeros-classement {
    --hlj-or:       #DCA54A;
    --hlj-noir:     #222222;
    --hlj-creme-cl: #FAF5E5;
    --hlj-creme:    #F0E6C5;
    --hlj-bordure:  #D3C4A7;
    --hlj-blanc:    #FFFFFF;
    --hlj-gris:     #5F5E5A;

    /* Couleur du nombre : chaque type de points peut la remplacer. */
    --haeros-points-couleur: #8a6a2f;

    /* Valeurs de repli : le shortcode les remplace en style en ligne. */
    --haeros-points-taille: 26px;
    --haeros-points-espace: 10px;
    --haeros-classement-avatar: 40px;

    color: var(--hlj-noir);
    box-sizing: border-box;
    font-family: inherit;
}

.haeros-points *,
.haeros-classement * { box-sizing: inherit; }


/* ── Compteurs ─────────────────────────────────────────────────────────── */

.haeros-points-titre,
.haeros-classement-titre {
    font-family: Georgia, "Playfair Display", serif;
    font-size: 18px;
    font-weight: 500;
    margin: 0 0 10px;
}

.haeros-points-liste {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--haeros-points-espace);
}

.haeros-points-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 13px 7px 9px;
    border: 1px solid var(--hlj-bordure);
    border-radius: 999px;
    background: var(--hlj-creme-cl);
    line-height: 1;
}

/* L'image suit la taille demandée, sans jamais se déformer : une icône carrée
   et une bannière large restent toutes deux lisibles dans le même gabarit. */
.haeros-points-image {
    width: var(--haeros-points-taille);
    height: var(--haeros-points-taille);
    object-fit: contain;
    display: block;
    flex: 0 0 auto;
}

.haeros-points-texte {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    min-width: 0;
}

.haeros-points-nombre {
    font-size: 17px;
    font-weight: 700;
    color: var(--haeros-points-couleur);
    font-variant-numeric: tabular-nums;
}

.haeros-points-nom {
    font-size: 13px;
    color: var(--hlj-gris);
}

.haeros-points-vide {
    font-size: 13px;
    color: var(--hlj-gris);
    margin: 0;
}


/* ── Emplacement du texte ──────────────────────────────────────────────────
   Le balisage ne change jamais ; seule la direction du conteneur bouge. Le
   texte reste donc annoncé dans le même ordre par les lecteurs d'écran, quelle
   que soit la disposition choisie.
   ------------------------------------------------------------------------ */

.haeros-points--texte-droite .haeros-points-item { flex-direction: row; }

.haeros-points--texte-gauche .haeros-points-item {
    flex-direction: row-reverse;
    padding: 7px 9px 7px 13px;
}

.haeros-points--texte-dessous .haeros-points-item,
.haeros-points--texte-dessus  .haeros-points-item {
    gap: 6px;
    padding: 10px 14px;
    border-radius: 14px;
    text-align: center;
}

.haeros-points--texte-dessous .haeros-points-item { flex-direction: column; }
.haeros-points--texte-dessus  .haeros-points-item { flex-direction: column-reverse; }

.haeros-points--texte-dessous .haeros-points-texte,
.haeros-points--texte-dessus  .haeros-points-texte {
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

/* Sans texte : la pastille se referme sur l'image seule. Le nombre et le nom
   restent dans l'attribut title et l'étiquette accessible. */
.haeros-points--texte-aucun .haeros-points-item {
    padding: 7px;
    border-radius: 999px;
}


/* ── Alignement de la rangée ───────────────────────────────────────────── */

.haeros-points--gauche .haeros-points-liste { justify-content: flex-start; }
.haeros-points--centre .haeros-points-liste { justify-content: center; }
.haeros-points--droite .haeros-points-liste { justify-content: flex-end; }

.haeros-points--centre .haeros-points-titre { text-align: center; }
.haeros-points--droite .haeros-points-titre { text-align: right; }


/* ── Classement ────────────────────────────────────────────────────────── */

.haeros-classement-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--hlj-bordure);
    border-radius: 10px;
    overflow: hidden;
    background: var(--hlj-blanc);
}

.haeros-classement-ligne {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    border-top: 1px solid var(--hlj-creme);
}

.haeros-classement-ligne:first-child { border-top: 0; }

/* Le membre connecté : un liseré doré, sans crier. */
.haeros-classement-ligne.est-moi {
    background: var(--hlj-creme-cl);
    box-shadow: inset 3px 0 0 var(--hlj-or);
}

.haeros-classement-rang {
    min-width: 26px;
    font-size: 14px;
    font-weight: 700;
    color: var(--hlj-gris);
    font-variant-numeric: tabular-nums;
}

.haeros-classement-ligne:nth-child(1) .haeros-classement-rang { color: var(--hlj-or); }

.haeros-classement-avatar { display: flex; flex: 0 0 auto; }

.haeros-classement-avatar img {
    width: var(--haeros-classement-avatar);
    height: var(--haeros-classement-avatar);
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.haeros-classement-nom {
    flex: 1 1 auto;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.haeros-classement-total {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--haeros-points-couleur);
    font-variant-numeric: tabular-nums;
}

/* La coupure « … » entre le haut du classement et sa propre ligne. */
.haeros-classement-coupure {
    padding: 2px 14px 6px;
    color: var(--hlj-bordure);
    letter-spacing: 2px;
    border-top: 1px solid var(--hlj-creme);
}


/* ── Petit écran ───────────────────────────────────────────────────────────
   On ne masque plus le nom du type : c'est un choix qui appartient au
   shortcode (noms="0"), pas à la feuille de style. On se contente de resserrer.
   ------------------------------------------------------------------------ */

@media (max-width: 480px) {
    .haeros-classement-ligne { gap: 9px; padding: 8px 10px; }
}


/* ── Palmarès des saisons ──────────────────────────────────────────────────
   Réutilise la liste du classement : une saison close, c'est un classement
   figé, et il n'y a aucune raison qu'il ne ressemble pas au classement vivant.
   ------------------------------------------------------------------------ */

.haeros-palmares {
    --hlj-or:       #DCA54A;
    --hlj-noir:     #222222;
    --hlj-creme-cl: #FAF5E5;
    --hlj-creme:    #F0E6C5;
    --hlj-bordure:  #D3C4A7;
    --hlj-blanc:    #FFFFFF;
    --hlj-gris:     #5F5E5A;
    --haeros-points-couleur: #8a6a2f;
    --haeros-classement-avatar: 36px;

    color: var(--hlj-noir);
    box-sizing: border-box;
    font-family: inherit;
}

.haeros-palmares *, .haeros-palmares *::before, .haeros-palmares *::after { box-sizing: inherit; }

.haeros-palmares-titre,
.haeros-palmares-saison-nom {
    font-family: Georgia, "Playfair Display", serif;
    font-weight: 500;
    margin: 0 0 8px;
}

.haeros-palmares-titre { font-size: 22px; }
.haeros-palmares-saison-nom { font-size: 18px; margin-top: 22px; }

/* Le rappel personnel, avant les podiums : c'est ce que le membre cherche en
   premier, autant le lui donner sans qu'il ait à se chercher dans une liste. */
.haeros-palmares-moi {
    margin: 0 0 14px;
    padding: 9px 14px;
    border-radius: 10px;
    background: var(--hlj-creme-cl);
    box-shadow: inset 3px 0 0 var(--hlj-or);
    font-size: 14px;
}

.haeros-palmares-compte {
    margin: 0 0 8px;
    font-size: 12px;
    color: var(--hlj-gris);
}

/* Le titre gagné, sous le nom : c'est la récompense, elle mérite sa ligne. */
.haeros-palmares-titre-gagne {
    display: block;
    font-family: Georgia, "Playfair Display", serif;
    font-size: 13px;
    font-style: italic;
    color: var(--hlj-gris);
    white-space: normal;
}

.haeros-palmares .haeros-classement-nom { white-space: normal; }

.haeros-palmares-vide {
    font-size: 13px;
    color: #5F5E5A;
    margin: 0;
}