/* ==========================================================================
   Haeros — Gameplay : niveaux et titres, côté site.

   Le bloc s'insère sous le pseudonyme dans l'en-tête de profil, où la place est
   comptée : il reste donc sur une ligne, discret, et ne prend de la hauteur que
   pour sa jauge — deux pixels.
   ========================================================================== */

.haeros-niveau,
.haeros-titre {
    --hlj-or:       #DCA54A;
    --hlj-or-fonce: #c89539;
    --hlj-noir:     #222222;
    --hlj-creme-cl: #FAF5E5;
    --hlj-creme:    #F0E6C5;
    --hlj-bordure:  #D3C4A7;
    --hlj-gris:     #5F5E5A;

    box-sizing: border-box;
    font-family: inherit;
}

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

.haeros-niveau { max-width: 320px; }


/* ── La ligne : le chiffre, puis le titre choisi ───────────────────────── */

.haeros-niveau-ligne {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 9px;
}

.haeros-niveau-chiffre {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 2px 9px;
    border: 1px solid var(--hlj-bordure);
    border-radius: 999px;
    background: var(--hlj-creme-cl);
    font-size: 15px;
    font-weight: 700;
    color: var(--hlj-or-fonce);
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
    white-space: nowrap;
}

/* Le mot « Niveau » est plus petit et plus discret que le chiffre : c'est le
   chiffre qu'on lit, le mot n'est là que pour qu'il veuille dire quelque
   chose la première fois. */
.haeros-niveau-mot {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--hlj-gris);
}

.haeros-niveau-titre,
.haeros-titre {
    font-family: Georgia, "Playfair Display", serif;
    font-size: 15px;
    font-style: italic;
    color: var(--hlj-noir);
}


/* ── La jauge ──────────────────────────────────────────────────────────── */

.haeros-niveau-jauge {
    height: 4px;
    margin-top: 7px;
    border-radius: 999px;
    background: var(--hlj-creme);
    overflow: hidden;
}

.haeros-niveau-jauge-barre {
    display: block;
    height: 100%;
    background: var(--hlj-or);
    border-radius: 999px;
    transition: width .4s ease;
}

.haeros-niveau-restant {
    margin: 5px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--hlj-gris);
}


/* ── Dans l'en-tête de profil ──────────────────────────────────────────────
   LA CONTRAINTE : ce bloc vit dans une colonne dont la largeur ne dépend pas de
   l'écran. La figurine du genre réserve jusqu'à 440 px à sa droite, et ce qui
   reste peut être étroit sur un grand moniteur comme large sur un portable.
   Aucune media query ne peut deviner ça — d'où des largeurs qui n'existent pas
   et des contenus qui se replient.

   Le risque, si on se trompe : l'en-tête porte overflow:hidden, donc ce qui
   déborde ne s'affiche pas de travers, il DISPARAÎT.
   ------------------------------------------------------------------------ */

.haeros-profil-stats {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    /* Ni largeur ni min-width : la colonne décide, et on s'y plie. */
    min-width: 0;
    max-width: 100%;
}

.haeros-profil-stats .haeros-niveau { max-width: 340px; }

.haeros-profil-points { min-width: 0; }

/* Les compteurs passent à la ligne un par un plutôt que de pousser la colonne. */
.haeros-profil-points .haeros-points-liste { flex-wrap: wrap; }

/* ── Les compteurs au centre de la bande ───────────────────────────────────
   Ils ne sont plus sous le pseudonyme mais au milieu de la bande blanche, à
   peu près à sa hauteur. À cette taille, le cadre en pastille — contour, fond
   crème, rembourrage — devient une bulle autour de chaque image et alourdit
   l'ensemble : on l'enlève, l'illustration se suffit.

   La taille des IMAGES ne se règle pas ici. Le module d'affichage la pose en
   style inline marqué !important, seul moyen de passer devant Elementor et
   Astra ; une règle de feuille de style, même !important, ne peut pas la
   reprendre. Elle se change dans Réglages → onglet Niveaux → « Taille des
   images de points ». Ce qui suit ne gouverne que ce qui l'entoure.
   ------------------------------------------------------------------------ */

/* Pas de width: 100%. Le bloc se dimensionne sur son contenu et c'est son
   parent (.hlj-profil-centre, en flex) qui le centre. Avec une largeur imposée
   à 100%, le zoom des paliers ci-dessous la rééchelonnerait aussi et le bloc
   n'occuperait plus que 90, 80 ou 70 % de la place, décentré. */
.haeros-profil-points--centre { width: auto; max-width: 100%; }

.haeros-profil-points--centre .haeros-points-liste {
    justify-content: center;
    align-items: center;
    /* Pas de retour à la ligne quand le bloc est centré : il se dimensionne sur
       son contenu (width: max-content côté hlj-profil.css), donc la place est
       toujours exacte. Le repli est réactivé plus bas, pour la mise en page où
       les compteurs passent sous le nom et n'ont plus que la largeur de la
       bande. */
    flex-wrap: nowrap;
    row-gap: 12px;
}

