/* =============================================================================
   turf.bzh - assets/spot-2027.css
   Le cockpit du Quinte, insere en tete de quinte-spot-premium.php.

   TOUT EST PREFIXE .sp- ET PORTE PAR .sp-cockpit. La page hote embarque
   Bootstrap, DataTables, Choices.js et sa propre feuille : une regle nue sur
   table ou h2 se ferait ecraser, ou pire, ecraserait le wizard existant. Aucune
   regle de ce fichier ne sort de .sp-cockpit.

   Les variables sont locales pour la meme raison : elles ne peuvent pas entrer
   en collision avec celles de la page, et le cockpit reste lisible meme si la
   feuille globale change.
   ========================================================================== */

.sp-cockpit{
  --sp-acc:#0a7c91; --sp-acc-d:#075c6c; --sp-acc-l:#e3f1f4;
  --sp-ink:#0d2126; --sp-ink2:#3a565e;
  /* #6b858d ne tenait que 3,91 pour 1 sur blanc, sous le seuil AA de 4,5 exige
     pour du texte courant, et il porte les legendes, les libelles de colonnes
     et les notes de bas de bloc : c'est-a-dire precisement le texte que l'on
     lit le plus mal. #5a7076 tient 5,23 sur blanc et 4,52 sur le fond d'accent,
     le plus sombre des fonds de la page. Mesure faite avec la formule de
     luminance relative de WCAG 2.1, sur les six fonds reellement employes. */
  --sp-mut:#5a7076;
  --sp-bd:#dbe5e8; --sp-bd2:#c2d3d8; --sp-card:#fff; --sp-card2:#f1f6f7;
  --sp-ok:#0b7a5e; --sp-ok-bg:#ecf7f3; --sp-ok-bd:#a8dcc9;
  --sp-ko:#b3123c; --sp-ko-bg:#fdf0f3; --sp-ko-bd:#f3bfcd;
  --sp-wa:#a8560a; --sp-wa-bg:#fdf4ea; --sp-wa-bd:#f0d3ae;
  --sp-r:10px; --sp-r-s:6px;

  display:flex; flex-direction:column; gap:1.4rem;
  margin:0 0 2rem; color:var(--sp-ink);
  font-variant-numeric:tabular-nums;
}

/* ------------------------------------------------------------------ zones -- */
.sp-cockpit .sp-zone{
  background:var(--sp-card); border:1px solid var(--sp-bd);
  border-radius:var(--sp-r); padding:1.15rem 1.25rem;
  display:flex; flex-direction:column; gap:.9rem;
}
/* Les enfants d'un conteneur flex valent min-width:auto par defaut : un seul
   bloc au contenu large (la legende, un tableau) empeche alors toute la zone de
   retrecir et c'est la page entiere qui deborde lateralement sur telephone.
   Mesure au banc avant correctif : 409 px de contenu pour 330 px d'ecran. */
.sp-cockpit .sp-zone > *{ min-width:0; max-width:100%; }
.sp-cockpit .sp-zone-t{ display:flex; flex-direction:column; gap:.3rem; min-width:0; }
.sp-cockpit .sp-zone-t h2{
  margin:0; font-size:1.3rem; line-height:1.2; font-weight:800;
  color:var(--sp-acc-d); text-wrap:balance;
}
.sp-cockpit .sp-zone-t p{ margin:0; color:var(--sp-ink2); font-size:.97rem; line-height:1.55; }

/* ---------------------------------------------------------------- tuiles -- */
.sp-cockpit .sp-tuiles{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(13.5rem,1fr)); gap:.6rem;
}
.sp-cockpit .sp-tuile{
  background:var(--sp-card2); border:1px solid var(--sp-bd);
  border-radius:var(--sp-r-s); padding:.8rem .9rem;
  display:flex; flex-direction:column; gap:.2rem; min-width:0;
}
.sp-cockpit .sp-tuile-haut{ background:var(--sp-ok-bg); border-color:var(--sp-ok-bd); }
.sp-cockpit .sp-tuile-bas { background:var(--sp-wa-bg); border-color:var(--sp-wa-bd); }
.sp-cockpit .sp-tuile-l{
  font-size:.72rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.05em; color:var(--sp-mut);
}
.sp-cockpit .sp-tuile-v{
  font-size:1.45rem; font-weight:800; line-height:1.15; letter-spacing:-.01em;
  color:var(--sp-ink); overflow-wrap:anywhere;
}
.sp-cockpit .sp-tuile-s{ font-size:.83rem; color:var(--sp-mut); line-height:1.45; }

.sp-cockpit .sp-phrase{
  margin:0; font-size:1rem; line-height:1.6; color:var(--sp-ink2);
}
.sp-cockpit .sp-conseil{
  background:var(--sp-acc-l); border:1px solid var(--sp-bd2);
  border-left:3px solid var(--sp-acc); border-radius:var(--sp-r-s);
  padding:.8rem .95rem;
}
.sp-cockpit .sp-conseil-t{
  margin:0 0 .3rem; font-size:.72rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; color:var(--sp-acc-d);
}
.sp-cockpit .sp-conseil p{ margin:0; font-size:.97rem; line-height:1.6; color:var(--sp-ink2); }
.sp-cockpit .sp-conseil strong{ color:var(--sp-ink); font-weight:800; }

/* --------------------------------------------------------------- familles -- */
.sp-cockpit .sp-familles{
  display:flex; flex-wrap:wrap; gap:.35rem .5rem; align-items:center; margin:0;
  font-size:.85rem; color:var(--sp-mut);
}
.sp-cockpit .sp-familles-t{ font-weight:700; color:var(--sp-ink2); }
.sp-cockpit .sp-fam{
  background:var(--sp-card2); border:1px solid var(--sp-bd);
  border-radius:999px; padding:.1rem .55rem; font-weight:600; color:var(--sp-ink2);
}

/* --------------------------------------------------------------- tableaux -- */
/* Le conteneur defile lateralement plutot que la page : c'est la seule facon de
   loger huit colonnes sur un telephone sans rogner le texte. */
.sp-cockpit .sp-tabwrap{
  overflow-x:auto; -webkit-overflow-scrolling:touch; min-width:0; max-width:100%;
  border:1px solid var(--sp-bd); border-radius:var(--sp-r-s); background:var(--sp-card);
}
.sp-cockpit .sp-tabwrap:focus-visible{ outline:2px solid var(--sp-acc); outline-offset:2px; }
.sp-cockpit table.sp-tab{
  width:100%; border-collapse:collapse; font-size:.92rem; margin:0;
  background:transparent;
}
.sp-cockpit .sp-tab th, .sp-cockpit .sp-tab td{
  padding:.5rem .7rem; text-align:right; white-space:nowrap;
  border-bottom:1px solid var(--sp-bd); vertical-align:middle;
}
.sp-cockpit .sp-tab thead th{
  font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  color:var(--sp-mut); background:var(--sp-card2);
  border-bottom:2px solid var(--sp-bd2); position:sticky; top:0; z-index:1;
}
.sp-cockpit .sp-tab th.sp-g, .sp-cockpit .sp-tab td.sp-g{
  text-align:left; white-space:normal;
}
.sp-cockpit .sp-tab tbody th[scope=row]{
  text-align:left; font-weight:700; color:var(--sp-ink); white-space:normal;
  min-width:11rem;
}
.sp-cockpit .sp-tab tbody tr:last-child th,
.sp-cockpit .sp-tab tbody tr:last-child td{ border-bottom:0; }
.sp-cockpit .sp-sous{
  display:block; font-weight:400; font-size:.82rem; color:var(--sp-mut);
  line-height:1.4; margin-top:.15rem;
}
.sp-cockpit .sp-num{
  display:inline-block; min-width:1.5rem; text-align:center;
  background:var(--sp-acc-d); color:#fff; border-radius:var(--sp-r-s);
  font-size:.8rem; font-weight:800; padding:.05rem .3rem; margin-right:.25rem;
}
.sp-cockpit tr.sp-l-plus  > *{ background:var(--sp-ok-bg); }
.sp-cockpit tr.sp-l-moins > *{ background:var(--sp-ko-bg); }
.sp-cockpit tr.sp-etalon  > *{ background:var(--sp-card2); }

