/* Turf Lab — pelouse & casaque */
@font-face { font-family: "Barlow Condensed"; font-weight: 500; font-display: swap; src: url(fonts/barlow-condensed-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url(fonts/barlow-condensed-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); }

:root {
  --pelouse: #163B2E;
  --pelouse-claire: #2A5A47;
  --papier: #F3F5F1;
  --carte: #FFFFFF;
  --encre: #17201B;
  --doux: #5E6B63;
  --filet: #D3DAD3;
  --filet-fort: #B9C3BB;
  --casaque: #E3A912;
  --casaque-pale: #FBF0CF;
  --hausse: #1F7A4D;
  --baisse: #B4382B;
  --titre: "Barlow Condensed", "Arial Narrow", sans-serif;
  --texte: "IBM Plex Sans", system-ui, sans-serif;
  --r: 3px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--encre); font: 15px/1.5 var(--texte);
       font-variant-numeric: tabular-nums; }
a { color: var(--pelouse); text-decoration-color: color-mix(in srgb, var(--pelouse) 35%, transparent); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--casaque); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--titre); font-weight: 600; line-height: 1.1; margin: 0; letter-spacing: .005em; }
h1 { font-size: 40px; font-weight: 700; }
h2 { font-size: 24px; margin-bottom: 10px; }
h3 { font-size: 19px; margin-bottom: 8px; }
p { margin: 0 0 10px; max-width: 72ch; }
.doux { color: var(--doux); }
.petit { font-size: 13px; }

