/* Mode Jouer — l'interface par défaut.
 *
 * Elle doit expliquer le produit à quelqu'un qui ne connaît ni l'Elo ni les
 * interfaces financières. D'où un hero qui dit la mécanique en une phrase,
 * des cartes larges plutôt qu'un tableau dense, et aucun jargon de marché.
 */

/* --- Hero de première visite ------------------------------------------- */
.hero {
  padding: 38px 40px;
  border-radius: 28px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  gap: 32px;
  align-items: center;
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 255, 255, .92), transparent 14rem),
    radial-gradient(circle at 66% 108%, rgba(124, 58, 237, .14), transparent 20rem),
    linear-gradient(130deg, #fff 0%, #faf7ff 48%, #ece3ff 100%);
  border: 1px solid rgba(105, 70, 170, .14);
  box-shadow: var(--ombre);
}

.chapeau {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(99, 65, 165, .13);
  font-size: 12px;
  font-weight: 740;
  color: var(--violet-dark);
  margin-bottom: 16px;
}
.chapeau i { width: 6px; height: 6px; border-radius: 50%; background: var(--violet); }

/* --- Le principe en 3 étapes ------------------------------------------- */
.carte-principe {
  position: relative;
  z-index: 2;
  padding: 20px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(82, 52, 139, .12);
  box-shadow: 0 18px 46px rgba(78, 52, 127, .11), inset 0 1px 0 #fff;
}

.etapes { display: grid; gap: 8px; }

/* Le `>` est indispensable : sans lui, la règle blocifiait AUSSI les `strong`
   écrits à l'intérieur du texte de l'étape. Le chiffre mis en avant occupait
   alors sa propre ligne, séparé de la phrase — le défaut relevé par la revue.
   Ici, seul le titre de l'étape est un bloc. */
.etape > div > strong { display: block; font-size: 12.5px; margin-bottom: 2px; }

/* --- Retour : « Bienvenue dans ta partie » ----------------------------- */
.hero-retour {
  padding: 28px 32px;
  border-radius: 26px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
  gap: 24px;
  align-items: center;
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 255, 255, .9), transparent 13rem),
    linear-gradient(132deg, #fff 0%, #f8f4ff 58%, #ece2ff 100%);
  border: 1px solid rgba(105, 70, 170, .14);
  box-shadow: var(--ombre);
}

.nouvelle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
  margin-bottom: 7px;
}
.nouvelle:last-child { margin-bottom: 0; }
.nouvelle strong { font-size: 12px; }
.nouvelle small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
/* `flex: none` et `nowrap` : sans eux, « 250 ★ » se coupait en deux lignes
   sur un téléphone, l'étoile se retrouvant seule sous le chiffre. */
.nouvelle-valeur { margin-left: auto; text-align: right; flex: none; white-space: nowrap; }
.nouvelle-valeur strong { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.nouvelle-valeur small { font-variant-numeric: tabular-nums; }
.nouvelle > div:not(.nouvelle-valeur):not(.avatar) { min-width: 0; }

/* --- « Et maintenant ? » ------------------------------------------------ */
.prochaine-etape {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 16px;
  padding: 11px 13px;
  border-radius: var(--rayon-petit);
  background: rgba(255, 255, 255, .78);
  border: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-2);
}

.prochaine-etape.active { background: var(--up-soft); border-color: rgba(19, 122, 88, .18); }
.prochaine-etape.active b { color: var(--up); }
.prochaine-etape.attente { background: var(--gold-soft); border-color: rgba(138, 92, 0, .18); }
.prochaine-etape.attente b { color: var(--gold); }

/* --- L'objectif, en une jauge -------------------------------------------- */
.objectif { margin-top: 12px; }

/* Un repère au centre : c'est le point de DÉPART, pas le zéro d'une échelle.
   La barre pousse à droite quand on gagne, à gauche quand on perd — l'écart
   se lit sans calcul. */
.objectif-barre::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -2px;
  bottom: -2px;
  width: 1px;
  background: var(--line-strong);
}

/* --- La divergence ATP / Novastar --------------------------------------- */
.divergence {
  margin-top: 14px;
  padding: 18px 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
}

.divergence-nom .lien-joueur { font-size: 13.5px; font-weight: 700; }

@media (max-width: 760px) {

}