/* Le rang d'une source. Entoure quand la source place le cheval dans ses 5. */
.sp-cockpit .sp-rang{ color:var(--sp-mut); font-weight:600; }
.sp-cockpit .sp-rang-top{
  display:inline-block; min-width:1.5rem; text-align:center;
  color:var(--sp-acc-d); background:var(--sp-acc-l);
  border:1px solid var(--sp-bd2); border-radius:999px;
  font-weight:800; padding:.02rem .3rem;
}
.sp-cockpit .sp-nd{ color:var(--sp-bd2); }
.sp-cockpit .sp-oui{ color:var(--sp-acc-d); font-weight:800; }
.sp-cockpit .sp-accord{ font-weight:800; color:var(--sp-ink); }
.sp-cockpit .sp-accord-s{ font-weight:400; font-size:.8rem; color:var(--sp-mut); }

/* L'ecart au marche : une barre symetrique, le zero au milieu. Une barre qui
   partirait de la gauche laisserait croire qu'un ecart nul est un mauvais
   resultat, alors que c'est le cas le plus frequent et le plus normal. */
.sp-cockpit .sp-ecart{ display:inline-flex; align-items:center; gap:.45rem; }
.sp-cockpit .sp-ecart-v{ min-width:1.9rem; text-align:right; font-weight:800; }
.sp-cockpit .sp-ecart-p{
  position:relative; display:block; width:4.5rem; height:.5rem;
  background:var(--sp-card2); border:1px solid var(--sp-bd); border-radius:3px;
}
.sp-cockpit .sp-ecart-p::before{
  content:""; position:absolute; left:50%; top:-2px; bottom:-2px; width:1px;
  background:var(--sp-mut); opacity:.6;
}
.sp-cockpit .sp-ecart-f{ position:absolute; top:0; bottom:0; background:var(--sp-mut); }
.sp-cockpit .sp-ecart-f.sp-e-plus { background:var(--sp-ok); }
.sp-cockpit .sp-ecart-f.sp-e-moins{ background:var(--sp-ko); }

/* ---------------------------------------------------------------- lectures -- */
.sp-cockpit .sp-lect{
  display:inline-block; padding:.15rem .5rem; border-radius:999px;
  font-size:.79rem; font-weight:700; line-height:1.35;
  border:1px solid transparent; white-space:normal;
}
.sp-cockpit .sp-lect-valeur { color:var(--sp-ok); background:var(--sp-ok-bg); border-color:var(--sp-ok-bd); }
.sp-cockpit .sp-lect-socle  { color:var(--sp-ink2); background:var(--sp-card2); border-color:var(--sp-bd2); }
.sp-cockpit .sp-lect-surcote{ color:var(--sp-ko); background:var(--sp-ko-bg); border-color:var(--sp-ko-bd); }
.sp-cockpit .sp-lect-neutre { color:var(--sp-mut); background:transparent; border-color:transparent; }

.sp-cockpit .sp-leg{
  display:flex; flex-wrap:wrap; gap:.35rem .9rem; align-items:baseline; margin:0;
  font-size:.85rem; color:var(--sp-mut);
}
.sp-cockpit .sp-leg-t{ font-weight:700; color:var(--sp-ink2); }
.sp-cockpit .sp-leg-i{ display:flex; align-items:baseline; gap:.4rem; flex:1 1 100%; min-width:0; }
/* flex:0 0 auto interdisait a la pastille de retrecir : son texte long fixait la
   largeur de toute la zone. Elle peut retrecir, son texte passe a la ligne. */
.sp-cockpit .sp-leg .sp-lect{ flex:0 1 auto; max-width:100%; min-width:0; }
@media (min-width:56rem){ .sp-cockpit .sp-leg-i{ flex:0 1 auto; align-items:center; } }

.sp-cockpit .sp-note, .sp-cockpit .sp-vide{
  margin:0; font-size:.86rem; line-height:1.6; color:var(--sp-mut);
}
.sp-cockpit .sp-note strong{ color:var(--sp-ink2); font-weight:700; }
.sp-cockpit .sp-etat{
  display:flex; flex-wrap:wrap; gap:.3rem .9rem; align-items:baseline; margin:0;
  font-size:.88rem; color:var(--sp-mut);
}
.sp-cockpit .sp-etat strong{ color:var(--sp-ink); font-weight:800; }

/* La garde. Elle n'est pas decorative : c'est elle qui empeche de lire le
   tableau des bilans comme une promesse. */
