/* ---- Polices (DB/fonts) ----
   Classic (HYWenHei 55W / 75W, police de Genshin) partout, en gras pour
   tout ce qui est en gras (font-weight 600 et plus) ; Titre (HYWenHei 85W)
   pour les titres. Versions allégées en WOFF2 (sans les caractères
   chinois : ~30 Ko au lieu de 2 Mo). Classic n'a pas certains accents
   (â ç ô î û ï œ É È À Ç) : ces lettres s'affichent en Arial. */
@font-face {
  font-family: "Classic";
  src: url("/DB/fonts/classic-latin.woff2") format("woff2");
  font-weight: 100 500;
  font-display: swap;
}

@font-face {
  font-family: "Classic";
  src: url("/DB/fonts/classic_bold-latin.woff2") format("woff2");
  font-weight: 600 900;
  font-display: swap;
}

@font-face {
  font-family: "Titre";
  src: url("/DB/fonts/title.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --police-texte: "Classic", Arial, sans-serif;
  --police-titre: "Titre", "Classic", Arial, sans-serif;
}

/* Champs et boutons n'héritent pas de la police par défaut. */
body,
button,
input,
select,
textarea {
  font-family: var(--police-texte);
}

/* Pseudos des joueurs (nom Discord affiché) : police des titres, partout.
   .pseudo : pseudo dans une phrase (cf. htmlPseudo, commun/cartes.js). */
.pseudo,
.compte-lien > span,
#discord-name,
.account-pseudo,
.match-nom,
.joueur-nom,
.nom-temps-litige,
.joueur-litiges,
.nom-joueur,
.namecard-tableau .nom-complet {
  font-family: var(--police-titre);
}

/* Titres : balises de titre et titres en texte simple (annonce J1 / J2,
   vérification des temps, onglets de personnalisation, détection auto). */
h1,
h2,
h3,
h4,
.titre-page,
.titre-section,
.titre-verification,
.annonce-titre,
.apercu-titre,
.zone-depot-titre {
  font-family: var(--police-titre);
}

/* ---- Échelle du site ----
   Toutes les tailles sont en rem. Base fixe : 125 % de la taille de police
   du navigateur (20px par défaut) sur ordi, 100 % (16px) sur téléphone.
   Les px CSS sont déjà mis à l'échelle par le système selon la densité de
   l'écran (ex. 150 % sur un écran 4K) : une case garde à peu près la même
   taille à l'œil sur un écran HD ou 4K, et un grand écran affiche plus de
   contenu (grilles fluides) au lieu de tout agrandir. Le zoom du navigateur
   fonctionne normalement. */
html {
  /* --zoom-site : curseur de zoom du site sur ordinateur (commun/zoom.js). */
  font-size: calc(125% * var(--zoom-site, 1));
}

@media (max-width: 700px) {
  html {
    font-size: 100%;
  }

  /* Cercles plus petits sur téléphone : contour du logo d'arme réduit. */
  :root {
    --epaisseur-contour-arme: 1px;
  }
}

/* En-tête commun à toutes les pages : lien de retour à l'accueil et titre
   de la page. */

/* Retour à l'accueil : bouton pilule avec flèche. */
.lien-accueil {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.625rem;
  padding: 0.375rem 1rem 0.375rem 0.75rem;
  background-color: rgba(30, 30, 30, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 62.4375rem;
  color: white;
  font-family: var(--police-texte);
  font-size: 0.9375rem;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.lien-accueil::before {
  content: "←";
  font-size: 1.0625rem;
  line-height: 1;
}

.lien-accueil:hover,
.lien-accueil:focus-visible {
  background-color: rgba(245, 197, 66, 0.15);
  border-color: rgba(245, 197, 66, 0.8);
}

/* Barre du haut de Mon compte : aligné avec le bouton du compte. */
.barre-haut .lien-accueil {
  margin-bottom: 0;
}

/* Titre principal des pages : centré, même police et même taille que
   "Jugement des Archons" sur l'accueil. */
.titre-page {
  margin: 1.5rem 0 1.5rem;
  text-align: center;
  font-family: var(--police-titre);
  font-size: 2.5rem;
  font-weight: bold;
  line-height: 1.2;
}

@media (max-width: 700px) {
  .titre-page {
    font-size: 1.875rem;
  }
}

/* ---- Fond d'écran choisi dans Mon compte (cf. commun/fond.js) ----
   Calque fixe de la taille de l'écran : reste figé et centré au défilement,
   y compris sur téléphone (background-attachment: fixed y est ignoré). */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* Plus grande hauteur d'écran (barres du navigateur masquées) : le fond
     ne bouge ni ne se redimensionne quand elles apparaissent. */
  height: 100vh;
  height: 100lvh;
  z-index: -1;
  background-image: var(--fond-ecran, none);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* ---- Bouton du compte (cf. commun/compte.js) : photo + pseudo, lien vers
   Mon compte ; en haut à droite des pages. ---- */

.zone-compte {
  display: flex;
  justify-content: flex-end;
}

.zone-compte.flottante {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 100;
}

.compte-lien {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.3125rem 0.875rem 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-family: var(--police-texte);
  font-weight: bold;
  text-decoration: none;
}

/* Pseudo trop long : coupé avec "…" (comme #discord-name sur Mon compte),
   pour ne pas faire déborder la bannière (téléphone). */
.compte-lien > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compte-lien:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
}

.compte-lien img {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  object-fit: cover;
}

.compte-connexion {
  padding: 0.5rem 1rem;
  background-color: #5865F2;
  border-radius: 62.4375rem;
  color: white;
  font-family: var(--police-texte);
  font-size: 0.9375rem;
  font-weight: bold;
  text-decoration: none;
}

.compte-connexion:hover {
  background-color: #4752c4;
}

/* Bouton du compte = la deuxième bannière (format 1000x137), inversée
   gauche / droite : photo et pseudo calés à droite, sur la partie sombre de
   l'image. La bannière s'arrête au centre de la photo (rien de visible ni de
   cliquable à sa droite). Sans cadre ni dégradé ajouté. */
.avec-banniere2,
.avec-banniere2:hover,
.avec-banniere2[aria-expanded="true"] {
  /* Largeur de la bannière entière ; hauteur au format 1000x137 (recadrée
     sur téléphone plutôt que d'écraser la photo) ; photo 2 px plus basse. */
  --largeur-banniere: min(26.25rem, 100vw - 6.875rem);
  --hauteur-banniere: max(3.125rem, calc(var(--largeur-banniere) * 0.137));
  --taille-avatar: calc(var(--hauteur-banniere) - 0.125rem);
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  /* Sans la partie à droite de la photo (2.8125rem) : la photo arrive au
     bord droit du bouton. Décalage : photo 20 px plus à droite qu'avec
     l'ancienne bannière (déjà décalée de 20 px), soit
     1.25rem - 2.8125rem + 1.25rem. */
  /* Puis 20 px plus court (côté gauche, la photo ne bouge pas). */
  width: calc(var(--largeur-banniere) - 2.8125rem - 1.25rem);
  height: var(--hauteur-banniere);
  left: -0.3125rem;
  flex-direction: row-reverse;
  justify-content: flex-start;
  padding: 0 0 0 0.875rem;
  border: none;
  border-radius: 0.5rem;
  background-color: transparent;
  background-image: none;
  text-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.9);
  box-shadow: none;
  transition: transform 0.15s ease, filter 0.15s ease;
}

/* Photo de profil : hauteur de la bannière moins 2 px, centrée (dans le
   bouton .compte-photo sur les autres pages que Mon compte). */
.avec-banniere2 > .compte-photo {
  align-self: center;
}

.avec-banniere2 > img,
.avec-banniere2 > .compte-photo img,
.avec-banniere2 #discord-avatar {
  align-self: center;
  width: var(--taille-avatar);
  height: var(--taille-avatar);
  object-fit: cover;
}

