/* ---- Administration ---- */

.cache {
  display: none !important;
}

body {
  /* Place pour les boutons figés en bas. */
  padding-bottom: 5rem;
}

.etat-admin {
  text-align: center;
  color: var(--texte-doux);
}

.etat-admin.erreur {
  color: #ff7a85;
}

.etat-admin.succes {
  color: #3ecf6a;
}

.zone-admin {
  max-width: 90rem;
  margin: 0 auto;
}

/* Personnages / Armes, recherche et filtres, dans un rectangle flou figé en
   haut. */
.barre-admin {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  background-color: rgba(20, 20, 20, 0.45);
  -webkit-backdrop-filter: blur(0.5rem);
  backdrop-filter: blur(0.5rem);
}

.vues-admin {
  display: flex;
  gap: 0.5rem;
}

.vue-admin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.625rem;
  border: 2px solid transparent;
  border-radius: 0.5rem;
  background-color: rgba(20, 20, 20, 0.45);
  cursor: pointer;
}

.vue-admin img {
  display: block;
  height: 1.75rem;
}

.vue-admin:hover {
  border-color: rgba(245, 197, 66, 0.8);
}

.vue-admin.active {
  border-color: rgba(245, 197, 66, 0.8);
  background-color: rgba(245, 197, 66, 0.15);
}

.recherche-admin {
  box-sizing: border-box;
  width: 17.8125rem;
  max-width: 100%;
  height: 2.4375rem;
  padding: 0.375rem 0.75rem;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.5625rem;
  background-color: rgba(20, 20, 20, 0.45);
  color: white;
  font-family: inherit;
  font-size: 1.0625rem;
}

.aide-admin {
  margin: 0 auto 0.75rem;
  max-width: 55rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--texte-doux);
}

.ligne-admin,
.filtres-admin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.75rem;
}