.sp-cockpit .sp-garde{
  background:var(--sp-wa-bg); border:1px solid var(--sp-wa-bd);
  border-left:4px solid var(--sp-wa); border-radius:var(--sp-r-s);
  padding:.8rem .95rem; margin:0; font-size:.92rem; line-height:1.6; color:#6b3608;
}
.sp-cockpit .sp-garde strong{ color:#6b3608; font-weight:800; }

/* ---------------------------------------------------------------- telephone -- */
@media (max-width:40rem){
  .sp-cockpit .sp-zone{ padding:.95rem 1rem; }
  .sp-cockpit .sp-zone-t h2{ font-size:1.15rem; }
  .sp-cockpit .sp-tuile-v{ font-size:1.25rem; }
  .sp-cockpit .sp-tab th, .sp-cockpit .sp-tab td{ padding:.45rem .55rem; font-size:.88rem; }
  .sp-cockpit .sp-tab tbody th[scope=row]{ min-width:9rem; }
  .sp-cockpit .sp-ecart-p{ width:3.2rem; }
}

@media (prefers-reduced-motion:reduce){
  .sp-cockpit *{ transition:none !important; animation:none !important; }
}

/* La cote, en valeur et non en rang : c'est le chiffre que le turfiste lit sur
   le programme, et la reference de la colonne « ecart au marche ». */
.sp-cockpit .sp-cote{ font-weight:800; color:var(--sp-ink); }


/* =============================================================================
   L'ATELIER FLAIR
   Tout est prefixe .sp- et porte par .sp-cockpit : la page hote embarque
   Bootstrap, DataTables et Choices.js, aucune regle ne doit en sortir.
   ========================================================================== */

/* L'attribut hidden perd contre tout display explicite, et les questions sont
   des blocs. Sans cette regle, les 4 questions s'afficheraient en meme temps. */
.sp-cockpit [hidden]{ display:none !important; }
.sp-cockpit .sp-zone{ scroll-margin-top:5rem; }

/* ------------------------------------------------------------- le bandeau -- */
.sp-cockpit .sp-avis{
  margin:0; font-size:.9rem; line-height:1.6; color:var(--sp-ink2);
  background:var(--sp-card2); border:1px solid var(--sp-bd);
  border-left:3px solid var(--sp-acc); border-radius:var(--sp-r-s); padding:.6rem .85rem;
}
.sp-cockpit .sp-avis strong{ color:var(--sp-acc-d); font-weight:800; }

/* ------------------------------------------------------------- le sommaire -- */
.sp-cockpit .sp-somm{
  display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .5rem;
  background:var(--sp-card); border:1px solid var(--sp-bd);
  border-radius:var(--sp-r); padding:.55rem .8rem;
}
.sp-cockpit .sp-somm-t{
  font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  color:var(--sp-mut);
}
.sp-cockpit .sp-somm ul{ display:flex; flex-wrap:wrap; gap:.35rem; list-style:none; margin:0; padding:0; }
/* CES PASTILLES SONT DE LA NAVIGATION, PAS DES LIENS DANS UNE PHRASE.
   L'exception de WCAG sur la taille des cibles ne couvre que les liens
   contraints par l'interligne d'un texte qui les entoure ; celles-ci sont
   autonomes et doivent donc atteindre 24 px. Mesure avant correctif : 23 px. */
.sp-cockpit .sp-somm a{
  display:inline-flex; align-items:center; min-height:1.85rem;
  text-decoration:none; font-size:.85rem; font-weight:700;
  color:var(--sp-acc-d); background:var(--sp-acc-l);
  border:1px solid var(--sp-bd2); border-radius:999px; padding:.2rem .7rem;
}
.sp-cockpit .sp-somm a:hover{ background:#d3e8ec; }
.sp-cockpit .sp-somm a:focus-visible{ outline:2px solid var(--sp-acc); outline-offset:2px; }

/* --------------------------------------------------------------- la course -- */
.sp-cockpit .sp-course{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.25rem .5rem; margin:0;
  font-size:.9rem; color:var(--sp-mut);
}
.sp-cockpit .sp-course strong{ font-size:1.05rem; color:var(--sp-ink); font-weight:800; }
.sp-cockpit .sp-course span{
  background:var(--sp-card2); border:1px solid var(--sp-bd); border-radius:999px;
  padding:.05rem .45rem;
}
.sp-cockpit .sp-course-r{
  background:var(--sp-acc-l) !important; border-color:var(--sp-bd2) !important;
  color:var(--sp-acc-d); font-weight:700;
}

/* ---------------------------------------------------------- le mur des sources -- */
.sp-cockpit .sp-mur{ border-top:3px solid var(--sp-acc); }
.sp-cockpit .sp-mur-l{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:.6rem;
  /* Une source absente ne doit pas occuper la hauteur d'une source publiee :
     sinon un jour ou trois sources manquent, la zone est surtout du vide. */
  align-items:start;
}
.sp-cockpit .sp-mur-s{
  min-width:0; background:var(--sp-card2); border:1px solid var(--sp-bd);
  border-radius:var(--sp-r-s); padding:.6rem .7rem;
  display:flex; flex-direction:column; gap:.4rem;
}
.sp-cockpit .sp-mur-ko{ opacity:.7; }
.sp-cockpit .sp-mur-n{
  margin:0; font-size:.74rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.05em; color:var(--sp-acc-d); line-height:1.35;
}
.sp-cockpit .sp-mur-nums{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.25rem; }
.sp-cockpit .sp-mur-nums li{ display:flex; align-items:center; gap:.4rem; min-width:0; }
.sp-cockpit .sp-mur-nums .sp-tk-num{ min-width:1.7rem; height:1.7rem; font-size:.88rem; }
.sp-cockpit .sp-mur-ch{
  font-size:.82rem; color:var(--sp-ink2); min-width:0; overflow-wrap:anywhere; line-height:1.25;
}
.sp-cockpit .sp-mur-vide, .sp-cockpit .sp-mur-note{
  margin:0; font-size:.8rem; color:var(--sp-mut); line-height:1.45;
}
.sp-cockpit .sp-mur-bilan{
  margin:0; font-size:.95rem; line-height:1.65; color:var(--sp-ink2);
  background:var(--sp-acc-l); border:1px solid var(--sp-bd2);
  border-radius:var(--sp-r-s); padding:.7rem .85rem;
}
.sp-cockpit .sp-mur-bilan strong{ color:var(--sp-ink); font-weight:800; }

/* ------------------------------------------------------------- les questions -- */
.sp-cockpit .sp-form{ display:flex; flex-direction:column; gap:1.4rem; }
.sp-cockpit .sp-at{ border-top:3px solid var(--sp-acc); }
.sp-cockpit .sp-q{ display:flex; flex-direction:column; gap:.8rem; min-width:0; }
.sp-cockpit .sp-q-fil{
  display:flex; align-items:center; gap:.6rem; margin:0;
  font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  color:var(--sp-mut);
}
.sp-cockpit .sp-q-jauge{
  flex:1 1 auto; height:.3rem; background:var(--sp-card2);
  border:1px solid var(--sp-bd); border-radius:999px; overflow:hidden; min-width:3rem;
}
.sp-cockpit .sp-q-jauge > span{ display:block; height:100%; background:var(--sp-acc); }
.sp-cockpit .sp-q-t{
  margin:0; font-size:1.25rem; line-height:1.25; font-weight:800; color:var(--sp-ink);
  text-wrap:balance;
}
.sp-cockpit .sp-q-t:focus-visible{ outline:2px solid var(--sp-acc); outline-offset:3px; }
.sp-cockpit .sp-q-i{ margin:0; font-size:.97rem; line-height:1.6; color:var(--sp-ink2); }
.sp-cockpit .sp-q-i strong{ color:var(--sp-ink); font-weight:800; }
.sp-cockpit .sp-q-corps{ display:grid; grid-template-columns:1fr; gap:.8rem; min-width:0; max-width:100%; }
@media (min-width:45rem){
  .sp-cockpit .sp-q-corps{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; }
  /* LA CINQUIEME QUESTION PREND TOUTE LA LARGEUR. Les quatre premieres posent
     un reglage a gauche et sa carte de mesure a droite ; celle-ci n'a pas de
     carte, elle a une liste de tous les partants. Laissee sur une demi-largeur,
     elle tronquait les noms de chevaux jusqu'a les faire disparaitre et laissait
     la moitie droite vide. */
  .sp-cockpit .sp-q-corps.sp-q-corps-large{ grid-template-columns:minmax(0,1fr); }
}
.sp-cockpit .sp-q-reg{ display:flex; flex-direction:column; gap:.8rem; min-width:0; max-width:100%; }
.sp-cockpit .sp-q-note{
  margin:0; font-size:.88rem; line-height:1.6; color:var(--sp-ink2);
  background:var(--sp-card2); border:1px solid var(--sp-bd);
  border-radius:var(--sp-r-s); padding:.6rem .75rem;
}
.sp-cockpit .sp-q-note strong{ color:var(--sp-ink); font-weight:800; }
.sp-cockpit .sp-q-note a{ color:var(--sp-acc-d); font-weight:700; }

/* ---------------------------------------------------------------- le curseur -- */
.sp-cockpit .sp-cur{ display:flex; flex-direction:column; gap:.35rem; min-width:0; max-width:100%; }
.sp-cockpit .sp-cur-t{
  font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  color:var(--sp-mut);
}
/* Le navigateur pose une marge de 2 px sur un input range : avec width 100 %,
   le contenu depasse son conteneur de 2 px a toutes les largeurs. */
.sp-cockpit .sp-cur-r{ width:100%; margin:0; accent-color:var(--sp-acc-d); min-width:0; }
.sp-cockpit .sp-cur-r:focus-visible{ outline:2px solid var(--sp-acc); outline-offset:3px; }
/* Six boutons doublent le curseur : viser un cran de range au doigt a 330 px
   est une loterie, et 44 px est la cible minimale confortable. */
.sp-cockpit .sp-cur-b{ display:flex; flex-wrap:wrap; gap:.25rem; }
.sp-cockpit .sp-cur-x{
  flex:1 1 auto; min-width:4.2rem; min-height:2.4rem; cursor:pointer; font:inherit;
  font-size:.8rem; font-weight:700; color:var(--sp-ink2);
  background:var(--sp-card2); border:1px solid var(--sp-bd); border-radius:var(--sp-r-s);
  padding:.25rem .3rem;
  transition:background-color .12s ease, border-color .12s ease, color .12s ease;
}
.sp-cockpit .sp-cur-x:hover{ border-color:var(--sp-bd2); }
.sp-cockpit .sp-cur-x:focus-visible{ outline:2px solid var(--sp-acc); outline-offset:2px; }
.sp-cockpit .sp-cur-on{
  background:var(--sp-acc-d); border-color:var(--sp-acc-d); color:#fff;
}
.sp-cockpit .sp-cur-c{ margin:0; font-size:.86rem; color:var(--sp-mut); line-height:1.5; }
.sp-cockpit .sp-cur-c strong{ color:var(--sp-acc-d); font-weight:800; }

/* ------------------------------------------------------------ les cases -- */
.sp-cockpit .sp-q-cases{
  border:1px solid var(--sp-bd); border-radius:var(--sp-r-s);
  padding:.55rem .7rem; margin:0; display:flex; flex-direction:column; gap:.35rem; min-width:0;
}
.sp-cockpit .sp-q-cases legend{
  font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  color:var(--sp-mut); padding:0 .25rem;
}
.sp-cockpit .sp-case{
  display:flex; align-items:flex-start; gap:.5rem; cursor:pointer; min-width:0;
  font-size:.9rem; line-height:1.45; color:var(--sp-ink2);
}
.sp-cockpit .sp-case input{ margin-top:.2rem; accent-color:var(--sp-acc-d); flex:0 0 auto;
  width:1.1rem; height:1.1rem; }
.sp-cockpit .sp-case > span{ display:flex; flex-direction:column; gap:.05rem; min-width:0; }
.sp-cockpit .sp-case em{ font-style:normal; font-size:.8rem; color:var(--sp-mut); line-height:1.4; }
.sp-cockpit .sp-case-ko{ opacity:.6; cursor:not-allowed; }
.sp-cockpit .sp-case-l > span{ font-weight:700; color:var(--sp-ink); }
.sp-cockpit .sp-case-brut{
  background:var(--sp-card2); border:1px solid var(--sp-bd);
  border-radius:var(--sp-r-s); padding:.5rem .65rem;
}

/* ---------------------------------------------------- la carte de mesure -- */
.sp-cockpit .sp-mes-l{ display:flex; flex-direction:column; gap:.5rem; min-width:0; }
.sp-cockpit .sp-mes{
  background:var(--sp-card2); border:1px solid var(--sp-bd);
  border-left:3px solid var(--sp-bd2); border-radius:var(--sp-r-s);
  padding:.6rem .75rem; min-width:0;
}
.sp-cockpit .sp-mes-t{
  margin:0 0 .3rem; display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem;
  font-size:.86rem; font-weight:800; color:var(--sp-ink);
}
.sp-cockpit .sp-mes-p{
  font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--sp-mut); background:#fff; border:1px solid var(--sp-bd);
  border-radius:999px; padding:.05rem .4rem;
}
.sp-cockpit .sp-mes-c{ margin:0; font-size:.87rem; line-height:1.6; color:var(--sp-ink2); }
.sp-cockpit .sp-mes-c strong{ color:var(--sp-ink); font-weight:800; }
/* Le liseré porte le verdict, et il est double par les mots : la couleur seule
   ne dit rien a qui ne la distingue pas. */
.sp-cockpit .sp-mes-forte { border-left-color:var(--sp-ok); }
.sp-cockpit .sp-mes-reelle{ border-left-color:var(--sp-acc); }
.sp-cockpit .sp-mes-faible{ border-left-color:var(--sp-wa); }
.sp-cockpit .sp-mes-nulle { border-left-color:var(--sp-ko); }

/* -------------------------------------------------------------- les sorties -- */
.sp-cockpit .sp-q-out{
  display:flex; flex-wrap:wrap; align-items:center; gap:.4rem;
  border-top:1px solid var(--sp-bd); padding-top:.7rem;
}
.sp-cockpit .sp-btn{
  cursor:pointer; font:inherit; font-weight:700; font-size:.9rem; min-height:2.6rem;
  color:#fff; background:var(--sp-acc-d); border:1px solid var(--sp-acc-d);
  border-radius:var(--sp-r-s); padding:.45rem .9rem;
}
.sp-cockpit .sp-btn:hover{ background:var(--sp-acc); }
.sp-cockpit .sp-btn:focus-visible{ outline:2px solid var(--sp-acc); outline-offset:2px; }
.sp-cockpit .sp-btn-ok{ background:var(--sp-ok); border-color:var(--sp-ok); }
.sp-cockpit .sp-q-prec, .sp-cockpit .sp-q-pass, .sp-cockpit .sp-q-voir{
  cursor:pointer; font:inherit; font-size:.86rem; font-weight:700; min-height:2.6rem;
  color:var(--sp-ink2); background:#fff; border:1px solid var(--sp-bd2);
  border-radius:var(--sp-r-s); padding:.4rem .8rem;
}
.sp-cockpit .sp-q-voir{ margin-left:auto; color:var(--sp-acc-d); }
.sp-cockpit .sp-q-voir.sp-btn{
  color:#fff; background:var(--sp-acc-d); border-color:var(--sp-acc-d);
}
.sp-cockpit .sp-q-voir.sp-btn:hover{ background:var(--sp-acc); border-color:var(--sp-acc); }
.sp-cockpit .sp-q-prec:hover, .sp-cockpit .sp-q-pass:hover, .sp-cockpit .sp-q-voir:hover{
  border-color:var(--sp-acc);
}
.sp-cockpit .sp-q-prec:focus-visible, .sp-cockpit .sp-q-pass:focus-visible,
.sp-cockpit .sp-q-voir:focus-visible{ outline:2px solid var(--sp-acc); outline-offset:2px; }

/* --------------------------------------------------------------- le ticket -- */
.sp-cockpit .sp-tk{ border-top:3px solid var(--sp-acc); }
.sp-cockpit .sp-tk-haut{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:.7rem 1.2rem; min-width:0;
  background:var(--sp-acc-l); border:1px solid var(--sp-bd2);
  border-radius:var(--sp-r-s); padding:.75rem .85rem;
}
.sp-cockpit .sp-tk-nums{ display:flex; flex-wrap:wrap; gap:.3rem; list-style:none; margin:0; padding:0; }
.sp-cockpit .sp-tk-num{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:2.1rem; height:2.1rem; border-radius:var(--sp-r-s);
  background:var(--sp-acc-d); color:#fff; font-size:1.05rem; font-weight:800;
}
.sp-cockpit .sp-tk-kpis{ display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:flex-end; }
.sp-cockpit .sp-at-kpi{ display:flex; flex-direction:column; gap:.05rem; min-width:0; }
.sp-cockpit .sp-at-kpi > b{ font-size:1.3rem; font-weight:800; line-height:1.1; color:var(--sp-ink); }
.sp-cockpit .sp-at-kpi > i{
  font-style:normal; font-size:.66rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.04em; color:var(--sp-mut);
}
.sp-cockpit .sp-tk-act{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .75rem; min-width:0; }
.sp-cockpit .sp-tk-plat{
  font-weight:800; font-size:1rem; color:var(--sp-ink); overflow-wrap:anywhere; min-width:0;
}
/* Ce lien est autonome, pose a cote d'un bouton, et non pris dans une phrase :
   l'exception de WCAG sur les liens en ligne ne s'y applique pas. Mesure avant
   correctif : 16 px de haut pour un minimum de 24. */
.sp-cockpit .sp-at-cout{
  display:inline-flex; align-items:center; min-height:1.65rem;
  font-size:.86rem; font-weight:700; color:var(--sp-acc-d);
  text-decoration:underline; text-underline-offset:2px;
}
.sp-cockpit .sp-at-cout:focus-visible{ outline:2px solid var(--sp-acc); outline-offset:2px; }
.sp-cockpit .sp-tk-avis{
  margin:0; font-size:.88rem; line-height:1.6; color:var(--sp-ink2);
  background:var(--sp-card2); border:1px solid var(--sp-bd);
  border-radius:var(--sp-r-s); padding:.55rem .75rem;
}
.sp-cockpit .sp-tk-l{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(17rem,1fr)); gap:.5rem;
}
.sp-cockpit .sp-tk-i{
  display:flex; align-items:flex-start; gap:.6rem; min-width:0;
  background:var(--sp-card); border:1px solid var(--sp-bd);
  border-radius:var(--sp-r-s); padding:.55rem .7rem;
}
.sp-cockpit .sp-tk-base{ background:var(--sp-acc-l); border-color:var(--sp-bd2); }
.sp-cockpit .sp-tk-txt{ display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.sp-cockpit .sp-tk-nom{ font-weight:800; font-size:.95rem; color:var(--sp-ink); overflow-wrap:anywhere; }
.sp-cockpit .sp-tk-pq{ font-size:.82rem; color:var(--sp-ink2); line-height:1.45; }
.sp-cockpit .sp-tk-cote{ font-size:.78rem; color:var(--sp-mut); }
.sp-cockpit .sp-tk-etiq{
  font-size:.64rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  color:var(--sp-acc-d); background:#fff; border:1px solid var(--sp-bd2);
  border-radius:999px; padding:.04rem .38rem; vertical-align:.08em;
}
.sp-cockpit .sp-tk-ia10{
  margin:0; font-size:.9rem; line-height:1.6; color:var(--sp-ink2);
  background:var(--sp-card2); border:1px solid var(--sp-bd);
  border-radius:var(--sp-r-s); padding:.55rem .75rem;
}
.sp-cockpit .sp-tk-ia10 strong{ color:var(--sp-acc-d); font-weight:800; }

/* ------------------------------------------------------------- les replis -- */
.sp-cockpit .sp-pli{ border:0; }
.sp-cockpit .sp-pli > summary{
  cursor:pointer; list-style:none; display:flex; flex-direction:column; gap:.15rem;
  padding:.6rem .8rem; background:var(--sp-card2);
  border:1px solid var(--sp-bd); border-radius:var(--sp-r-s);
}
.sp-cockpit .sp-pli > summary::-webkit-details-marker{ display:none; }
.sp-cockpit .sp-pli > summary:focus-visible{ outline:2px solid var(--sp-acc); outline-offset:2px; }
.sp-cockpit .sp-pli-t{ font-weight:800; font-size:1rem; color:var(--sp-acc-d); }
.sp-cockpit .sp-pli-t::before{ content:"+ "; font-weight:800; }
.sp-cockpit .sp-pli[open] > summary .sp-pli-t::before{ content:"\2212 "; }
.sp-cockpit .sp-pli-s{ font-size:.84rem; color:var(--sp-mut); }
.sp-cockpit .sp-pli-c{ display:flex; flex-direction:column; gap:.8rem; padding-top:.8rem; }

/* ----------------------------------------------------------------- le pont -- */
.sp-cockpit .sp-pont{ background:var(--sp-card2); }
.sp-cockpit .sp-pont-t{ margin:0; font-size:1.05rem; font-weight:800; color:var(--sp-acc-d); }
.sp-cockpit .sp-pont p{ margin:0; font-size:.93rem; line-height:1.6; color:var(--sp-ink2); }

/* --------------------------------------------------------------- le maillage -- */
.sp-cockpit .sp-liens{ display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:.9rem; }
.sp-cockpit .sp-liens-g{ min-width:0; }
.sp-cockpit .sp-liens-t{
  margin:0 0 .35rem; font-size:.72rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; color:var(--sp-mut);
}
.sp-cockpit .sp-liens ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4rem; }
/* LA CIBLE, C'EST LA FICHE ENTIERE, PAS LA SEULE LIGNE DE TITRE. Le lien seul
   mesurait 20 px de haut, sous le seuil de 24 px, et le texte de description
   juste en dessous n'etait pas cliquable alors que tout le monde essaie de
   cliquer dessus. Le lien est etire sur toute la fiche par un pseudo-element,
   ce qui agrandit la cible sans imbriquer de balise ni dupliquer le lien pour
   les lecteurs d'ecran, qui continuent d'annoncer un seul lien par fiche. */
