/* ==========================================================================
   Haeros — Gameplay : ce que les niveaux ouvrent.

   Trois familles de blocs, sans rapport visuel entre elles :
     .haeros-plafond           un plafond de publication atteint
     .haeros-privilege-avis    un mot de confirmation
     .haeros-stats             les statistiques de lecture
     .haeros-pantheon          la liste des plus hauts rangs

   Les cadres d'avatar, eux, ne sont PAS ici : ils sont écrits en ligne, dans
   l'en-tête du profil, parce qu'ils dépendent du membre affiché. Seule
   l'animation de l'or vit ici — une @keyframes ne peut pas être portée par un
   sélecteur.
   ========================================================================== */

.haeros-plafond,
.haeros-privilege-avis,
.haeros-privilege-verrou,
.haeros-stats,
.haeros-pantheon {
    --hlj-or:       #DCA54A;
    --hlj-or-fonce: #B8862B;
    /* --hlj-or-texte : l'or, mais lisible.

       #DCA54A et #c89539 sont magnifiques en bordure et en jauge, où le seuil
       de contraste est de 3:1. Sur du texte, où il monte à 4,5:1, ils tombent
       à 2,5 — un libellé de bouton qu'on devine plutôt qu'on ne lit, et qui
       disparaît franchement dès que l'état désactivé lui applique une opacité.
       On garde donc l'or décoratif tel quel, et on réserve celui-ci au texte. */
    --hlj-or-texte: #8a6a2f;
    --hlj-noir:     #222222;
    --hlj-creme-cl: #FAF5E5;
    --hlj-creme:    #F0E6C5;
    --hlj-bordure:  #D3C4A7;
    --hlj-gris:     #5F5E5A;
    --hlj-vert:     #639922;
    --hlj-orange:   #D85A30;

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

.haeros-plafond *,
.haeros-stats *,
.haeros-pantheon * { box-sizing: inherit; }


/* ── Plafond atteint ───────────────────────────────────────────────────────
   Le membre arrive pour créer quelque chose et apprend qu'il ne peut pas.
   Le bloc doit donc être lisible tout de suite et ne pas ressembler à une
   erreur technique : c'est une règle du jeu, pas une panne.
   ------------------------------------------------------------------------ */

.haeros-plafond {
    max-width: 680px;
    margin: 0 auto 20px;
    padding: 16px 20px;
    border: 1px solid var(--hlj-bordure);
    border-left: 4px solid var(--hlj-or);
    border-radius: 8px;
    background: var(--hlj-creme-cl);
    line-height: 1.6;
}

/* Retour d'une soumission refusée : là, il faut que ça accroche l'œil, parce
   que la personne vient de cliquer et attend une réponse. */
.haeros-plafond--refus {
    border-left-color: var(--hlj-orange);
    background: rgba(216, 90, 48, .07);
}

.haeros-plafond-titre {
    margin: 0 0 6px;
    font-family: Georgia, "Playfair Display", serif;
    font-size: 16px;
    font-weight: 500;
}

.haeros-plafond p { margin: 0 0 6px; font-size: 14px; }
.haeros-plafond p:last-child { margin-bottom: 0; }


/* ── Avis et verrous ─────────────────────────────────────────────────────── */

.haeros-privilege-avis {
    max-width: 680px;
    margin: 0 auto 20px;
    padding: 14px 18px;
    border: 1px solid var(--hlj-vert);
    border-radius: 8px;
    background: rgba(99, 153, 34, .10);
    color: #4d7a17;
    font-size: 14px;
    line-height: 1.5;
}

.haeros-privilege-verrou {
    padding: 16px 20px;
    border: 1px dashed var(--hlj-bordure);
    border-radius: 8px;
    background: var(--hlj-creme-cl);
    color: var(--hlj-gris);
    font-size: 14px;
    line-height: 1.6;
}


/* ── Le cadre d'or qui tourne ─────────────────────────────────────────────
   La règle qui pose le dégradé est écrite en ligne sur le profil concerné ;
   ici, uniquement le mouvement.

   prefers-reduced-motion : une rotation permanente en périphérie du regard
   gêne réellement certaines personnes. Le cadre reste, il s'immobilise.
   ------------------------------------------------------------------------ */

/* L'or respire au lieu de tourner : l'anneau est un box-shadow, pas un dégradé
   qu'on ferait pivoter. Une pulsation lente se remarque du coin de l'œil sans
   attirer le regard, ce qui est exactement ce qu'on veut d'une distinction. */
@keyframes hgp-cadre-or {
    0%, 100% {
        box-shadow: 0 0 0 3px #B8862B,
                    0 0 0 6px rgba(244, 217, 139, .38),
                    0 3px 16px rgba(184, 134, 43, .30);
    }
    50% {
        box-shadow: 0 0 0 3px #F4D98B,
                    0 0 0 7px rgba(244, 217, 139, .70),
                    0 3px 20px rgba(184, 134, 43, .52);
    }
}

/* Le sélecteur est PORTÉ, et pas générique. `.hlj-profil-avatar` appartient au
   plugin « Livres à jouer » : sans le [data-uid], cette règle éteindrait toute
   animation posée sur cet élément par le plugin hôte ou par le thème, y compris
   celles que nous n'avons jamais créées. */
@media (prefers-reduced-motion: reduce) {
    .hlj-profil-entete[data-uid] .hlj-profil-avatar { animation: none !important; }
    .haeros-niveau-jauge-barre,
    .haeros-quete-jauge-barre { transition: none !important; }
}


/* ── Statistiques ────────────────────────────────────────────────────────── */

.haeros-stats { margin: 0 0 24px; }

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

.haeros-stats-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 20px;
    font-size: 14px;
}