/* --- Bandeau de fraîcheur ---------------------------------------------- */
.bandeau-fraicheur {
  margin-top: 14px;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: var(--rayon);
}

.bandeau-fraicheur .btn-doux { margin-left: auto; flex: none; }

/* --- Avatar ------------------------------------------------------------ */
.avatar {
  width: 44px; height: 44px;
  flex: none;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  background: linear-gradient(145deg, #c9adff, #7841d8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
.avatar.petit { width: 34px; height: 34px; border-radius: 11px; font-size: 12px; }
/* Trois teintes, choisies d'après l'identifiant : deux joueurs voisins dans
   une liste n'ont alors pas la même pastille, ce qui aide à les distinguer
   du coin de l'œil. Aucune signification. */
.avatar.t1 { background: linear-gradient(145deg, #90dfc6, #1f7f62); }
.avatar.t2 { background: linear-gradient(145deg, #ffb3bb, #c45263); }

/* --- Cartes joueurs ---------------------------------------------------- */
.grille-jeu {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(300px, .7fr);
  gap: 18px;
  align-items: start;
}

/* --- Barre de liste ----------------------------------------------------- */
.barre-liste {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.barre-liste .recherche {
  flex: 1 1 220px;
  max-width: 320px;
  min-width: 0;
  margin: 0;
}

.carte-joueur {
  position: relative;
  overflow: hidden;
  padding: 15px;
  border-radius: var(--rayon);
  background: linear-gradient(150deg, #fff, #faf9fc);
  border: 1px solid var(--line);
  transition: transform .18s, box-shadow .18s, border-color .18s;
  display: flex;
  flex-direction: column;
}
.carte-joueur:hover {
  transform: translateY(-2px);
  box-shadow: var(--ombre-haute);
  border-color: rgba(124, 58, 237, .22);
}
.carte-joueur::after {
  content: "";
  position: absolute;
  width: 104px; height: 104px;
  right: -40px; bottom: -46px;
  border-radius: 50%;
  background: var(--lilac-soft);
  opacity: .7;
  pointer-events: none;
}
.carte-joueur-haut {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  position: relative;
  z-index: 1;
}
/* Une carte dont on ne peut rien faire se DIT, sans disparaître ni devenir
   illisible : on doit pouvoir consulter la fiche du joueur, et comprendre
   pourquoi il n'est pas cotable. L'estomper suffit, le griser l'effacerait. */
.carte-joueur.indisponible { background: linear-gradient(150deg, #fdfdfe, #f6f5f8); }
.carte-joueur.indisponible h3,
.carte-joueur.indisponible .mesure strong { color: var(--ink-2); }
.carte-joueur.dans-equipe { border-color: rgba(124, 58, 237, .32); }

.empechement {
  position: relative;
  z-index: 1;
  margin: 10px 0 0;
  padding: 7px 9px;
  border-radius: 9px;
  background: var(--gold-soft);
  font-size: 12px;
  line-height: 1.4;
  color: var(--gold-texte);
}

.jeton-equipe {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--lilac-soft);
  color: var(--violet-dark);
  font-size: 12px;
  font-weight: 700;
}

/* Un bouton empêché : visiblement inerte, mais toujours focalisable et
   cliquable — c'est le clic qui délivre l'explication. */
[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
}
.btn-doux[aria-disabled="true"]:hover { background: var(--lilac-soft); color: var(--violet-dark); }

.carte-joueur h3 { font-size: 14px; margin: 12px 0 2px; position: relative; z-index: 1; }
.carte-joueur .pays { font-size: 12px; color: var(--muted); margin-bottom: 12px; position: relative; z-index: 1; }

/* Les trois mesures restent TOUJOURS visibles, y compris sur mobile : la
   spécification l'exige, et les masquer au premier rétrécissement revient à
   priver le lecteur de ce sur quoi il doit choisir. */
.mesures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  position: relative;
  z-index: 1;
  margin-top: auto;
}
.mesure {
  padding: 8px 6px;
  border-radius: 10px;
  background: var(--metal);
  text-align: center;
}
.mesure span {
  display: block;
  font-size: 12px;
  color: var(--muted-sur-metal);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 3px;
}
.mesure strong { font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* Les deux boutons tiennent sur UNE ligne chacun.
   « Ajouter à mon équipe » passait sur deux lignes dans la colonne de droite,
   et les cartes d'une même rangée n'avaient alors plus la même hauteur — le
   genre de décalage qu'on remarque sans savoir d'où il vient. */
.boutons-carte {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px;
  margin-top: 12px;
  position: relative;
  z-index: 1;
  align-items: stretch;
}
.boutons-carte button {
  padding: 9px 8px;
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Mon équipe -------------------------------------------------------- */
/* Le 76 px suit la hauteur de la barre du haut, qui grandit de l'encoche. */
.carte-equipe { position: sticky; top: calc(76px + var(--encoche-haut)); padding: 18px; }

.equipe-compte {
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--lilac-soft);
  color: var(--violet-dark);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  flex: none;
  font-variant-numeric: tabular-nums;
}
/* Au complet : la pastille change de couleur avant qu'on bute sur la limite,
   pas au moment où l'ajout est refusé. */
.equipe-compte.plein { background: var(--gold-soft); color: var(--gold); }

.equipe-vide {
  margin-top: 14px;
  padding: 18px 14px;
  border-radius: var(--rayon);
  border: 1px dashed rgba(103, 71, 164, .25);
  background: var(--lilac-softer);
  text-align: center;
}
.equipe-vide .rond {
  width: 42px; height: 42px;
  border-radius: 14px;
  margin: 0 auto 10px;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--violet);
  font-size: 19px;
  box-shadow: 0 6px 20px rgba(81, 55, 132, .09);
}
.equipe-vide strong { display: block; font-size: 12.5px; }
.equipe-vide p { font-size: 12.5px; color: var(--muted); line-height: 1.45; margin: 5px 0 12px; }

.position-equipe {
  margin-top: 11px;
  padding: 11px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
}
.position-haut { display: flex; align-items: center; gap: 10px; }
.position-nom { font-size: 12px; font-weight: 680; }
.position-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.position-valeur { margin-left: auto; text-align: right; flex: none; }
.position-valeur strong { display: block; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.position-valeur small { font-size: 12px; font-variant-numeric: tabular-nums; }
/* « Récupérer mes stars » n'est pas l'action principale juste après un
   ajout : en pleine largeur, le gros bouton invitait à annuler ce qu'on
   venait de faire. Il reste accessible, en retrait et aligné à droite, avec
   la zone tactile de 44 px exigée par le point 7. */
.position-equipe .btn {
  margin: 9px 0 0 auto;
  display: block;
  width: auto;
  min-height: 44px;
  font-size: 13px;
}

/* --- Les matchs de la journée ------------------------------------------ */
.carte-journee { padding: 12px; }
.grille-journee {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.match-jour {
  position: relative;
  padding: 13px 14px;
  border-radius: 15px;
  background: linear-gradient(145deg, #fff, #faf9fc);
  border: 1px solid var(--line);
}
/* Un match de MON équipe se distingue, et passe en premier. Une liste de six
   résultats génériques n'intéresse personne ; celui qui fait bouger mon
   équipe, si. */
.match-jour.mien {
  border-color: rgba(124, 58, 237, .3);
  background: linear-gradient(145deg, #fff, var(--lilac-softer));
}
.marque-mien {
  position: absolute;
  top: -8px;
  left: 13px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--violet);
  color: #fff;
  font-size: 12px;
  font-weight: 760;
  letter-spacing: .02em;
}
.match-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}
.match-principal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
}
.match-principal strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.match-perdant {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 5px;
  font-size: 12.5px;
  color: var(--muted);
}
.mouvement-elo { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.badge-lot {
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--up-soft);
  color: var(--up-texte);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  flex: none;
}

/* --- Modale d'attribution ---------------------------------------------- */
.mini-joueur {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 15px 0;
  padding: 11px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
}
.mini-joueur strong { font-size: 12.5px; }
.mini-joueur small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.mini-joueur .droite { margin-left: auto; text-align: right; flex: none; }
.mini-joueur .droite strong { font-size: 14px; font-variant-numeric: tabular-nums; }

.ligne-montant { display: flex; justify-content: space-between; align-items: flex-end; }
.ligne-montant label { font-size: 12.5px; color: var(--muted); }
.ligne-montant output {
  font-size: 22px;
  font-weight: 760;
  color: var(--violet-dark);
  font-variant-numeric: tabular-nums;
}
input[type="range"] { width: 100%; accent-color: var(--violet); margin: 11px 0 9px; }

.prereglages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.prereglages button { padding: 9px 4px; font-size: 12.5px; }
.prereglages button[aria-pressed="true"] {
  background: var(--lilac-soft);
  border-color: rgba(124, 58, 237, .25);
  color: var(--violet-dark);
  font-weight: 700;
}

.consequence {
  margin: 13px 0;
  padding: 11px 12px;
  border-radius: var(--rayon-petit);
  background: var(--gold-soft);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--gold);
}
.avertissement { margin: 8px 0 0; font-size: 12.5px; color: var(--down); min-height: 1.2em; }
.modale .btn-principal { width: 100%; margin-top: 4px; }

/* --- Modale « un exemple concret » ------------------------------------- */
.scenario {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}

.scenario-case.gagne { background: var(--up-soft); }
.scenario-case.perd  { background: var(--down-soft); }

.note { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-top: 13px; }

/* --- Responsive -------------------------------------------------------- */
@media (max-width: 1000px) {

  .carte-equipe { position: static; }
  .grille-journee { grid-template-columns: 1fr; }

  /* Mon équipe AVANT LA RECHERCHE, et pas seulement avant la liste.
   *
   * La version précédente la faisait remonter au-dessus des cartes — mais
   * elle restait SOUS le champ de recherche, qu'elle repoussait alors de
   * 787 pixels (mesuré à 375 px de large). On tapait « Sinner », le compteur
   * annonçait « 1 joueur sur 405 », et rien n'apparaissait : le résultat
   * était presque un écran plus bas, derrière tout le bloc d'équipe. On
   * croyait la recherche cassée.
   *
   * `display: contents` sur la grille fait de ses deux enfants des enfants
   * directs de la section : `order` peut alors les classer avec le titre, la
   * recherche et la note, qui ne sont pas dans la grille. Sans ce passage,
   * `order` ne pourrait jamais les faire franchir cette frontière.
   *
   * L'ordre VISUEL change ; celui du document reste « choisir, puis
   * posséder », donc le clavier et les lecteurs d'écran ne sont pas affectés.
   */
  #choisir { display: flex; flex-direction: column; }

  #choisir > .titre-section { order: 2; }

  #choisir .carte-equipe { order: 1; margin-bottom: 18px; }

  /* Une équipe vide n'a rien à dire, et prend 300 px avant la recherche.
     Le reste de l'écran EST déjà l'invitation à choisir un joueur. */
  #choisir .carte-equipe.sans-joueur { display: none; }
}
@media (max-width: 760px) {

  /* --- La carte devient une LIGNE -------------------------------------
   *
   * Une carte fait 300 px de haut. Douze cartes, c'est 3 600 px de liste sur
   * un écran de 812 — la page entière mesurait 6 450 px, soit huit écrans.
   * On ne compare pas douze joueurs en faisant huit fois le tour de son
   * pouce.
   *
   * Même balisage, autre présentation : la grille reprend les mêmes éléments
   * en deux lignes — nom et action en haut, mesures en dessous. Rien n'est
   * supprimé, donc rien n'est perdu pour un lecteur d'écran.
   */
  .liste-joueurs { grid-template-columns: 1fr; gap: 8px; }

  .carte-joueur {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    grid-template-areas:
      "avatar nom     action"
      "avatar mesures action";
    align-items: center;
    column-gap: 11px;
    row-gap: 3px;
    padding: 11px 13px;
    min-height: 0;
  }
  /* Le rond décoratif n'a pas sa place dans une ligne de 70 px. */
  .carte-joueur::after { display: none; }
  .carte-joueur:hover { transform: none; }

  /* `display: contents` fait de l'avatar et de la pastille d'état des
     enfants directs de la grille, sans toucher au HTML. */
  .carte-joueur-haut { display: contents; }
  .carte-joueur .avatar { grid-area: avatar; width: 38px; height: 38px; border-radius: 12px; font-size: 12.5px; }

  /* L'état se réduit à un point posé SUR l'avatar, comme une pastille de
     présence. Placé en bout de ligne de nom, il chevauchait les noms longs
     — « Felix Auger-Aliassime● ». Le libellé complet reste dans le title, et
     la phrase d'empêchement le dit en toutes lettres juste en dessous. */
  .carte-joueur .etat {
    grid-area: avatar;
    place-self: end end;
    padding: 0;
    background: none;
    font-size: 0;
    gap: 0;
    z-index: 2;
  }
  .carte-joueur .etat i {
    width: 11px;
    height: 11px;
    border: 2px solid #fff;
    box-sizing: border-box;
  }

  .carte-joueur h3 {
    grid-area: nom;
    margin: 0;
    font-size: 13.5px;
    white-space: nowrap;
    /* Pas d'`overflow: hidden` ici : il DÉCOUPERAIT la zone tactile étirée du
       nom, juste en dessous. La troncature est donc portée par le bouton
       lui-même, qui n'a rien à faire déborder. */
  }
  /* La zone tactile du nom couvre TOUTE la ligne, pas la hauteur du texte.
   *
   * Le nom seul fait 21 px de haut — moins de la moitié du minimum d'Apple.
   * Lui imposer 44 px de hauteur ferait passer la ligne de 68 à 91 px et
   * rendrait l'essentiel du gain de compacité. Un pseudo-élément étiré sur
   * la ligne donne les deux : un texte de 21 px, une cible de 68.
   *
   * Il s'arrête avant le bouton d'action, qui garde sa propre zone. */
  .carte-joueur h3 .lien-joueur {
    font: inherit;
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    /* La zone tactile déborde sur toute la hauteur de la ligne ; les marges
       négatives annulent exactement ce débordement, donc rien ne bouge.
       21 px de texte, 56 px à viser. */
    padding: 12px 0 23px;
    margin: -12px 0 -23px;
  }
  /* Le bouton d'action reste au-dessus, avec sa propre zone de 44 px. */
  .carte-joueur .boutons-carte { position: relative; z-index: 2; }
  .carte-joueur .etat { pointer-events: none; }
  /* Le pays et le rang sont repris dans la ligne de mesures. */
  .carte-joueur .pays { display: none; }

  .carte-joueur .mesures {
    grid-area: mesures;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0;
  }
  .carte-joueur .mesure {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding: 0;
    background: none;
    border-radius: 0;
  }
  .carte-joueur .mesure span { margin: 0; font-size: 12px; }
  .carte-joueur .mesure strong { font-size: 12px; }

  .carte-joueur .empechement {
    grid-area: mesures;
    grid-row: 3;
    margin: 4px 0 0;
    font-size: 12px;
  }
  .carte-joueur:has(.empechement) {
    grid-template-areas:
      "avatar nom         action"
      "avatar mesures     action"
      "avatar empechement action";
  }

  /* --- Le bouton devient un « + » carré -------------------------------
   *
   * « Ajouter à mon équipe » occupait 112 px de large et passait sur deux
   * lignes, ne laissant que 177 px aux trois mesures — qui débordaient alors
   * sur une troisième ligne. Un carré de 44 px rend cette largeur à
   * l'information.
   *
   * Le libellé n'est pas perdu : il est porté par `aria-label`, posé en
   * JavaScript avec le nom du joueur (« Ajouter à mon équipe — Jannik
   * Sinner »). Un lecteur d'écran annonce donc PLUS qu'avant, où le bouton
   * se lisait « Ajouter à mon équipe » douze fois de suite sans dire qui.
   */
  .carte-joueur .boutons-carte {
    grid-area: action;
    display: block;
    margin: 0;
  }
  .carte-joueur .boutons-carte button {
    /* 44 × 44 : le minimum tactile d'Apple. */
    width: 44px;
    height: 44px;
    padding: 0;
    font-size: 0;            /* le texte cède la place au signe */
    display: grid;
    place-items: center;
    border-radius: 13px;
  }
  .carte-joueur .boutons-carte button::before {
    content: "+";
    font-size: 21px;
    font-weight: 600;
    line-height: 1;
  }
  /* Un joueur déjà dans l'équipe, ou qu'on ne peut pas prendre : le signe
     change, pour qu'on ne croie pas que le bouton fait toujours la même
     chose. */
  .carte-joueur.dans-equipe .boutons-carte button::before { content: "★"; font-size: 17px; }
  .carte-joueur .boutons-carte button[aria-disabled="true"]::before { content: "×"; font-size: 19px; }

  .carte-joueur .mesures { gap: 11px; }
  /* Les tris restent atteignables, en défilant horizontalement — et jamais
     repliés dans un menu : ce sont eux qui font choisir. */
  .tris { width: 100%; overflow-x: auto; }

}