/* Mode Analyser — la même chose, en plus dense.
 *
 * Même portefeuille, mêmes positions, mêmes joueurs suivis que le mode
 * Jouer : seul l'affichage change. Rien ici ne doit écrire dans l'état,
 * sinon les deux modes finiraient par diverger.
 */

.grille-analyser {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, .75fr);
  gap: 18px;
  align-items: start;
}
/* Sans ça, la page défile horizontalement.
 *
 * Un enfant de grille a `min-width: auto` : il refuse de devenir plus étroit
 * que son contenu. Un tableau un peu large pousse donc sa colonne, qui pousse
 * la grille, qui pousse la page — et le `overflow-x: auto` posé sur le
 * conteneur du tableau ne sert à rien, puisqu'il n'est jamais trop petit.
 * Mesuré avant correction : 1035 px de contenu pour 1024 px de fenêtre. */
.grille-analyser > * { min-width: 0; }

/* --- Bandeau de portefeuille ------------------------------------------- */
.ruban {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border-radius: var(--rayon);
  overflow: hidden;
  border: 1px solid var(--line);
}
.ruban .case { background: var(--card); padding: 14px 16px; }
.ruban .k {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  margin-bottom: 5px;
}
.ruban .v { font-size: 20px; font-weight: 740; font-variant-numeric: tabular-nums; }
.ruban .v.star { color: var(--gold); }