.sp-cockpit .sp-liens li{
  position:relative; display:flex; flex-direction:column; gap:.05rem;
  min-width:0; padding:.35rem .4rem; border-radius:var(--sp-r-s);
}
/* PAS DE MARGE NEGATIVE POUR RATTRAPER CE RETRAIT. Une marge laterale negative
   rend la liste plus large que ce qui la contient : mesure au banc, 6 px de
   debordement a toutes les largeurs du telephone. Le retrait de la fiche est
   simplement absorbe en reduisant l'ecart entre les fiches. */
.sp-cockpit .sp-liens ul{ gap:.15rem; }
.sp-cockpit .sp-liens li:hover{ background:var(--sp-acc-l); }
.sp-cockpit .sp-liens li:focus-within{ background:var(--sp-acc-l); }
.sp-cockpit .sp-liens a{
  color:var(--sp-acc-d); font-weight:700; font-size:.92rem; line-height:1.35;
  text-decoration:none; overflow-wrap:anywhere;
}
.sp-cockpit .sp-liens a::after{
  content:''; position:absolute; inset:0; border-radius:var(--sp-r-s);
}
.sp-cockpit .sp-liens a:hover, .sp-cockpit .sp-liens a:focus-visible{ text-decoration:underline; }
.sp-cockpit .sp-liens a:focus-visible::after{
  outline:2px solid var(--sp-acc); outline-offset:1px;
}
.sp-cockpit .sp-liens li span{ font-size:.8rem; color:var(--sp-mut); line-height:1.4; }

