/* PROPOSITION DE REFONTE — « tableau d'affichage ».
 *
 * Cette feuille est chargée EN DERNIER (index.html) : elle ne fait que
 * reprendre des éléments existants, sans toucher au HTML ni aux autres
 * feuilles. Retirer sa balise <link> rend le site exactement tel qu'avant.
 * Le raisonnement complet est dans docs/proposition-refonte.md.
 *
 * L'idée, en une phrase : le site reste clair et violet, et les chiffres
 * qu'on vient lire deviennent les héros de chaque écran — grands, dans la
 * police des titres, soulignés d'un filet violet comme le bandeau lumineux
 * d'un tableau de score. Les tendances se lisent d'un coup d'œil (▲ ▼).
 * Une seule scène sombre : le court de nuit derrière la connexion.
 */

/* === 0. Fondations ====================================================== */

:root {
  /* L'encre du court de nuit, derrière la connexion (section 5) : un violet
     presque noir, de la même famille que l'accent. C'est le seul endroit du
     site où elle sert — les encarts sombres des autres écrans ont été
     retirés après relecture (8 octobre 2026). */
  --encre:            #17132a;
  --encre-2:          #221c3a;
  --ombre-encre:      0 18px 48px rgba(23, 19, 42, .28);
}

/* Les tendances se LISENT, sans compter sur la couleur seule : un triangle
   devant chaque variation positive ou négative. Le texte de remplacement
   vide (« / "" ») évite qu'un lecteur d'écran annonce « triangle ». */
.liste-compacte strong.up::before,
.mesure strong.up::before,
.bandeau-equipe strong.up::before { content: "▲\00a0" / ""; font-size: .72em; vertical-align: .12em; }
.liste-compacte strong.down::before,
.mesure strong.down::before,
.bandeau-equipe strong.down::before { content: "▼\00a0" / ""; font-size: .72em; vertical-align: .12em; }

/* Les chiffres qu'on compare prennent la police des titres, en chiffres
   alignés : un classement se lit comme un tableau de scores. */
.liste-compacte strong,
.match-compact strong,
.mesure strong,
.tbl-classement td.num {
  font-family: var(--police-titre);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* === 1. Accueil ========================================================== */

/* Le titre devient une affiche : plus grand, plus serré. C'est la première
   chose qu'on voit et il doit dire « sport », pas « formulaire ». */
.landing-texte h1 {
  font-size: clamp(38px, 5.6vw, 68px);
  line-height: .96;
  letter-spacing: -.055em;
  margin: 14px 0 16px;
}
.landing-intro { font-size: 17px; }

/* La fraîcheur : un filet violet en tête, comme le bandeau lumineux d'un
   panneau de score, et les valeurs en grands chiffres. */
.landing-fraicheur { position: relative; overflow: hidden; padding: 20px 22px; }
.landing-fraicheur::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--violet), var(--violet-2));
}
.landing-fraicheur h2 { font-size: 17px; margin-bottom: 14px; }
.landing-fraicheur dl.faits { gap: 10px; }
.landing-fraicheur dl.faits > div { padding-bottom: 10px; align-items: baseline; }
.landing-fraicheur dl.faits dd { font-family: var(--police-titre); font-size: 16px; font-weight: 700; }

/* L'aperçu du classement se lit comme un podium : rangs en chiffres
   d'affichage, les trois premiers en violet, l'Elo en grand à droite. */
#landing-classement li { padding: 10px 0; align-items: center; }
#landing-classement .rang {
  width: 26px; font-family: var(--police-titre); font-size: 15px; font-weight: 700; color: var(--muted);
}
#landing-classement li:nth-child(-n+3) .rang { color: var(--violet); }
#landing-classement strong { font-size: 17px; font-weight: 700; }

/* Les scores, en chiffres d'affichage : c'est le résultat qu'on cherche. */
#landing-matchs strong { font-size: 15px; font-weight: 700; }

@media (max-width: 760px) {
  .landing-texte h1 { font-size: clamp(34px, 10vw, 44px); }
  .landing-intro { font-size: 16px; }
  /* Sur téléphone, les deux appels prennent toute la largeur, l'un sous
     l'autre : deux cibles franches au pouce plutôt que deux demi-boutons. */
  .landing-actions { display: grid; grid-template-columns: 1fr; }
  .landing-actions > a { width: 100%; min-height: 48px; }
}

/* === 2. Joueurs et carte joueur ======================================== */

/* Le nom est le titre de la carte ; l'Elo, sa raison d'être. La case Elo
   passe en lilas avec un chiffre plus grand : c'est elle qu'on compare d'une
   carte à l'autre, les deux autres mesures l'accompagnent. */
