/* Site public de Denhold : direction artistique « Acier » (hq/marque/README.md),
   jetons repris de crates/panel/web/src/styles.css (finitions du 12/10/2026 :
   accent violet, titres en Saira Condensed, pochoir réservé au nom DENHOLD).
   Écrite à la main : pas de chaîne Node pour le site. */

@font-face {
  font-family: "Black Ops One";
  src: url("/assets/fonts/black-ops-one-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Condensed";
  src: url("/assets/fonts/roboto-condensed-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Condensed";
  src: url("/assets/fonts/roboto-condensed-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Condensed";
  src: url("/assets/fonts/roboto-condensed-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Saira Condensed";
  src: url("/assets/fonts/saira-condensed-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Saira Condensed";
  src: url("/assets/fonts/saira-condensed-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --fond: #0d0e10;
  --fond-2: #131417;
  --panneau: #17191c;
  --panneau-2: #202328;
  --bordure: rgba(205, 210, 216, 0.12);
  --bordure-forte: rgba(205, 210, 216, 0.28);
  --texte: #eceef0;
  --attenue: #8e959c;
  --accent: #9d7cff;
  --accent-fonce: #8a62ff;
  --vert: #7fb86a;
  --alerte: #e3bb4a;
  --police-titre: "Saira Condensed", "Roboto Condensed", sans-serif;
  --rouge: #e23b36;
  --or: #e4c06a;
  --argent: #c9ced3;
  --bronze: #c08457;
  /* Acier mat : surfaces solides (plus de dégradés) ; l'arête reste un léger
     reflet en ombre. */
  --acier: #191c20;
  --acier-clair: #24272d;
  /* Fond des rendus d'armes : assez clair pour les véhicules sombres. */
  --plaque: #2a2d33;
  --arete: inset 0 1px 0 rgba(236, 238, 240, 0.06);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--fond);
  color: var(--texte);
  font-family: "Roboto Condensed", ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

main {
  flex: 1;
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1rem 3rem;
}

h1,
h2,
h3 {
  font-family: var(--police-titre);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.15;
  margin: 0 0 0.75rem;
}
h1 {
  font-size: clamp(1.9rem, 5vw, 3rem);
}
h2 {
  font-size: 1.4rem;
}
h3 {
  font-size: 1.05rem;
}

a {
  color: var(--accent);
}
a:hover {
  color: var(--texte);
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.attenue {
  color: var(--attenue);
}

.entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem clamp(1rem, 4vw, 2.5rem);
  width: 100%;
  background: var(--acier);
  border-bottom: 1px solid var(--bordure);
  box-shadow: var(--arete);
}
.marque {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--texte);
  text-decoration: none;
  font-family: "Black Ops One", sans-serif;
  letter-spacing: 0.12em;
}

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1rem;
  border: 1px solid var(--bordure);
  border-radius: 3px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.bouton-principal {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--fond);
}
.bouton-principal:hover {
  background: var(--accent-fonce);
  color: var(--fond);
}
.bouton-secondaire {
  background: var(--acier-clair);
  color: var(--texte);
  box-shadow: var(--arete);
}
.bouton-secondaire:hover {
  background: var(--panneau-2);
}

.accroche {
  padding: 3.5rem 0 2.5rem;
  max-width: 46rem;
}
.chapeau {
  color: var(--attenue);
  font-size: 1.15rem;
  margin: 0 0 1.5rem;
}
.surtitre {
  color: var(--attenue);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8rem;
  margin: 0 0 0.25rem;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin: 2rem 0 0;
}
.chiffres dt {
  color: var(--attenue);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.chiffres dd {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.section {
  padding: 2rem 0 1rem;
}

.grille {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}
.grille-2 {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr));
}

/* Carte : bordure fine et coins à peine adoucis, comme le panneau. */
.carte {
  border: 1px solid var(--bordure);
  border-radius: 4px;
  background-color: var(--panneau);
  padding: 1.25rem;
}
.carte p {
  color: var(--attenue);
  margin: 0;
}
.carte ul {
  margin: 0 0 0.75rem;
  padding-left: 1.1rem;
}
.carte-accent {
  border-color: rgba(157, 124, 255, 0.5);
}

.etat {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.etat::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.etat-en-ligne {
  background: rgba(127, 184, 106, 0.14);
  color: var(--vert);
}
.etat-hors-ligne {
  background: rgba(226, 59, 54, 0.14);
  color: var(--rouge);
}
.etat-inconnu {
  background: var(--panneau-2);
  color: var(--attenue);
}

.pied {
  border-top: 1px solid var(--bordure);
  padding: 1.5rem 1rem;
  text-align: center;
  font-size: 0.85rem;
}
.pied p {
  margin: 0.2rem 0;
}

/* Classement d'un serveur. */
.classement-titre {
  font-size: 0.9rem;
  margin: 1.25rem 0 0.5rem;
}
.defilement {
  overflow-x: auto;
}
.classement {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}
.classement th {
  color: var(--attenue);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: right;
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid var(--bordure);
}
.classement td {
  text-align: right;
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid rgba(205, 210, 216, 0.07);
}
.classement th:nth-child(-n + 2),
.classement td:nth-child(-n + 2) {
  text-align: left;
}
.classement .joueur {
  overflow-wrap: anywhere;
}
.classement tbody tr:hover {
  background: var(--panneau-2);
}
/* Podium : rang en or / argent / bronze (classement seulement). */
.classement.podium tbody tr.rang-1 td:first-child {
  color: var(--or);
  font-weight: 700;
}
.classement.podium tbody tr.rang-2 td:first-child {
  color: var(--argent);
  font-weight: 700;
}
.classement.podium tbody tr.rang-3 td:first-child {
  color: var(--bronze);
  font-weight: 700;
}
.note {
  margin-top: 1.5rem;
  font-size: 0.9rem;
}

/* Mes statistiques. */
.etroite {
  max-width: 44rem;
}
.message {
  border: 1px solid var(--bordure);
  padding: 0.6rem 0.9rem;
}
.message-succes {
  border-color: rgba(127, 184, 106, 0.4);
  background: rgba(127, 184, 106, 0.1);
}
.message-alerte {
  border-color: rgba(217, 162, 60, 0.4);
  background: rgba(217, 162, 60, 0.1);
}
.message-info {
  background: var(--panneau);
}
.carte form {
  margin-top: 1rem;
}
.etat-ligne {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.75rem !important;
}
.mono {
  font-family: ui-monospace, monospace;
  color: var(--texte);
}
.lien {
  background: none;
  border: 0;
  padding: 0;
  color: var(--attenue);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.lien:hover {
  color: var(--texte);
}

/* En-tête : langues et bouton du panneau. */
.entete-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
/* Sélecteur de langue : menu déroulant natif (<details>), sans script. */
.langues {
  position: relative;
}
.langue-choisie {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--bordure);
  background: var(--panneau);
  font-size: 0.85rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.langue-choisie::-webkit-details-marker {
  display: none;
}
.langue-choisie:hover,
.langues[open] .langue-choisie {
  background: var(--panneau-2);
}
.chevron {
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid var(--attenue);
  border-bottom: 2px solid var(--attenue);
  transform: translateY(-2px) rotate(45deg);
}
.langues[open] .chevron {
  transform: translateY(2px) rotate(-135deg);
}
.langues-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 10;
  min-width: 11rem;
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  border: 1px solid var(--bordure);
  background: var(--panneau);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
/* En-tête replié (mobile) : le bouton passe à gauche, le menu s'ouvre vers
   la droite au lieu de sortir de l'écran. */
@media (max-width: 34rem) {
  .langues-menu {
    left: 0;
    right: auto;
  }
}
.langue {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.8rem;
  color: var(--texte);
  text-decoration: none;
  font-size: 0.9rem;
}
.langue:hover {
  background: var(--panneau-2);
  color: var(--texte);
}
.langue img,
.langue-choisie img {
  display: block;
  width: 24px;
  height: 16px;
  object-fit: cover;
}
.langue-actuelle {
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--accent);
}
.langue-actuelle::after {
  content: "✓";
  margin-left: auto;
  color: var(--accent);
}

/* Accueil : accroche et aperçu du tableau de bord. */
.entete-lien {
  color: var(--attenue);
  text-decoration: none;
  font-size: 0.9rem;
}
.entete-lien:hover {
  color: var(--texte);
}
.accroche-grille {
  display: grid;
  gap: 2rem;
  align-items: center;
  padding: 3rem 0 1.5rem;
}
.accroche-grille .accroche {
  padding: 0;
}
@media (min-width: 60rem) {
  .accroche-grille {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  }
}
.capture {
  margin: 0;
  border: 1px solid var(--bordure);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  line-height: 0;
}
.capture img {
  width: 100%;
  height: auto;
}
.apercu {
  margin: 0;
  border: 1px solid var(--bordure);
  background: var(--fond-2);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  font-size: 0.78rem;
  overflow: hidden;
}
.apercu-barre {
  display: flex;
  gap: 0.35rem;
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--bordure);
  background: var(--panneau);
}
.apercu-barre span {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--panneau-2);
}
.apercu-corps {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
}
.apercu-nav {
  margin: 0;
  padding: 0.6rem 0.4rem;
  list-style: none;
  border-right: 1px solid var(--bordure);
  background: var(--fond-2);
}
.apercu-nav li {
  padding: 0.3rem 0.5rem;
  color: var(--attenue);
}
.apercu-nav li.actif {
  color: var(--texte);
  background: var(--panneau-2);
  box-shadow: inset 2px 0 0 var(--accent);
}
.apercu-contenu {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.7rem;
  background: var(--fond);
}
.apercu-entete {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: center;
}
.apercu-ligne {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.apercu-scores {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
  margin-left: 0.5rem;
}
.score {
  display: block;
  height: 0.3rem;
  background: var(--panneau-2);
}
.score > span {
  display: block;
  height: 100%;
}
.score-rouge {
  width: 74%;
  background: var(--rouge);
}
.score-bleu {
  width: 61%;
  background: #4f8fcc;
}
.score-vert {
  width: 48%;
  background: #5e9e4f;
}
.apercu-colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.6rem;
}
.apercu-bloc {
  border: 1px solid var(--bordure);
  background: var(--panneau);
  padding: 0.5rem;
}
.apercu-titre {
  margin: 0 0 0.35rem;
  color: var(--attenue);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.apercu-joueurs,
.apercu-journal {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.apercu-joueurs li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.apercu-joueurs li > span:nth-child(3) {
  margin-left: auto;
}
.pastille {
  width: 0.4rem;
  height: 0.4rem;
  display: inline-block;
}
.pastille.rouge {
  background: var(--rouge);
}
.pastille.bleu {
  background: #4f8fcc;
}
.alerte {
  color: var(--alerte);
}
.apercu-bouton {
  margin-left: 0.3rem;
  padding: 0 0.3rem;
  border: 1px solid rgba(226, 59, 54, 0.5);
  color: var(--rouge);
  font-size: 0.65rem;
  text-transform: uppercase;
}
@media (max-width: 34rem) {
  .apercu-corps {
    grid-template-columns: 1fr;
  }
  .apercu-nav {
    display: none;
  }
}

/* Comment ça marche. */
.etapes {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.etape-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: 0.75rem;
  border: 1px solid var(--accent);
  font-family: var(--police-titre);
  font-weight: 700;
  color: var(--accent);
}

/* Offres et questions fréquentes. */
.actions-carte {
  margin-top: 0.75rem !important;
}
.faq details {
  margin-bottom: 0.6rem;
  padding: 0.9rem 1.1rem;
}
.faq summary {
  cursor: pointer;
  font-weight: 700;
}
.faq details p {
  margin-top: 0.6rem;
}

/* Annuaire des communautés. */
.annuaire {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}
.annuaire-carte {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  color: var(--texte);
  text-decoration: none;
}
.annuaire-carte:hover {
  background-color: var(--panneau-2);
  color: var(--texte);
}
.annuaire-nom {
  font-family: var(--police-titre);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}
.annuaire-chiffres {
  display: flex;
  gap: 1rem;
  font-size: 0.9rem;
}

/* Sélecteur de période (7 / 30 jours). */
.joueur-periode {
  display: inline-flex;
  border: 1px solid var(--bordure);
}
.periode {
  padding: 0.3rem 0.8rem;
  font-size: 0.8rem;
  color: var(--attenue);
}
.periode + .periode {
  border-left: 1px solid var(--bordure);
}
.periode-active {
  background: var(--accent);
  color: var(--fond);
}
/* Saisons passées et périodes de la communauté : menu au bout du sélecteur. */
.joueur-periode {
  flex-wrap: wrap;
}
.periode-plus {
  position: relative;
  border-left: 1px solid var(--bordure);
}
.periode-plus > summary {
  display: block;
  cursor: pointer;
  list-style: none;
}
.periode-plus > summary::-webkit-details-marker {
  display: none;
}
.periode-plus > summary::after {
  content: " ▾";
}
.periode-menu {
  position: absolute;
  top: 100%;
  right: -1px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 13rem;
  max-height: 18rem;
  overflow-y: auto;
  background: var(--panneau);
  border: 1px solid var(--bordure);
}
.periode-menu .periode + .periode {
  border-left: 0;
  border-top: 1px solid var(--bordure);
}
.periode-bornes {
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
}
.comu-section-entete .periode-bornes {
  flex-basis: 100%;
  margin: 0;
  text-align: right;
}

/* Classement cliquable. */
.classement .joueur a {
  color: var(--texte);
}
.classement .joueur a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* ============================================================ page joueur */
.joueur-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.joueur-identite {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.joueur-avatar {
  width: 80px;
  height: 80px;
  border-radius: 6px;
  border: 1px solid var(--bordure);
  object-fit: cover;
  flex-shrink: 0;
}
.joueur-rang {
  margin-top: 0.3rem;
  color: var(--attenue);
}
.lien-retour,
.lien-steam {
  color: var(--accent);
  font-size: 0.9rem;
}
.bloc-titre {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 1.75rem 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--bordure);
  font-size: 1.05rem;
}
.bloc-titre::before {
  content: "";
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.stats-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--bordure);
  border: 1px solid var(--bordure);
}
.stats-grille > div {
  background: var(--panneau);
  padding: 0.75rem 1rem;
}
.stats-grille dt {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--attenue);
}
.stats-grille dd {
  margin: 0.25rem 0 0;
  font-size: 1.4rem;
  font-weight: 700;
}
.courbe-joueur {
  width: 100%;
  max-width: 460px;
}
.courbe-joueur svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Graphiques en barres (fiche joueur) : barres fines à l'accent, le pic en
   pleine couleur et sa valeur écrite ; grille et base en traits fins pleins,
   discrets ; moyenne en trait plein avec son libellé. Le texte reste à la
   couleur du texte, jamais à celle des données. */
.chart-grid {
  stroke: var(--bordure);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}
.chart-base {
  stroke: var(--bordure-forte);
}
.chart-bar {
  fill: var(--accent);
  opacity: 0.6;
  transition: opacity 0.12s;
}
.chart-bar-peak,
.chart-bar.survol {
  opacity: 1;
}
.chart-avg {
  stroke: var(--attenue);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
  opacity: 0.8;
}
.chart-legende {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.35rem;
  color: var(--attenue);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}
.chart-legende-moy {
  width: 1rem;
  border-top: 1px solid var(--attenue);
}
.chart-peak {
  fill: var(--texte);
  font-size: 10px;
  font-weight: 700;
  text-anchor: middle;
  font-variant-numeric: tabular-nums;
}
.chart-ylabel {
  fill: var(--attenue);
  font-size: 9.5px;
  text-anchor: end;
  dominant-baseline: middle;
  font-variant-numeric: tabular-nums;
}
.chart-xlabel {
  fill: var(--attenue);
  font-size: 9.5px;
  text-anchor: middle;
}
.chart-xlabel-fin {
  text-anchor: end;
}
@media (prefers-reduced-motion: reduce) {
  .chart-bar {
    transition: none;
  }
}

/* Fraîcheur des données, records, armes, recherche, « Mes serveurs » */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.fraicheur {
  margin: 0.25rem 0 0.75rem;
  font-size: 0.75rem;
}
.recherche {
  display: flex;
  gap: 0.5rem;
  margin: 0.75rem 0;
}
.recherche input {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--bordure);
  background: var(--fond-2);
  color: var(--texte);
  font: inherit;
}
.recherche input:focus {
  outline: 1px solid var(--accent);
}
.records {
  margin: 0;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.records > div {
  border: 1px solid var(--bordure);
  background: var(--acier);
  box-shadow: var(--arete);
  padding: 0.7rem 0.8rem;
}
.records dt {
  color: var(--attenue);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.records dd {
  margin: 0.3rem 0 0;
  font-size: 0.88rem;
  color: var(--attenue);
}
.records dd strong {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--texte);
  margin-right: 0.3rem;
  font-variant-numeric: tabular-nums;
}
.records a,
.resultats a,
.mes-serveurs a,
.inactif a {
  color: var(--accent);
}
.armes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.armes li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem 0.8rem;
  align-items: baseline;
  font-size: 0.9rem;
}
.armes .arme-note {
  display: block;
  margin-top: 0.1rem;
  color: var(--attenue);
  font-size: 0.78rem;
}
.armes a {
  color: var(--texte);
}
.armes .kills {
  color: var(--attenue);
  font-variant-numeric: tabular-nums;
}
.armes .barre {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  height: 5px;
  background: var(--fond-2);
}
.armes .barre rect {
  fill: var(--accent-fonce);
}
.inactif {
  color: var(--attenue);
}
.resultats,
.mes-serveurs {
  list-style: none;
  margin: 0;
  padding: 0;
}
.resultats li,
.mes-serveurs li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--bordure);
}

/* ===================================================== dossier serveur (2 col) */
.dossier {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  align-items: start;
  margin-top: 0.75rem;
}
.dossier-main,
.dossier-aside {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}
/* La gouttière de la grille porte l'espacement ; pas de marge en tête de bloc. */
.dossier section .bloc-titre {
  margin-top: 0;
}
@media (max-width: 54rem) {
  .dossier {
    grid-template-columns: 1fr;
  }
}
.encours {
  color: var(--vert);
  font-weight: 700;
}

/* ===== En-tête : liens de contenu ===== */
.entete-liens {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
.entete-liens a {
  color: var(--attenue);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.entete-liens a:hover { color: var(--texte); }

@media (max-width: 54rem) {
  .entete { flex-wrap: wrap; }
  .entete-liens {
    order: 3;
    width: 100%;
    justify-content: center;
    gap: 1.6rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--bordure);
  }
}

/* ===== Intro de page (tarifs, nouveautés) ===== */
.section-intro { text-align: center; }
.section-intro .chapeau {
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
}

/* ===== Journal des nouveautés ===== */
.changelog {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.changelog-entree h2 {
  margin: 0.5rem 0 0.6rem;
  font-size: 1.15rem;
}
.changelog-tete {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.etiquette {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 2px;
}
.etiquette-nouveau { color: #3fae5a; }
.etiquette-amelioration { color: var(--accent); }
.etiquette-correctif { color: #d9a521; }
.etiquette-pro { color: #d9a521; vertical-align: middle; }

/* ===== Documentation ===== */
.docs-sommaire {
  display: grid;
  gap: 1rem;
}
@media (min-width: 48rem) {
  .docs-sommaire { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.docs-rubrique h2 {
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
}
.docs-rubrique ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.docs-rubrique li > a {
  color: var(--texte);
  font-weight: 600;
}
.docs-rubrique li > .attenue {
  display: block;
  font-size: 0.9rem;
}
.docs-page {
  display: grid;
  gap: 2rem;
}
@media (min-width: 60rem) {
  .docs-page { grid-template-columns: 15rem minmax(0, 1fr); }
  .docs-nav { position: sticky; top: 5rem; align-self: start; }
}
.docs-nav {
  font-size: 0.9rem;
}
.docs-nav ul {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
.docs-nav li a {
  display: block;
  padding: 0.2rem 0;
  color: var(--attenue);
}
.docs-nav li a:hover,
.docs-nav li a[aria-current="page"] {
  color: var(--texte);
}
.docs-nav-rubrique {
  margin: 1rem 0 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--attenue);
}
.docs-retour {
  font-weight: 600;
}
.docs-article {
  max-width: 46rem;
  min-width: 0;
}
.docs-article h1 {
  margin: 0.25rem 0 0.5rem;
}
.docs-article h2 {
  margin: 2rem 0 0.6rem;
  font-size: 1.2rem;
}
.docs-article p,
.docs-article li {
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.docs-article ul {
  padding-left: 1.25rem;
}
.docs-suite {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

/* ===== Navbar communauté : identité + menu compte joueur ===== */
.marque-communaute span {
  font-family: "Roboto Condensed", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  font-size: 1rem;
}
.marque-communaute img {
  border-radius: 2px;
  object-fit: cover;
}
/* Liens de la communauté, collés à son nom. Le menu « Serveurs » reprend
   celui du compte. */
.comu-nav {
  margin-right: auto;
  margin-left: 1rem;
}
.comu-nav a[aria-current="page"],
.comu-nav-menu summary.actif {
  color: var(--texte);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.comu-nav-menu {
  position: relative;
}
.comu-nav-menu summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--attenue);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.comu-nav-menu summary::-webkit-details-marker { display: none; }
.comu-nav-menu summary:hover,
.comu-nav-menu[open] summary { color: var(--texte); }
.comu-nav-menu[open] .chevron { transform: translateY(2px) rotate(-135deg); }
.comu-nav-menu .compte-menu {
  left: 0;
  right: auto;
  min-width: 16rem;
  max-height: 70vh;
  overflow-y: auto;
}
.entete-liens .comu-nav-menu .compte-menu a {
  color: var(--texte);
  font-weight: 400;
  letter-spacing: 0;
  font-size: 0.9rem;
  box-shadow: none;
}
.comu-nav-menu .compte-menu a[aria-current="page"] {
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--accent);
}
.comu-nav-discord {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.comu-nav-discord .comu-lien-icone {
  mask-image: url("/assets/links/discord.svg");
}
/* Avatar Steam du joueur connecté, à côté de son pseudo. */
.compte-nom .avatar {
  width: 20px;
  height: 20px;
  margin: -2px 0;
  border-radius: 2px;
}
@media (max-width: 54rem) {
  .comu-nav {
    margin: 0;
  }
}

/* Menu compte joueur (<details>, sans script, comme le sélecteur de langue). */
.compte { position: relative; }
.compte-nom {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 12rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--bordure);
  background: var(--panneau);
  font-size: 0.85rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.compte-nom > span:not(.avatar, .chevron) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compte-nom::-webkit-details-marker { display: none; }
.compte-nom:hover,
.compte[open] .compte-nom { background: var(--panneau-2); }
.compte[open] .chevron { transform: translateY(2px) rotate(-135deg); }
.compte-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 10;
  min-width: 12rem;
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  border: 1px solid var(--bordure);
  background: var(--panneau);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.compte-menu form { margin: 0; }
.compte-menu a,
.compte-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.9rem;
  color: var(--texte);
  text-decoration: none;
  font: inherit;
  font-size: 0.9rem;
  background: none;
  border: none;
  cursor: pointer;
}
.compte-menu a:hover,
.compte-menu button:hover { background: var(--panneau-2); }

/* Backlink Denhold en pied de page communauté */
.propulse a {
  color: var(--attenue);
  text-decoration: none;
  font-size: 0.85rem;
}
.propulse a:hover { color: var(--texte); }

/* Bouton « Se connecter » avec logo Steam */
.btn-steam { gap: 0.5rem; }
.icone-steam { flex: none; display: block; }

/* ============================================================ page communauté
   Maquette validée le 05/10/2026 (hq/designs/maquettes/site-communaute.html) :
   identité en bandeau, une ligne par serveur (jusqu'à 20), trois classements
   de la communauté avec la place du joueur connecté. Le nom de la communauté
   est le seul titre en capitales (police des titres) ; libellés en minuscules. */
.communaute {
  padding-bottom: 1rem;
}
.communaute a {
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* ---------------------------------------------------------------- identité */
.identite {
  margin: 1.5rem 0 3rem;
}
/* Bandeau 6:1, recadré dans le panneau ; une bannière d'un autre format est
   coupée au centre. Filet de signature à la couleur d'accent. */
.bandeau {
  display: block;
  width: 100%;
  aspect-ratio: 6 / 1;
  height: auto;
  object-fit: cover;
  border: 1px solid var(--bordure);
  border-bottom: 3px solid var(--accent);
}
/* Plaque sous le bandeau, sans chevauchement : le logo, à gauche, est
   centré verticalement sur le nom et le texte. */
.plaque {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "logo nom   liens"
    "logo texte texte";
  align-items: center;
  gap: 0.5rem 1.75rem;
  padding-top: 1.5rem;
}
.plaque-logo {
  grid-area: logo;
  align-self: center;
  width: 136px;
  height: 136px;
  object-fit: contain;
  padding: 8px;
  background: var(--acier-clair);
  border: 1px solid var(--bordure-forte);
  box-shadow: var(--arete);
}
.plaque-nom {
  grid-area: nom;
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}
.plaque-liens {
  grid-area: liens;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}
.plaque-texte {
  grid-area: texte;
  max-width: 68ch;
}
.plaque-desc {
  margin: 0.25rem 0 0;
  color: var(--attenue);
  font-size: 1.05rem;
}
.plaque-releve {
  margin: 0.75rem 0 0;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}
.comu-lien {
  gap: 0.5rem;
  min-height: 2.25rem;
  color: var(--texte);
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.9rem;
}
.comu-lien:hover {
  border-color: var(--bordure-forte);
  background: var(--panneau-2);
  color: var(--texte);
}
/* Icône du service (Discord, YouTube…) : un masque peint de la couleur du
   texte. */
.comu-lien-icone {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  background-color: currentColor;
  mask: url("/assets/links/site.svg") center / contain no-repeat;
}
.comu-lien-bluesky .comu-lien-icone { mask-image: url("/assets/links/bluesky.svg"); }
.comu-lien-discord .comu-lien-icone { mask-image: url("/assets/links/discord.svg"); }
.comu-lien-facebook .comu-lien-icone { mask-image: url("/assets/links/facebook.svg"); }
.comu-lien-instagram .comu-lien-icone { mask-image: url("/assets/links/instagram.svg"); }
.comu-lien-kick .comu-lien-icone { mask-image: url("/assets/links/kick.svg"); }
.comu-lien-kofi .comu-lien-icone { mask-image: url("/assets/links/kofi.svg"); }
.comu-lien-mastodon .comu-lien-icone { mask-image: url("/assets/links/mastodon.svg"); }
.comu-lien-patreon .comu-lien-icone { mask-image: url("/assets/links/patreon.svg"); }
.comu-lien-reddit .comu-lien-icone { mask-image: url("/assets/links/reddit.svg"); }
.comu-lien-steam .comu-lien-icone { mask-image: url("/assets/links/steam.svg"); }
.comu-lien-threads .comu-lien-icone { mask-image: url("/assets/links/threads.svg"); }
.comu-lien-tiktok .comu-lien-icone { mask-image: url("/assets/links/tiktok.svg"); }
.comu-lien-twitch .comu-lien-icone { mask-image: url("/assets/links/twitch.svg"); }
.comu-lien-x .comu-lien-icone { mask-image: url("/assets/links/x.svg"); }
.comu-lien-youtube .comu-lien-icone { mask-image: url("/assets/links/youtube.svg"); }
@media (max-width: 600px) {
  .plaque {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "logo  nom"
      "liens liens"
      "texte texte";
    gap: 0.75rem 1rem;
  }
  .plaque-logo {
    width: 88px;
    height: 88px;
    padding: 5px;
  }
  .plaque-liens {
    justify-content: flex-start;
  }
}

/* ---------------------------------------------------------------- sections */
.comu-section {
  margin-top: 3rem;
}
.comu-section-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--bordure);
}
.comu-section-titre {
  margin: 0;
  font-family: "Roboto Condensed", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.comu-section-resume {
  margin: 0;
  color: var(--attenue);
  font-variant-numeric: tabular-nums;
}
.periode {
  text-decoration: none;
}

/* ---------------------------------------------------------------- serveurs */
.serveurs {
  list-style: none;
  margin: 0;
  padding: 0;
}
.serveur {
  display: grid;
  grid-template-columns: 0.6rem minmax(12rem, 1.7fr) 9rem minmax(8rem, 1fr) 10rem 10.5rem;
  grid-template-areas: "etat nom joueurs carte partie code";
  align-items: center;
  gap: 0.25rem 1.5rem;
  padding: 0.8rem 0.75rem;
  border-bottom: 1px solid var(--bordure);
}
.serveur:hover {
  background: var(--panneau);
}
.serveur p {
  margin: 0;
}
.serveur-etat {
  grid-area: etat;
  width: 0.6rem;
  height: 0.6rem;
  border: 1px solid var(--attenue);
}
.serveur-en-ligne .serveur-etat {
  background: var(--vert);
  border-color: var(--vert);
}
.serveur-hors-ligne .serveur-nom,
.serveur-inconnu .serveur-nom {
  color: var(--attenue);
}
.serveur-nom {
  grid-area: nom;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--texte);
  font-weight: 700;
  text-decoration: none;
}
a.serveur-nom:hover {
  color: var(--texte);
  text-decoration: underline;
}
.serveur-joueurs {
  grid-area: joueurs;
}
.maintenant-joueurs {
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.maintenant-joueurs strong {
  font-size: 1.15rem;
}
.jauge {
  display: block;
  width: 100%;
  height: 5px;
  margin-top: 0.35rem;
}
.jauge-fond {
  fill: var(--fond-2);
}
.jauge-plein {
  fill: var(--accent);
}
/* Graduations : dix segments, de la couleur du fond. */
.jauge-graduations {
  stroke: var(--fond);
  stroke-width: 2px;
}
.serveur-carte {
  grid-area: carte;
  min-width: 0;
  line-height: 1.25;
}
.serveur-carte > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Modes de jeu en badges : le mode, puis ses modificateurs mis en avant
   (« Infanterie seule », « Hardcore »), ou « Standard ». */
.serveur-carte .modes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.3rem;
  white-space: normal;
}
.mode {
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--bordure);
  color: var(--attenue);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.4;
}
.mode-modif {
  border-color: var(--accent);
  color: var(--texte);
}
/* Partie en cours : une barre par faction vers les 100 points de la
   victoire, le score à la couleur de la faction (attributs SVG). */
.serveur-partie {
  grid-area: partie;
}
.partie {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.partie li {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
}
.partie-score {
  display: block;
  width: 1.6rem;
  height: 0.85rem;
  overflow: visible;
}
.partie-score text {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* Une règle CSS l'emporterait sur l'attribut `fill` de la faction : la
   couleur par défaut ne vise que les scores sans couleur. */
.partie-score text:not([fill]) {
  fill: var(--texte);
}
.partie-barre {
  display: block;
  width: 100%;
  height: 4px;
}
/* État de lancement à la place des scores : vide (atténué), en lancement
   (alerte), lancé (vert). */
.lancement {
  display: grid;
  gap: 0.2rem;
  line-height: 1.2;
}
.lancement-badge {
  justify-self: start;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--bordure);
  color: var(--attenue);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.lancement-lancement .lancement-badge {
  border-color: var(--alerte);
  color: var(--alerte);
}
.lancement-lance .lancement-badge {
  border-color: var(--vert);
  color: var(--vert);
}
.lancement-indice {
  color: var(--attenue);
  font-size: 0.8rem;
}
.serveur-code {
  grid-area: code;
  justify-self: end;
}
.code {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.1rem;
  padding: 0 0.7rem;
  border: 1px solid var(--bordure);
  background: var(--fond-2);
  color: var(--texte);
  font: inherit;
  cursor: pointer;
}
.code:hover {
  border-color: var(--bordure-forte);
}
.code-valeur {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  user-select: all;
}
/* Sans script, pas de bouton « Copier » : le code se sélectionne d'un clic. */
.code-action {
  display: none;
  font-size: 0.8rem;
  color: var(--attenue);
}
.js .code-action {
  display: inline;
}
.code.copie .code-action {
  color: var(--vert);
}
.serveurs-pied {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  color: var(--attenue);
}
@media (max-width: 760px) {
  .serveur {
    grid-template-columns: 0.6rem minmax(0, 1fr) auto;
    grid-template-areas:
      "etat nom nom"
      ".    joueurs code"
      ".    carte carte"
      ".    partie partie";
    gap: 0.5rem 0.75rem;
    padding: 0.9rem 0.25rem;
  }
  .serveur-joueurs {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
  }
  .serveur-joueurs .jauge {
    width: 5rem;
    margin: 0;
  }
  .serveur-carte span {
    display: inline;
  }
  .serveur-carte span + span::before {
    content: ", ";
  }
  /* Les badges de mode restent des badges, sans virgule. */
  .serveur-carte .modes {
    display: flex;
  }
  .serveur-carte .modes::before,
  .serveur-carte .mode::before {
    content: none;
  }
}

/* ---------------------------------------------------------------- classements */
.classements {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 1.25rem;
}
.classement-comu {
  min-width: 0;
}
.classement-comu-titre {
  margin: 0 0 0.5rem;
  font-family: "Roboto Condensed", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.classement-comu-titre span {
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--attenue);
}
.classement-comu ol {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--bordure);
}
.ligne {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.4rem 0.25rem;
  border-bottom: 1px solid var(--bordure);
  font-variant-numeric: tabular-nums;
}
.ligne-rang {
  padding-right: 0.25rem;
  text-align: right;
  color: var(--attenue);
}
.ligne-1 .ligne-rang { color: var(--or); font-weight: 700; }
.ligne-2 .ligne-rang { color: var(--argent); font-weight: 700; }
.ligne-3 .ligne-rang { color: var(--bronze); font-weight: 700; }
.ligne-nom {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ligne-val {
  font-weight: 700;
}
.classement-vide {
  margin: 0;
  padding: 0.75rem 0.25rem;
  border-top: 1px solid var(--bordure);
}
/* Place du joueur connecté, épinglée sous le classement comme un tableau de
   score en jeu. */
.toi {
  margin-top: 0.5rem;
  padding: 0.15rem 0 0.5rem;
  background: var(--panneau);
  border: 1px solid var(--bordure);
  border-left: 3px solid var(--accent);
}
.toi .ligne {
  border-bottom: 0;
}
.toi .ligne-rang {
  color: var(--texte);
  font-weight: 700;
}
.toi-note {
  margin: 0 0.75rem 0 2.75rem;
  font-size: 0.85rem;
  color: var(--attenue);
}
.connexion-place {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-top: 1.25rem;
  padding: 1rem 1.15rem;
  background: var(--panneau);
  border: 1px solid var(--bordure);
}
.connexion-place p {
  margin: 0;
}
.communaute .note {
  margin-top: 2.5rem;
}
/* Onglets des classements en mobile : boutons radio et CSS, sans script. */
.onglet-choix {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.onglets {
  display: none;
}
@media (max-width: 960px) {
  .onglets {
    display: flex;
    margin-top: 1.25rem;
    border-bottom: 1px solid var(--bordure);
  }
  .onglets label {
    flex: 1;
    padding: 0.6rem 0.25rem;
    margin-bottom: -1px;
    border-bottom: 3px solid transparent;
    text-align: center;
    font-weight: 700;
    color: var(--attenue);
    cursor: pointer;
  }
  .classements {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 1rem;
  }
  .classement-comu,
  .classement-comu-titre {
    display: none;
  }
  #onglet-0:checked ~ .onglets label[for="onglet-0"],
  #onglet-1:checked ~ .onglets label[for="onglet-1"],
  #onglet-2:checked ~ .onglets label[for="onglet-2"],
  #onglet-3:checked ~ .onglets label[for="onglet-3"] {
    color: var(--texte);
    border-bottom-color: var(--accent);
  }
  #onglet-0:focus-visible ~ .onglets label[for="onglet-0"],
  #onglet-1:focus-visible ~ .onglets label[for="onglet-1"],
  #onglet-2:focus-visible ~ .onglets label[for="onglet-2"],
  #onglet-3:focus-visible ~ .onglets label[for="onglet-3"] {
    outline: 2px solid var(--texte);
    outline-offset: -2px;
  }
  #onglet-0:checked ~ .classements .classement-comu:nth-child(1),
  #onglet-1:checked ~ .classements .classement-comu:nth-child(2),
  #onglet-2:checked ~ .classements .classement-comu:nth-child(3),
  #onglet-3:checked ~ .classements .classement-comu:nth-child(4) {
    display: block;
  }
}

/* ============================================================ script du site
   Ce qu'ajoute `site.js` : la page reste complète sans lui. */

/* Zone remplacée au changement de période. */
#zone-periode[aria-busy="true"] {
  opacity: 0.55;
  transition: opacity 0.15s;
}
.comu-section-entete .joueur-periode {
  margin-left: auto;
}

/* Recherche d'un joueur sur toute la communauté. */
.recherche-comu {
  position: relative;
  flex: 1 1 14rem;
  max-width: 22rem;
  margin: 0 0 0 auto;
}
.recherche-comu input,
.recherche input {
  width: 100%;
}
.recherche-comu input {
  min-height: 2.1rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--bordure);
  background: var(--fond-2);
  color: var(--texte);
  font: inherit;
  font-size: 0.95rem;
}
.recherche-comu input:focus {
  border-color: var(--bordure-forte);
  outline: none;
}
.avec-suggestions {
  position: relative;
}
.suggestions {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 18rem;
  overflow-y: auto;
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  border: 1px solid var(--bordure-forte);
  background: var(--panneau);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.suggestions a {
  display: block;
  padding: 0.45rem 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--texte);
  text-decoration: none;
}
.suggestions a:hover,
.suggestions [aria-selected="true"] a {
  background: var(--panneau-2);
}
.suggestions-vide {
  padding: 0.45rem 0.8rem;
  color: var(--attenue);
}

/* Tableaux triables : l'en-tête devient un bouton. */
.classement th .tri {
  all: unset;
  cursor: pointer;
}
.classement th .tri:focus-visible {
  outline: 2px solid var(--texte);
  outline-offset: 2px;
}
.classement th .tri:hover,
.classement th[aria-sort] .tri {
  color: var(--texte);
}
.classement th[aria-sort="descending"] .tri::after {
  content: " ↓";
}
.classement th[aria-sort="ascending"] .tri::after {
  content: " ↑";
}

/* Infobulles des graphiques. */
.courbe-joueur {
  position: relative;
}
.chart-hit {
  fill: transparent;
  cursor: crosshair;
}
/* Le décor du graphique ne capte pas le pointeur : la ligne de moyenne,
   dessinée par-dessus, ne masque pas les barres. */
.chart-avg,
.chart-peak,
.chart-grid,
.chart-xlabel,
.chart-ylabel {
  pointer-events: none;
}
.chart-hit.actif {
  fill: rgba(236, 238, 240, 0.04);
}
.infobulle {
  position: absolute;
  z-index: 5;
  transform: translate(-50%, calc(-100% - 6px));
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--bordure-forte);
  background: var(--panneau-2);
  color: var(--texte);
  font-size: 0.8rem;
  white-space: nowrap;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

/* Partage d'une fiche de joueur. */
.joueur-liens {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}
.partage {
  min-height: 2rem;
  padding: 0 0.8rem;
}
.partage.copie {
  color: var(--vert);
}

/* ============================================================ page d'un serveur
   Même construction que la page communauté : en-tête vivant (la ligne du
   serveur), records en une ligne, trois classements en onglets avec la
   recherche et « Ta place », armes et lanceurs à côté, parties en bas. */
.page-serveur {
  padding: 1.5rem 0 1rem;
}
.fil {
  margin: 0 0 1rem;
  font-size: 0.9rem;
}
/* Retour à la page parente : un vrai bouton, plus compact que ceux de l'en-tête. */
.bouton-retour {
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  font-size: 0.75rem;
}
.serveur-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-bottom: 0.75rem;
}
.surtitre-simple {
  margin: 0 0 0.2rem;
  color: var(--attenue);
}
.serveur-titre {
  margin: 0;
  font-family: "Roboto Condensed", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  overflow-wrap: anywhere;
}
/* Ligne vivante : le nom est déjà le titre de la page. */
.serveur-seul {
  border-top: 1px solid var(--bordure);
}
.serveur-seul .serveur {
  grid-template-columns: 0.6rem 9rem minmax(8rem, 1fr) 10rem auto;
  grid-template-areas: "etat joueurs carte partie code";
}
.serveur-seul .serveur-nom {
  display: none;
}
/* Sous la ligne du serveur : où en est le lancement, puis comment rejoindre. */
.serveur-phrase {
  margin: 0.75rem 0 0;
  padding: 0.6rem 0.8rem;
  border-left: 3px solid var(--bordure-forte);
  background: var(--panneau);
}
.serveur-phrase.lancement-lancement {
  border-left-color: var(--alerte);
}
.serveur-aide {
  margin: 0.5rem 0 0;
  color: var(--attenue);
  font-size: 0.85rem;
}

/* Records de la période, en une ligne. */
.records-ligne {
  margin-top: 1.5rem;
}
.records-ligne dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  margin: 0;
  border-top: 1px solid var(--bordure);
  border-left: 1px solid var(--bordure);
}
.records-ligne dl > div {
  padding: 0.7rem 0.9rem 0.8rem;
  border-right: 1px solid var(--bordure);
  border-bottom: 1px solid var(--bordure);
  background: var(--panneau);
}
.records-ligne dt {
  color: var(--attenue);
  font-size: 0.85rem;
}
.records-ligne dd {
  margin: 0.2rem 0 0;
  overflow-wrap: anywhere;
}
.records-ligne dd strong {
  display: block;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}
.records-ligne dd a {
  color: var(--attenue);
  font-size: 0.85rem;
}

/* Classements et colonne latérale. */
.serveur-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: 2.5rem;
  margin-top: 2.5rem;
}
@media (max-width: 960px) {
  .serveur-grille {
    grid-template-columns: minmax(0, 1fr);
  }
}
.serveur-classements .comu-section-entete {
  border-bottom: 0;
}
/* Onglets des classements du serveur : sur toutes les largeurs. */
.onglets-serveur {
  display: flex;
  margin-top: 0.25rem;
  border-bottom: 1px solid var(--bordure);
}
.onglets-serveur label {
  padding: 0.55rem 1rem;
  margin-bottom: -1px;
  border-bottom: 3px solid transparent;
  font-weight: 700;
  color: var(--attenue);
  cursor: pointer;
}
.onglets-serveur label:hover {
  color: var(--texte);
}
#tab-kills:checked ~ .onglets label[for="tab-kills"],
#tab-hours:checked ~ .onglets label[for="tab-hours"],
#tab-ratio:checked ~ .onglets label[for="tab-ratio"],
#tab-cash:checked ~ .onglets label[for="tab-cash"] {
  color: var(--texte);
  border-bottom-color: var(--accent);
}
#tab-kills:focus-visible ~ .onglets label[for="tab-kills"],
#tab-hours:focus-visible ~ .onglets label[for="tab-hours"],
#tab-ratio:focus-visible ~ .onglets label[for="tab-ratio"],
#tab-cash:focus-visible ~ .onglets label[for="tab-cash"] {
  outline: 2px solid var(--texte);
  outline-offset: -2px;
}
.onglet-panneau {
  display: none;
  padding-top: 0.75rem;
}
#tab-kills:checked ~ .onglet-kills,
#tab-hours:checked ~ .onglet-hours,
#tab-ratio:checked ~ .onglet-ratio,
#tab-cash:checked ~ .onglet-cash {
  display: block;
}
.onglet-note {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
}
.serveur-classements .classement-vide {
  border-top: 0;
}

.serveur-cote > section + section {
  margin-top: 2.25rem;
}
.comu-section-titre.petit {
  margin-bottom: 0.6rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--bordure);
  font-size: 1.1rem;
}
.cote-intro {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
}
.lanceurs {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--bordure);
}
.lanceurs .ligne-nom {
  color: var(--texte);
  text-decoration: none;
}
.lanceurs .ligne-nom:hover {
  text-decoration: underline;
}

/* Parties récentes : scores en barres (la gagnante à l'accent). */
.serveur-parties {
  margin-top: 3rem;
}
.serveur-parties .comu-section-entete {
  margin-bottom: 0.5rem;
}
.classement.parties {
  /* En mobile, le tableau défile plutôt que d'écraser les barres. */
  min-width: 46rem;
}
.classement.parties td {
  vertical-align: middle;
}
.partie-histo {
  min-width: 12rem;
  gap: 3px;
}
.partie-histo li {
  grid-template-columns: 5.5rem minmax(4rem, 1fr) 1.8rem;
  font-size: 0.8rem;
}
.partie-histo .partie-nom {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--attenue);
  text-align: left;
}
.partie-histo .gagnant .partie-nom,
.partie-histo .gagnant .partie-val {
  color: var(--texte);
  font-weight: 700;
}
.partie-histo .partie-val {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.jauge-autre {
  fill: var(--attenue);
  opacity: 0.6;
}
.jauge-perdant {
  opacity: 0.4;
}
/* Toute la ligne d'une partie mène à sa page : le lien de la date s'étend
   sur la ligne. */
.partie-ligne {
  position: relative;
  cursor: pointer;
}
.partie-ligne:hover td {
  background: var(--panneau-2);
}
.partie-lien {
  color: var(--texte);
  text-decoration: none;
}
.partie-lien::after {
  content: "";
  position: absolute;
  inset: 0;
}
.partie-ligne:hover .partie-lien {
  color: var(--accent);
}
.partie-lien:focus-visible {
  outline: none;
}
.partie-ligne:has(.partie-lien:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
/* Couleurs des factions (`core::factions`), pour le texte : nom et score
   du vainqueur dans l'historique des parties. */
.equipe-bleu,
.partie-histo .gagnant .equipe-bleu { color: #4cb1ef; }
.equipe-rouge,
.partie-histo .gagnant .equipe-rouge { color: #fa503e; }
.equipe-vert,
.partie-histo .gagnant .equipe-vert { color: #1dd65c; }

@media (max-width: 760px) {
  .serveur-seul .serveur {
    grid-template-columns: 0.6rem minmax(0, 1fr) auto;
    grid-template-areas:
      "etat joueurs joueurs"
      ".    carte carte"
      ".    partie partie"
      ".    code code";
  }
  /* Le code sur sa ligne : il n'écrase plus le nombre de joueurs. */
  .serveur-seul .serveur-code {
    justify-self: start;
  }
}

/* ============================================================ avatars et fiches
   Dans tous les classements : l'avatar Steam devant le pseudo, et le pseudo
   lié à la fiche du joueur. */
.avatar {
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  object-fit: cover;
  border: 1px solid var(--bordure);
  background: var(--panneau-2);
}
.ligne {
  align-items: center;
}
.ligne-nom,
.classement td.joueur a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}
.ligne-nom > span:last-child,
.classement td.joueur a > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.ligne-nom {
  color: var(--texte);
  text-decoration: none;
}
a.ligne-nom:hover > span:last-child,
.classement td.joueur a:hover > span:last-child {
  text-decoration: underline;
}
.classement td.joueur a {
  color: var(--texte);
  text-decoration: none;
}

/* Code de connexion : un UUID de 36 caractères en vrai. Affiché tronqué
   (copié en entier, au clic comme à la sélection), dans une colonne qui
   s'ajuste au bouton : il ne passe plus sur les scores. */
.serveur {
  grid-template-columns: 0.6rem minmax(10rem, 1.7fr) 8.5rem minmax(7rem, 1fr) minmax(7rem, 10rem) auto;
}
.serveur-seul .serveur {
  grid-template-columns: 0.6rem 8.5rem minmax(7rem, 1fr) minmax(7rem, 12rem) auto;
}
.serveur-code {
  min-width: 0;
}
.code {
  max-width: 13rem;
}
.code-valeur {
  min-width: 0;
  max-width: 7.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .serveur,
  .serveur-seul .serveur {
    grid-template-columns: 0.6rem minmax(0, 1fr) auto;
  }
}

/* ============================================================ fiche d'un joueur
   Une fiche par communauté, filtrable par serveur : identité (avatar, rangs),
   quatre chiffres clés avec leur évolution, graphiques et parties à gauche,
   détail, rivaux, face-à-face, armes et cartes à droite. */
.fiche {
  padding: 1.5rem 0 1rem;
}
.fiche-tete {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem 1.5rem;
}
.fiche-avatar {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: cover;
  border: 1px solid var(--bordure-forte);
  background: var(--panneau-2);
}
.fiche-nom {
  margin: 0.1rem 0 0;
  font-family: "Roboto Condensed", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  overflow-wrap: anywhere;
}
.fiche-rangs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}
.fiche-rangs li {
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--bordure);
  background: var(--panneau);
  font-size: 0.85rem;
}
.fiche-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.fiche-moi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-top: 1.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--bordure);
  border-left: 3px solid var(--accent);
  background: var(--panneau);
}
.fiche-moi p,
.fiche-moi form {
  margin: 0;
}
.fiche-moi a {
  color: var(--texte);
}
.fiche-filtres {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin: 1.5rem 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--bordure);
}
.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.filtre {
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--bordure);
  color: var(--attenue);
  font-size: 0.9rem;
  text-decoration: none;
}
.filtre:hover {
  color: var(--texte);
  border-color: var(--bordure-forte);
}
.filtre-actif {
  border-color: var(--accent);
  color: var(--texte);
}
@media (max-width: 600px) {
  .fiche-tete {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .fiche-avatar {
    width: 72px;
    height: 72px;
  }
  .fiche-actions {
    grid-column: 1 / -1;
  }
}

/* Chiffres clés et leur évolution. */
.fiche-chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  margin: 0;
  border-top: 1px solid var(--bordure);
  border-left: 1px solid var(--bordure);
}
.fiche-chiffres > div {
  padding: 0.8rem 1rem 0.9rem;
  border-right: 1px solid var(--bordure);
  border-bottom: 1px solid var(--bordure);
  background: var(--panneau);
}
.fiche-chiffres dt {
  color: var(--attenue);
  font-size: 0.85rem;
}
.fiche-chiffres dd {
  margin: 0.2rem 0 0;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.delta {
  font-size: 0.85rem;
  font-weight: 700;
}
/* Page d'une arme : moyenne Denhold sous chaque chiffre. */
.arme-categorie {
  margin: 0.2rem 0 0;
}
/* Rendu de l'arme (fiche, arme favorite) : sur une plaque unie plus claire
   que le fond, sinon les véhicules sombres disparaissent. Jamais agrandi au-delà
   de sa taille d'origine (rendus de 72 à 440 px de haut). */
.arme-visuel {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1rem 0 1.25rem;
  padding: 1rem 1.25rem;
  height: clamp(7rem, 24vw, 14rem);
  background: var(--plaque);
  border: 1px solid var(--bordure);
  box-shadow: var(--arete);
}
.arme-visuel img {
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}
/* Arme favorite (colonne étroite de la fiche joueur) : nom sous le rendu. */
.arme-favorite {
  flex-direction: column;
  gap: 0.6rem;
  height: 10rem;
  margin: 0.5rem 0 0;
}
.arme-favorite figcaption {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 1.05rem;
}
.arme-moyenne {
  display: block;
  margin-top: 0.2rem;
  color: var(--attenue);
  font-size: 0.8rem;
  font-weight: 400;
}
.arme-grille {
  grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
}
.arme-grille > section {
  min-width: 0;
}
.arme-grille .courbe-joueur {
  max-width: 100%;
  margin: 0;
}
@media (max-width: 960px) {
  .arme-grille {
    grid-template-columns: minmax(0, 1fr);
  }
}
.delta-plus {
  color: var(--vert);
}
.delta-moins {
  color: var(--rouge);
}
.fiche-note {
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
}

.fiche-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: 2.5rem;
  margin-top: 2rem;
}
@media (max-width: 960px) {
  .fiche-grille {
    grid-template-columns: minmax(0, 1fr);
  }
}
.fiche-principal > * + *,
.fiche-cote > section + section {
  margin-top: 2rem;
}
.fiche .courbe-joueur {
  max-width: none;
  margin: 0;
}
/* Toile « style de jeu » : anneaux et axes en traits fins, forme à l'accent
   (aplat léger, contour plein), parts exactes dans la liste à côté. */
.style-jeu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem 2rem;
  align-items: start;
}
.toile {
  margin: 0;
  max-width: 26rem;
}
.toile svg {
  display: block;
  width: 100%;
  height: auto;
}
.toile-anneau,
.toile-axe {
  fill: none;
  stroke: var(--bordure);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}
.toile-bord {
  stroke: var(--bordure-forte);
}
.toile-forme {
  fill: var(--accent);
  fill-opacity: 0.18;
  stroke: var(--accent);
  stroke-width: 2px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.toile-point {
  fill: var(--accent);
  stroke: var(--fond);
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}
.toile-libelle {
  fill: var(--texte);
  font-size: 13px;
  dominant-baseline: middle;
}
.toile-vide {
  fill: var(--attenue);
}
.toile-echelle {
  fill: var(--attenue);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.toile-cible {
  fill: transparent;
  cursor: help;
}
.toile-anneau,
.toile-axe,
.toile-forme,
.toile-point,
.toile-libelle,
.toile-echelle {
  pointer-events: none;
}
.style-parts {
  list-style: none;
  margin: 0;
  padding: 0;
}
.style-parts li {
  display: grid;
  grid-template-columns: 1fr auto 3.5rem;
  gap: 0.75rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--bordure);
  font-variant-numeric: tabular-nums;
}
.style-parts .style-part {
  font-weight: 700;
}
.style-parts .attenue {
  text-align: right;
}
/* Les deux graphiques côte à côte dès que la place le permet. */
.fiche-graphiques {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 2rem;
}
.fiche-detail {
  margin: 0;
}
.fiche-detail > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--bordure);
}
.fiche-detail dt {
  color: var(--attenue);
}
.fiche-detail dd {
  margin: 0;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.rivaux {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rivaux li {
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--bordure);
}
.rivaux a {
  color: var(--texte);
}
.rivaux .rival-face {
  float: right;
  color: var(--attenue);
  font-size: 0.85rem;
}
.comparer {
  max-width: none;
  margin: 0;
}
.resultat.victoire {
  color: var(--vert);
  font-weight: 700;
}
.resultat.defaite {
  color: var(--attenue);
}
/* Bilan des parties : cinq chiffres plus petits que les chiffres clés. */
.fiche-bilan dd {
  font-size: 1.35rem;
}
.fiche-bilan dd.victoire {
  color: var(--vert);
}
.fiche-bilan dd.defaite {
  color: var(--attenue);
}
.rivaux-titre {
  font-family: inherit;
  margin: 0.75rem 0 0.2rem;
  color: var(--attenue);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.rivaux-titre:first-of-type {
  margin-top: 0;
}
.classement.bilan td:not(:first-child),
.classement.bilan th:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Face-à-face. */
.face-tete {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1.5rem;
  margin: 1.5rem 0 2rem;
  padding: 1.25rem;
  border: 1px solid var(--bordure);
  background: var(--panneau);
}
/* Armes favorites des deux joueurs, sous le face-à-face. */
.face-armes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1.5rem;
  margin: -0.75rem 0 2rem;
}
.face-armes .arme-favorite {
  margin: 0;
}
.face-armes-titre {
  margin: 0;
  font-size: 0.85rem;
  text-align: center;
}
.face-joueur {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  color: var(--texte);
  font-size: 1.3rem;
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.face-joueur .fiche-avatar {
  width: 72px;
  height: 72px;
}
.face-vide {
  display: block;
  margin-top: 0.25rem;
  color: var(--attenue);
  font-size: 0.8rem;
  font-weight: 400;
}
.face-droite {
  flex-direction: row-reverse;
  text-align: right;
}
.face-score {
  text-align: center;
}
.face-score p {
  margin: 0;
}
.face-chiffres {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.face-chiffres strong {
  color: var(--attenue);
}
.face-chiffres .devant {
  color: var(--texte);
}
.face-table th[scope="row"] {
  color: var(--attenue);
  font-weight: 400;
  text-align: center;
}
.face-table td.face-a {
  text-align: right;
}
.face-table td.face-b {
  text-align: left;
}
.face-table thead th:first-child {
  text-align: right;
}
.face-table thead th:last-child {
  text-align: left;
}
.face-table td.devant {
  color: var(--texte);
  font-weight: 700;
}
.face-table td {
  color: var(--attenue);
  font-size: 1.05rem;
}
@media (max-width: 600px) {
  .face-tete {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
  }
  /* Mobile : deux colonnes, l'intitulé au-dessus. */
  .face-armes {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.75rem;
  }
  .face-armes-titre {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .face-joueur,
  .face-droite {
    flex-direction: column;
    text-align: center;
  }
  .face-chiffres {
    justify-content: center;
  }
}

/* Page figée : communauté repassée en offre gratuite. */
.page-figee {
  margin: 1rem auto 0;
  padding: 0.6rem 1rem;
  max-width: 76rem;
  border: 1px solid var(--bordure-forte);
  background: var(--panneau);
  color: var(--attenue);
  font-size: 0.9rem;
}

/* Tarifs (/pricing) : deux offres, prix par nombre de serveurs, comparatif. */
.offre {
  display: flex;
  flex-direction: column;
}
.offre ul {
  flex: 1;
}
.carte p.prix {
  color: var(--texte);
  margin: 0.25rem 0 0.5rem;
}
.prix-montant {
  font-size: 2.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.prix-periode {
  color: var(--attenue);
}
.carte p.prix-note {
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}
.carte .actions-carte + p.prix-note {
  margin: 0.5rem 0 0;
}
.conditions {
  color: var(--attenue);
  font-size: 0.85rem;
  text-align: center;
  margin: 1rem 0 0;
}
.classement.comparatif th,
.classement.comparatif td {
  text-align: center;
}
.classement.comparatif th:first-child {
  text-align: left;
}
.classement.comparatif tbody th {
  color: var(--texte);
  font-size: 0.9rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  border-bottom: 1px solid rgba(205, 210, 216, 0.07);
}
.inclus {
  color: var(--vert);
  font-weight: 700;
}
.non-inclus {
  color: var(--attenue);
}

/* Fonctionnalités de l'accueil : icône, titre et badge Pro ; 3 colonnes
   au plus (9 cartes : 3 × 3). */
.grille-fonctions {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
}
.fonction-titre {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}
.fonction-titre h3 {
  margin: 0;
}
.fonction-icone {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  color: var(--accent);
}
.badge-pro {
  margin-left: auto;
  border: 1px solid var(--bordure-forte);
  padding: 0.05rem 0.45rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--attenue);
}

/* Nous contacter (Discord de Denhold). */
.bouton-contact {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.contact-icone {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  background: currentColor;
  mask: url("/assets/links/discord.svg") center / contain no-repeat;
}
.contact-appel {
  text-align: center;
}
.contact-appel p {
  color: var(--attenue);
  margin: 0 0 0.75rem;
}
@media (max-width: 640px) {
  /* En-tête mobile : l'icône seule. */
  .entete-actions .contact-texte {
    display: none;
  }
}

/* Journal des nouveautés : version livrée, comme son tag. */
.changelog-version {
  font-family: ui-monospace, monospace;
  font-size: 0.8rem;
  color: var(--texte);
}

/* ============================================================ page d'une partie
   Verdict et score final, courbe des points (une ligne par faction à sa
   couleur, libellé au bout, repère à chaque prise de tête), distinctions,
   une table par équipe, fil des éliminations. */
.partie-verdict {
  margin: 0.35rem 0 0;
  font-size: 1.15rem;
  font-weight: 700;
}
.partie-verdict.encours {
  color: var(--alerte);
}
.partie-resume {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 1.5rem;
  align-items: center;
  margin-top: 1rem;
}
.partie-finale li {
  grid-template-columns: 6rem minmax(0, 1fr) 2.5rem;
}
.partie-finale .partie-val {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.partie-section {
  margin-top: 2rem;
}
.remontada {
  border-left-color: var(--vert);
}
.courbe-partie {
  max-width: 820px;
  margin: 0.75rem 0 0;
}
.chart-ligne {
  fill: none;
  stroke-width: 2px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
/* Repère de prise de tête : anneau de la couleur du fond. */
.chart-repere {
  stroke: var(--fond);
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}
.chart-fin {
  fill: var(--texte);
  font-size: 11px;
  font-weight: 700;
  dominant-baseline: middle;
  pointer-events: none;
}
.chart-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
}
.legende-faction {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.legende-faction svg {
  width: 14px;
  height: 4px;
}
.distinctions {
  margin-top: 0.75rem;
}
.distinctions dd a {
  display: block;
  color: var(--texte);
  font-size: 1rem;
  font-weight: 700;
}
.distinctions dd .attenue {
  font-size: 0.85rem;
}
/* Tableau des scores d'une partie : le pseudo à la couleur de son équipe. */
.classement.bilan td.joueur a.equipe-bleu { color: #4cb1ef; }
.classement.bilan td.joueur a.equipe-rouge { color: #fa503e; }
.classement.bilan td.joueur a.equipe-vert { color: #1dd65c; }
.fil-elims .horloge {
  font-variant-numeric: tabular-nums;
  color: var(--attenue);
}
.fil-elims a {
  text-decoration: none;
}
.fil-elims a:hover {
  text-decoration: underline;
}
.fil-partie > summary {
  list-style: none;
  margin-bottom: 0.75rem;
}
.fil-partie > summary::-webkit-details-marker {
  display: none;
}
.fil-partie[open] > summary {
  display: none;
}
@media (max-width: 760px) {
  .partie-resume {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================ en-tête du serveur
   Bannière de la communauté en fond (assombrie), nom du serveur, chiffres
   de la période ; à droite, copier le code (avec script) et le Discord. */
.serveur-entete {
  position: relative;
  isolation: isolate;
  align-items: flex-end;
  margin-bottom: 0.5rem;
}
.serveur-entete.avec-bandeau {
  min-height: 11rem;
  padding: 1.25rem 1.25rem 1rem;
  border: 1px solid var(--bordure);
  border-bottom: 3px solid var(--accent);
  overflow: hidden;
}
.serveur-bandeau {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Voile : le texte reste lisible sur n'importe quelle bannière. */
.serveur-entete.avec-bandeau::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(13, 14, 16, 0.94) 25%, rgba(13, 14, 16, 0.55));
}
.serveur-chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  margin: 0.6rem 0 0;
}
.serveur-chiffres div {
  display: flex;
  flex-direction: column-reverse;
}
.serveur-chiffres dt {
  color: var(--attenue);
  font-size: 0.8rem;
}
.serveur-chiffres dd {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.serveur-tete-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
/* Copier le code : même bouton que « Rejoindre le Discord » (le script
   copie). Sans script, il disparaît : le code reste sélectionnable dans la
   ligne du serveur. */
.comu-lien.code {
  padding: 0.55rem 1rem;
  border-color: var(--bordure);
  background: transparent;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0;
}
.comu-lien.code:hover {
  border-color: var(--bordure-forte);
  background: var(--panneau-2);
}
.comu-lien.code .code-action {
  color: inherit;
  font-size: inherit;
}
.comu-lien.code.copie .code-action {
  color: var(--vert);
}
.comu-lien-copie .comu-lien-icone {
  mask-image: url("/assets/copy.svg");
}
html:not(.js) .serveur-tete-actions .code {
  display: none;
}
.serveur-periode {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.75rem;
}
/* Page d'une partie en mobile : colonnes du tableau sans coupure (il défile),
   libellés de la courbe agrandis (le SVG y est réduit de moitié). */
.classement.bilan td,
.classement.bilan th {
  white-space: nowrap;
}
.courbe-partie svg {
  overflow: visible;
}
@media (max-width: 760px) {
  .courbe-partie .chart-fin,
  .courbe-partie .chart-xlabel,
  .courbe-partie .chart-ylabel {
    font-size: 17px;
  }
}