/* ------------------------------------------------------------------- la FAQ -- */
.sp-cockpit .sp-faq{ display:flex; flex-direction:column; gap:.4rem; }
.sp-cockpit .sp-faq-i{
  border:1px solid var(--sp-bd); border-radius:var(--sp-r-s);
  background:var(--sp-card2); overflow:hidden;
}
.sp-cockpit .sp-faq-i > summary{
  cursor:pointer; list-style:none; padding:.6rem .8rem;
  font-weight:700; font-size:.94rem; color:var(--sp-ink); line-height:1.4;
  display:flex; align-items:flex-start; gap:.5rem;
}
.sp-cockpit .sp-faq-i > summary::-webkit-details-marker{ display:none; }
.sp-cockpit .sp-faq-i > summary::before{
  content:"+"; flex:0 0 auto; font-weight:800; color:var(--sp-acc-d); width:1rem; text-align:center;
}
.sp-cockpit .sp-faq-i[open] > summary::before{ content:"\2212"; }
.sp-cockpit .sp-faq-i > summary:focus-visible{ outline:2px solid var(--sp-acc); outline-offset:-2px; }
.sp-cockpit .sp-faq-i > p{
  margin:0; padding:0 .8rem .7rem 2.3rem; font-size:.92rem; line-height:1.65; color:var(--sp-ink2);
}

/* ----------------------------------------------------- notice et tableaux -- */
.sp-cockpit .sp-mode{
  background:var(--sp-card2); border:1px solid var(--sp-bd);
  border-left:3px solid var(--sp-acc); border-radius:var(--sp-r-s); padding:.7rem .85rem;
}
.sp-cockpit .sp-mode-t{
  margin:0 0 .35rem; font-size:.72rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; color:var(--sp-acc-d);
}
.sp-cockpit .sp-mode ul{ margin:0; padding:0 0 0 1.1rem; display:flex; flex-direction:column; gap:.3rem; }
.sp-cockpit .sp-mode li{ font-size:.89rem; line-height:1.6; color:var(--sp-ink2); }
.sp-cockpit .sp-mode strong{ color:var(--sp-ink); font-weight:800; }
.sp-cockpit .sp-mode a{ color:var(--sp-acc-d); font-weight:700; }
.sp-cockpit .sp-gros{ font-size:1.02rem; font-weight:800; color:var(--sp-ink); }
.sp-cockpit .sp-tab-bil tbody th[scope=row]{ min-width:15rem; }
.sp-cockpit .sp-tab-at tbody tr.sp-tr-on > *{ background:var(--sp-acc-l); }

