/* NOVASTAR PREMIUM (13 octobre 2026) — l'onglet Stats d'Analyser, la page
 * /premium et l'offre affichée sous le comparateur. Les couleurs viennent de
 * tokens.css ; le bleu et l'orange des deux joueurs d'un face-à-face sont
 * ceux des deux premières courbes du comparateur. */

.pastille-premium {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--rayon-pastille);
  background: var(--lilac-soft); color: var(--violet-dark); font-size: var(--texte-12); font-weight: 700;
}

/* --- L'onglet Stats ----------------------------------------------------------- */
.bloc-stats { margin-bottom: 18px; }
.bloc-stats .bloc-tete { align-items: center; }
.stats-outils { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; }
.deux-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choix-joueur-stats { margin-bottom: 12px; }
.stats-carte { padding: 14px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: var(--rayon-petit); background: var(--card); }
.stats-carte h3 { margin: 0 0 4px; font-size: var(--texte-15); }
.stats-carte h4 { margin: 12px 0 6px; font-size: var(--texte-13-5); }
.stats-carte .meta { margin: 0 0 8px; }
.stats-tete-joueur { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.stats-tete-joueur h3 { font-size: 19px; margin: 0; }
.stats-chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.stats-chiffres.deux { grid-template-columns: 1fr 1fr; }
.stats-chiffres > div { padding: 8px 10px; border-radius: var(--rayon-petit); background: var(--metal); }
.stats-chiffres small { display: block; color: var(--muted-sur-metal); font-size: var(--texte-12); }
.stats-chiffres strong { font-family: var(--police-titre); font-size: 20px; font-variant-numeric: tabular-nums; }

/* Une mesure = un libellé, une barre, une valeur. */
.ligne-stat { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 64px; align-items: center; gap: 10px; padding: 5px 0; font-size: var(--texte-13); }
.rail-stat { height: 8px; border-radius: 8px; background: var(--metal); overflow: hidden; }
.rail-stat i { display: block; height: 100%; border-radius: 8px; background: var(--violet); }
.ligne-stat-val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Face-à-face */
.proba-elo { display: flex; height: 34px; border-radius: var(--rayon-petit); overflow: hidden; color: #fff; font-weight: 800; font-size: var(--texte-13-5); }
.proba-elo div { display: grid; place-items: center; min-width: 44px; }
.duo-stat { display: grid; grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr); gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: var(--texte-13); font-variant-numeric: tabular-nums; }
.duo-stat:last-child { border-bottom: 0; }
.duo-stat span:first-child { text-align: right; }
.duo-stat span:nth-child(2) { text-align: center; color: var(--muted); font-size: var(--texte-12); }
.duo-stat .mieux { font-weight: 800; }
.radar { display: block; width: 100%; max-width: 380px; margin: 0 auto; }
.radar text { font-family: var(--police-texte); font-size: 12px; fill: var(--ink-2); }
.radar .radar-grille { fill: none; stroke: var(--line-strong); }
.legende-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin: 4px 0 8px; font-size: var(--texte-13); }
.legende-stats span { white-space: nowrap; }
.legende-stats i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.matchs-h2h { list-style: none; margin: 0; padding: 0; }
.matchs-h2h li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: var(--texte-13); }
.matchs-h2h li:last-child { border-bottom: 0; }
.matchs-h2h small { grid-column: 1 / -1; color: var(--muted); }

/* Classements */
.puces-categories { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.puce-cat { min-height: 36px; padding: 0 12px; border-radius: var(--rayon-pastille); border: 1px solid var(--line-strong); background: var(--card); color: var(--ink-2); font-weight: 650; font-size: var(--texte-13); }
.puce-cat[aria-pressed="true"] { background: var(--violet); border-color: var(--violet); color: var(--sur-aplat); }
.top-stats { margin: 0; padding: 0; list-style: none; counter-reset: rang; }
.top-stats li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: baseline; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: var(--texte-14); }
.top-stats li:last-child { border-bottom: 0; }
.top-stats li::before { counter-increment: rang; content: counter(rang); font-weight: 800; color: var(--muted); }
.top-stats li:first-child::before { color: var(--violet); }
.top-stats strong { font-variant-numeric: tabular-nums; }
.top-stats small { color: var(--muted); font-weight: 500; }