/* ── Barre du haut ── */
.barre-haut { background: var(--pelouse); color: #fff; }
.barre-haut .dedans { max-width: 1280px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 28px; min-height: 56px; }
.marque { font-family: var(--titre); font-weight: 700; font-size: 26px; color: #fff; text-decoration: none; display: flex; align-items: center; gap: 10px; }
.marque .tapis { width: 24px; height: 24px; font-size: 15px; }
.nav { display: flex; gap: 4px; flex: 1; }
.nav a { color: #DCE7E0; text-decoration: none; font-family: var(--titre); font-weight: 600; font-size: 18px; padding: 15px 10px 13px; border-bottom: 3px solid transparent; }
.nav a:hover { color: #fff; }
.nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--casaque); }
.recherche-haut { position: relative; }
.recherche-haut input { width: 260px; font: inherit; font-size: 14px; padding: 7px 10px; border-radius: var(--r); border: 1px solid var(--pelouse-claire);
                        background: #0F2D22; color: #fff; }
.recherche-haut input::placeholder { color: #9FB5A8; }
.suggestions { position: absolute; right: 0; top: 40px; width: 340px; background: var(--carte); color: var(--encre); border: 1px solid var(--filet-fort);
               border-radius: var(--r); box-shadow: 0 8px 24px rgba(10, 30, 20, .18); z-index: 20; list-style: none; margin: 0; padding: 4px 0; }
.suggestions[hidden] { display: none; }
.suggestions a { display: flex; justify-content: space-between; gap: 10px; padding: 7px 12px; text-decoration: none; color: inherit; }
.suggestions a:hover, .suggestions a.actif { background: var(--casaque-pale); }
.suggestions .type { color: var(--doux); font-size: 12px; white-space: nowrap; }
.sortie { color: #9FB5A8; font-size: 13px; text-decoration: none; }

main { max-width: 1280px; margin: 0 auto; padding: 26px 20px 60px; }
.pied { max-width: 1280px; margin: 0 auto; padding: 0 20px 30px; color: var(--doux); font-size: 13px; }

/* ── Tapis de selle : le numéro du partant ── */
.tapis { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 2px; font: 700 16px/1 var(--titre);
         background: #fff; color: var(--encre); box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); flex: none; }
.t1 { background: #C8102E; color: #fff; } .t2 { background: #FFFFFF; color: #111; } .t3 { background: #1F4FA8; color: #fff; }
.t4 { background: #F2C230; color: #111; } .t5 { background: #1E8A4C; color: #fff; } .t6 { background: #1A1A1A; color: #F2C230; }
.t7 { background: #EE7623; color: #111; } .t8 { background: #F4A6C0; color: #111; } .t9 { background: #2BB3B1; color: #111; }
.t10 { background: #6A3D9A; color: #fff; } .t11 { background: #9CC54A; color: #C8102E; } .t12 { background: #7B8B97; color: #C8102E; }
.t13 { background: #7A2E2E; color: #fff; } .t14 { background: #B9B07A; color: #111; } .t15 { background: #3E5C3A; color: #F2C230; }
.t16 { background: #A2C8E8; color: #C8102E; } .t17 { background: #1B2A4A; color: #fff; } .t18 { background: #5B3A1E; color: #fff; }

/* ── En-têtes de page ── */
.entete { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.entete .sous { color: var(--doux); margin-top: 6px; }
.jours { display: flex; gap: 6px; align-items: center; }
.btn { display: inline-flex; align-items: center; gap: 6px; font: 600 15px/1 var(--titre); letter-spacing: .02em; padding: 8px 12px; border-radius: var(--r);
       border: 1px solid var(--filet-fort); background: var(--carte); color: var(--encre); text-decoration: none; cursor: pointer; }
.btn:hover { border-color: var(--pelouse); }
.btn.plein { background: var(--pelouse); color: #fff; border-color: var(--pelouse); }
.btn.plein:hover { background: var(--pelouse-claire); }

/* ── Programme ── */
.reunion { margin-bottom: 26px; }
.reunion-titre { display: flex; align-items: baseline; gap: 12px; padding-bottom: 6px; border-bottom: 2px solid var(--encre); margin-bottom: 0; }
.reunion-titre .r { font: 700 26px/1 var(--titre); color: var(--pelouse); }
.reunion-titre h2 { margin: 0; font-size: 26px; }
.reunion-titre .pays { color: var(--doux); font-size: 13px; }
.courses { width: 100%; border-collapse: collapse; }
.courses td { padding: 9px 8px; border-bottom: 1px solid var(--filet); vertical-align: middle; }
.courses tr:hover td { background: #EAF0EB; }
.courses .num { font: 700 20px/1 var(--titre); width: 44px; color: var(--pelouse); }
.courses .heure { width: 60px; font-weight: 500; }
.courses .nom a { font-weight: 600; text-decoration: none; color: var(--encre); }
.courses .nom a:hover { text-decoration: underline; }
.etiquette { display: inline-block; font: 600 13px/1 var(--titre); letter-spacing: .03em; padding: 3px 6px 2px; border-radius: 2px;
             background: #E3E9E4; color: var(--pelouse); vertical-align: 1px; }
.etiquette.quinte { background: var(--casaque); color: var(--encre); }
.resultat { display: flex; align-items: center; gap: 8px; }

/* ── Tableaux de statistiques ── */
.table-stats { width: 100%; border-collapse: collapse; background: var(--carte); }
.table-stats th { font: 600 14px/1.2 var(--titre); letter-spacing: .02em; text-align: right; color: var(--doux); padding: 8px 10px;
                  border-bottom: 1px solid var(--filet-fort); white-space: nowrap; background: var(--carte); position: sticky; top: 0; }
.table-stats th:first-child, .table-stats td:first-child { text-align: left; }
.table-stats td { padding: 7px 10px; border-bottom: 1px solid var(--filet); text-align: right; white-space: nowrap; }
.table-stats td.gauche, .table-stats th.gauche { text-align: left; }
.table-stats tr.faible td { color: #8A968F; }
.table-stats tr.faible td a { color: #8A968F; }
.table-stats tbody tr:hover td { background: #F5F8F5; }
.table-stats .lib { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.cadre { border: 1px solid var(--filet); border-radius: var(--r); overflow: auto; background: var(--carte); }

/* Barre de taux (barre pleine) avec repère du taux prévu par les cotes */
.taux { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.jauge { position: relative; width: 90px; height: 8px; background: #E7ECE8; border-radius: 1px; }
.jauge i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--pelouse-claire); border-radius: 1px; }
.jauge b { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--encre); }

/* Écart au marché : barre divergente centrée sur 0 */
.ecart { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.ecart .axe-e { position: relative; width: 80px; height: 10px; }
.ecart .axe-e::before { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--filet-fort); }
.ecart .axe-e i { position: absolute; top: 1px; bottom: 1px; }
.ecart .axe-e i.plus { left: 50%; background: var(--hausse); }
.ecart .axe-e i.moins { right: 50%; background: var(--baisse); }
.plus-t { color: var(--hausse); font-weight: 500; } .moins-t { color: var(--baisse); font-weight: 500; }
.ecart .val { min-width: 52px; }

/* ── Fiches ── */
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); border-top: 2px solid var(--encre); border-bottom: 1px solid var(--filet); margin-bottom: 26px; }
.chiffres div { padding: 12px 14px 12px 0; }
.chiffres .v { font: 700 34px/1 var(--titre); }
.chiffres .l { color: var(--doux); font-size: 13px; margin-top: 4px; }
.identite { display: flex; flex-wrap: wrap; gap: 4px 22px; color: var(--doux); margin-top: 8px; }
.identite b { color: var(--encre); font-weight: 500; }
.grille-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(560px, 1fr)); gap: 26px 30px; margin-bottom: 30px; }
.grille-2 .table-stats td, .grille-2 .table-stats th { padding: 6px 7px; }
.grille-2 .jauge { width: 54px; }
.grille-2 .ecart .axe-e { width: 46px; }
.grille-2 .ecart .val { min-width: 44px; }
.grille-2 .masquable { display: none; }
.bloc { margin-bottom: 30px; }
.graphe { width: 100%; height: auto; display: block; background: var(--carte); border: 1px solid var(--filet); border-radius: var(--r); }
.graphe .grille { stroke: #E7ECE8; } .graphe .axe { fill: var(--doux); font: 13px var(--texte); }
.graphe .trace { fill: none; stroke: var(--pelouse); stroke-width: 2; stroke-linejoin: round; }
.graphe .victoire { fill: var(--casaque); stroke: var(--encre); stroke-width: 1; }
.graphe .barre { fill: var(--pelouse-claire); } .graphe .barre.faible { fill: #B9C8BE; }
.graphe .attendu { stroke: var(--encre); stroke-width: 2; }
.legende { color: var(--doux); font-size: 13px; margin-top: 6px; }
.legende .k { display: inline-block; width: 12px; height: 3px; background: var(--encre); vertical-align: middle; margin: 0 4px 0 12px; }
.legende .kv { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--casaque); border: 1px solid var(--encre); vertical-align: -1px; margin: 0 4px 0 12px; }
.place { font: 700 17px/1 var(--titre); }
.place.p1 { color: var(--hausse); }
.origine { font-size: 11px; color: var(--doux); }
.a-venir { background: var(--casaque-pale); border-left: 4px solid var(--casaque); padding: 10px 14px; margin-bottom: 24px; }

/* ── Course ── */
.fiche-course td .cheval { font-weight: 600; }
.fiche-course td .detail { color: var(--doux); font-size: 12.5px; }
.contexte { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 30px; }

/* ── Croiseur ── */
.croiseur { display: grid; grid-template-columns: 280px 1fr; gap: 26px; align-items: start; }
.panneau { background: var(--carte); border: 1px solid var(--filet); border-radius: var(--r); padding: 14px; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; }
.panneau h3 { margin-top: 6px; }
.champ { margin-bottom: 10px; }
.champ label { display: block; font: 600 14px/1.2 var(--titre); color: var(--doux); margin-bottom: 3px; }
.champ select, .champ input { width: 100%; font: inherit; font-size: 14px; padding: 6px 8px; border: 1px solid var(--filet-fort); border-radius: var(--r); background: #fff; color: var(--encre); }
.filtre { border-bottom: 1px solid var(--filet); }
.filtre summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline;
                  font: 600 15px/1.2 var(--titre); color: var(--encre); padding: 8px 0; }
.filtre summary::-webkit-details-marker { display: none; }
.filtre summary::after { content: "+"; color: var(--doux); font-size: 18px; }
.filtre[open] summary::after { content: "−"; }
.filtre summary .nb { margin-left: auto; margin-right: 8px; background: var(--casaque); color: var(--encre); border-radius: 2px; padding: 1px 6px; font-size: 13px; }
.filtre .cases { max-height: 210px; overflow: auto; padding: 0 0 10px; }
.filtre label { display: flex; gap: 8px; align-items: center; font-size: 14px; padding: 2px 0; cursor: pointer; }
.filtre input { accent-color: var(--pelouse); }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
details.filtres summary { cursor: pointer; font: 600 16px var(--titre); padding: 6px 0; }
.actifs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.actifs span { background: var(--casaque-pale); border: 1px solid #EBCB6E; padding: 2px 8px; border-radius: 2px; font-size: 13px; }
.total { display: flex; gap: 26px; flex-wrap: wrap; padding: 10px 0 14px; color: var(--doux); }
.total b { color: var(--encre); font: 700 22px/1 var(--titre); margin-right: 4px; }
.aide { font-size: 13px; color: var(--doux); border-left: 3px solid var(--filet-fort); padding-left: 10px; margin: 14px 0; }

/* ── Patterns ── */
.onglets { display: flex; gap: 0; border-bottom: 1px solid var(--filet-fort); margin-bottom: 16px; flex-wrap: wrap; }
.onglets a { padding: 8px 14px; text-decoration: none; color: var(--doux); font: 600 17px var(--titre); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.onglets a[aria-current="page"] { color: var(--encre); border-bottom-color: var(--casaque); }
.statut { font: 600 13px/1 var(--titre); padding: 3px 6px 2px; border-radius: 2px; letter-spacing: .03em; }
.statut.Confirmé { background: #D7EEDF; color: var(--hausse); } .statut.Tendance { background: #ECEFEA; color: var(--doux); }
.statut.Infirmé { background: #F6DDD9; color: var(--baisse); } .statut.À { background: #ECEFEA; color: var(--doux); }
.pattern-lib { white-space: normal !important; min-width: 280px; }

/* ── LAB-05 : tri, direct, ferrures, casaques, alertes, surlignage ── */
table.triable th, .table-stats th { cursor: pointer; user-select: none; }
.table-stats th[aria-sort]::after { content: " ▾"; color: var(--casaque); }
.table-stats th[aria-sort="ascending"]::after { content: " ▴"; }
.direct { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--hausse); margin: 0 0 8px; }
.direct .point { width: 8px; height: 8px; border-radius: 50%; background: var(--hausse); animation: pouls 2s infinite; }
@keyframes pouls { 50% { opacity: .35; } }
.ferr { display: inline-block; min-width: 22px; padding: 2px 4px 1px; border: 1px solid #c9d1c9; border-radius: 2px;
  font: 600 13px/1.1 var(--titre); text-align: center; color: #56615a; }
.ferr.d { background: var(--encre); color: var(--papier); border-color: var(--encre); }
.avec-casaque { display: flex; align-items: center; gap: 8px; }
.casaque { width: 26px; height: 26px; object-fit: contain; flex: none; }
h1 .casaque { width: 40px; height: 40px; }
.alerte { display: inline-block; font: 700 15px/1 var(--titre); padding: 4px 7px 3px; border-radius: 2px; margin-right: 3px; cursor: help; }
.alerte.plus { background: #dcefe3; color: var(--hausse); }
.alerte.moins { background: #f6dfdc; color: var(--baisse); }
.alertes-c { white-space: nowrap; width: 84px; }
.etiquette.np { background: var(--baisse); color: #fff; }
.etiquette.fav { background: var(--pelouse); color: var(--papier); }
.etiquette.petite { font-size: 11px; padding: 2px 4px 1px; }
.filtres-prog { display: grid; gap: 8px; margin: 0 0 18px; }
.puces { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.puces > .doux { min-width: 72px; }
.puce { padding: 5px 10px 4px; border: 1px solid #c9d1c9; border-radius: 999px; font-size: 13px; color: var(--encre); text-decoration: none; background: #fff; }
.puce span { color: #6a756e; }
.puce:hover { border-color: var(--pelouse); }
.puce.on { background: var(--pelouse); border-color: var(--pelouse); color: var(--papier); }
.puce.on span { color: #c9d8cf; }
.cible { border-left: 4px solid var(--casaque); background: #fff8e4; padding: 10px 14px; margin: 0 0 18px; display: grid; gap: 6px; }
.cible .conditions { display: flex; flex-wrap: wrap; gap: 6px; }
.cible .conditions span { background: #fff; border: 1px solid #ecd9a2; padding: 2px 8px; font-size: 13px; border-radius: 2px; }
.table-stats tr.jour td { background: #fff3cf !important; font-weight: 600; }
.table-stats tr.jour td:first-child { box-shadow: inset 4px 0 0 var(--casaque); }
.pastille { color: var(--casaque); margin-right: 5px; font-size: 11px; }
section.a-jour h3::after { content: "  ● course ciblée"; color: #a57a00; font: 500 12px var(--texte, inherit); }
.table-stats tr.courante td { background: #fff8e4; }
.table-stats .m { font-weight: 700; text-decoration: underline; text-decoration-color: var(--casaque); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Fiche course : toute la largeur de l'écran, tableau compact sans ascenseur */
main.large { max-width: min(1680px, 100%); }
.fiche-course th, .fiche-course td { padding: 6px 7px; }
.fiche-course td.gauche { white-space: normal; }
.fiche-course td .detail { font-size: 12px; white-space: nowrap; }
.fiche-course .avec-casaque > div { min-width: 150px; }
.fiche-course td:nth-child(n) a { overflow-wrap: anywhere; }

/* ── Connexion ── */
.connexion { min-height: 100vh; display: grid; place-items: center; background: var(--pelouse); }
.connexion form { background: var(--papier); padding: 32px 30px; width: min(360px, 92vw); border-radius: var(--r); }
.connexion h1 { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.erreur { color: var(--baisse); margin: 8px 0; }

@media (max-width: 900px) {
  .barre-haut .dedans { flex-wrap: wrap; gap: 8px 16px; padding: 6px 16px; }
  .nav { order: 3; flex-basis: 100%; overflow-x: auto; }
  .nav a { padding: 8px 8px 7px; }
  .recherche-haut input { width: 170px; }
  main { padding: 18px 16px 40px; }
  h1 { font-size: 32px; }
  .croiseur { grid-template-columns: 1fr; }
  .panneau { position: static; max-height: none; }
  .grille-2 { grid-template-columns: 1fr; }
  .courses .masquable, .table-stats .masquable { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }