/* Taille des cartes de la collection. Sur téléphone, recalculée par
   ajusterGrille() (my_account.js) pour 4 cartes par ligne. */
:root {
  --taille-carte: 8.25rem;
}

/* Fond d'écran : choisi dans les paramètres du compte (appliquerFond()),
   gris par défaut. */
body {
  background-color: #1e1e1e;
  color: white;
  font-family: var(--police-texte);
  margin: 1.25rem;
}

/* Fond d'écran (calque fixe body::before) : commun/entete.css. */

a {
  color: white;
}

.cache {
  display: none !important;
}

/* ---- Connexion ---- */

/* Zone affichée si l'utilisateur n'est PAS connecté */
#login-gate {
  display: none;
  min-height: 60vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

#login-gate.actif {
  display: flex;
}

#login-gate button {
  padding: 0.875rem 1.75rem;
  font-size: 1.1rem;
  cursor: pointer;
  border-radius: 0.5rem;
  border: none;
  background: #5865F2;
  color: white;
}

#login-gate button:hover {
  background: #4752c4;
}

/* Contenu normal du compte, caché tant qu'on ne sait pas si connecté */
#account-content {
  display: none;
}

#account-content.actif {
  display: block;
}

h1,
h2 {
  margin-top: 1.25rem;
}

/* ---- Barre du haut : Accueil à gauche, compte Discord à droite ---- */

.barre-haut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.auth-zone {
  position: relative;
}

/* Engrenage à gauche dans la bannière du compte : ici elle ouvre le menu
   des paramètres (sur les autres pages, elle ramène à Mon compte). Bouton
   en miroir (photo à droite) : la marge auto le pousse au bord gauche. */
.compte-btn .icone-parametres {
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  margin-right: auto;
  object-fit: contain;
  filter: drop-shadow(0 1px 0.1875rem rgba(0, 0, 0, 0.9));
  transition: transform 0.2s ease;
}

.compte-btn:hover .icone-parametres,
.compte-btn[aria-expanded="true"] .icone-parametres {
  transform: rotate(30deg);
}

/* Photo + nom Discord alignés, cliquables. */
.compte-btn {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  max-width: 100%;
  padding: 0.3125rem 0.75rem 0.3125rem 0.3125rem;
  background-color: rgba(255, 255, 255, 0.06);
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 62.4375rem;
  color: white;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
}

.compte-btn:hover,
.compte-btn[aria-expanded="true"] {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
}

#discord-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

#discord-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Menu déroulant sous le bouton du compte. */
/* Largeur de la bannière du compte (décalée comme elle, cf.
   .avec-banniere2 dans commun/entete.css), fond flouté comme la barre des
   filtres. */
/* Menu déroulant du compte (.menu-compte, .menu-champ, .menu-btn...) :
   commun/entete.css, partagé avec le menu des autres pages (commun/compte.js). */

/* ---- Barre recherche / tri / filtres : tout à la suite sur une ligne
   (revient à la ligne si la place manque). Mêmes styles que la draft. ---- */

.barre-filtres {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.875rem;
}

.tris,
.groupe-filtres {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.tris .tris-label {
  font-size: 0.9375rem;
  opacity: 0.8;
}

.recherche-personnage {
  box-sizing: border-box;
  height: 2.4375rem;
  width: 11.875rem;
  background-color: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.5625rem;
  padding: 0.375rem 0.75rem;
  color: white;
  font-size: 1.0625rem;
}

.filtre-icone input,
.filtre-texte input {
  display: none;
}

.filtre-icone img {
  box-sizing: border-box;
  display: block;
  width: 2.4375rem;
  height: 2.4375rem;
  padding: 0.3125rem;
  object-fit: contain;
  border: 2px solid transparent;
  border-radius: 0.5625rem;
  background-color: rgba(255, 255, 255, 0.06);
  cursor: pointer;
}

.tri-btn,
.filtre-texte span {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  height: 2.4375rem;
  padding: 0.375rem 0.75rem;
  border: 2px solid transparent;
  border-radius: 0.5625rem;
  background-color: rgba(255, 255, 255, 0.06);
  color: white;
  font-size: 1.125rem;
  cursor: pointer;
  white-space: nowrap;
}

.filtre-icone input:checked + img,
.filtre-texte input:checked + span,
.tri-btn.active {
  border-color: rgba(245, 197, 66, 0.8);
  background-color: rgba(245, 197, 66, 0.15);
}

.box-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 0.75rem 0;
}