/* Image de la bannière, coupée au centre de la photo. Calée sur le bord
   gauche du bouton (côté droit de l'image avant l'inversion, d'où "right") :
   son extrémité arrondie reste entière, c'est la partie en fondu qui est
   coupée à droite. */
.avec-banniere2::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: calc(var(--taille-avatar) / 2);
  z-index: -1;
  border-radius: inherit;
  background-image: var(--banniere2);
  background-size: cover;
  background-position: right center;
  transform: scaleX(-1);
}

/* Survol : comme les cartes de Tous les comptes (menu ouvert : idem). */
.avec-banniere2:hover,
.avec-banniere2.menu-ouvert,
.avec-banniere2[aria-expanded="true"] {
  transform: translateY(-2px);
  filter: brightness(1.12);
}

/* ---- Menu déroulant du compte : sous le bouton du compte, ouvert par la
   photo de profil (commun/compte.js) ou par le bouton entier sur Mon
   compte ---- */

/* Bouton du compte + menu (le menu se cale sous le bouton). */
.compte-menu-zone {
  position: relative;
}

.menu-compte {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: -0.3125rem;
  z-index: 500;
  box-sizing: border-box;
  width: 100%;
  min-width: 13rem;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  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.2);
  border-radius: 0.75rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.5);
}