.carte-joueur h3 { font-size: 16px; }
.carte-joueur .mesure strong { font-size: 16px; font-weight: 700; }
.carte-joueur .mesure:nth-child(2) { background: var(--lilac-soft); }
.carte-joueur .mesure:nth-child(2) span { color: var(--violet-dark); }
.carte-joueur .mesure:nth-child(2) strong { color: var(--violet-dark); font-size: 19px; }
/* Une carte de l'équipe porte un liseré violet sur son bord gauche : on
   retrouve ses joueurs dans une liste sans lire les pastilles. */
.carte-joueur.dans-equipe { box-shadow: inset 4px 0 0 var(--violet); }

@media (max-width: 760px) {
  /* Sur téléphone, les deux actions quittent la colonne de droite, où elles
     s'empilaient serrées, pour une rangée à elles sous les mesures : le
     « + » carré de 44 px et « Comparer » qui prend le reste de la largeur.
     La carte gagne une ligne, mais le nom et les mesures récupèrent toute
     la largeur et les deux cibles sont franches. */
  .carte-joueur {
    grid-template-columns: 38px minmax(0, 1fr);
    grid-template-areas:
      "avatar nom"
      "avatar mesures"
      ".      action";
    row-gap: 6px;
  }
  .carte-joueur:has(.empechement) {
    grid-template-areas:
      "avatar nom"
      "avatar mesures"
      "avatar empechement"
      ".      action";
  }
  .carte-joueur .boutons-carte { display: flex; gap: 8px; margin-top: 4px; }
  .carte-joueur .boutons-carte .btn { flex: 1; min-height: 44px; }
  /* L'Elo, en tête de la ligne de mesures, garde son accent. */
  .carte-joueur .mesure:nth-child(2) { background: none; }
  .carte-joueur .mesure strong { font-size: 13px; }
  .carte-joueur .mesure:nth-child(2) strong { font-size: 15px; }
}

/* La fiche joueur : ses quatre mesures en grands chiffres d'affichage,
   l'Elo un cran au-dessus. Elles gardent leurs cases claires. */
.fiche-mesures strong { font-family: var(--police-titre); font-size: 22px; font-weight: 700; }
.fiche-mesures > div:nth-child(2) strong { font-size: 28px; color: var(--violet-dark); }
.fiche-mesures strong.up::before { content: "▲\00a0" / ""; font-size: .6em; vertical-align: .2em; }
.fiche-mesures strong.down::before { content: "▼\00a0" / ""; font-size: .6em; vertical-align: .2em; }
/* Le nom du joueur, titre de sa fiche, à la taille d'un titre de page. */
.fiche-identite h3 { font-size: 24px; letter-spacing: -.035em; }

/* === 3. Classement ===================================================== */

/* L'en-tête du tableau reste collé en haut quand on fait défiler les 405
   joueurs : on sait toujours quelle colonne on lit. */
.tbl-classement thead th { position: sticky; top: 0; z-index: 1; background: var(--card); }

/* Sur ordinateur : des lignes un peu plus hautes, et la flèche de
   tendance dans la colonne 30 j. (Sur téléphone, le tableau devient des
   cartes et `::before` y porte déjà le libellé de la colonne.) */
@media (min-width: 761px) {
  .tbl-classement tbody td { padding-top: 11px; padding-bottom: 11px; font-size: 14px; }
  .tbl-classement td.up::before { content: "▲\00a0" / ""; font-size: .72em; vertical-align: .12em; }
  .tbl-classement td.down::before { content: "▼\00a0" / ""; font-size: .72em; vertical-align: .12em; }
}
.tbl-classement td.td-rang { font-weight: 700; color: var(--muted); }
/* Le podium : les trois premiers rangs en violet, comme sur l'accueil. */
.tbl-classement tbody tr:nth-child(-n+3) td.td-rang { color: var(--violet); }
/* L'Elo est la colonne du classement : plus grand et plus gras. */
.tbl-classement td[data-libelle="Elo"] { font-size: 16px; font-weight: 700; color: var(--ink); }
.tbl-classement td.up, .tbl-classement td.down { font-weight: 700; }

/* Sur téléphone, chaque joueur tient sur deux lignes au lieu de quatre :
   le rang en grand à gauche, le nom en haut, puis ATP, Elo et 30 j côte à
   côte, chacun avec son libellé. On voit cinq joueurs de plus par écran. */