.box-btn {
  background: transparent;
  color: white;
  border: 2px solid transparent;
  border-radius: 0.5rem;
  padding: 0.375rem 0.625rem;
  cursor: pointer;
  font-size: 0.875rem;
}

.box-btn.active {
  border-color: rgba(255, 255, 255, 0.5);
  background-color: rgba(255, 255, 255, 0.12);
}

/* Crayon de renommage : sur la box optimisée active seulement. */
.renommer-box {
  display: none;
  margin-left: 0.375rem;
  padding: 0 0.125rem;
  border-radius: 0.25rem;
  color: rgba(255, 255, 255, 0.6);
}

.box-btn.active .renommer-box {
  display: inline;
}

.renommer-box:hover {
  color: #f5c542;
  background-color: rgba(245, 197, 66, 0.15);
}

.renommer-input {
  box-sizing: border-box;
  width: 11rem;
  padding: 0.375rem 0.625rem;
  border: 2px solid #f5c542;
  border-radius: 0.5rem;
  background-color: rgba(20, 20, 20, 0.7);
  color: white;
  font-family: inherit;
  font-size: 0.9375rem;
}

.renommer-input:focus {
  outline: none;
}

.box-total {
  margin: 0.75rem 0 1.125rem 0;
  padding: 0.625rem 0.875rem;
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: 0.5rem;
  width: fit-content;
}

/* Grille de cartes sur toute la largeur. Colonnes et écart recalculés par
   ajusterGrille() : même écart entre les cartes, sur les bords et entre les
   lignes. Valeurs ci-dessous = repli avant le 1er calcul. */
.liste-personnages {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--taille-carte));
  gap: 0.75rem;
  justify-content: space-between;
}

/* Rectangle qui englobe le visuel, le réglage de constellation et le niveau. */
.carte-personnage {
  --padding-carte: 0.625rem;
  box-sizing: border-box;
  width: var(--taille-carte);
  min-width: 0;
  padding: var(--padding-carte);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  text-align: center;
  /* Même fond semi-transparent que la barre des box / tris (sans flou :
     trop coûteux sur ~130 cartes). */
  background-color: rgba(20, 20, 20, 0.45);
  border-radius: 0.625rem;
}

/* Visuel carré, image calée dans sa boîte (comme en draft). */
.visuel-personnage {
  position: relative;
  display: block;
  width: calc(var(--taille-carte) - 2 * var(--padding-carte) - 2px);
  height: calc(var(--taille-carte) - 2 * var(--padding-carte) - 2px);
  background-size: cover;
  background-position: center;
  border-radius: 0.5rem;
  overflow: hidden;
}

.visuel-personnage.selectionnable {
  cursor: pointer;
}

/* Non possédé (Full Box) / non sélectionné (autres box). */
.visuel-personnage.estompe {
  opacity: 0.4;
}

.visuel-personnage.estompe-box {
  opacity: 0.45;
}

.image-personnage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.5rem;
  display: block;
}

/* Cercles : constellation en haut à gauche, points en haut à droite,
   niveau en bas à gauche. */
.badge-carte,
.ppc-badge {
  position: absolute;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: bold;
}

.badge-constellation {
  top: 2px;
  left: 2px;
}

.ppc-badge {
  top: 2px;
  right: 2px;
}

.badge-niveau {
  bottom: 2px;
  left: 2px;
}

/* Bas à droite : arme signature possédée (logo détouré de la couleur du
   raffinement) ou, pour une arme, le perso lié. */
.visuel-personnage .character-raffinement,
.visuel-personnage .perso-lie-icone {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 2.125rem;
  height: 2.125rem;
}

.visuel-personnage .character-raffinement {
  object-fit: contain;
  /* Logo d'arme signature : même taille extérieure que les cercles de
     constellation / points ; contour de la couleur du raffinement (4px)
     tracé vers l'intérieur du cercle. */
  box-sizing: border-box;
  border-radius: 50%;
  outline: var(--epaisseur-contour-arme, 4px) solid var(--couleur-ref);
  outline-offset: calc(-1 * var(--epaisseur-contour-arme, 4px));
}

.visuel-personnage .perso-lie-icone {
  width: 3.1875rem;
  height: 3.1875rem;
  right: -0.375rem;
  object-fit: cover;
}

.info-constellation {
  font-size: 0.75rem;
  font-weight: bold;
  opacity: 0.95;
  margin-top: 2px;
  display: inline-block;
  padding: 1px 0.375rem;
  border-radius: 0.375rem;
  background-color: rgba(0, 0, 0, 0.35);
}