/* Sans abonnement : l'aperçu flouté et l'offre par-dessus. */
.apercu-premium { position: relative; min-height: 280px; border-radius: var(--rayon-petit); overflow: hidden; }
.apercu-flou { filter: blur(5px); opacity: .6; padding: 10px; user-select: none; }
.apercu-appel { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 8px; padding: 18px; text-align: center;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .25), rgba(255, 255, 255, .9) 40%); }
.apercu-appel h3 { margin: 0; font-size: var(--texte-15); }
.apercu-appel p { margin: 0 0 6px; color: var(--ink-2); max-width: 34ch; }
.offre-comparateur { margin: 10px 0; padding: 14px; border-radius: var(--rayon-petit); background: var(--lilac-softer); border: 1px dashed var(--lilac); display: grid; gap: 6px; justify-items: start; }
.offre-comparateur p { margin: 0; }
.offre-comparateur h3 { margin: 4px 0 0; font-size: var(--texte-14); }

/* --- La page /premium ---------------------------------------------------------- */
.grille-premium > .carte { padding: 18px; }
.grille-premium > .carte h2 { margin: 0 0 6px; }
.grille-premium { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.formules { display: grid; gap: 10px; border: 0; padding: 0; margin: 12px 0; }
.formule { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; border: 2px solid var(--line-strong); border-radius: var(--rayon-petit); cursor: pointer; background: var(--card); }
.formule:has(input:checked) { border-color: var(--violet); background: var(--lilac-softer); }
.formule input { width: 20px; height: 20px; accent-color: var(--violet); flex: none; }
.formule strong { font-family: var(--police-titre); font-size: 24px; letter-spacing: -.03em; }
.formule small { display: block; color: var(--muted); font-size: var(--texte-12-5); }
.bandeau-formule { position: absolute; top: -11px; right: 12px; padding: 2px 10px; border-radius: var(--rayon-pastille); background: var(--violet); color: var(--sur-aplat); font-style: normal; font-weight: 750; font-size: var(--texte-12); }
.tableau-offres { width: 100%; border-collapse: collapse; font-size: var(--texte-13-5); }
.tableau-offres th, .tableau-offres td { padding: 8px 4px; border-bottom: 1px solid var(--line); text-align: left; }
.tableau-offres td { text-align: center; width: 80px; }
.tableau-offres th[scope="row"] { font-weight: 550; }
.tableau-offres .oui { color: var(--up-texte); font-weight: 800; }
.tableau-offres .non { color: var(--muted); }
.tableau-offres .un { color: var(--gold-texte); font-weight: 700; font-size: var(--texte-12-5); }

@media (max-width: 760px) {
  .grille-premium, .deux-choix { grid-template-columns: 1fr; }
  .stats-chiffres { grid-template-columns: 1fr 1fr; }
  .ligne-stat { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 58px; }
  .duo-stat { grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); }
  /* Analyser est en colonne ordonnée sur téléphone (analyser.css) : les
     statistiques viennent juste après le ruban et les onglets. */
  section[data-vue="app-analyser"] > .bloc-stats { order: 2; }
  .onglets-analyser button { padding-inline: 6px; }
  /* Quatre vues depuis l'ajout de « Profils » : avec la marge habituelle,
     « Classements » sortait de 12 px à 390 de large. */
  .stats-outils .segmente button { padding-inline: 8px; }
}
@media (pointer: coarse) {
  .puce-cat { min-height: 44px; }
}


/* --- Infographies de la fiche pro (octobre 2026) ------------------------- */

/* Un tableau trop large pour un téléphone défile dans sa carte, jamais la
   page entière. */
.defilable-x { overflow-x: auto; overscroll-behavior-x: contain; }

/* Forme récente : une case par match, la variation d'Elo dessous. */
.forme-bande { list-style: none; margin: 10px 0 6px; padding: 0; display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; max-width: 420px; }
.forme-bande li { display: grid; justify-items: center; gap: 3px; }
.forme-bande li > span { display: grid; place-items: center; width: 100%; aspect-ratio: 1; max-width: 36px;
  border-radius: 8px; font-weight: 800; font-size: var(--texte-12); }
