/*
 * La Corbeille — la piste : composants du tableau d'affichage.
 *
 * Séparé de app.css pour tenir la limite de 300 lignes par fichier. On y
 * trouve le couloir (une ligne par cheval), les casaques et les barres de
 * part — dont les largeurs passent par des classes, la CSP interdisant les
 * styles en ligne.
 */

/* ---- la piste : une ligne par cheval ---- */

.piste { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.35rem; }
.couloir {
  display: grid;
  grid-template-columns: 1.6rem 2.1rem minmax(8rem, 1fr) 7rem minmax(9rem, 14rem);
  align-items: center;
  gap: 0.4rem 0.9rem;
  padding: 0.5rem 0.9rem 0.5rem 0.6rem;
  border: 1px solid var(--trait);
  border-left: 3px solid var(--trait);
  border-radius: 4px;
  background: var(--panneau);
}
.couloir:hover { background: var(--panneau-clair); }
.couloir.favori { border-left-color: var(--or); background: linear-gradient(90deg, rgba(245, 179, 60, 0.1), var(--panneau) 40%); }
.couloir.hors-course { opacity: 0.45; }

.rang { color: var(--sourdine); font-size: 0.8rem; text-align: right; }
.dossard {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 4px;
  font-weight: 700;
  color: var(--fond);
  background: var(--teinte, var(--or));
}
.dossard.hors { background: var(--trait); color: var(--sourdine); }
.cheval {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.15;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.driver { display: block; font-family: var(--mono); font-weight: 400; font-size: 0.7rem; letter-spacing: 0; text-transform: none; color: var(--sourdine); }

.bloc-cote { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; }
.cote { font-size: 1.7rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.chip {
  display: inline-block;
  padding: 0 0.4rem;
  border-radius: 3px;
  background: var(--trait);
  color: var(--sourdine);
  font-size: 0.72rem;
  white-space: nowrap;
}
.chip.flux-plus { background: rgba(55, 192, 138, 0.16); color: var(--vert); }
.chip.flux-moins { background: rgba(217, 88, 75, 0.16); color: var(--rouge); }
.flux-plus { color: var(--vert); }
.flux-moins { color: var(--rouge); }
.hausse { color: var(--vert); }
.baisse { color: var(--rouge); }

.bloc-part { display: grid; gap: 0.2rem; }
.part-valeur { font-size: 0.75rem; color: var(--sourdine); font-variant-numeric: tabular-nums; }

/* Une part reconstituée depuis le résidu du pool, et non publiée telle quelle.
 * La mention suit la valeur partout où elle apparaît : c'est la seule façon de
 * ne pas faire passer un calcul pour une lecture. */
.deduit {
  font-style: normal;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sourdine);
  border-bottom: 1px dashed var(--sourdine);
}

/* ---- ruban des quatre cotes (E1) : quatre masses, quatre prix ---- */

.ruban { grid-column: 3 / -1; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.prix {
  display: grid;
  gap: 0.05rem;
  min-width: 3.9rem;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--trait);
  border-radius: 3px;
}
.prix i { font-style: normal; font-size: 0.58rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sourdine); }
.prix b { font-size: 0.95rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.prix.haute { border-color: var(--or); background: rgba(245, 179, 60, 0.1); }
.prix.haute b { color: var(--or); }
.prix.muet { border-style: dashed; opacity: 0.5; }
.prix.ecart { margin-left: auto; border-style: none; }
.prix.ecart b { font-size: 0.8rem; font-weight: 400; color: var(--sourdine); }

.barre { display: block; height: 6px; border-radius: 3px; background: var(--piste-fond); overflow: hidden; }
.barre > span {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  border-radius: 3px;
  /* La teinte vient de la casaque quand la barre en porte une (.d0 … .d11). */
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--teinte, var(--or)) 55%, #000),
    var(--teinte, var(--or))
  );
  animation: pousse 0.7s ease-out both;
}
@keyframes pousse { from { width: 0; } to { width: var(--w, 0%); } }

/* ---- couloir de duel (E2) : deux barres, même échelle ---- */

.couloir.duel { grid-template-columns: 2.1rem minmax(7rem, 1fr) 8rem minmax(12rem, 24rem); }
.bloc-ecart { text-align: right; }
.chip.argent { background: rgba(245, 179, 60, 0.16); color: var(--or); }
.chip.presse { background: rgba(78, 143, 217, 0.16); color: var(--bleu); }
.duo { display: grid; gap: 0.25rem; }
.rangee { display: grid; grid-template-columns: 3.6rem 1fr 3.2rem; gap: 0.5rem; align-items: center; }
.rangee i { font-style: normal; font-size: 0.7rem; color: var(--sourdine); }
.rangee b { font-size: 0.75rem; text-align: right; font-variant-numeric: tabular-nums; font-weight: 400; }
.rangee .barre > span { background: linear-gradient(90deg, #2b4d75, var(--bleu)); }
.rangee.argent .barre > span { background: linear-gradient(90deg, var(--or-sombre), var(--or)); }

@media (max-width: 48rem) {
  .couloir.duel { grid-template-columns: 2.1rem 1fr; }
  .bloc-ecart { grid-column: 1 / -1; text-align: left; }
  .duo { grid-column: 1 / -1; }
}

/* ---- casaques : la teinte identifie le cheval d'un écran à l'autre ----
 * Une seule source de vérité : la classe pose --teinte, le dossard la prend
 * en fond et la barre de part en dégradé. */

.d0 { --teinte: #f5b33c; } .d1 { --teinte: #4e8fd9; } .d2 { --teinte: #d9584b; }
.d3 { --teinte: #37c08a; } .d4 { --teinte: #b98cd6; } .d5 { --teinte: #efe7d2; }
.d6 { --teinte: #d98f4e; } .d7 { --teinte: #59c2c9; } .d8 { --teinte: #c9c14e; }
.d9 { --teinte: #e07ba8; } .d10 { --teinte: #7f9bc4; } .d11 { --teinte: #96b04e; }
/* ---- largeurs de barre, par pas de 2 % (CSP : pas de style en ligne) ---- */
.l0{--w:0%}.l1{--w:2%}.l2{--w:4%}.l3{--w:6%}.l4{--w:8%}.l5{--w:10%}.l6{--w:12%}.l7{--w:14%}.l8{--w:16%}.l9{--w:18%}
.l10{--w:20%}.l11{--w:22%}.l12{--w:24%}.l13{--w:26%}.l14{--w:28%}.l15{--w:30%}.l16{--w:32%}.l17{--w:34%}.l18{--w:36%}.l19{--w:38%}
.l20{--w:40%}.l21{--w:42%}.l22{--w:44%}.l23{--w:46%}.l24{--w:48%}.l25{--w:50%}.l26{--w:52%}.l27{--w:54%}.l28{--w:56%}.l29{--w:58%}
.l30{--w:60%}.l31{--w:62%}.l32{--w:64%}.l33{--w:66%}.l34{--w:68%}.l35{--w:70%}.l36{--w:72%}.l37{--w:74%}.l38{--w:76%}.l39{--w:78%}
.l40{--w:80%}.l41{--w:82%}.l42{--w:84%}.l43{--w:86%}.l44{--w:88%}.l45{--w:90%}.l46{--w:92%}.l47{--w:94%}.l48{--w:96%}.l49{--w:98%}
.l50{--w:100%}