.controle-constellation {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.dupliquer-btn {
  width: 1.375rem;
  height: 1.375rem;
  font-size: 0.8125rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.1);
}

.dupliquer-btn:hover {
  background-color: rgba(255, 255, 255, 0.25);
}

.badge-copie {
  font-size: 0.625rem;
  font-weight: normal;
  opacity: 0.8;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 0.25rem;
  padding: 1px 0.25rem;
  vertical-align: middle;
}

.view-selector {
  display: flex;
  gap: 0.5rem;
}

/* Grille descendue pour laisser de l'air sous Personnages / Armes et les
   box. */
#liste-collection {
  margin-top: 0.9375rem;
}

.view-btn {
  background: transparent;
  color: white;
  border: 2px solid transparent;
  border-radius: 0.5rem;
  padding: 0.375rem 0.625rem;
  cursor: pointer;
  font-size: 0.875rem;
}

/* Logos Personnages / Armes. */
.view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.view-btn img {
  display: block;
  height: 1.75rem;
  width: auto;
}

.view-btn.active {
  border-color: rgba(255, 255, 255, 0.5);
  background-color: rgba(255, 255, 255, 0.12);
}

.constellation-btn {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 1.125rem;
  font-weight: bold;
  border-radius: 0.375rem;
  cursor: pointer;
}

/* Même taille que les boutons Personnages / Armes. */
.btn-enregistrer {
  padding: 0.375rem 0.625rem;
  font-size: 0.875rem;
  color: white;
  border: 2px solid rgba(245, 197, 66, 0.8);
  background-color: rgba(245, 197, 66, 0.15);
  border-radius: 0.5rem;
  cursor: pointer;
}

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

.visuel-personnage {
  transition: box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

.visuel-personnage.selectionnee {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.65),
    0 0 0.75rem rgba(255, 255, 255, 0.25);
}

/* Toast de confirmation */
#toast-conteneur {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  z-index: 1000;
  pointer-events: none;
}

.toast {
  padding: 0.625rem 1.125rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: white;
  opacity: 0;
  transform: translateY(0.625rem);
  transition: opacity 0.25s ease, transform 0.25s ease;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}

.toast.visible {
  opacity: 1;
  transform: translateY(0);
}

.toast-succes {
  background-color: rgba(40, 167, 69, 0.92);
}

.toast-erreur {
  background-color: rgba(220, 53, 69, 0.92);
}
.niveau-select {
  max-width: 100%;
  font-size: 0.6875rem;
  padding: 1px 0.25rem;
  border-radius: 0.375rem;
}

/* ---- Paramètres : bannières et fond d'écran ---- */

.modal-parametres {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
}

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

/* Fenêtre de la largeur de la page (comme la grille des cartes), fond
   semi-transparent flouté comme la barre des filtres. */
.modal-parametres-contenu {
  box-sizing: border-box;
  width: calc(100% - 2.5rem);
  height: 88vh;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  background-color: rgba(20, 20, 20, 0.45);
  -webkit-backdrop-filter: blur(0.5rem);
  backdrop-filter: blur(0.5rem);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.75rem;
  overflow: hidden;
}

.modal-parametres-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-parametres-entete h2 {
  margin: 0;
}

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

/* Annuler en bas à gauche, valider en bas à droite. */
.pied-parametres {
  display: flex;
  justify-content: space-between;
  gap: 0.625rem;
}

.btn-secondaire {
  padding: 0.375rem 0.75rem;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.5rem;
  background-color: rgba(20, 20, 20, 0.45);
  color: white;
  font-family: inherit;
  cursor: pointer;
}

/* ---- Polices normalisées : même police et même taille pour tous les
   boutons, champs et libellés (le titre garde sa taille). ---- */

button,
input,
select,
textarea {
  font-family: inherit;
}

.recherche-personnage,
.tris .tris-label,
.tri-btn,
.filtre-texte span,
.btn-clear-filtres,
.box-btn,
.view-btn,
.btn-enregistrer,
.btn-secondaire,
.compte-btn,
.menu-btn,
.menu-champ input,
.menu-champ select,
.box-total {
  font-size: 0.9375rem;
}

/* ---- Filtres, tris, box : cases foncées légèrement transparentes (l'état
   actif doré reste prioritaire). ---- */

.recherche-personnage,
.filtre-icone img,
.tri-btn,
.filtre-texte span,
.btn-clear-filtres,
.box-btn,
.view-btn {
  background-color: rgba(20, 20, 20, 0.45);
}