/* =============================================================================
   TELEPHONE
   ========================================================================== */
@media (max-width:40rem){
  .sp-cockpit .sp-mur-l{ grid-template-columns:1fr; }
  .sp-cockpit .sp-tk-l{ grid-template-columns:1fr; }
  .sp-cockpit .sp-liens{ grid-template-columns:1fr; }
  .sp-cockpit .sp-q-t{ font-size:1.1rem; }
  .sp-cockpit .sp-cur-x{ min-width:30%; font-size:.78rem; }
  .sp-cockpit .sp-q-out{ gap:.35rem; }
  /* La mise en pleine largeur du bouton principal est definie plus bas,
     avec sa hauteur de cible et son ordre dans la ligne. */
  .sp-cockpit .sp-tab-bil tbody th[scope=row]{ min-width:11rem; }
  .sp-cockpit .sp-zone{ scroll-margin-top:1rem; }
}

@media (prefers-reduced-motion:reduce){
  .sp-cockpit *{ transition:none !important; animation:none !important; }
}

/* --------------------------------------------- verrouiller et ecarter -- */
/* Le bloc se lit sous le ticket : on voit d'abord la proposition, on corrige
   ensuite. La grille tient en 1 colonne au telephone et en 2 des 560 px. */
.sp-cockpit .sp-choix{
  margin-top:1.1rem; padding-top:1rem; border-top:1px solid var(--sp-bd);
}
/* Le resume est la poignee du repli : il doit se voir comme un bouton et se
   prendre au doigt, d'ou la hauteur minimale et le fond. */
.sp-cockpit .sp-choix-s{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  cursor:pointer; list-style:none; min-height:2.6rem;
  padding:.45rem .7rem; border:1px solid var(--sp-bd2);
  border-radius:var(--sp-r-s); background:var(--sp-card2);
}
.sp-cockpit .sp-choix-s::-webkit-details-marker{ display:none; }
.sp-cockpit .sp-choix-s > span{ font-size:.94rem; font-weight:800; color:var(--sp-ink); }
.sp-cockpit .sp-choix-s > em{
  font-style:normal; font-size:.76rem; font-weight:700; color:var(--sp-mut);
  white-space:nowrap; margin-left:auto;
}
/* Le chevron dit que la ligne s'ouvre. Trace en CSS et non en caractere : il
   n'est pas lu par les lecteurs d'ecran, qui annoncent deja l'etat du repli. */