/* --- Fraîcheur détaillée ----------------------------------------------- */
.bloc-fraicheur { padding: 15px 17px; margin-top: 14px; }
.bloc-fraicheur h3 { font-size: 13px; margin: 0 0 10px; }
.faits-fraicheur {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}
.fait { padding: 10px 11px; border-radius: var(--rayon-petit); background: var(--metal); }
/* Fond gris métal : #667085 n'y donne que 4,36:1. */
.fait span { display: block; font-size: 12px; color: var(--muted-sur-metal); margin-bottom: 3px; }
.fait strong { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.fait.alerte { background: var(--down-soft); }
.fait.alerte strong { color: var(--down); }
.ligne-revisions {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--muted);
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

/* --- Graphique --------------------------------------------------------- */
.carte-graphique { padding: 16px; }

.graphique-titre .sous { font-size: 12.5px; color: var(--muted); }

/* Les surfaces portent leurs vraies couleurs : ocre de la terre battue, vert
   du gazon, bleu du dur. Ce sont les seules couleurs que ce sport possède en
   propre, et elles rendent le filtre lisible sans lire les mots. */
.filtre-surface { display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: var(--metal); }

.legende { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; min-height: 24px; }
.legende .item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--metal);
  font-size: 12.5px;
}
.legende .cle { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.legende .retirer {
  border: 0;
  background: none;
  padding: 0 0 0 2px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
}
.legende .retirer:hover { color: var(--down); }

.boite-graphique { position: relative; }
.graphique { width: 100%; height: 280px; display: block; }
/* Sans courbe, le cadre se replie : trois cents pixels de blanc ressemblent
   à une panne, et l'explication est désormais dans l'en-tête. */
.boite-graphique.vide { display: none; }
.infobulle {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(27, 22, 41, .94);
  color: #fff;
  font-size: 12.5px;
  line-height: 1.5;
  box-shadow: 0 10px 28px rgba(27, 22, 41, .28);
  transition: opacity .12s;
  max-width: 230px;
}
.infobulle .ligne { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.infobulle .cle { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.infobulle .val { font-variant-numeric: tabular-nums; font-weight: 700; }
.infobulle .nom { color: rgba(255, 255, 255, .72); }

/* --- Joueurs suivis, positions, journal --------------------------------- */
.carte-panneau { padding: 16px; margin-bottom: 18px; }
.carte-panneau h2 {
  font-size: 15px;
  margin: 0 0 11px;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.carte-panneau h2 .sous {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 400;
}
.carte-panneau h2 .btn { margin-left: auto; }

.compteur-cmp {
  font-size: 12.5px;
  color: var(--muted);
  margin: -4px 0 9px;
}
.compteur-cmp.plein { color: var(--gold); font-weight: 640; }

.journal { max-height: 190px; overflow-y: auto; }
.journal-ligne {
  display: flex;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}
.journal-ligne:last-child { border-bottom: 0; }
.journal-ligne time { color: var(--muted); flex: none; font-variant-numeric: tabular-nums; }

/* --- Choix des joueurs suivis ------------------------------------------ */
.modale-choix { width: min(620px, calc(100vw - 24px)); }
.choix-compte {
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 10px;
}
.choix-compte.plein { color: var(--gold); font-weight: 640; }
.recherche {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--rayon-petit);
  border: 1px solid var(--line-strong);
  background: #fff;
  margin-bottom: 10px;
}
.choix-liste { max-height: 48vh; }
.choix-liste tr[data-choix] { cursor: pointer; }
.choix-liste tr[data-choix]:hover td { background: var(--lilac-softer); }
.choix-liste tr.bloque { opacity: .45; cursor: not-allowed; }

/* --- Classement --------------------------------------------------------- */
.tri-classement { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; }
.tri-classement button {
  border: 1px solid var(--line);
  background: #fff;
  padding: 7px 11px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 620;
  color: var(--muted);
}
.tri-classement button[aria-pressed="true"] {
  background: var(--lilac-soft);
  border-color: rgba(124, 58, 237, .22);
  color: var(--violet-dark);
  font-weight: 700;
}
.tbl-classement th.actif { color: var(--violet-dark); }
/* Assez large pour un rang à quatre chiffres : la colonne tronquait les
   centaines, et on ne voyait plus de quel rang il s'agissait. */
.tbl-classement td.rang, .tbl-classement th.rang { width: 54px; }
.classement-defilable { max-height: 460px; }

/* --- Résultats du tournoi ---------------------------------------------- */
.res-meta { color: var(--muted); font-size: 12.5px; white-space: nowrap; }

.res-score { font-variant-numeric: tabular-nums; white-space: nowrap; }

tr.jour td {
  background: var(--metal);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  font-weight: 700;
}
.resultats-defilable { max-height: 420px; }

/* --- Responsive -------------------------------------------------------- */
@media (max-width: 1000px) {
  .grille-analyser { grid-template-columns: 1fr; }

  /* « État des données » descend en bas.
   *
   * Il s'ouvrait en DEUXIÈME position, juste sous le portefeuille : heure de
   * vérification, « révision des données r4 », « modèle elo-2026.10 ». C'est
   * de l'information de diagnostic, utile pour vérifier qu'on ne regarde pas
   * des chiffres périmés, mais ce n'est pas ce pour quoi on ouvre
   * l'application. Sur un écran de téléphone, elle occupait tout le premier
   * défilement avant la moindre donnée sportive.
   *
   * Elle reste accessible, et à sa place sur ordinateur où la place ne
   * manque pas.
   */
  #vue-analyser { display: flex; flex-direction: column; }
  #vue-analyser > .ruban { order: 1; }
  #vue-analyser > .grille-analyser { order: 2; }
  #vue-analyser > .bloc-fraicheur { order: 3; margin-top: 18px; }
}
@media (max-width: 760px) {
  .ruban { grid-template-columns: 1fr 1fr; }
  .graphique { height: 230px; }
  .carte-panneau h2 .btn { margin-left: 0; width: 100%; }

  /* Le filtre de surface défile plutôt que de se casser. « Terre battue »
     passait sur deux lignes et déformait toute la barre. */
  .filtre-surface {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }

  /* --- Les tableaux deviennent des CARTES ------------------------------
   *
   * Mesuré à 375 px : le tableau des résultats demandait 425 pixels pour
   * 313 disponibles, celui des joueurs suivis 409. Ils défilaient donc
   * horizontalement — un geste que personne ne devine — et les noms se
   * cassaient sur quatre à six lignes : « Alexander / Zverev / n° 2 bat /
   * Juncheng / Shang ».
   *
   * Chaque ligne devient une carte, et chaque cellule porte l'intitulé de sa
   * colonne, posé en JavaScript dans `data-libelle` : l'en-tête disparaît,
   * l'information qu'il portait non.
   *
   * Le tableau reste un tableau dans le document. Seule sa présentation
   * change, donc un lecteur d'écran garde la structure et les en-têtes.
   */
  /* Le défilement HORIZONTAL disparaît ; le vertical reste, et il est
     indispensable : le classement compte 405 lignes et les résultats jusqu'à
     120. Sans plafond, la page atteignait 58 000 pixels — soit soixante-dix
     écrans — parce que chaque ligne devenue carte prend quatre fois plus de
     hauteur. Mesuré, puis corrigé. */
  .carte-panneau .defilable { overflow-x: visible; overflow-y: auto; }
  .carte-panneau table { display: block; }
  .carte-panneau thead { display: none; }
  .carte-panneau tbody { display: block; }

  /* Quatre colonnes : case à cocher, rang, nom, action. Les deux premières
     sont en `auto` et se replient à zéro quand le tableau n'a pas de case ou
     pas de rang — le classement n'a pas de case, les positions n'ont ni
     l'une ni l'autre. Les mettre dans la même cellule les superposait. */
  .carte-panneau tbody tr {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 4px;
    padding: 11px 12px;
    margin-bottom: 8px;
    border: 1px solid var(--line);
    border-radius: var(--rayon-petit);
    background: #fff;
  }
  .carte-panneau tbody tr:last-child { margin-bottom: 0; }

  .carte-panneau td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 0;
    border: 0;
    grid-column: 1 / -1;
    font-size: 12.5px;
  }
  /* L'intitulé de colonne, repris devant la valeur. */
  .carte-panneau td[data-libelle]::before {
    content: attr(data-libelle);
    color: var(--muted);
    font-size: 12.5px;
    white-space: nowrap;
  }
  .carte-panneau td.num { text-align: left; }

  /* Les cellules qui forment l'en-tête de la carte : case, rang et nom sur
     la première ligne, action à droite. */
  .carte-panneau td.td-case  { grid-column: 1; grid-row: 1; }
  /* La taille de la case vient de la règle commune, qui la porte à 44 px de
     zone tactile. Une règle locale la dupliquait sans reprendre son
     `box-sizing: content-box`, et l'écrasait donc en la ramenant à 24 px —
     mesuré. Une seule déclaration vaut mieux que deux qui se contredisent. */
  .carte-panneau td.td-rang  { grid-column: 2; grid-row: 1; justify-self: start;
                               font-variant-numeric: tabular-nums; color: var(--muted); }
  .carte-panneau td.td-nom   { grid-column: 3; grid-row: 1; font-size: 13.5px; font-weight: 640; }
  .carte-panneau td.td-action{ grid-column: 4; grid-row: 1; justify-content: flex-end; }
  .carte-panneau td.td-action .btn { min-height: 44px; }

  /* Les résultats : la date et le tour forment une ligne de contexte, le
     match occupe toute la largeur. */
  .carte-panneau td.td-date { grid-column: 1 / 3; grid-row: 1; }
  .carte-panneau td.td-tour { grid-column: 3 / -1; grid-row: 1; justify-content: flex-start; }
  .carte-panneau td.td-match { grid-row: 2; display: block; line-height: 1.5; }
  .carte-panneau tr.jour td {
    grid-column: 1 / -1;
    display: block;
    background: none;
    padding: 0;
  }
  .carte-panneau tr.jour { background: none; border: 0; padding: 10px 2px 2px; margin: 0; }

  /* Hauteurs plafonnées, ajustées au format carte : une carte occupe environ
     quatre fois la hauteur d'une ligne de tableau, donc les plafonds de
     l'affichage sur ordinateur laisseraient voir trois entrées au lieu de
     douze. Ceux-ci montrent cinq à six cartes — assez pour comprendre qu'on
     peut faire défiler, pas assez pour noyer la page. */
  .classement-defilable { max-height: 60vh; }
  .resultats-defilable { max-height: 65vh; }
  #suivis-table { max-height: none; }   /* dix joueurs au maximum */
  .journal { max-height: 40vh; }
}