.anneau-rang {
  font-family: 'Present';
  font-size: var(--fontsize-hero);
  line-height: var(--leading-1);
  color: var(--color-alternate);
}

.trait-rang {
  font-size: var(--fontsize-large);
  font-family: 'Avenir';
  color: var(--color-alternate);
  line-height: var(--leading-12);
}

/* Le trait dominant de la paire (constitution>volonté, etc.) doit ressortir
   en couleur forte. Sans ce sélecteur combiné, .trait-rang (chargé après
   colors.css) écrase la couleur de .text-strong à cause de la cascade. */
.trait-rang.text-strong {
  color: var(--color-strong);
}

/* Blocs visibles uniquement en mode édition */
.edit-only { display: none; }
.fiche-edit-mode .edit-only { display: revert; }

/* Lignes de compétences vides masquées par défaut, révélées en mode édition */
.comp-row-empty { display: none; }
.fiche-edit-mode .comp-row-empty { display: table-row; }

/* Headers de catégorie de compétences masqués en mode édition (évitent la confusion) */
.fiche-edit-mode .comp-cat-header { display: none; }
.fiche-edit-mode [data-trait-eff] select { width: 3em; display: inline-block; vertical-align: middle; }
.fiche-edit-mode select.comp-select { min-width: 14em; }

/* Slots d'avantages/désavantages vides masqués hors édition */
.av-row-empty { display: none; }
.fiche-edit-mode .av-row-empty { display: list-item; }
.fiche-edit-mode select.av-select { min-width: 14em; }
.fiche-edit-mode [data-av-slot] > * { display: flex; justify-content:flex-start; align-items:center; }

/* Lignes des spécialisations : visibles uniquement si la compétence en a achetées, ou en mode édition */
.comp-specs-row { display: none; }
.comp-specs-row.has-specs { display: table-row; }
.fiche-edit-mode .comp-specs-row { display: table-row; }
.comp-specs-row td { border-top: 0; }

/* Tri-state via icônes Font Awesome — cycle vide → achetée/école R1 → école R2 (doré) */
.comp-ecole-tri,
.comp-spec-tri {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    user-select: none;
    vertical-align: middle;
}
.comp-spec-tri {
    margin-right: 1em;
    font-size: 0.9em;
    gap: 0.3em;
}

.comp-ecole-tag,
.spec-ecole-tag {
    display: none;
    position: absolute;
    left: 0;
    bottom: 100%;
    white-space: nowrap;
    font-size: 0.65em;
    line-height: 1;
    margin-bottom: 1px;
    pointer-events: none;
}
.comp-ecole-tag      { color: var(--color-yellow-gold); }
.spec-ecole-tag      { color: var(--color-green-success); }

/* Compétence école : 1 = vert (départ R1), 2 = doré (départ R2) */
.comp-ecole-tri[data-state="1"] .tri-icon { color: var(--color-green-success); }
.comp-ecole-tri[data-state="2"] .tri-icon,
.comp-ecole-tri[data-state="2"]           { color: var(--color-yellow-gold); }
.comp-ecole-tri[data-state="2"] .comp-ecole-tag { display: inline-flex; justify-content: center; align-items: center; }

/* Spécialisation : 1 = achetée payante (rouge), 2 = offerte école (vert) */
.comp-spec-tri[data-state="1"] .tri-icon { color: var(--color-red-danger); }
.comp-spec-tri[data-state="2"] .tri-icon,
.comp-spec-tri[data-state="2"]           { color: var(--color-green-success); }
.comp-spec-tri[data-state="2"] .spec-ecole-tag { display: inline-flex; justify-content: center; align-items: center; }

/* Alignement vertical des cellules de la table compétences (notamment en mode édition où on mélange selects + checkboxes) */
#comp-table td,
#comp-table th { vertical-align: middle; }

#comp-table .comp-cat-header th {
    background: rgba(0,0,0,0.06);
    font-variant: small-caps;
    letter-spacing: 0.05em;
    font-size: 0.85em;
    padding-top: 0.5rem;
    padding-bottom: 0.25rem;
}