/* ---- Ligne 2 : Personnages / Armes à gauche, filtres à droite ---- */

.ligne-vues {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.875rem;
}

.ligne-vues .barre-filtres {
  margin-bottom: 0;
  justify-content: flex-end;
}

/* ---- Niveau : la stella est le menu déroulant (menu invisible posé
   dessus : un clic sur le logo ouvre la liste, blanc sur gris) ---- */

.niveau-choix {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  width: 2.125rem;
  height: 2.125rem;
  padding: 0.1875rem;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.7);
  cursor: pointer;
}

.niveau-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: filter 0.15s ease;
}

.niveau-choix .niveau-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.niveau-choix:hover .niveau-logo {
  filter: drop-shadow(0 0 0.25rem rgba(245, 197, 66, 0.9));
}

.niveau-select,
.menu-champ select {
  font-family: inherit;
  font-size: 0.8125rem;
  color: white;
  background-color: #3a3a3a;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0.375rem;
  cursor: pointer;
}

.niveau-select {
  min-width: 0;
  padding: 2px 0.25rem;
}

.niveau-select option,
.menu-champ select option {
  color: white;
  background-color: #3a3a3a;
}

/* ---- Enregistrer : figé en bas à droite, opaque ---- */

.btn-enregistrer-fixe {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 60;
  padding: 0.625rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: bold;
  color: white;
  background-color: #3ecf6a;
  border: 2px solid #3ecf6a;
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.5);
}

.btn-enregistrer-fixe:hover {
  background-color: #3ecf6a;
  border-color: #3ecf6a;
  filter: brightness(1.1);
}

/* Rien à enregistrer : grisé, contour vert. */
.btn-enregistrer-fixe:disabled,
.btn-enregistrer-fixe:disabled:hover {
  color: rgba(255, 255, 255, 0.7);
  background-color: rgba(80, 80, 80, 0.95);
  border-color: #3ecf6a;
  filter: none;
  cursor: default;
}

/* ---- Tout ce qui est cliquable passe au doré au survol ---- */

.tri-btn:hover,
.filtre-texte span:hover,
.filtre-icone img:hover,
.btn-clear-filtres:hover,
.box-btn:hover,
.view-btn:hover,
.btn-secondaire:hover,
.menu-btn:hover,
.menu-champ input:hover,
.menu-champ select:hover,
.niveau-select:hover,
.dupliquer-btn:hover,
.recherche-personnage:hover {
  border-color: rgba(245, 197, 66, 0.8);
  background-color: rgba(245, 197, 66, 0.18);
}

.visuel-personnage.selectionnable:hover,

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

/* ---- Boutons - / + des constellations : ronds noirs, signes blancs ----
   Signes de Classic dessinés 0,053 em trop haut : compensés par un padding
   en haut (le contenu centré descend de la moitié). */

.moins-btn,
.plus-btn {
  box-sizing: border-box;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0.106em 0 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 1.125rem;
  font-weight: bold;
  line-height: 1;
}

.moins-btn:hover,
.plus-btn:hover {
  background-color: black;
  box-shadow: 0 0 0 2px rgba(245, 197, 66, 0.8);
}

/* ---- Total de la box : figé en bas au centre de l'écran ---- */

.box-total {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  z-index: 50;
  margin: 0;
  max-width: calc(100vw - 2rem);
  box-sizing: border-box;
  text-align: center;
  background-color: rgba(20, 20, 20, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.5);
}

/* Place pour le total et le bouton Enregistrer figés en bas. */
body {
  padding-bottom: 5rem;
}

/* Les notifications s'affichent au-dessus du total. */
#toast-conteneur {
  bottom: 4.75rem;
}

/* ---- Ligne des box : bouton de détection automatique à droite ---- */

.ligne-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 1rem 0 0.75rem 0;
}

.ligne-box .box-selector {
  margin: 0;
}

.btn-auto-box {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border: 2px solid rgba(245, 197, 66, 0.8);
  border-radius: 0.5rem;
  background-color: rgba(20, 20, 20, 0.45);
  color: white;
  font-family: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
}

.btn-auto-box:hover {
  background-color: rgba(245, 197, 66, 0.18);
}

.badge-beta {
  padding: 1px 0.4375rem;
  border-radius: 62.4375rem;
  background-color: #f5c542;
  color: #1e1e1e;
  font-size: 0.6875rem;
  font-weight: bold;
  letter-spacing: 0.5px;
  vertical-align: middle;
}