.forme-bande .v { background: var(--up-soft); color: var(--up-texte); }
.forme-bande .d { background: var(--down-soft); color: var(--down-texte); }
.forme-bande small { font-size: var(--texte-12); font-variant-numeric: tabular-nums; color: var(--muted); }
.forme-bande small.up, .forme-details small.up { color: var(--up-texte); }
.forme-bande small.down, .forme-details small.down { color: var(--down-texte); }
.forme-details summary, .saisons-details summary { cursor: pointer; min-height: 44px; display: flex; align-items: center;
  font-weight: 640; font-size: var(--texte-13-5); color: var(--violet-dark); }
.forme-details ul { list-style: none; margin: 0; padding: 0; }
.forme-details li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 0;
  border-bottom: 1px solid var(--line); font-size: var(--texte-13); }
.forme-details li:last-child { border-bottom: 0; }
.forme-details li .meta { grid-column: 1 / -1; margin: 0; font-size: var(--texte-12); }
.forme-details li small { align-self: center; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Grille surface × niveau. */
.grille-stats { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: var(--texte-13); min-width: 300px; }
.grille-stats th { font-size: var(--texte-12); font-weight: 600; color: var(--muted); text-align: center; padding: 2px; }
.grille-stats tbody th { text-align: left; color: var(--ink-2); white-space: nowrap; }
.grille-stats td { text-align: center; padding: 7px 4px; border-radius: 8px; line-height: 1.2; }
.grille-stats td strong { display: block; font-size: var(--texte-14); font-variant-numeric: tabular-nums; }
.grille-stats td small { font-size: var(--texte-12); font-variant-numeric: tabular-nums; opacity: .85; }
.grille-stats td.vide-case { color: var(--muted); background: var(--metal); }
.g1 { background: var(--grille-1); color: var(--ink); }
.g2 { background: var(--grille-2); color: var(--ink); }
.g3 { background: var(--grille-3); color: var(--ink); }
.g4 { background: var(--grille-4); color: var(--sur-aplat); }
.g5 { background: var(--grille-5); color: var(--sur-aplat); }
/* Moins de cinq matchs : un contour en pointillé, pour qu'on ne lise pas
   « 100 % » sur un seul match comme un vrai point fort. Un contour, et non
   un hachurage, qui brouillait les chiffres posés dessus ; il se voit aussi
   sans distinguer les teintes. */
.grille-stats td.peu { outline: 2px dashed var(--muted); outline-offset: -4px; }
.legende-grille { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 10px 0 0; font-size: var(--texte-12); color: var(--muted); }
.legende-grille i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -2px; }
.legende-grille i.peu { background: var(--card); outline: 2px dashed var(--muted); outline-offset: -2px; }

/* Graphiques par saison. Le texte du SVG est à 12 unités pour 340 de large :
   environ 12 px sur téléphone, un peu plus sur ordinateur, jamais moins. */
.graphique-annees { display: block; width: 100%; max-width: 460px; margin: 6px auto 0; overflow: visible; }
.graphique-annees .g-grille { stroke: var(--gridline); stroke-width: 1; }
.graphique-annees .g-axe { font-family: var(--police-texte); font-size: 12px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.graphique-annees .g-ligne { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
/* L'anneau de la couleur du fond détache les points qui se superposent. */
.graphique-annees .g-point { stroke: var(--card); stroke-width: 2; }

.tableau-saisons, .tableau-profils { width: 100%; border-collapse: collapse; font-size: var(--texte-13);
  font-variant-numeric: tabular-nums; }
.tableau-saisons th, .tableau-saisons td, .tableau-profils th, .tableau-profils td {
  padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.tableau-saisons th:first-child, .tableau-profils th:first-child { text-align: left; }
.tableau-saisons thead th, .tableau-profils thead th { font-size: var(--texte-12); color: var(--muted); font-weight: 600; }
.tableau-profils .mieux { font-weight: 800; }
.tableau-profils .cle { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.puces-profils { margin: 4px 0 10px; }

/* Tout gratuit pour l'instant (23 octobre 2026, classe posée par premium.js) :
   plus de pastille « Premium », plus d'offre sous le comparateur ni dans le
   menu. Le code reste ; il suffit de rallumer le payant côté serveur. */
.premium-gratuit .pastille-premium,
.premium-gratuit .sous.premium,
.premium-gratuit .offre-comparateur,
.premium-gratuit .grille-premium,
.premium-gratuit .vente-premium { display: none !important; }