/* Je pronostique, thème Paddock 2.0 (jetons du thème : --carte, --or, --pelouse…) */
.jp { display: grid; gap: 16px; margin: 0 0 1.5em; }
.jp-panneau { display: grid; gap: 16px; }
.jp-panneau[hidden] { display: none; }
.jp h3 { margin: 0; font-size: 24px; }
.jp h4 { margin: 2px 0 0; font: 700 20px var(--display); }
.jp-libelle { font-size: 14px; color: var(--encre-3); }
.jp-attente, .jp-vide { margin: 0; color: var(--encre-3); }
.jp-erreur, .jp-message.erreur { margin: 0; color: var(--perd); }
.jp-message { margin: 0; min-height: 1.5em; color: var(--encre-2); }
.jp-message.ok { color: var(--gagne); }
.jp-plus { color: var(--gagne); }
.jp-moins { color: var(--perd); }

/* classement */
.jp-rang-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 10px; }

.jp-rang td { white-space: nowrap; }
.jp-rang td:first-child { font: 800 18px var(--display); color: var(--or); }
.jp-rang tr.moi td { background: var(--brun); }
.jp-joueur { padding: 4px 0; background: none; border: 0; color: var(--encre); font: 700 17px var(--display); letter-spacing: .02em; cursor: pointer; text-align: left; }
.jp-joueur:hover { color: var(--or-clair); text-decoration: underline; }
.jp-courbe { display: block; width: 120px; height: 32px; }
.jp-courbe-ligne { fill: none; stroke: var(--pelouse); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.jp-courbe-aire { fill: rgba(143, 207, 95, .15); }
.jp-pages { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; }
.jp-pages .bouton { min-width: 44px; }
.jp-pages .bouton:disabled { opacity: .4; cursor: default; }

/* fiche joueur */
.jp-fiche-joueur[hidden] { display: none; }
.jp-fiche-joueur, .jp-ma-fiche { display: grid; gap: 16px; }
.jp-fiche { display: grid; gap: 16px; }
.jp-fiche-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.jp-fiche-tete img { border-radius: 50%; border: 2px solid var(--or); }
.jp-fiche-tete > div { flex: 1 1 200px; display: grid; gap: 2px; }
.jp-fiche-tete .jp-courbe { width: 180px; height: 48px; }
.jp-fiche-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.jp-fiche-stats span { display: block; font: 600 11px var(--texte); letter-spacing: .09em; text-transform: uppercase; color: var(--encre-3); }
.jp-fiche-stats strong { font: 800 22px var(--display); }
.jp-fermer { justify-self: start; }

/* historique par jour */
.jp-historique { display: grid; gap: 12px; }
.jp-jour-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.jp-jour-barre .bouton { min-width: 44px; padding-inline: 12px; }
.jp-jour-barre .bouton:disabled { opacity: .4; cursor: default; }
.jp-jour-barre input[type="date"] { min-height: 44px; }
.jp-jour-titre::first-letter { text-transform: uppercase; }
.jp-jours-joues { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.jp-jours-joues:empty { display: none; }
.jp-jour { min-width: 36px; min-height: 36px; border-radius: 4px; border: 1px solid var(--trait); background: var(--carte-2); color: var(--encre); font: 700 15px var(--texte); cursor: pointer; }
.jp-jour:hover { border-color: var(--or); }
.jp-jour.actif { background: var(--pelouse); border-color: var(--pelouse); color: var(--fond); }
.jp-jour-courses { display: grid; gap: 12px; }
.jp-course { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--trait); border-radius: 4px; background: var(--carte-2); }
.jp-course-tete { display: flex; justify-content: space-between; align-items: start; gap: 8px; }
.jp-etat { flex: none; padding: 3px 10px; border-radius: 4px; font: 600 13px var(--texte); background: #2c3d1f; color: var(--pelouse); }
.jp .table-paddock { margin: 0; }
/* petites colonnes à largeur fixe, le nom du cheval prend le reste ; sur téléphone le tableau défile (16/10/2026) */
/* en pixels : les en-têtes du thème sont en petits caractères, une largeur en em y valait deux fois moins (17/10/2026) */
.jp-pronos { table-layout: fixed; min-width: 640px; }
.jp-pronos th:nth-child(1) { width: 80px; } .jp-pronos th:nth-child(3) { width: 115px; } .jp-pronos th:nth-child(4) { width: 85px; } .jp-pronos th:nth-child(5) { width: 110px; } .jp-pronos th:nth-child(6) { width: 110px; }
.jp-pronos .jp-cote-fin { color: var(--encre-3); }
.jp-pronos td { overflow: hidden; text-overflow: ellipsis; }	/* texte trop long coupé dans sa case (le nom cachait la cote, les gains débordaient) */
.jp-pronos td { white-space: nowrap; }
.jp-pronos tr.gagne .jp-gain { color: var(--gagne); font-weight: 700; }
.jp-pronos tr.perd .jp-gain { color: var(--perd); }
.jp-pronos .num { margin-right: 4px; }
.jp-rapports { font-size: 14px; color: var(--encre-2); }

/* jeu */
.jp-jeu { display: grid; gap: 14px; }
.jp-jeu-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.jp-porte { font: 800 22px var(--display); color: var(--or); }
.jp-porte .jp-libelle { font: 500 14px var(--texte); }
.jp .onglet[aria-pressed="true"] { background: var(--pelouse); color: var(--fond); border-color: var(--pelouse); }
.jp .onglet.fermee { color: var(--encre-3); border-style: dashed; }
.jp-pari { display: grid; gap: 14px; }
.jp-pari:empty { display: none; }
.jp-pari-form { display: grid; gap: 16px; padding-top: 4px; }
.jp-groupe { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 8px; }
.jp-groupe legend { padding: 0; margin-bottom: 8px; font: 600 12px var(--texte); letter-spacing: .1em; text-transform: uppercase; color: var(--encre-3); }
.jp-chevaux { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.jp-ch { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; min-height: 56px; padding: 8px 12px; border-radius: 4px; border: 1px solid var(--trait); background: var(--carte-2); color: var(--encre); font: inherit; cursor: pointer; }
.jp-ch b { grid-row: span 2; font: 800 24px var(--display); color: var(--or); min-width: 28px; text-align: center; }
.jp-ch span { font: 700 15px var(--display); letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jp-ch small { font-size: 12px; color: var(--encre-3); }
.jp-ch:hover:not(:disabled) { border-color: var(--or); }
.jp-ch[aria-pressed="true"] { background: #2c3d1f; border-color: var(--pelouse); outline: 2px solid var(--pelouse); outline-offset: -2px; }
.jp-ch:disabled { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.jp-mise { grid-template-columns: 1fr auto; align-items: center; }
.jp-mise legend { grid-column: 1 / -1; }
.jp-mise input[type="range"] { width: 100%; accent-color: var(--or); min-height: 44px; }
.jp-mise input[type="number"] { width: 6em; min-height: 44px; font: 500 15px var(--texte); color: var(--encre); background: var(--carte-2); border: 1px solid var(--trait); border-radius: 4px; padding: 8px 10px; }
.jp-objectif { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.jp-objectif label { font: 500 14px var(--texte); color: var(--encre-2); }
.jp-mise .jp-objectif input { width: 6em; min-height: 44px; font: 500 15px var(--texte); color: var(--encre); background: var(--carte-2); border: 1px solid var(--trait); border-radius: 4px; padding: 8px 10px; }
.jp-estimation { grid-column: 1 / -1; margin: 0; }
.jp-estimation:empty { display: none; }
.jp-plusieurs { display: flex; align-items: center; gap: 8px; min-height: 44px; margin-bottom: 8px; font: 500 14px var(--texte); color: var(--encre-2); cursor: pointer; }
.jp-plusieurs input { width: 20px; height: 20px; accent-color: var(--or); }
.jp-repartition { gap: 10px; }
.jp-repartition .jp-objectif input { width: 6em; min-height: 44px; font: 500 15px var(--texte); color: var(--encre); background: var(--carte-2); border: 1px solid var(--trait); border-radius: 4px; padding: 8px 10px; }
.jp-rep-resultat > p { margin: 6px 0 0; }
.jp-rep-resultat .erreur { color: var(--perd); }
.jp-rep-table th:nth-child(n+3), .jp-rep-table td:nth-child(n+3), .jp-rep-table tfoot td { text-align: right; white-space: nowrap; }
.jp-pari-form > .bouton { justify-self: start; }
.jp-annuler { min-height: 36px; padding: 4px 12px; }
.jp-infos summary { cursor: pointer; color: var(--encre-2); }
.jp-infos table { margin-top: 8px; }
.jp-infos tr.np td { color: var(--encre-3); text-decoration: line-through; }
/* en-têtes triables (Cote, P.P., P.E. ; 13/10/2026) */
.jp-tri { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.jp-tri:hover, .jp-tri:focus-visible { color: var(--or); }
th[aria-sort="ascending"] .jp-tri, th[aria-sort="descending"] .jp-tri { color: var(--encre); }
.jp-tri-sens { font-size: 9px; color: var(--or); }

.jp-regles ul { padding-left: 1.3em; }
.jp-regles li { margin-bottom: 6px; }