/* ---- Fenêtre de détection automatique ---- */

/* Hauteur ajustée au contenu (fenêtre des paramètres : hauteur fixe). */
.auto-box-contenu {
  height: auto;
  max-height: 88vh;
  overflow-y: auto;
}

.auto-box-consigne p {
  margin: 0 0 0.375rem 0;
  font-size: 0.9375rem;
}

.auto-box-consigne p + p {
  opacity: 0.8;
  font-size: 0.875rem;
}

/* Rappel de vérifier la box (constellations surtout). */
.auto-box-consigne .auto-box-avertissement {
  margin-top: 0.5rem;
  padding: 0.375rem 0.625rem;
  border-left: 3px solid #f5c542;
  border-radius: 0.375rem;
  background-color: rgba(245, 197, 66, 0.12);
  color: #ffe08a;
  opacity: 1;
}

.zone-depot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 11.25rem;
  padding: 1.25rem;
  border: 2px dashed rgba(255, 255, 255, 0.3);
  border-radius: 0.75rem;
  background-color: rgba(20, 20, 20, 0.45);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.zone-depot:hover,
.zone-depot.survol {
  border-color: rgba(245, 197, 66, 0.9);
  background-color: rgba(245, 197, 66, 0.12);
}

.zone-depot input {
  display: none;
}

.zone-depot-titre {
  font-size: 1.125rem;
  font-weight: bold;
}

.zone-depot-sous-titre {
  font-size: 0.875rem;
  opacity: 0.75;
}

.auto-box-etat {
  padding: 0.625rem 0.875rem;
  border-radius: 0.5rem;
  background-color: rgba(20, 20, 20, 0.6);
  font-size: 0.9375rem;
}

.auto-box-etat.erreur {
  background-color: rgba(220, 53, 69, 0.3);
}

.modal-parametres.occupe .fermer-modal,
.modal-parametres.occupe .pied-parametres button {
  opacity: 0.4;
  pointer-events: none;
}

.auto-box-resume {
  margin: 0 0 0.5rem 0;
  font-size: 0.9375rem;
}

.auto-box-resultat h3 {
  margin: 0.625rem 0;
  font-size: 1.0625rem;
}

.auto-box-incertains {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

/* Une ligne par personnage incertain : case de la capture, case du
   personnage (- / +, stella) + choix du personnage, raisons. */
.auto-box-ligne {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.625rem;
  border-radius: 0.625rem;
  background-color: rgba(20, 20, 20, 0.45);
}

.auto-box-vignette {
  flex-shrink: 0;
  max-width: 40%;
  height: auto;
  border-radius: 0.375rem;
}

.auto-box-carte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
  width: var(--taille-carte);
}

.auto-box-carte .carte-personnage {
  width: 100%;
}

.auto-box-choix {
  width: 100%;
  font-family: inherit;
  font-size: 0.8125rem;
  color: white;
  background-color: #3a3a3a;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0.375rem;
  cursor: pointer;
}

.auto-box-choix:hover {
  border-color: rgba(245, 197, 66, 0.8);
}

.auto-box-raisons {
  margin: 0;
  padding-left: 1.125rem;
  font-size: 0.875rem;
  opacity: 0.9;
}

.pied-parametres button:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ---- Réinitialiser la box : bouton rouge en bas à gauche (non figé) ---- */

.btn-reinitialiser,
.btn-danger {
  padding: 0.5rem 1rem;
  border: 2px solid #dc3545;
  border-radius: 0.5rem;
  background-color: rgba(220, 53, 69, 0.85);
  color: white;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: bold;
  cursor: pointer;
}

.btn-reinitialiser {
  display: block;
  margin: 1.75rem auto 0 0;
}

.btn-reinitialiser:hover,
.btn-danger:hover {
  background-color: #dc3545;
  border-color: #ff6b7a;
}

/* Fenêtre de confirmation (petite, hauteur au contenu). */
.modal-confirmation {
  height: auto;
  max-width: 30rem;
}

.modal-confirmation h2 {
  margin: 0;
}

.modal-confirmation p {
  margin: 0;
  font-size: 0.9375rem;
}

.confirmation-note {
  opacity: 0.75;
}

/* "Copie" à la place du bouton dupliquer (copies d'armes). */
.ligne-outils .badge-copie {
  font-size: 0.6875rem;
  padding: 2px 0.375rem;
}

/* ---- Téléphone : la largeur de l'écran est la limite, tout revient à la
   ligne ; 4 cartes par ligne (cf. ajusterGrille). ---- */
