/* Bande « profil » de l'accueil + page « Mon compte ». Utilise les variables de style.css. */

/* --- Bande profil (accueil) ------------------------------------------- */
.bande-profil { display: flex; align-items: center; gap: 0.75rem 1.25rem; flex-wrap: wrap;
  margin: 1rem 0; padding: 0.75rem 1rem; background: var(--surface);
  border: 1px solid var(--bordure); border-radius: var(--arrondi); }
.bande-profil[hidden] { display: none; }
.bp-identite { display: flex; align-items: center; gap: 0.75rem; flex: 1 1 14rem; min-width: 0;
  color: inherit; text-decoration: none; }
.bp-avatar { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; font-size: 1.7rem; overflow: hidden; white-space: nowrap;
  border-radius: 50%; background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border: 1px solid var(--bordure); }
.bp-textes { display: grid; min-width: 0; }
.bp-textes strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.05rem; }
.bp-titre { color: var(--premium); font-size: 0.85rem; }
.bp-rang { margin: 0; font-size: 0.9rem; padding: 0.3rem 0.75rem; border-radius: 999px;
  background: var(--fond); border: 1px solid var(--bordure); white-space: nowrap; }
.bp-rang b { color: var(--premium); }
.bp-liens { display: flex; gap: 0.5rem; }
.bp-lien { position: relative; display: grid; justify-items: center; align-content: center; gap: 0.15rem;
  min-width: 4.5rem; min-height: 3.5rem; padding: 0.4rem 0.6rem; color: var(--texte);
  text-decoration: none; font-size: 0.75rem; font-weight: 600; border: 1px solid var(--bordure);
  border-radius: 10px; background: var(--fond); }
.bp-lien:hover { border-color: var(--accent); }
.bp-lien svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.bp-lien.diamant svg { color: #2a9fd6; }
.bp-lien.couronne svg { color: var(--premium); }
.bp-compteur { font-variant-numeric: tabular-nums; color: var(--premium); }
/* Raccourcis en icônes seules : le texte (Mon compte, Boutique, Classement) reste lisible par les lecteurs d'écran. */
.bp-lien span:not(.bp-compteur) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 560px) {
  .bp-liens { width: 100%; }
  .bp-lien { flex: 1; }
  .bp-rang { width: 100%; justify-content: space-between; font-size: 0.82rem; padding-inline: 0.6rem; }
}

/* --- Page Mon compte ---------------------------------------------------- */
.compte-entete { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.compte-entete .avatar-equipe { width: 4.5rem; height: 4.5rem; font-size: 2.6rem; flex: none; }
.compte-identite { flex: 1 1 9rem; min-width: 0; display: grid; gap: 0.15rem; }
.compte-identite h1 { margin: 0; font-size: 1.5rem; overflow-wrap: anywhere; }
.compte-resume { margin: 0.25rem 0 0; }
.compte-resume b { color: var(--premium); }
.carte-mode-profil { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; border-color: var(--premium); }
.carte-mode-profil[hidden] { display: none; }
.carte-mode-profil h2, .carte-mode-profil p { margin: 0; }
.carte-mode-profil h2 { margin-block: 0.2rem 0.35rem; font-size: 1.15rem; }
.carte-mode-profil .bouton { flex: none; }
@media (max-width: 480px) { .carte-mode-profil .bouton { width: 100%; } }

.onglets-compte { max-width: none; margin-inline: 0; position: sticky; top: 0; z-index: 5;
  padding: 0.5rem 0; background: var(--fond); }
.onglets-compte button .badge { margin-left: 0.4rem; align-self: auto; background: var(--accent);
  color: var(--accent-texte); border-color: var(--accent); }
.panneau-compte[hidden] { display: none; }
.panneau-compte > section { margin-bottom: 1.5rem; }

.parametres { display: grid; gap: 1rem; }
@media (min-width: 760px) { .parametres { grid-template-columns: 1fr 1fr; } .parametres .large { grid-column: 1 / -1; } }
.parametres h2 { margin-top: 0; font-size: 1.1rem; }
@media (max-width: 480px) { .panneau-compte .soldes { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .panneau-compte .solde .montant { font-size: 1.5rem; } }
.bp-rang { display: flex; gap: 0.4rem 0.9rem; }
.bp-score b { color: var(--premium); }

/* --- Page Profil joueur (joueur.html) ----------------------------------- */
.joueur-barre-haut { display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.lien-retour-classements { font-weight: 600; text-decoration: none; }
.lien-retour-classements:hover { text-decoration: underline; }
.joueur-recherche { display: flex; gap: 0.5rem; align-items: center; flex: 1 1 15rem; max-width: 24rem; margin-left: auto; }
.joueur-recherche input { flex: 1; border-radius: 999px; background: var(--surface); }
.joueur-recherche .bouton { flex: none; }

.joueur-entete { position: relative; overflow: hidden; margin-top: 0; }
.joueur-entete[data-profil-theme="sombre"] {
  border-color: #4f638c;
  background: linear-gradient(135deg, color-mix(in srgb, #172135 28%, var(--surface)), var(--surface));
}
.joueur-entete[data-profil-theme="retro_arcade"] {
  border-color: #41f0a0;
  background: linear-gradient(135deg, color-mix(in srgb, #41f0a0 16%, var(--surface)),
    color-mix(in srgb, #ff5bd8 12%, var(--surface)), var(--surface));
}
.joueur-entete[data-profil-theme="or_imperial"] {
  border-color: #d4a024;
  background: linear-gradient(135deg, color-mix(in srgb, #f2c14e 22%, var(--surface)),
    color-mix(in srgb, #3b1930 14%, var(--surface)), var(--surface));
}
.joueur-nom-ligne { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.joueur-badges { display: flex; gap: 0.45rem; flex-wrap: wrap; margin-top: 0.35rem; }
.joueur-pastille { text-decoration: none; color: var(--texte); }
.joueur-pastille-troupe:hover { border-color: var(--accent); color: var(--accent); }
.joueur-actions-entete { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.joueur-duel { margin-top: 0; margin-bottom: 1.5rem;
  border-color: color-mix(in srgb, var(--accent) 50%, var(--bordure));
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface)); }
.joueur-duel h2 { margin: 0 0 0.25rem; font-size: 1.05rem; }
.joueur-duel p { margin: 0; }

.joueur-palmares { margin-top: 1.5rem; }
.joueur-palmares-entete { display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.85rem; }
.joueur-palmares-entete h2 { margin: 0; }
.joueur-controles { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.joueur-controles input { width: auto; min-width: 12rem; min-height: 38px; padding: 0.35rem 0.85rem;
  border-radius: 999px; background: var(--surface); font-size: 0.9rem; }
.joueur-tris { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.joueur-puce-tri { min-height: 38px; padding: 0.3rem 0.8rem; font-size: 0.85rem; }

.joueur-table th, .joueur-table td { vertical-align: middle; }
.joueur-score-cell, .joueur-rang-cell { font-weight: 700; white-space: nowrap; }
.joueur-actions-jeu { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.joueur-btn-action { min-height: 36px; padding: 0.25rem 0.65rem; font-size: 0.82rem; }

@media (max-width: 560px) {
  .joueur-recherche { max-width: none; width: 100%; }
  .joueur-actions-entete { width: 100%; }
  .joueur-actions-entete .bouton { flex: 1 1 auto; }
  .joueur-controles, .joueur-controles input { width: 100%; }
}