.sp-cockpit .sp-choix-s::after{
  content:''; flex:0 0 auto; width:.5rem; height:.5rem;
  border-right:2px solid var(--sp-acc-d); border-bottom:2px solid var(--sp-acc-d);
  transform:rotate(45deg); margin:-.2rem .15rem 0 .2rem;
  transition:transform .15s ease;
}
.sp-cockpit .sp-choix[open] .sp-choix-s::after{
  transform:rotate(-135deg); margin-top:.15rem;
}
@media (prefers-reduced-motion:reduce){
  .sp-cockpit .sp-choix-s::after{ transition:none; }
}
.sp-cockpit .sp-choix-s:hover{ border-color:var(--sp-acc); }
.sp-cockpit .sp-choix-s:focus-visible{ outline:2px solid var(--sp-acc); outline-offset:2px; }
.sp-cockpit .sp-choix[open] .sp-choix-s{
  border-bottom-left-radius:0; border-bottom-right-radius:0;
  border-color:var(--sp-acc); background:var(--sp-acc-l);
}
.sp-cockpit .sp-choix[open] > *:not(.sp-choix-s){ margin-left:.1rem; margin-right:.1rem; }
.sp-cockpit .sp-choix-t p{ margin:.7rem 0 .8rem; font-size:.88rem; color:var(--sp-ink2); }
.sp-cockpit .sp-choix-l{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr; gap:.3rem;
}
@media (min-width:560px){
  .sp-cockpit .sp-choix-l{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.3rem .7rem; }
}
@media (min-width:1080px){
  .sp-cockpit .sp-choix-l{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
.sp-cockpit .sp-choix-i{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  min-width:0; padding:.3rem .45rem; border:1px solid var(--sp-bd);
  border-radius:var(--sp-r-s); background:#fff;
}
.sp-cockpit .sp-choix-dans{ border-color:var(--sp-acc); background:var(--sp-acc-l); }
.sp-cockpit .sp-choix-b{ border-color:var(--sp-ok); background:#f0fdf6; }
.sp-cockpit .sp-choix-x{ border-color:var(--sp-bd2); background:var(--sp-card2); opacity:.72; }
.sp-cockpit .sp-choix-ch{
  display:flex; align-items:center; gap:.4rem; min-width:0; flex:1 1 auto;
}
.sp-cockpit .sp-choix-nom{
  font-size:.82rem; font-weight:600; color:var(--sp-ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
.sp-cockpit .sp-choix-x .sp-choix-nom{ text-decoration:line-through; color:var(--sp-mut); }
.sp-cockpit .sp-choix-cases{ display:flex; gap:.25rem; flex:0 0 auto; }
.sp-cockpit .sp-choix-c{
  display:inline-flex; align-items:center; gap:.25rem; cursor:pointer;
  font-size:.72rem; font-weight:700; letter-spacing:.01em;
  padding:.25rem .4rem; border:1px solid var(--sp-bd2); border-radius:var(--sp-r-s);
  background:#fff; color:var(--sp-ink2); min-height:1.9rem;
}
.sp-cockpit .sp-choix-c input{ margin:0; width:.85rem; height:.85rem; accent-color:var(--sp-acc-d); }
.sp-cockpit .sp-choix-cb input{ accent-color:var(--sp-ok); }
.sp-cockpit .sp-choix-cx input{ accent-color:var(--sp-ko); }
.sp-cockpit .sp-choix-c:hover{ border-color:var(--sp-acc); }
.sp-cockpit .sp-choix-c:focus-within{ outline:2px solid var(--sp-acc); outline-offset:1px; }
/* Le libelle long ne sert qu'aux lecteurs d'ecran : il nomme le cheval, parce
   que « Base » tout seul ne dit pas de quel cheval il s'agit. */
.sp-cockpit .sp-lu{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.sp-cockpit .sp-choix-bilan{
  margin:.7rem 0 0; font-size:.86rem; color:var(--sp-ink2); line-height:1.5;
}
.sp-cockpit .sp-choix-out{
  display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin-top:.7rem;
}

/* --------------------------------------------- la tendance des joueurs -- */
/* Les styles de l'ancienne section « tendance des joueurs » ont ete retires
   avec elle : le consensus n'est plus affiche qu'a un seul endroit, dans la
   bande qui ferme le mur des sources. */

/* ------------------------------------------------- le marche du jour -- */
/* La couleur ne dit qu'une chose : le sens du mouvement. Vert quand le cheval
   est joue (la cote baisse), ambre quand il est lache. Rien d'autre n'est
   colore, pour que ces deux signaux restent lisibles. */
/* La colonne du cheval prend la place qui reste, les colonnes de chiffres se
   contentent de leur contenu : c'est ce qui evite un tableau tasse a gauche
   avec du vide a droite. */
.sp-cockpit .sp-tab.sp-t-marche{ table-layout:auto; }
.sp-cockpit .sp-t-marche tbody th[scope="row"]{
  width:99%; font-weight:600; font-size:.88rem; white-space:normal;
}
.sp-cockpit .sp-t-marche thead th:not(:first-child),
.sp-cockpit .sp-t-marche td{ white-space:nowrap; width:1%; }
/* L'en-tete de la colonne du cheval s'aligne sur son contenu : la regle de base
   met tous les en-tetes a droite, ce qui laissait « Cheval » flotter au-dessus
   d'une colonne alignee a gauche. */
.sp-cockpit .sp-t-marche thead th:first-child{ text-align:left; }
.sp-cockpit .sp-t-marche .sp-mv-m{ display:inline; margin-left:.3rem; }
.sp-cockpit .sp-mv{ font-weight:700; font-variant-numeric:tabular-nums; }
.sp-cockpit .sp-mv-m{
  display:block; font-size:.74rem; font-weight:600; color:var(--sp-mut);
  white-space:normal;
}
.sp-cockpit tr.sp-mv-bas  > *{ background:var(--sp-ok-bg); }
.sp-cockpit tr.sp-mv-bas  .sp-mv{ color:var(--sp-ok); }
.sp-cockpit tr.sp-mv-haut > *{ background:var(--sp-wa-bg); }
.sp-cockpit tr.sp-mv-haut .sp-mv{ color:var(--sp-wa); }
.sp-cockpit .sp-marche-l{
  margin:.7rem 0 0; font-size:.88rem; color:var(--sp-ink2); line-height:1.55;
}
.sp-cockpit .sp-marche-z{
  margin:.7rem 0 0; padding-top:.7rem; border-top:1px solid var(--sp-bd);
  font-size:.86rem; color:var(--sp-ink2); line-height:1.55;
}
@media (max-width:560px){
  .sp-cockpit .sp-t-marche th[scope="row"]{ white-space:normal; }
  .sp-cockpit .sp-mv-m{ font-size:.7rem; }
}

/* Le marche sur telephone : le tableau se replie en fiches.
   Un tableau a 5 colonnes ne tient pas sur 390 px. Il debordait donc
   horizontalement, et les 2 colonnes qui portent l'information la plus utile,
   le mouvement et le deuxieme avis, se retrouvaient hors de l'ecran sans que
   rien ne le signale. Chaque ligne devient une fiche, et chaque valeur porte
   le nom de sa colonne. */
@media (max-width:560px){
  .sp-cockpit .sp-t-marche,
  .sp-cockpit .sp-t-marche tbody,
  .sp-cockpit .sp-t-marche tr,
  .sp-cockpit .sp-t-marche th,
  .sp-cockpit .sp-t-marche td{ display:block; width:auto; }
  .sp-cockpit .sp-t-marche thead{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap;
  }
  .sp-cockpit .sp-t-marche tbody tr{
    padding:.5rem .6rem; border-bottom:1px solid var(--sp-bd);
  }
  .sp-cockpit .sp-t-marche tbody tr:last-child{ border-bottom:0; }
  .sp-cockpit .sp-t-marche tbody th[scope="row"]{
    width:auto; padding:0 0 .3rem; border:0; font-size:.9rem; font-weight:700;
  }
  .sp-cockpit .sp-t-marche tbody td{
    width:auto; padding:.12rem 0; border:0; text-align:left;
    font-size:.84rem; white-space:normal;
  }
  .sp-cockpit .sp-t-marche tbody td::before{
    content:attr(data-sp-l); display:inline-block; min-width:5.6rem;
    /* min-width seul ne suffit pas : « MAINTENANT » est plus large que la
       reserve et venait coller la valeur. La marge droite garantit l'espace
       quelle que soit la longueur du libelle. */
    padding-right:.5rem;
    font-size:.7rem; font-weight:800; text-transform:uppercase;
    letter-spacing:.04em; color:var(--sp-mut);
  }
  .sp-cockpit .sp-t-marche .sp-c-matin::before{ content:'Ce matin'; }
  .sp-cockpit .sp-t-marche .sp-c-now::before{   content:'Maintenant'; }
  .sp-cockpit .sp-t-marche .sp-c-mv::before{    content:'Mouvement'; }
  .sp-cockpit .sp-t-marche .sp-c-z::before{     content:'ZEturf'; }
  .sp-cockpit .sp-tabwrap:has(.sp-t-marche){ overflow-x:visible; }
}

/* Les colonnes des autres operateurs. Le vert dit « mieux paye ici », l'ambre
   « moins bien paye ici », toujours par rapport a la cote de reference de la
   ligne. Le seuil est a 5 % : en dessous, l'ecart tient au pas d'arrondi des
   operateurs et ne veut rien dire. */
.sp-cockpit .sp-op{
  display:inline-block; font-variant-numeric:tabular-nums; font-weight:600;
  padding:.1rem .4rem; border-radius:var(--sp-r-s); border:1px solid transparent;
}
.sp-cockpit .sp-op-plus{
  color:var(--sp-ok); background:var(--sp-ok-bg); border-color:var(--sp-ok-bd);
  font-weight:800;
}
.sp-cockpit .sp-op-moins{
  color:var(--sp-wa); background:var(--sp-wa-bg); border-color:var(--sp-wa-bd);
  font-weight:800;
}
/* Le sous-titre d'en-tete nomme le marche de reference sans allonger la
   colonne : il passe sous le libelle, en plus petit. */
.sp-cockpit .sp-t-marche .sp-th-s{
  display:block; font-size:.62rem; font-weight:700; letter-spacing:.02em;
  text-transform:none; color:var(--sp-mut); margin-top:.1rem;
}
.sp-cockpit .sp-marche-leg{
  margin:.5rem 0 0; font-size:.8rem; color:var(--sp-mut); line-height:1.6;
}
.sp-cockpit .sp-marche-leg .sp-op{ font-size:.74rem; }
@media (max-width:560px){
  .sp-cockpit .sp-t-marche .sp-c-pdv::before{  content:'PMU pt de vente'; }
  .sp-cockpit .sp-t-marche .sp-c-play::before{ content:'PMU Play'; }
}

/* ============================================================== le ticket ==
   IL DOIT SE DISTINGUER DE TOUT LE RESTE. Les zones de la page ont toutes le
   meme fond blanc et la meme bordure : le ticket, qui est la seule chose que
   le turfiste est venu chercher, se confondait avec les zones de travail qui
   l'ont produit. Il porte donc sa propre couleur, une bordure plus affirmee et
   un filet d'accent a gauche, pour qu'on le reconnaisse d'un coup d'oeil apres
   l'avoir ouvert.

   La teinte reste tres claire (#eef6f8 contre #0d2126 pour le texte, soit un
   rapport de contraste de 15,6 pour 1) : ce n'est pas une couleur de marque
   plaquee, c'est un fond qui laisse le texte lisible et les blocs internes
   ressortir en blanc. */
.sp-cockpit .sp-zone.sp-tk{
  background:#e7f2f5;
  border:2px solid var(--sp-acc);
  box-shadow:0 1px 3px rgba(7, 92, 108, .10);
  padding:0;
}
/* Un bandeau d'accent en tete : c'est lui qui fait dire « voila le resultat »
   avant meme d'avoir lu le titre. Le texte y est blanc sur #075c6c, soit un
   rapport de 8,6 pour 1, bien au-dela du seuil AA. */
.sp-cockpit .sp-zone.sp-tk > .sp-zone-t{
  background:var(--sp-acc-d); color:#fff;
  margin:0; padding:.9rem 1.25rem; gap:.25rem;
  border-radius:calc(var(--sp-r) - 2px) calc(var(--sp-r) - 2px) 0 0;
}
.sp-cockpit .sp-zone.sp-tk > .sp-zone-t h2{ color:#fff; }
.sp-cockpit .sp-zone.sp-tk > .sp-zone-t p{ color:#dcecf0; }
/* Le reste de la section garde la respiration des autres zones. */
.sp-cockpit .sp-zone.sp-tk > *:not(.sp-zone-t){ margin-left:1.25rem; margin-right:1.25rem; }
.sp-cockpit .sp-zone.sp-tk > *:last-child{ margin-bottom:1.15rem; }
.sp-cockpit .sp-zone.sp-tk > .sp-zone-t + *{ margin-top:1.15rem; }
/* Les blocs internes repassent en blanc pour se detacher du fond teinte. */
.sp-cockpit .sp-zone.sp-tk .sp-tk-haut{
  background:#fff; border-color:var(--sp-acc);
}
.sp-cockpit .sp-zone.sp-tk .sp-tk-i,
.sp-cockpit .sp-zone.sp-tk .sp-choix-i,
.sp-cockpit .sp-zone.sp-tk .sp-tk-avis{ background:#fff; }
.sp-cockpit .sp-zone.sp-tk .sp-choix-s{ background:#fff; }
.sp-cockpit .sp-zone.sp-tk[open] .sp-choix-s{ background:var(--sp-acc-l); }
/* Le titre du bandeau est traite plus haut, avec le bandeau lui-meme : une
   regle de meme poids posee ici le repeignait en accent sur fond accent, donc
   illisible. Elle a ete retiree plutot que renforcee, parce que deux regles qui
   se disputent la meme couleur finissent toujours par se contredire. */
/* La section recoit le focus a l'ouverture : l'anneau doit se voir, et ne pas
   rester colle apres un clic a la souris. */
.sp-cockpit .sp-zone.sp-tk:focus{ outline:none; }
.sp-cockpit .sp-zone.sp-tk:focus-visible{
  outline:3px solid var(--sp-acc-d); outline-offset:3px;
}

/* ------------------------------------------ le bouton qui ouvre le ticket --
   C'est l'action principale de la page : il est toujours plein, toujours au
   bout de la ligne, et sa cible depasse 44 px de haut, la taille au doigt
   recommandee par les criteres d'accessibilite. */
.sp-cockpit .sp-q-voir{
  margin-left:auto; min-height:2.75rem; padding:.55rem 1.1rem;
  font-size:.92rem; font-weight:800;
}
.sp-cockpit .sp-q-out .sp-q-prec,
.sp-cockpit .sp-q-out .sp-q-pass,
.sp-cockpit .sp-q-out .sp-btn{ min-height:2.75rem; }
/* Quand le ticket est deja ouvert, le bouton le dit plutot que de faire croire
   a une action restee sans effet. */
.sp-cockpit [data-sp-voir][aria-expanded="true"]::after{
  content:' \2713'; font-weight:700;
}
@media (max-width:560px){
  /* Au doigt, l'action principale prend toute la largeur : c'est la cible la
     plus sure et elle ne se confond plus avec « Passer ». */
  .sp-cockpit .sp-q-voir{ margin-left:0; flex:1 1 100%; order:-1; margin-bottom:.15rem; }
}

/* --------------------------------- le consensus du Renifleur dans le mur --
   Il occupe la place restante de la grille plutot que de laisser un trou, et
   il se distingue des sources : ce n'est pas un avis de plus, c'est la somme
   des tickets composes sur la page. D'ou la teinte d'accent et le libelle de
   la note, qui dit d'ou vient le chiffre. */
.sp-cockpit .sp-mur-renif{
  grid-column:span 2; background:var(--sp-acc-l); border-color:var(--sp-acc);
}
.sp-cockpit .sp-mur-renif .sp-mur-n{ color:var(--sp-acc-d); }
/* 8 numeros au lieu de 5 : on les met sur deux colonnes pour que la carte
   garde la hauteur de ses voisines au lieu de l'allonger de moitie. */
.sp-cockpit .sp-mur-nums-8{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.2rem .6rem;
}
.sp-cockpit .sp-mur-renif .sp-mur-note{ color:var(--sp-ink2); }
@media (max-width:820px){
  .sp-cockpit .sp-mur-renif{ grid-column:span 1; }
}
@media (max-width:560px){
  .sp-cockpit .sp-mur-nums-8{ grid-template-columns:1fr; }
}

/* ================================================ le consensus du Renifleur ==
   IL FERME LE MUR DES SOURCES, EN PLEINE LARGEUR. Loge dans la grille, il etait
   a l'etroit : 8 numeros empiles dans une colonne de 13 rem et une note tassee
   en 4 lignes, pour une information qui est la plus importante de la zone.
   Hors grille, les 8 chevaux tiennent sur une ou deux lignes et la place est
   employee a ce qu'elle doit servir.

   Le bandeau d'accent le distingue des cartes de sources : ce n'est pas un avis
   de plus, c'est la somme de ce que la salle a compose. */
.sp-cockpit .sp-renif{
  margin-top:.2rem; border:2px solid var(--sp-acc); border-radius:var(--sp-r);
  background:#e7f2f5; overflow:hidden;
}
.sp-cockpit .sp-renif-t{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:.3rem 1rem; background:var(--sp-acc-d); color:#fff; padding:.55rem .9rem;
}
.sp-cockpit .sp-renif-n{
  margin:0; font-size:.95rem; font-weight:800; letter-spacing:.01em; color:#fff;
}
.sp-cockpit .sp-renif-c{
  margin:0; font-size:.8rem; font-weight:700; color:#cfe6ec; white-space:nowrap;
}
.sp-cockpit .sp-renif-l{
  list-style:none; margin:0; padding:.8rem .9rem 0;
  display:flex; flex-wrap:wrap; gap:.4rem;
}
.sp-cockpit .sp-renif-l li{
  display:inline-flex; align-items:center; gap:.4rem; min-width:0;
  padding:.2rem .75rem .2rem .2rem;
  background:#fff; border:1px solid var(--sp-bd2); border-radius:999px;
}
/* Le premier du consensus est le plus consensuel de la journee : il se voit. */
.sp-cockpit .sp-renif-l li.sp-renif-1{
  border-color:var(--sp-acc-d); box-shadow:inset 0 0 0 1px var(--sp-acc-d);
}
.sp-cockpit .sp-renif-l .sp-tk-num{
  width:1.7rem; min-width:1.7rem; height:1.7rem; flex:0 0 auto;
  border-radius:50%; font-size:.85rem; font-weight:800; line-height:1;
}
.sp-cockpit .sp-renif-ch{
  font-size:.78rem; font-weight:600; color:var(--sp-ink2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:11rem;
}
.sp-cockpit .sp-renif-p{
  margin:0; padding:.8rem .9rem 0; font-size:.86rem; line-height:1.55;
  color:var(--sp-ink2);
}
.sp-cockpit .sp-renif-tot{
  margin:.7rem 0 0; padding:.55rem .9rem; font-size:.78rem; color:var(--sp-mut);
  border-top:1px solid var(--sp-bd);
}
.sp-cockpit .sp-renif > *:last-child{ margin-bottom:0; }
.sp-cockpit .sp-renif-p:last-child{ padding-bottom:.9rem; }
.sp-cockpit .sp-tk-renif{
  margin:0; font-size:.88rem; line-height:1.6; color:var(--sp-ink2);
  background:#fff; border:1px solid var(--sp-acc); border-radius:var(--sp-r-s);
  padding:.6rem .75rem;
}
@media (max-width:560px){
  .sp-cockpit .sp-renif-c{ white-space:normal; }
  .sp-cockpit .sp-renif-ch{ max-width:8.5rem; font-size:.74rem; }
  .sp-cockpit .sp-renif-l{ gap:.3rem; }
}