.menu-champ {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.menu-champ label,
.menu-champ .label-champ {
  font-size: 0.8125rem;
  opacity: 0.8;
}

/* Valeur calculée, pas modifiable (ex. palier de théâtre de Mon compte). */
.menu-champ .valeur-champ {
  font-size: 0.9375rem;
}

.menu-champ input,
.menu-champ select {
  box-sizing: border-box;
  width: 100%;
  height: 2.25rem;
  padding: 0.25rem 0.625rem;
  background-color: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.5rem;
  color: white;
  font-size: 0.9375rem;
}

.menu-champ select option {
  background-color: #2a2a2a;
}

.menu-separateur {
  height: 1px;
  background-color: rgba(255, 255, 255, 0.15);
}

.menu-btn {
  box-sizing: border-box;
  width: 100%;
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  background-color: transparent;
  border: none;
  border-radius: 0.5rem;
  color: white;
  font-size: 0.9375rem;
  text-align: left;
  cursor: pointer;
}

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

.menu-btn:has(.menu-icone) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.menu-icone {
  width: 1.375rem;
  height: 1.375rem;
  object-fit: contain;
  flex: 0 0 auto;
}

/* Boutons Enregistrer (menu, page, personnalisation) : grisés avec un
   contour vert tant que rien n'a changé, verts pleins dès qu'il y a une
   modification. */
.menu-btn-principal {
  text-align: center;
  font-weight: bold;
  background-color: #3ecf6a;
  border: 2px solid #3ecf6a;
}

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

.menu-btn-principal:disabled,
.menu-btn-principal.menu-btn-principal:disabled:hover {
  background-color: rgba(80, 80, 80, 0.6);
  color: rgba(255, 255, 255, 0.7);
  filter: none;
  cursor: default;
}

/* Autres pages : photo de profil cliquable (menu), le reste de la bannière
   mène à Mon compte. */
.compte-lien {
  cursor: pointer;
}

.compte-photo {
  display: flex;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.compte-photo:focus-visible {
  outline: 2px solid var(--accent, #f5c542);
  outline-offset: 2px;
}

.compte-lien .compte-photo img {
  display: block;
}

.menu-compte.cache {
  display: none;
}

.menu-etat {
  margin: 0;
  font-size: 0.8125rem;
  text-align: center;
  opacity: 0.85;
}

/* ---- Bannière d'un joueur (deuxième bannière, format 1000x137), même
   format que le bouton du compte (liste des comptes, historique) ----
   .banniere-joueur : image inversée, photo à droite ;
   .banniere-joueur.cote-gauche : image dans son sens, photo à gauche.
   L'image s'arrête au centre de la photo (rien au-delà) et garde son
   extrémité arrondie entière (la partie en fondu est coupée).
   Comme le bouton du compte (.avec-banniere2) : photo de taille fixe
   (--taille-avatar, à régler par page), bannière haute de la photo + 2 px
   (plus si le contenu passe à la ligne), image recadrée. Pas d'aspect-ratio
   ni de photo étirée à la hauteur de la bannière : WebKit (tous les
   navigateurs iPhone) la déformait en ovale. */
.banniere-joueur {
  --taille-avatar: 3.5rem;
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  min-height: calc(var(--taille-avatar) + 2px);
  padding: 0 0 0 0.875rem;
  border-radius: 0.5rem;
  text-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.9);
}

.banniere-joueur.cote-gauche {
  flex-direction: row;
  padding: 0 0.875rem 0 0;
}

.banniere-joueur::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: calc(var(--taille-avatar) / 2);
  z-index: -1;
  border-radius: inherit;
  background-image: var(--banniere2);
  background-size: cover;
  background-position: right center;
  transform: scaleX(-1);
}

.banniere-joueur.cote-gauche::before {
  left: calc(var(--taille-avatar) / 2);
  right: 0;
  transform: none;
}

/* Photo de profil : taille fixe, centrée en hauteur, au bord. */
.banniere-joueur > .photo-joueur {
  box-sizing: border-box;
  align-self: center;
  flex-shrink: 0;
  width: var(--taille-avatar);
  height: var(--taille-avatar);
  border-radius: 50%;
  object-fit: cover;
  background: #333;
}

@media (max-width: 700px) {
  /* Téléphone : bouton du compte au-dessus du reste, calé à droite. */
  .zone-compte.flottante {
    position: static;
    margin-bottom: 0.5rem;
  }
}

/* ---- Médaille du théâtre à côté d'un pseudo (namecards, bannières,
   bouton du compte ; cf. htmlMedailleTheatre dans commun/cartes.js et
   appliquerMedaille dans commun/fond.js) : 1,3 x la hauteur du texte au
   maximum, sur un rond gris qui la fait ressortir. ---- */
.medaille-theatre {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 1.3em;
  height: 1.3em;
  padding: 0.1em;
  border-radius: 50%;
  background-color: rgba(60, 60, 60, 0.8);
  object-fit: contain;
  vertical-align: middle;
}

/* Pas la taille de la photo du bouton du compte (règles .compte-lien img et
   .avec-banniere2 > img) ; même taille que sur les bannières de Tous les
   comptes. Mon compte (.compte-btn, texte plus petit sur téléphone) : même
   taille en rem que le bouton des autres pages (texte à 1rem). */
.compte-lien .medaille-theatre {
  width: 2em;
  height: 2em;
}

.compte-btn .medaille-theatre {
  width: 2rem;
  height: 2rem;
}

/* Icône dans le texte, à la place d'un emoji (ICONE_TROPHEE,
   ICONE_ENTRAINEMENT de commun/cartes.js) : à la hauteur du texte. */
.icone-texte {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.25em;
  object-fit: contain;
}

/* ---- Zoom du site (ordinateur, cf. commun/zoom.js) : curseur horizontal
   dans le menu des paramètres du compte ---- */
.zoom-site[hidden] {
  display: none;
}

.zoom-site-note {
  opacity: 0.7;
}

.zoom-site-ligne {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.menu-champ .zoom-site-curseur {
  flex: 1;
  min-width: 0;
  height: 1.5rem;
  padding: 0;
  border: none;
  background: none;
  accent-color: #f5c542;
  cursor: pointer;
}

/* Boutons − / + : 5 % par clic, répété si maintenu. */
.zoom-site-pas {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.5rem;
  background-color: rgba(255, 255, 255, 0.08);
  color: white;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  touch-action: none;
}

.zoom-site-pas:hover {
  border-color: rgba(245, 197, 66, 0.8);
}

/* Valeur actuelle : clic pour revenir à 100 %. */
.zoom-site-valeur {
  flex: 0 0 auto;
  min-width: 3.5rem;
  padding: 0.25rem 0.375rem;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.5rem;
  background-color: rgba(255, 255, 255, 0.08);
  color: white;
  font-size: 0.8125rem;
  font-weight: bold;
  white-space: nowrap;
  cursor: pointer;
}

.zoom-site-valeur:hover {
  border-color: rgba(245, 197, 66, 0.8);
}

/* Bonus de connexion d'un événement (Koyns, cf. commun/compte.js). */
.annonce-koyns {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  z-index: 1000;
  transform: translateX(-50%);
  max-width: calc(100% - 2rem);
  padding: 0.75rem 1.25rem;
  border: 1px solid rgba(245, 197, 66, 0.8);
  border-radius: 0.75rem;
  background-color: rgba(20, 20, 20, 0.95);
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  box-shadow: 0 0 1.5rem rgba(245, 197, 66, 0.3);
}

/* Icône du Koyn à côté des montants (cf. commun/koyns.js). */
.icone-koyn {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.3em;
  object-fit: contain;
}