@media (max-width: 700px) {
  body {
    margin: 0.75rem;
  }

  .barre-filtres,
  .tris,
  .groupe-filtres,
  .box-selector,
  .view-selector {
    flex-wrap: wrap;
  }

  .recherche-personnage {
    width: 100%;
  }

  .compte-btn {
    font-size: 0.875rem;
  }

  #discord-avatar {
    width: 2rem;
    height: 2rem;
  }

  .liste-personnages {
    gap: 0.625rem;
  }

  /* Cartes étroites : contenu réduit. */
  .carte-personnage {
    --padding-carte: 0.1875rem;
    gap: 0.1875rem;
  }

  .badge-carte,
  .ppc-badge {
    width: 1.25rem;
    height: 1.25rem;
    font-size: 0.625rem;
  }

  .visuel-personnage .character-raffinement {
    width: 1.25rem;
    height: 1.25rem;
  }

  .visuel-personnage .perso-lie-icone {
    width: 1.875rem;
    height: 1.875rem;
    right: -0.25rem;
  }

  .controle-constellation {
    gap: 2px;
  }

  .constellation-btn,
  .dupliquer-btn {
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    font-size: 0.8125rem;
  }

  .moins-btn,
  .plus-btn {
    padding: 0.106em 0 0;
  }

  .info-constellation {
    padding: 1px 0.1875rem;
    font-size: 0.625rem;
  }

  .niveau-select {
    font-size: 0.625rem;
    padding: 0;
  }

  .modal-parametres-contenu {
    width: 100%;
    height: 100%;
    border: none;
    max-width: none;
    border-radius: 0;
    padding: 0.75rem;
  }

  .toast {
    white-space: normal;
  }
}

/* Tri masqué (niveau dans la vue Armes). */
.tri-btn[hidden] {
  display: none;
}

/* Téléphone : total en bas à gauche pour ne pas chevaucher le bouton
   Enregistrer (en bas à droite). */
@media (max-width: 700px) {
  .box-total {
    left: 0.75rem;
    bottom: 0.75rem;
    transform: none;
    max-width: calc(100vw - 10rem);
  }

  .btn-enregistrer-fixe {
    right: 0.75rem;
    bottom: 0.75rem;
  }

  .niveau-choix {
    width: 1.625rem;
    height: 1.625rem;
    padding: 2px;
  }
}

/* Téléphone : détection automatique, une ligne par personnage en colonne. */
@media (max-width: 700px) {
  .auto-box-ligne {
    flex-wrap: wrap;
  }

  .auto-box-vignette {
    max-width: 100%;
  }

  .auto-box-carte {
    width: 6.875rem;
    --taille-carte: 6.875rem;
  }
}

/* ---- Lignes box + tris figées (ordinateur) ----
   Collées en haut de l'écran seulement quand elles l'atteignent, dans un
   rectangle semi-transparent flouté (comme les filtres de la draft sur
   téléphone). */
@media (min-width: 701px) {
  .barre-figee {
    position: sticky;
    top: 0;
    z-index: 40;
    margin: 1rem 0 0.875rem 0;
    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);
  }

  .barre-figee .ligne-box {
    margin: 0 0 0.625rem 0;
  }

  .barre-figee .ligne-vues {
    margin-bottom: 0;
  }
}

/* ---- Menus déroulants (stella, théâtre, Voyageur, Manekin) : texte
   toujours blanc sur l'option survolée ----
   Navigateurs récents : liste entièrement stylée (fond gris, survol doré
   transparent). Sinon : on force au moins le texte blanc. */
.niveau-select option:hover,
.niveau-select option:focus,
.niveau-select option:checked,
.menu-champ select option:hover,
.menu-champ select option:focus,
.menu-champ select option:checked {
  color: white;
}

@supports (appearance: base-select) {
  .niveau-select,
  .menu-champ select,
  .niveau-select::picker(select),
  .menu-champ select::picker(select) {
    appearance: base-select;
  }

  .menu-champ select {
    display: flex;
    align-items: center;
  }

  .niveau-select::picker(select),
  .menu-champ select::picker(select) {
    padding: 0.25rem;
    color: white;
    background-color: #3a3a3a;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 0.5rem;
  }

  .niveau-select option,
  .menu-champ select option {
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    color: white;
    background-color: transparent;
  }

  .niveau-select option:hover,
  .niveau-select option:focus-visible,
  .menu-champ select option:hover,
  .menu-champ select option:focus-visible {
    color: white;
    background-color: rgba(245, 197, 66, 0.35);
  }

  .niveau-select option:checked,
  .menu-champ select option:checked {
    color: #f5c542;
  }

  /* Stella : le menu reste invisible (mais pas transparent, sinon sa liste
     le serait aussi) ; la liste, elle, s'affiche normalement. */
  .niveau-choix .niveau-select,
  .niveau-choix .niveau-select:hover {
    opacity: 1;
    color: transparent;
    background: transparent;
    border: 0;
  }

  .niveau-choix .niveau-select::picker-icon,
  .niveau-choix .niveau-select selectedcontent {
    display: none;
  }

  .niveau-choix .niveau-select::picker(select) {
    min-width: 3.5rem;
  }
}