@media (max-width: 760px) {
  .tbl-classement tbody tr {
    grid-template-columns: 36px repeat(3, minmax(0, 1fr));
    row-gap: 6px;
  }
  .tbl-classement td.td-rang {
    grid-column: 1; grid-row: 1 / span 2; align-self: center; justify-self: center;
    font-family: var(--police-titre); font-size: 20px; font-weight: 700;
  }
  .tbl-classement td.td-nom { grid-column: 2 / -1; grid-row: 1; justify-content: flex-start; }
  .tbl-classement td[data-libelle] {
    grid-row: 2; justify-content: flex-start; gap: 5px; font-size: 14px;
  }
  .tbl-classement td[data-libelle="ATP"] { grid-column: 2; }
  .tbl-classement td[data-libelle="Elo"] { grid-column: 3; font-size: 16px; }
  .tbl-classement td[data-libelle="30 j"] { grid-column: 4; }
  .tbl-classement td[data-libelle]::before { font-family: var(--police-texte); font-size: 12px; font-weight: 400; }
}

/* === 4. Espace connecté : Jouer et Analyser ============================ */

/* Le portefeuille, dans les deux modes : même filet violet en tête que la
   fraîcheur de l'accueil, chiffres plus grands, et la VALEUR TOTALE — le
   score de la partie — un cran au-dessus des trois autres. */
.bandeau-equipe, .ruban { position: relative; overflow: hidden; }
.bandeau-equipe::before, .ruban::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px; z-index: 1;
  background: linear-gradient(90deg, var(--violet), var(--violet-2));
}
.bandeau-equipe .chiffre { padding: 18px 20px; }
.bandeau-equipe strong { font-size: 26px; }
.bandeau-equipe .chiffre:first-child strong { font-size: 32px; }

.ruban .case { padding: 18px 20px; }
.ruban .v { font-size: 26px; }
.ruban .case:nth-child(3) .v { font-size: 32px; }

/* « Mon équipe », carte principale de Jouer : un filet violet à gauche la
   désigne comme le cœur de l'écran. */
.carte-equipe-dominante { box-shadow: var(--ombre), inset 4px 0 0 var(--violet); }

/* L'état des données (Analyser) : valeurs en chiffres d'affichage. */
.faits-fraicheur strong { font-family: var(--police-titre); font-size: 15px; }

@media (max-width: 760px) {
  .bandeau-equipe strong, .ruban .v { font-size: 22px; }
  .bandeau-equipe .chiffre:first-child strong, .ruban .case:nth-child(3) .v { font-size: 26px; }
  .bandeau-equipe .chiffre, .ruban .case { padding: 14px 16px; }
}

/* === 5. Connexion (et les autres écrans de compte) ===================== */

/* Le formulaire est posé sur le court, vu de haut, la nuit : un panneau
   d'encre où les lignes réglementaires sont tracées en filets clairs (même
   dessin que le fond de page, jamais une photo). C'est la seule scène sombre
   du site : elle donne au moment « j'entre dans le jeu » un décor à lui.
   Le dessin passe par une image SVG en data: — la politique de contenu du
   site l'autorise (img-src 'self' data:). */
.vue-auth {
  padding: 56px 16px;
  border-radius: var(--rayon);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='xMidYMid slice'%3E%3Cg stroke='%23ffffff' stroke-opacity='.14' stroke-width='1.6' fill='none'%3E%3Crect x='92' y='55' width='216' height='190'/%3E%3Cline x1='118' y1='55' x2='118' y2='245'/%3E%3Cline x1='282' y1='55' x2='282' y2='245'/%3E%3Cline x1='118' y1='108' x2='282' y2='108'/%3E%3Cline x1='118' y1='192' x2='282' y2='192'/%3E%3Cline x1='200' y1='108' x2='200' y2='192'/%3E%3Cline x1='70' y1='150' x2='330' y2='150' stroke-width='2.4'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat,
    radial-gradient(circle at 50% 0%, rgba(124, 58, 237, .35), transparent 60%),
    linear-gradient(160deg, var(--encre-2), var(--encre));
  box-shadow: var(--ombre-encre);
}
/* La carte du formulaire reste claire — on saisit sur du blanc — avec le
   filet violet en tête, comme les encarts de chiffres. */
.formulaire-carte { position: relative; overflow: hidden; padding: 32px 30px 26px; }
.formulaire-carte::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 4px;
  background: linear-gradient(90deg, var(--violet), var(--violet-2));
}
.formulaire-carte h1 { font-size: 30px; letter-spacing: -.045em; }
/* Le lien de retour, posé sous la carte sur le fond d'encre, y reste
   lisible. */
.vue-auth > .carte .retour { margin-top: 8px; }

@media (max-width: 760px) {
  /* Sur téléphone, le panneau occupe toute la largeur et la carte presque
     toute : on garde la scène sans rogner le formulaire. */
  .vue-auth { padding: 28px 10px; margin: 0 -6px; }
  .formulaire-carte { padding: 24px 18px 20px; }
  .formulaire-carte h1 { font-size: 26px; }
}