.groupe-admin {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.compte-admin {
  font-size: 0.875rem;
  color: var(--texte-doux);
}

/* Boutons de filtre : mêmes carrés que les autres pages, contour doré au
   survol, fond doré une fois actifs. */
.filtre-admin {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.4375rem;
  border: 2px solid transparent;
  border-radius: 0.5625rem;
  background-color: rgba(20, 20, 20, 0.45);
  color: white;
  font-family: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
}

.filtre-admin.filtre-icone {
  width: 2.4375rem;
  padding: 0.3125rem;
}

.filtre-admin.filtre-icone img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.filtre-admin.filtre-texte {
  padding: 0 0.75rem;
  white-space: nowrap;
}

.filtre-admin:hover {
  border-color: rgba(245, 197, 66, 0.8);
}

.filtre-admin.active {
  border-color: rgba(245, 197, 66, 0.8);
  background-color: rgba(245, 197, 66, 0.15);
}

/* ---- Tableau ---- */

/* Pas de défilement propre au tableau : son en-tête peut ainsi rester figé
   sous la barre des filtres quand la page défile. */
.tableau-admin-conteneur {
  border-radius: 0.75rem;
  background-color: rgba(20, 20, 20, 0.45);
  -webkit-backdrop-filter: blur(0.5rem);
  backdrop-filter: blur(0.5rem);
}

.tableau-admin {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.tableau-admin th,
.tableau-admin td {
  padding: 0.25rem 0.375rem;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* En-tête figé sous la barre des filtres (hauteur suivie par
   suivreHauteurBarre). */
.tableau-admin thead {
  position: sticky;
  top: var(--hauteur-barre-admin, 0px);
  z-index: 30;
}

.tableau-admin thead th {
  background-color: rgba(30, 30, 30, 0.95);
  font-weight: bold;
}

.tableau-admin th.triable {
  cursor: pointer;
  user-select: none;
}

.tableau-admin th.triable:hover {
  color: #f5c542;
}

.fleche-admin {
  margin-left: 0.25rem;
  font-size: 0.75em;
}

.tableau-admin .col-nom {
  text-align: left;
  white-space: nowrap;
}

.col-nom .miniature {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  margin-right: 0.5rem;
  vertical-align: middle;
  border-radius: 0.375rem;
  overflow: hidden;
  background-size: cover;
}

.col-nom .miniature img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mode-bonus {
  width: 100%;
  min-width: 7rem;
  padding: 0.125rem 0.25rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0.375rem;
  background-color: #3a3a3a;
  color: white;
  font-family: inherit;
  font-size: 0.75rem;
}

/* Case : saisie + valeur calculée en gris (coefficient "*1,2"). */
.case-admin {
  position: relative;
  display: inline-block;
}

.case-points {
  box-sizing: border-box;
  width: 4rem;
  padding: 0.25rem 0.375rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.375rem;
  background-color: rgba(255, 255, 255, 0.06);
  color: white;
  font-family: inherit;
  font-size: 0.875rem;
  text-align: center;
}

.case-points:focus {
  outline: none;
  border-color: rgba(245, 197, 66, 0.8);
}

.case-points.avec-apercu {
  color: rgba(255, 255, 255, 0.55);
}

.case-points.invalide {
  border-color: #ff5a5a;
}

/* Au-dessus de la case (la flèche de copie est en dessous). */
.apercu-points {
  position: absolute;
  left: 50%;
  bottom: 100%;
  z-index: 1;
  transform: translateX(-50%);
  padding: 0 0.25rem;
  border-radius: 0.25rem;
  background-color: rgba(20, 20, 20, 0.9);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
  white-space: nowrap;
  pointer-events: none;
}

.apercu-points:empty {
  display: none;
}

/* ---- Annuler (bas gauche) / Enregistrer (bas droite), figés ----
   Grisés avec un contour rouge / vert sans modification, remplis avec. */
.pied-admin {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.pied-admin button {
  pointer-events: auto;
  padding: 0.625rem 1.25rem;
  border: 2px solid var(--couleur-bouton);
  border-radius: 0.5rem;
  background-color: rgba(80, 80, 80, 0.95);
  color: rgba(255, 255, 255, 0.7);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.5);
}

.bouton-enregistrer {
  --couleur-bouton: #3ecf6a;
}

.bouton-annuler {
  --couleur-bouton: #ff5a5a;
}

.pied-admin button.modifie {
  background-color: var(--couleur-bouton);
  color: white;
}

.pied-admin button.modifie:hover {
  filter: brightness(1.1);
}

.pied-admin button:disabled {
  cursor: default;
}

/* ---- Bouton Aperçu (colonne des noms) ---- */
.btn-apercu {
  margin-left: 0.5rem;
  padding: 0.125rem 0.5rem;
  border: 1px solid rgba(245, 197, 66, 0.6);
  border-radius: 0.375rem;
  background: none;
  color: #f5c542;
  font-family: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}

.btn-apercu:hover {
  background-color: rgba(245, 197, 66, 0.15);
}

/* ---- Masquer / Afficher (pas encore sorti dans le jeu) ---- */
.btn-masquer {
  margin-left: 0.375rem;
  padding: 0.125rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0.375rem;
  background: none;
  color: var(--texte-doux);
  font-family: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}

.btn-masquer:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
}

.ligne-masquee .btn-masquer {
  border-color: rgba(62, 207, 106, 0.6);
  color: #3ecf6a;
}

.ligne-masquee .btn-masquer:hover {
  background-color: rgba(62, 207, 106, 0.15);
}

.ligne-masquee .miniature,
.ligne-masquee .nom-admin {
  opacity: 0.45;
}

.tag-masque {
  margin-left: 0.5rem;
  padding: 0.0625rem 0.375rem;
  border-radius: 0.25rem;
  background-color: rgba(255, 90, 90, 0.2);
  color: #ff5a5a;
  font-size: 0.6875rem;
}

/* ---- Fenêtre d'aperçu (comme la fenêtre d'un joueur dans Tous les
   comptes) ---- */
.modal-apercu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
}

.modal-apercu.active {
  display: flex;
}

.modal-apercu-contenu {
  box-sizing: border-box;
  width: min(60rem, calc(100% - 2rem));
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.75rem;
  background-color: rgba(20, 20, 20, 0.6);
  -webkit-backdrop-filter: blur(0.5rem);
  backdrop-filter: blur(0.5rem);
}

.modal-apercu-entete {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.modal-apercu-entete h2 {
  flex: 1;
  margin: 0;
}

.apercu-miniature {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.5rem;
  overflow: hidden;
  background-size: cover;
}

.apercu-miniature img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fermer-apercu {
  border: none;
  background: none;
  color: white;
  font-size: 1.625rem;
  cursor: pointer;
}

.fermer-apercu:hover {
  color: #f5c542;
}

.aide-apercu {
  font-size: 0.8125rem;
  color: var(--texte-doux);
}

/* Modificateurs : mode (+ / x) et valeur, un bloc par modificateur. */
.apercu-modificateurs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.bloc-modificateur {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 0.875rem;
  border-radius: 0.625rem;
  background-color: rgba(255, 255, 255, 0.05);
}

.titre-modificateur {
  font-weight: bold;
}

.modes-modificateur {
  display: flex;
  gap: 0.25rem;
}

.mode-modificateur {
  padding: 0.25rem 0.5rem;
  border: 2px solid transparent;
  border-radius: 0.375rem;
  background-color: rgba(20, 20, 20, 0.45);
  color: white;
  font-family: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}

.mode-modificateur:hover {
  border-color: rgba(245, 197, 66, 0.8);
}

.mode-modificateur.active {
  border-color: rgba(245, 197, 66, 0.8);
  background-color: rgba(245, 197, 66, 0.15);
}

.valeur-modificateur {
  box-sizing: border-box;
  width: 6rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0.375rem;
  background-color: rgba(255, 255, 255, 0.06);
  color: white;
  font-family: inherit;
  font-size: 0.9375rem;
  text-align: center;
}

.valeur-modificateur:focus {
  outline: none;
  border-color: rgba(245, 197, 66, 0.8);
}

/* Tableau des combinaisons : constellations en lignes, niveaux (avec ou
   sans théâtre) en colonnes. */
.apercu-tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.apercu-tableau th,
.apercu-tableau td {
  padding: 0.375rem 0.5rem;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.apercu-tableau thead th {
  font-size: 0.8125rem;
}

.apercu-tableau .avec-theatre {
  color: #f5c542;
  font-weight: normal;
}

.apercu-tableau tbody th {
  color: var(--texte-doux);
}

.apercu-tableau td {
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}

/* Flèche sous une case : copie sa valeur jusqu'à C6 / R5. */
.copie-suite {
  display: block;
  margin: 0.125rem auto 0;
  padding: 0 0.5rem;
  border: none;
  border-radius: 0.25rem;
  background: none;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.875rem;
  line-height: 1.1;
  cursor: pointer;
}

.copie-suite:hover {
  color: #f5c542;
  background-color: rgba(245, 197, 66, 0.12);
}

/* Cases alignées en haut de la ligne (avec ou sans flèche en dessous). */
.tableau-admin tbody td {
  vertical-align: top;
}

.tableau-admin tbody td.col-nom {
  vertical-align: middle;
}

/* Augmentation entre deux constellations (x1,2 = +20 %), à cheval sur la
   séparation entre les deux cases, à hauteur des champs. */
.tableau-admin td.avec-ecart {
  position: relative;
}

.ecart-points {
  position: absolute;
  left: 0;
  top: 0.75rem;
  z-index: 1;
  transform: translateX(-50%);
  font-size: 0.6875rem;
  color: #ffffff;
  white-space: nowrap;
  pointer-events: none;
}

.ecart-points[data-signe="positif"] { color: #3ecf6a; }
.ecart-points[data-signe="negatif"] { color: #ff5a5a; }

/* ---- Ajout d'un personnage / d'une arme / d'un boss ---- */
.btn-ouvrir-ajout {
  box-sizing: border-box;
  height: 2.4375rem;
  padding: 0 0.875rem;
  border: 2px solid rgba(245, 197, 66, 0.6);
  border-radius: 0.5625rem;
  background-color: rgba(20, 20, 20, 0.45);
  color: #f5c542;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: bold;
  cursor: pointer;
}

.btn-ouvrir-ajout:hover {
  background-color: rgba(245, 197, 66, 0.15);
}

.tag-ajout {
  margin-left: 0.5rem;
  padding: 0.0625rem 0.375rem;
  border-radius: 0.25rem;
  background-color: rgba(62, 207, 106, 0.2);
  color: #3ecf6a;
  font-size: 0.6875rem;
}

.genres-ajout {
  display: flex;
  justify-content: center;
  gap: 0.375rem;
  margin: 0.75rem 0 1rem;
}

.genres-ajout .mode-modificateur {
  padding: 0.375rem 1rem;
  font-size: 0.9375rem;
}

.formulaire-ajout {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.champ-ajout {
  display: grid;
  grid-template-columns: 9rem 1fr;
  align-items: center;
  gap: 0.75rem;
}

.libelle-ajout {
  font-weight: bold;
  text-align: right;
}

.controle-ajout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}

.aide-champ {
  flex-basis: 100%;
  font-size: 0.75rem;
  color: var(--texte-doux);
}

.texte-ajout {
  box-sizing: border-box;
  width: min(20rem, 100%);
  padding: 0.375rem 0.625rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0.375rem;
  background-color: rgba(255, 255, 255, 0.06);
  color: white;
  font-family: inherit;
  font-size: 0.9375rem;
}

.texte-ajout:focus,
.res-ajout:focus {
  outline: none;
  border-color: rgba(245, 197, 66, 0.8);
}

.resistances-ajout {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.resistance-ajout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.resistance-ajout img {
  width: 1.5rem;
  height: 1.5rem;
}

.res-ajout {
  box-sizing: border-box;
  width: 3.25rem;
  padding: 0.25rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0.375rem;
  background-color: rgba(255, 255, 255, 0.06);
  color: white;
  font-family: inherit;
  text-align: center;
}

.res-ajout.invalide {
  border-color: #ff5a5a;
}

/* Résistances saisies en pourcentage : « % » après la case. */
.champ-pourcent {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
}

.champ-pourcent::after {
  content: "%";
  opacity: 0.7;
  font-size: 0.8125rem;
}

/* 999 ou plus : immunisé à cet élément (cf. estImmunise, commun/cartes.js). */
.champ-pourcent.immunise::after {
  content: "Immunisé";
  opacity: 1;
  color: #f5c542;
  font-weight: bold;
}

.titre-section-ajout {
  margin: 1.25rem 0 0.5rem;
  font-size: 1rem;
}

.titre-section-ajout .facultatif {
  font-weight: normal;
  font-size: 0.8125rem;
  color: var(--texte-doux);
}

.images-ajout {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.image-ajout {
  display: grid;
  grid-template-columns: 8rem 1fr auto auto 5.5rem;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.5rem;
  background-color: rgba(255, 255, 255, 0.05);
  font-size: 0.875rem;
}

.libelle-image {
  font-weight: bold;
}

.chemin-image {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chemin-image code {
  overflow-wrap: anywhere;
  font-size: 0.8125rem;
}

.note-image {
  font-size: 0.75rem;
  color: var(--texte-doux);
}

.copier-chemin,
.lien-image {
  padding: 0.125rem 0.5rem;
  border: 1px solid rgba(245, 197, 66, 0.6);
  border-radius: 0.375rem;
  background: none;
  color: #f5c542;
  font-family: inherit;
  font-size: 0.75rem;
  text-decoration: none;
  cursor: pointer;
}

.copier-chemin:hover,
.lien-image:hover {
  background-color: rgba(245, 197, 66, 0.15);
}

.lien-image {
  grid-column: 4;
}

.statut-image {
  grid-column: 5;
  text-align: right;
  font-weight: bold;
  color: var(--texte-doux);
}

.statut-image[data-statut="ok"] { color: #3ecf6a; }
.statut-image[data-statut="manquante"] { color: #ff5a5a; }

.actions-ajout {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 1rem;
}

.message-ajout {
  flex: 1;
  font-size: 0.8125rem;
  color: var(--texte-doux);
}

.message-ajout.succes { color: #3ecf6a; }
.message-ajout.erreur { color: #ff5a5a; }

/* Créer : grisé avec contour vert tant qu'il manque une info, vert sinon. */
.bouton-creer {
  padding: 0.5rem 1.25rem;
  border: 2px solid #3ecf6a;
  border-radius: 0.5rem;
  background-color: #3ecf6a;
  color: white;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: bold;
  cursor: pointer;
}

.bouton-creer:hover {
  filter: brightness(1.1);
}

.bouton-creer:disabled {
  background-color: rgba(80, 80, 80, 0.95);
  color: rgba(255, 255, 255, 0.7);
  cursor: default;
  filter: none;
}

.liste-ajouts {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.ajout-enregistre {
  padding: 0.375rem 0.625rem;
  border-radius: 0.5rem;
  background-color: rgba(255, 255, 255, 0.05);
}

.ajout-enregistre summary {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
}

.ajout-enregistre[open] summary {
  margin-bottom: 0.5rem;
}

.genre-ajout {
  min-width: 5.5rem;
  font-size: 0.75rem;
  color: #f5c542;
}

.nom-ajout {
  font-weight: bold;
}

.ajout-enregistre summary code {
  flex: 1;
  font-size: 0.8125rem;
  color: var(--texte-doux);
}

.supprimer-ajout {
  padding: 0.125rem 0.5rem;
  border: 1px solid #ff5a5a;
  border-radius: 0.375rem;
  background: rgba(80, 80, 80, 0.6);
  color: #ff5a5a;
  font-family: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}

.supprimer-ajout:hover {
  background-color: #ff5a5a;
  color: white;
}

@media (max-width: 700px) {
  .champ-ajout {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  .libelle-ajout {
    text-align: left;
  }

  .image-ajout {
    grid-template-columns: 1fr auto auto;
  }

  .chemin-image {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .lien-image,
  .statut-image {
    grid-column: auto;
  }
}

/* ---- Fenêtre des boss ---- */
.liste-boss {
  margin-top: 0.75rem;
  overflow-x: auto;
}

.tableau-boss {
  width: 100%;
  border-collapse: collapse;
}

.tableau-boss th,
.tableau-boss td {
  padding: 0.375rem;
  text-align: center;
}

.tableau-boss th img {
  width: 1.5rem;
  height: 1.5rem;
}

.tableau-boss tbody tr {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.tableau-boss .col-nom {
  text-align: left;
}

/* Fenêtre des boss : aussi large que le tableau dès l'ouverture (dans la
   limite de l'écran), sans défilement horizontal. Largeurs fixes pour que
   le tableau ne s'élargisse pas pendant la saisie. */
#modal-boss .modal-apercu-contenu {
  width: max-content;
  max-width: calc(100% - 2rem);
}

.tableau-boss .nom-boss {
  width: 15rem;
}

.tableau-boss .infos-boss {
  min-width: 0;
}

/* "Immunisé" sous la case plutôt qu'à côté : la colonne garde sa largeur. */
.tableau-boss .champ-pourcent {
  position: relative;
}

.tableau-boss .champ-pourcent.immunise::after {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6875rem;
  white-space: nowrap;
}

.tableau-boss .champ-pourcent.immunise {
  padding-right: 0.8rem; /* place du "%" retiré */
}

/* Début du chrono : "—" (aucun, pas de bouton Chrono) en grisé. */
.chrono-boss {
  padding: 0.25rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.375rem;
  background-color: #2b2b2b;
  color: inherit;
  font: inherit;
  font-size: 0.875rem;
}

.chrono-boss.sans-chrono {
  color: rgba(255, 255, 255, 0.5);
}

/* Fenêtre des boss : ligne des éléments collée en haut pendant le
   défilement (comme Enregistrer en bas, cf. .actions-figees). La liste ne
   défile pas d'elle-même pour que la fenêtre porte le défilement. */
#liste-boss {
  overflow-x: visible;
}

#liste-boss thead th {
  position: sticky;
  top: -1.25rem; /* collé au bord, par-dessus le padding de la fenêtre */
  z-index: 2;
  background-color: #181818;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.15);
}

.entete-boss {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.miniature-boss {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.06);
}

.miniature-boss img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.infos-boss {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 12rem;
}

.details-boss {
  font-size: 0.75rem;
  color: var(--texte-doux);
}

.nom-boss.invalide {
  border-color: #ff5a5a;
}

/* ---- Buff du théâtre du mois (colonne Théâtre) ---- */
.buff-theatre {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  margin-top: 0.125rem;
  font-size: 0.75rem;
  color: var(--texte-doux);
  cursor: pointer;
  user-select: none;
}

.buff-theatre input {
  margin: 0;
  accent-color: #f5c542;
  cursor: pointer;
}

.tableau-admin td.avec-buff {
  background-color: rgba(245, 197, 66, 0.12);
}

.avec-buff .buff-theatre {
  color: #f5c542;
  font-weight: bold;
}

.retirer-buffs {
  display: block;
  margin: 0.25rem auto 0;
  padding: 0.125rem 0.5rem;
  border: 1px solid #ff5a5a;
  border-radius: 0.375rem;
  background: none;
  color: #ff5a5a;
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: normal;
  white-space: nowrap;
  cursor: pointer;
}

.retirer-buffs:hover {
  background-color: rgba(255, 90, 90, 0.15);
}

.retirer-buffs:disabled {
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--texte-doux);
  background: none;
  cursor: default;
}

/* ---- Bonus de saison (dernière colonne des personnages) : mêmes styles
   que le buff du théâtre ---- */
.bonus-saison {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  color: var(--texte-doux);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.bonus-saison input {
  margin: 0;
  accent-color: #f5c542;
  cursor: pointer;
}

.tableau-admin td.avec-bonus-saison {
  background-color: rgba(245, 197, 66, 0.12);
}

.avec-bonus-saison .bonus-saison {
  color: #f5c542;
  font-weight: bold;
}

.retirer-bonus-saison {
  display: block;
  margin: 0.25rem auto 0;
  padding: 0.125rem 0.5rem;
  border: 1px solid #ff5a5a;
  border-radius: 0.375rem;
  background: none;
  color: #ff5a5a;
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: normal;
  white-space: nowrap;
  cursor: pointer;
}

.retirer-bonus-saison:hover {
  background-color: rgba(255, 90, 90, 0.15);
}

.retirer-bonus-saison:disabled {
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--texte-doux);
  background: none;
  cursor: default;
}

/* Message + Enregistrer des fenêtres Boss et Catégories : figés en bas de
   la fenêtre pendant le défilement de la liste. */
.actions-figees {
  position: sticky;
  bottom: -1.25rem; /* collé au bord, par-dessus le padding de la fenêtre */
  margin: 1rem -1.25rem -1.25rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  background-color: rgba(20, 20, 20, 0.92);
}

/* ---- Fenêtre des catégories d'armes ---- */
.barre-categories {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.choix-categories {
  white-space: nowrap;
}

.choix-categories .filtre-admin + .filtre-admin {
  margin-left: 0.375rem;
}

/* ---- Bans du classé en cours ---- */
.tableau-bans th {
  padding: 0.375rem 0.5rem;
  text-align: left;
  font-size: 0.8125rem;
  color: var(--texte-doux);
}

.tableau-bans td {
  padding: 0.375rem 0.5rem;
  font-size: 0.875rem;
  vertical-align: middle;
}

.photo-ban {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  object-fit: cover;
}

.tableau-bans tr.ban-definitif td:nth-child(2) {
  color: #ff7a85;
  font-weight: bold;
}

/* Mini admin : page en lecture seule (cf. passerEnLectureSeule). */
.lecture-seule #ouvrir-ajout,
.lecture-seule #pied-admin,
.lecture-seule #enregistrer-boss,
.lecture-seule #enregistrer-categories {
  display: none;
}

/* ---- Comparateur : combos personnage + arme ---- */
.liste-comparateur {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.combo-comparateur {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 2px solid transparent;
  border-radius: 0.625rem;
  background-color: rgba(255, 255, 255, 0.05);
}

.combo-comparateur.meilleur {
  border-color: rgba(245, 197, 66, 0.8);
  background-color: rgba(245, 197, 66, 0.08);
}

.entete-combo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.miniature-combo {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.06);
  background-size: cover;
}

.miniature-combo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.champ-comparateur {
  flex: 1;
  min-width: 0;
  padding: 0.3125rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0.375rem;
  background-color: rgba(255, 255, 255, 0.06);
  color: white;
  font-family: inherit;
  font-size: 0.875rem;
}

.champ-comparateur:focus {
  outline: none;
  border-color: rgba(245, 197, 66, 0.8);
}

.champ-comparateur option {
  background-color: #1e1e1e;
}

.retirer-combo {
  border: none;
  background: none;
  color: white;
  font-size: 1.375rem;
  line-height: 1;
  cursor: pointer;
}

.retirer-combo:hover {
  color: #ff5a5a;
}

.retirer-combo:disabled {
  visibility: hidden;
}

.choix-combo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.choix-combo .mode-modificateur {
  padding: 0.1875rem 0.4375rem;
}

.points-combo {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.375rem;
  margin-top: 0.25rem;
  font-variant-numeric: tabular-nums;
}

.detail-points {
  font-size: 0.75rem;
  color: var(--texte-doux);
}

.total-combo {
  font-size: 1.375rem;
  color: #f5c542;
}

.ecart-combo {
  min-height: 1.1em;
  font-size: 0.8125rem;
  text-align: center;
  color: #ff7a85;
}

.combo-comparateur.meilleur .ecart-combo {
  color: #f5c542;
  font-weight: bold;
}

.ajouter-combo {
  min-height: 10rem;
  border: 2px dashed rgba(245, 197, 66, 0.6);
  border-radius: 0.625rem;
  background: none;
  color: #f5c542;
  font-size: 2.5rem;
  cursor: pointer;
}

.ajouter-combo:hover {
  background-color: rgba(245, 197, 66, 0.12);
}

/* Fenêtre Boss : boss du carnage désactivés (cf. initialiserCarnage,
   admin_boss.js). */
.option-carnage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(245, 197, 66, 0.4);
  border-radius: 0.5rem;
}

.option-carnage label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: bold;
  cursor: pointer;
}

/* ---- Box fictives ---- */
.select-fictive {
  width: auto;
}

.select-fictive option {
  background-color: #181818;
}

.actions-fictive {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.375rem;
}

.action-fictive {
  padding: 0.125rem 0.5rem;
  border: 1px solid rgba(245, 197, 66, 0.6);
  border-radius: 0.375rem;
  background: rgba(80, 80, 80, 0.6);
  color: #f5c542;
  font-family: inherit;
  font-size: 0.75rem;
  text-decoration: none;
  cursor: pointer;
}

.action-fictive:hover {
  background-color: rgba(245, 197, 66, 0.15);
}

/* ---- Méthode des bans d'équilibrage (cf. admin_equilibrage.js) ---- */
.liste-equilibrage {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.choix-equilibrage {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.5rem;
  cursor: pointer;
}

.choix-equilibrage.active {
  border-color: rgba(245, 197, 66, 0.7);
}

/* Vue "Perso + signa" (lecture seule) : deux icônes dans le bouton, arme
   signature avec ses points R1, sommes en lecture. */
.vue-sommes {
  gap: 0.125rem;
  color: rgba(245, 197, 66, 0.9);
  font-weight: bold;
}

.vue-sommes img {
  height: 1.375rem;
}

.tableau-admin td.col-signa {
  text-align: left;
  white-space: nowrap;
}

.signa-somme {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.signa-somme .miniature {
  display: inline-block;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.375rem;
  overflow: hidden;
  background-size: cover;
}

.signa-somme .miniature img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nom-signa {
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.8125rem;
  opacity: 0.8;
}

.sans-signa {
  opacity: 0.5;
}

.tableau-admin td.case-somme {
  font-variant-numeric: tabular-nums;
}

/* Valeur alternative des armes (copies en double, signature sans son
   perso) : choix du pourcentage et points qui en résultent (R1..R5). */
.tableau-admin td.col-alternative {
  white-space: nowrap;
}

.tableau-admin td.avec-alternative {
  background-color: rgba(120, 180, 245, 0.12);
}

.choix-alternative {
  padding: 0.125rem 0.25rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0.375rem;
  background-color: rgba(20, 20, 20, 0.6);
  color: inherit;
  font: inherit;
}

.apercu-alternative {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  opacity: 0.75;
}

/* Limites des bans calculés (fenêtre Équilibrage). */
.titre-limites-equilibrage {
  margin: 1rem 0 0.25rem;
}

.tableau-limites input {
  box-sizing: border-box;
  width: 5.5rem;
  padding: 0.125rem 0.25rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0.375rem;
  background-color: rgba(20, 20, 20, 0.6);
  color: inherit;
  font: inherit;
  text-align: center;
}

.limites-equilibrage .bouton-creer {
  margin-top: 0.5rem;
}

.champ-points-max-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.champ-points-max-box input {
  box-sizing: border-box;
  width: 6rem;
  padding: 0.125rem 0.25rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0.375rem;
  background-color: rgba(20, 20, 20, 0.6);
  color: inherit;
  font: inherit;
  text-align: center;
}

/* ---- Feedback des joueurs (cf. admin_feedback.js) ---- */
.filtres-feedback {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.liste-feedbacks {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.carte-feedback {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-left: 4px solid #f5c542;
  border-radius: 0.5rem;
  background-color: rgba(0, 0, 0, 0.25);
}

.carte-feedback.statut-pris_en_compte {
  border-left-color: #5aa9ff;
}

.carte-feedback.statut-termine {
  border-left-color: #7ddc8a;
  opacity: 0.75;
}

.carte-feedback p {
  margin: 0;
}

.entete-feedback {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.infos-feedback {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.statut-feedback {
  font-size: 0.8125rem;
  font-weight: bold;
  white-space: nowrap;
}

/* Texte du joueur tel qu'écrit (retours à la ligne), mots longs coupés. */
.texte-feedback {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.actions-feedback {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Recommandations d'un boss (cf. admin_boss.js) : bouton "n conseils" et
   éditeur déplié sous la ligne du boss. L'éditeur prend la largeur du
   tableau sans l'élargir (width: 0 + min-width: 100%). */
.btn-reco-boss {
  padding: 0.25rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.375rem;
  background-color: #2b2b2b;
  color: inherit;
  font: inherit;
  font-size: 0.875rem;
  white-space: nowrap;
  cursor: pointer;
}

.btn-reco-boss[aria-expanded="true"] {
  border-color: var(--accent-bordure);
}

.tableau-boss tbody tr.ligne-reco-boss {
  border-top: none;
}

.editeur-reco {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 0;
  min-width: 100%;
  padding: 0.5rem;
  border-radius: 0.5rem;
  background-color: rgba(255, 255, 255, 0.04);
  text-align: left;
}

.groupe-reco {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}

.titre-groupe-reco {
  width: 6rem;
  font-weight: bold;
}

.choix-reco {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 1rem;
  background: none;
  color: var(--texte-doux);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}

.choix-reco img {
  width: 1.25rem;
  height: 1.25rem;
  opacity: 0.45;
}

.choix-reco.actif {
  border-color: var(--accent-bordure);
  background-color: var(--accent-fond);
  color: var(--texte);
}

.choix-reco.actif img {
  opacity: 1;
}

.saisie-mecanique {
  width: 12rem;
}

/* ---- Fenêtre Koyns (cf. admin_koyns.js) ---- */
#modal-koyns .modal-apercu-contenu {
  max-width: min(56rem, calc(100% - 2rem));
}

.titre-koyns {
  margin: 1.25rem 0 0.25rem;
}

.ligne-koyns-admin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0.5rem 0;
}

.champ-nombre-koyns {
  width: 5rem;
}

.champ-cosmetique-koyns {
  flex: 1 1 18rem;
  min-width: 0;
}

.liste-exclusifs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.exclusif-koyns {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.25rem 0.125rem 0.5rem;
  border: 1px solid var(--accent-bordure);
  border-radius: 1rem;
  background-color: var(--accent-fond);
  font-size: 0.8125rem;
}

.retirer-exclusif {
  border: none;
  background: none;
  color: inherit;
  font-size: 1rem;
  cursor: pointer;
}