/* ---- Voyageur : niveau centré en bas, élément en bas à gauche ---- */

.badge-niveau-centre {
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
}

.badge-element {
  bottom: 2px;
  left: 2px;
  box-sizing: border-box;
  padding: 0.25rem;
  object-fit: contain;
}

@media (max-width: 700px) {
  .badge-element {
    padding: 0.125rem;
  }
}

/* ---- Sous les constellations : stella + cœur (persos), dupliquer + cœur
   (armes), côte à côte et de la même taille ---- */
.ligne-outils {
  --taille-outil: 2.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
}

.ligne-outils.outils-weapons {
  --taille-outil: 1.75rem;
}

.ligne-outils .niveau-choix,
.ligne-outils .favori-btn,
.ligne-outils .dupliquer-btn {
  box-sizing: border-box;
  width: var(--taille-outil);
  height: var(--taille-outil);
  flex-shrink: 0;
}

.ligne-outils .dupliquer-btn {
  font-size: calc(var(--taille-outil) * 0.55);
}

@media (max-width: 700px) {
  .ligne-outils {
    --taille-outil: 1.625rem;
    gap: 0.25rem;
  }

  .ligne-outils.outils-weapons {
    --taille-outil: 1.25rem;
  }
}

/* ---- Favoris : cœur (Full Box) ---- */
.favori-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.15s ease, filter 0.15s ease;
}

.favori-btn img {
  display: block;
  width: 100%;
  height: 100%;
}

.favori-btn:hover {
  opacity: 0.75;
}

.favori-btn.actif {
  opacity: 1;
  filter: drop-shadow(0 0 0.25rem rgba(245, 197, 66, 0.9));
}

/* Téléphone : engrenage plus petit. */
@media (max-width: 700px) {
  .compte-btn .icone-parametres {
    width: 1.25rem;
    height: 1.25rem;
  }
}

/* Détection auto : "Appliquer à ma Full Box" suit la règle des boutons
   verts (grisé contour vert tant qu'il n'y a rien à appliquer, vert plein
   ensuite ; pas de doré). */
#auto-box-appliquer {
  border: 2px solid #3ecf6a;
  background-color: #3ecf6a;
  color: white;
  font-weight: bold;
}

#auto-box-appliquer:hover:not(:disabled) {
  background-color: #3ecf6a;
  border-color: #3ecf6a;
  filter: brightness(1.1);
}

#auto-box-appliquer:disabled {
  background-color: rgba(80, 80, 80, 0.95);
  color: rgba(255, 255, 255, 0.7);
  cursor: default;
  opacity: 1;
}

/* ---- Téléphone : barre du haut compacte ----
   Box sur 2 colonnes (4 lignes, boutons de même taille), puis Détection
   auto sur toute la largeur, puis la recherche. Ensuite une seule grille de
   8 cases carrées : Personnages / Armes, tris et filtres à la suite ("Trier :"
   masqué) ; "Possédés" prend 2 cases. */