.haeros-profil-points--centre .haeros-points-item {
    background: transparent;
    border: 0;
    padding: 0;
    gap: 10px;
}

/* Le nombre grandit avec l'écran, mais dans des bornes : en dessous de 22 px il
   ne se lit plus à côté d'une image de 64, au-dessus de 34 il concurrence le
   nom du membre. */
.haeros-profil-points--centre .haeros-points-nombre {
    font-size: clamp(22px, 2.2vw, 34px);
    font-weight: 800;
    line-height: 1;
}

.haeros-profil-points--centre .haeros-points-nom {
    font-size: 13px;
}

/* Sur un profil, un compteur n'a pas besoin du fond crème complet : la carte
   qui l'entoure fait déjà ce travail, et trois pastilles pleines côte à côte
   alourdissent l'ensemble. On garde le contour, on allège le fond. */
.haeros-profil-points .haeros-points-item {
    background: transparent;
    padding: 4px 11px 4px 6px;
}

.haeros-profil-points .haeros-points-nombre { font-size: 15px; }


/* ── Repli ─────────────────────────────────────────────────────────────────
   Deux paliers seulement, qui correspondent aux ruptures de l'en-tête de profil
   lui-même : à 782 px la figurine tombe à 118 px, à 400 px à 88 px. On se cale
   dessus pour que tout bouge en même temps.
   ------------------------------------------------------------------------ */

@media (max-width: 782px) {
    .haeros-profil-stats { gap: 7px; }
    .haeros-profil-stats .haeros-niveau { max-width: none; }
    .haeros-niveau-restant { font-size: 11px; }
}


/* ── Les paliers de réduction ──────────────────────────────────────────────
   Ces règles mesurent la BANDE BLANCHE, pas l'écran. C'est indispensable ici :
   « Mon héros » et la page « Profil » s'affichent sur le même écran mais dans
   des colonnes Elementor de largeurs différentes, et une media query ne sait
   pas les distinguer. Le conteneur `bande` est déclaré dans hlj-profil.css.

   Pourquoi zoom et pas font-size ou width : la taille des images est posée en
   style inline marqué !important par le module d'affichage — seul moyen de
   passer devant Elementor et Astra. Aucune règle de feuille de style ne peut la
   reprendre, même en !important. zoom est la seule propriété qui rééchelonne la
   boîte APRÈS calcul, écarts compris, et qui occupe réellement la place réduite
   dans la mise en page (contrairement à transform: scale, qui laisserait un
   trou de la taille d'origine).

   Deux séries de paliers, qui correspondent aux deux mises en page :
     — au-dessus de 554 px, les compteurs sont À CÔTÉ du nom et partagent la
       bande avec lui : ils doivent tenir dans ce qui reste ;
     — en dessous, ils sont SUR LEUR PROPRE LIGNE et disposent de toute la
       bande : la réduction ne reprend que bien plus bas, sur téléphone.
   ------------------------------------------------------------------------ */

/* Les paliers de zoom accompagnent --hlj-compteurs (hlj-profil.css) : mêmes
   seuils, mêmes proportions. Tant que les compteurs sont centrés au milieu de la
   bande, on les resserre progressivement pour que le milieu reste atteignable
   sans que le nom ni la figurine ne soient touchés.

   En dessous de 560 px de zone utile, ils repassent sous le nom et retrouvent
   toute la largeur : plus besoin de réduire, jusqu'aux tailles de téléphone où
   la question se repose. */

@container bande (max-width: 764px) { .haeros-profil-points--centre { zoom: .82; } }
@container bande (max-width: 664px) { .haeros-profil-points--centre { zoom: .70; } }

/* Repli sous le nom : toute la largeur est disponible, on rend leur taille
   pleine aux images. */
@container bande (max-width: 604px) {
    .haeros-profil-points--centre { zoom: 1; }
    /* Sous le nom, la largeur n'est plus taillée sur mesure : le retour à la
       ligne redevient le filet de sécurité contre le rognage. */
    .haeros-profil-points--centre .haeros-points-liste { flex-wrap: wrap; }
}

/* Téléphone. On réduit plutôt que d'empiler les compteurs sur trois étages, ce
   qui doublerait la hauteur de la carte. */
@container bande (max-width: 445px) { .haeros-profil-points--centre { zoom: .82; } }
@container bande (max-width: 380px) { .haeros-profil-points--centre { zoom: .70; } }
@container bande (max-width: 320px) { .haeros-profil-points--centre { zoom: .58; } }
@container bande (max-width: 265px) { .haeros-profil-points--centre { zoom: .48; } }