.haeros-stats-table th,
.haeros-stats-table td {
    padding: 9px 12px;
    text-align: left;
    border-bottom: 1px solid var(--hlj-bordure);
}

.haeros-stats-table th {
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--hlj-gris);
}

/* Le tableau peut se retrouver dans une colonne de 280 px — l'en-tête de
   profil —, alors que quatre colonnes dont trois insécables lui demandent au
   moins 300. Le conteneur porte overflow:hidden : sans cette enveloppe, la
   dernière colonne, « Bonne fin », disparaîtrait purement et simplement.
   Un défilement horizontal est bien plus honnête qu'une colonne escamotée. */
.haeros-stats-defilement {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 20px;
}

.haeros-stats-defilement .haeros-stats-table { margin-bottom: 0; }

/* Le titre d'une histoire peut contenir un mot très long : sans cette ligne, il
   élargit le tableau à lui seul. */
.haeros-stats-table td:first-child { overflow-wrap: anywhere; min-width: 8em; }

/* Les colonnes de chiffres se lisent alignées à droite ; la première, qui
   porte le titre de l'histoire, garde la lecture à gauche. */
.haeros-stats-table th:not(:first-child),
.haeros-stats-table td:not(:first-child) { text-align: right; width: 1%; white-space: nowrap; }

.haeros-stats-table tbody tr:hover { background: var(--hlj-creme-cl); }

.haeros-stats-liste {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    font-size: 14px;
    line-height: 1.8;
}

.haeros-stats-note {
    margin: 0;
    font-size: 12px;
    color: var(--hlj-gris);
    line-height: 1.5;
}


/* ── Panthéon ────────────────────────────────────────────────────────────── */

/* (le fond de profil réservé est écrit en ligne, avec son voile — voir
   hgp_rendre_parures() dans points-privileges.php) */


.haeros-pantheon {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.haeros-pantheon--vide {
    display: block;
    padding: 20px;
    text-align: center;
    color: var(--hlj-gris);
    font-size: 14px;
}

.haeros-pantheon-membre {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 16px 10px 10px;
    border: 1px solid var(--hlj-bordure);
    border-radius: 999px;
    background: var(--hlj-creme-cl);
    min-width: 0;
}

.haeros-pantheon-avatar {
    border-radius: 50%;
    flex: 0 0 auto;
    display: block;
}

.haeros-pantheon-textes {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.haeros-pantheon-nom {
    font-weight: 600;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.haeros-pantheon-titre {
    font-size: 12px;
    color: var(--hlj-or-texte);
    overflow-wrap: anywhere;
}


@media (max-width: 600px) {
    .haeros-stats-table { font-size: 13px; }
    .haeros-stats-table th,
    .haeros-stats-table td { padding: 8px 7px; }
    .haeros-pantheon { gap: 10px; }
    .haeros-pantheon-membre { width: 100%; }
}


/* ==========================================================================
   [haeros_privileges] — ce qui est ouvert, et ce qui attend

   Deux listes dans un même bloc, et une seule idée : rendre la progression
   lisible. Ce qui est acquis se lit d'un coup d'œil (coche, texte plein) ; ce
   qui attend se lit ligne à ligne (point, texte estompé, le chemin restant en
   dessous). La différence de traitement fait tout le travail.
   ========================================================================== */

.haeros-privileges {
    --hlj-or:       #DCA54A;
    --hlj-or-texte: #8a6a2f;
    --hlj-noir:     #222222;
    --hlj-creme-cl: #FAF5E5;
    --hlj-bordure:  #D3C4A7;
    --hlj-gris:     #5F5E5A;
    --hlj-vert:     #639922;

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

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

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

.haeros-privileges-section {
    margin: 18px 0 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--hlj-gris);
}

.haeros-privileges-section:first-of-type { margin-top: 0; }

.haeros-privileges-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.haeros-privilege {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--hlj-bordure);
    font-size: 14px;
    line-height: 1.5;
    min-width: 0;
}

.haeros-privilege:last-child { border-bottom: none; }

/* La marque tient sur une largeur fixe : sans elle, les noms ne s'alignent pas
   entre une coche et un point, qui n'ont pas la même chasse. */
.haeros-privilege-marque {
    flex: 0 0 1.2em;
    text-align: center;
    color: var(--hlj-bordure);
    font-weight: 700;
}

.haeros-privilege--acquis .haeros-privilege-marque { color: var(--hlj-vert); }

.haeros-privilege-texte {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.haeros-privilege-nom {
    overflow-wrap: anywhere;
    color: var(--hlj-gris);
}

/* Acquis : le nom reprend sa pleine couleur et son poids. C'est le seul signal
   dont on a besoin — pas de fond vert, pas de pastille de plus. */
.haeros-privilege--acquis .haeros-privilege-nom {
    color: var(--hlj-noir);
    font-weight: 600;
}

/* Le chemin restant : c'est la ligne qu'on vient lire. Elle porte donc la
   couleur du jeu, et non le gris des explications. */
.haeros-privilege-route {
    font-size: 13px;
    color: var(--hlj-or-texte);
    overflow-wrap: anywhere;
}

.haeros-privilege-detail {
    font-size: 12px;
    color: var(--hlj-gris);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.haeros-privileges-vide {
    margin: 0;
    padding: 16px 20px;
    border: 1px dashed var(--hlj-bordure);
    border-radius: 8px;
    background: var(--hlj-creme-cl);
    color: var(--hlj-gris);
    font-size: 14px;
}


@media (max-width: 480px) {
    .haeros-privilege { font-size: 13px; }
    .haeros-privilege-route { font-size: 12px; }
}