@media (max-width: 700px) {
  .ligne-box {
    display: block;
  }

  .ligne-box .box-selector {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.375rem;
  }

  .box-selector .box-btn,
  .box-selector .renommer-input {
    box-sizing: border-box;
    width: 100%;
    height: 2.75rem;
    min-width: 0;
  }

  .box-selector .box-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.375rem;
    line-height: 1.15;
    text-align: center;
    overflow: hidden;
  }

  .box-selector .nom-box {
    overflow: hidden;
    overflow-wrap: anywhere;
  }

  .btn-auto-box {
    width: 100%;
    justify-content: center;
    margin-top: 0.375rem;
  }

  .ligne-vues {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0.375rem;
  }

  /* Groupes "aplatis" : leurs boutons sont des cases de la grille. */
  .ligne-vues .view-selector,
  .ligne-vues .barre-filtres,
  .ligne-vues .tris,
  .ligne-vues .groupe-filtres:not([hidden]) {
    display: contents;
  }

  .ligne-vues .tris-label {
    display: none;
  }

  .ligne-vues .recherche-personnage {
    grid-column: 1 / -1;
    order: -1;
    width: 100%;
  }

  .ligne-vues .view-btn,
  .ligne-vues .tri-btn,
  .ligne-vues .btn-clear-filtres,
  .ligne-vues .filtre-icone img,
  .ligne-vues .filtre-texte span {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: auto;
    aspect-ratio: 1;
    padding: 0.25rem;
  }

  .ligne-vues .filtre-icone,
  .ligne-vues .filtre-texte {
    display: block;
    min-width: 0;
  }

  .ligne-vues .filtre-texte span {
    justify-content: center;
    font-size: 0.8125rem;
  }

  /* Logos réduits à la taille des cases (~ 2,25rem sur un écran étroit). */
  .ligne-vues .tri-logo,
  .ligne-vues .btn-clear-filtres img {
    height: 1.25rem;
  }

  /* Vues : Armes x 1,3 ; Personnages (une seule tête, étroite) à la même
     hauteur. */
  .ligne-vues .view-btn .logo-vue-armes,
  .ligne-vues .view-btn .logo-vue-personnages {
    height: 1.625rem;
  }

  .ligne-vues .tri-logo-constellation {
    height: 1.4375rem;
  }

  .ligne-vues .tri-logo-niveau {
    height: 1.5rem;
  }

  .ligne-vues .tri-etoile {
    font-size: 1.25em;
  }

  /* "Possédés" / "Sélectionnés" : 2 cases de large, même hauteur que les
     autres (étirée sur la hauteur de la ligne), police inchangée. */
  .ligne-vues .filtre-texte:has(#filtre-possedes) {
    grid-column: span 2;
    display: flex;
  }

  .ligne-vues .filtre-texte:has(#filtre-possedes) span {
    flex: 1 1 auto;
    aspect-ratio: auto;
    height: auto;
  }
}

/* Catégories d'armes (support, perma) : vue Armes seulement. */
.filtres-categories-armes[hidden] {
  display: none;
}

/* Lien de stream refusé (Twitch / YouTube uniquement). */
#stream.invalide {
  border-color: #ff7a85;
}

.erreur-champ {
  font-size: 0.75rem;
  color: #ff7a85;
}

/* Vitrine : conformité aux modes 2v2, 3v3 et 4v4 (sous le total). */
.statut-vitrine {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: #ff9b9b;
}

.statut-vitrine.conforme {
  color: #9be59b;
}

/* Copier une box optimisée enregistrée dans la box active (menu déroulant). */
.copie-box {
  position: relative;
  display: flex;
  align-items: center;
}

.btn-copier-box {
  padding: 0.25rem 0.625rem;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 0.5rem;
  background-color: rgba(20, 20, 20, 0.45);
  color: white;
  font-family: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}

.btn-copier-box:hover {
  border-color: rgba(245, 197, 66, 0.8);
  background-color: rgba(245, 197, 66, 0.18);
}

.menu-copie-box {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  min-width: 12rem;
  padding: 0.25rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.5rem;
  background-color: #2b2b2b;
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.5);
}

.option-copie-box {
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  color: white;
  font-family: inherit;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
}

.option-copie-box:hover {
  background-color: rgba(245, 197, 66, 0.18);
}

/* ---- Box fictive (my_account?box_fictive=<id>, cf. preparerModeFictif) :
   full box seulement, champs du compte connecté cachés. ---- */
.mode-fictif .box-btn:not([data-box="full"], [data-box="opti1"]),
.mode-fictif .renommer-box,
.mode-fictif #copie-box,
.mode-fictif #menu-compte .menu-champ,
.mode-fictif #btn-enregistrer-compte,
.mode-fictif #btn-parametres {
  display: none;
}

.bandeau-fictif {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin: 0 auto 1rem;
  padding: 0.75rem 1rem;
  max-width: 60rem;
  border: 2px solid rgba(245, 197, 66, 0.6);
  border-radius: 0.75rem;
  background-color: rgba(20, 20, 20, 0.7);
}

.bandeau-fictif p {
  flex: 1 1 20rem;
  margin: 0;
  font-size: 0.875rem;
}

.mode-fictif .bandeau-fictif .menu-champ {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.lien-admin-fictif {
  color: #f5c542;
  font-weight: bold;
}