/* =============================================================================
   assets/css/ecarts-numeros-2027.css - turf.bzh
   Complement de assets/css/ecarts-quinte-2027.css pour la page
   statistiques-ecarts-quinte.php (ecarts des NUMEROS du Quinte+).

   POURQUOI UNE SECONDE FEUILLE ET NON UN AJOUT DANS LA PREMIERE.
   ecarts-quinte-2027.css porte le systeme 2027 (.ae-*) ET les regles propres a
   la page jockeys-entraineurs (.eq-*). Y toucher, c'est risquer cette page-la
   pour un chantier qui ne la concerne pas. Les deux feuilles se chargent
   ensemble : le systeme vient de la premiere, les composants de la page des
   numeros de celle-ci. Un turfiste qui visite les deux pages ne telecharge le
   gros fichier qu'une fois.

   Prefixe : .en- (ecarts numeros). Tout est porte par .ae-page pour la
   specificite, comme le fait la feuille principale.
   ========================================================================== */

/* ============================================================ EN-TETE JOUR ==
   La carte du Quinte du jour : hippodrome, discipline, distance, partants,
   arrivee. Elle remplace l'ancien duo Controles + Infos, qui prenait deux
   cartes pleine largeur pour cinq valeurs. */

.ae-page .en-jour {
  display: grid;
  grid-template-columns: 1fr;
  gap: .9rem;
  background: var(--ae-card);
  border: 1px solid var(--ae-bd);
  border-radius: var(--ae-r-md);
  box-shadow: var(--ae-sh-sm);
  padding: 1rem 1.05rem;
  margin: 0 0 1.1rem;
}
.ae-page .en-jour-t {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--ae-ink);
  letter-spacing: -.01em;
}
.ae-page .en-jour-t span { color: var(--ae-mut); font-weight: 600; }
.ae-page .en-faits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ae-page .en-faits div {
  background: var(--ae-card2);
  border: 1px solid var(--ae-bd-soft);
  border-radius: var(--ae-r-sm);
  padding: .5rem .6rem;
  min-width: 0;
}
.ae-page .en-faits dt {
  font-size: .68rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ae-mut);
  font-weight: 700;
  margin: 0 0 .15rem;
}
.ae-page .en-faits dd {
  margin: 0;
  font-weight: 700;
  color: var(--ae-ink);
  font-size: .95rem;
  overflow-wrap: anywhere;
}
.ae-page .en-arrivee {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  padding: .65rem .8rem;
  border-radius: var(--ae-r-sm);
  background: var(--ae-acc-l2);
  border: 1px solid var(--ae-acc-l);
}
.ae-page .en-arrivee-l {
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--ae-acc-d);
  margin-right: .2rem;
}
.ae-page .en-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 .4rem;
  border-radius: var(--ae-r-xs);
  background: var(--ae-acc);
  color: #fff;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: .95rem;
}
.ae-page .en-num-nd {
  background: var(--ae-soft);
  color: var(--ae-mut);
  border: 1px dashed var(--ae-bd-fort);
  font-weight: 600;
  min-width: auto;
  padding: 0 .7rem;
}

/* ============================================================== LE CHOIX ====
   Le selecteur de journee. Un formulaire, pas de bibliotheque de calendrier :
   flatpickr coutait une feuille et deux scripts pour un champ date. */

.ae-page .en-choix {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .55rem;
  margin: 0 0 1.1rem;
}
.ae-page .en-choix label {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  color: var(--ae-mut);
  margin: 0 0 .25rem;
}
.ae-page .en-date {
  font: inherit;
  font-size: .92rem;
  padding: .5rem .6rem;
  border: 1px solid var(--ae-bd-fort);
  border-radius: var(--ae-r-sm);
  background: var(--ae-card);
  color: var(--ae-ink);
  min-height: 2.5rem;
}
.ae-page .en-date:focus-visible {
  outline: 2px solid var(--ae-acc);
  outline-offset: 1px;
  box-shadow: var(--ae-glow);
}

/* ========================================================= FAIT MARQUANT ====
   L'encart qui ouvre chaque section. Deux etats : mesure (accent) et bruit
   (neutre). L'etat « bruit » ne doit PAS ressembler a une alerte : il n'y a
   rien d'anormal a ce qu'un echantillon de douze courses ne mesure rien. */

.ae-page .en-fait {
  border-radius: var(--ae-r-sm);
  padding: .8rem .95rem;
  margin: 0 0 1rem;
  font-size: .94rem;
  line-height: 1.55;
  background: var(--ae-acc-l2);
  border: 1px solid var(--ae-acc-l);
  border-left: 4px solid var(--ae-acc);
  color: var(--ae-ink2);
}
.ae-page .en-fait-bruit {
  background: var(--ae-soft);
  border-color: var(--ae-bd);
  border-left-color: var(--ae-bd-fort);
  color: var(--ae-mut);
}
.ae-page .en-fait-t {
  display: block;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--ae-acc-d);
  margin: 0 0 .3rem;
}
.ae-page .en-fait-bruit .en-fait-t { color: var(--ae-mut); }
/* .en-fait pose margin:0 en haut, et cette feuille est chargee APRES
   ecarts-quinte-2027.css : a specificite egale, elle ecrasait .ae-mt et le
   bloc venait se coller aux vignettes du dessus. */
.ae-page .en-fait.ae-mt { margin-top: 1.4rem; }
.ae-page .en-grille + .en-fait,
.ae-page .en-dist + .en-fait { margin-top: 1.4rem; }
.ae-page .en-fait p { margin: 0; }
.ae-page .en-fait p + p { margin-top: .45rem; }
.ae-page .en-fait strong { color: var(--ae-ink); font-weight: 800; }

/* ============================================================== ONGLETS =====
   Les cinq Tops. Des liens serveur, pas des onglets JavaScript : sans script
   la page reste entiere, et chaque Top a son adresse. */

.ae-page .en-tops {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: 0 0 .85rem;
  padding: 0;
  list-style: none;
}
.ae-page .en-top {
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .42rem .75rem;
  border-radius: var(--ae-pill);
  border: 1px solid var(--ae-bd-fort);
  background: var(--ae-card);
  color: var(--ae-ink2);
  font-size: .86rem;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.2;
  min-height: 2.25rem;
  transition: background .18s var(--ae-ease), border-color .18s var(--ae-ease);
}
.ae-page .en-top:hover { background: var(--ae-acc-l2); border-color: var(--ae-acc); color: var(--ae-acc-d); }
.ae-page .en-top:focus-visible { outline: 2px solid var(--ae-acc); outline-offset: 2px; }
.ae-page .en-top-on {
  background: var(--ae-grad);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--ae-sh-sm);
}
.ae-page .en-top-on:hover { color: #fff; background: var(--ae-grad); border-color: transparent; }
.ae-page .en-top small { font-weight: 600; opacity: .8; font-size: .78em; }

/* ============================================================== LEGENDE =====
   Une couleur qui n'est pas expliquee ne sert a rien. La legende suit les
   onglets, au-dessus du tableau qu'elle decrit. */

.ae-page .en-leg {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.1rem;
  align-items: center;
  margin: 0 0 .7rem;
  font-size: .84rem;
  color: var(--ae-mut);
}
.ae-page .en-leg span { display: inline-flex; align-items: center; gap: .4rem; }
.ae-page .en-leg i {
  display: inline-block;
  width: 1.6rem;
  height: .75rem;
  border-radius: var(--ae-r-xs);
  flex: 0 0 auto;
}
.ae-page .en-leg-rouge { background: var(--ae-ko-bg); border: 1px solid var(--ae-ko-bd); }
.ae-page .en-leg-barre { background: var(--ae-soft); position: relative; overflow: hidden; }
.ae-page .en-leg-barre::after {
  content: ""; position: absolute; inset: 0 45% 0 0; background: var(--ae-acc);
}

/* ============================================================= PANNEAUX =====
   Les cinq Tops d'une section. Le serveur les rend TOUS : sans JavaScript la
   page reste complete, et un moteur ou un agent lit les cinq tableaux. Le
   script n'en masque que quatre et deplace l'onglet actif, section par
   section, sans toucher au reste de la page. */

.ae-page .en-panneau-t {
  font-size: .95rem;
  font-weight: 800;
  color: var(--ae-acc-d);
  margin: 1.2rem 0 .5rem;
}
.ae-page .en-tabs-js .en-panneau-t { display: none; }
.ae-page .en-panneau[hidden] { display: none; }

/* =========================================================== ACCORDEON =====
   Replier ce qui est long mais utile : dix-sept lignes de rapports par numero
   ne doivent pas repousser la suite de la page. */

.ae-page .en-accord {
  border: 1px solid var(--ae-bd);
  border-radius: var(--ae-r-sm);
  background: var(--ae-card2);
  padding: .6rem .85rem;
  margin: 1.1rem 0 0;
}
.ae-page .en-accord[open] { background: var(--ae-card); border-color: var(--ae-acc-l); }
.ae-page .en-accord > summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--ae-acc-d);
  list-style: none;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .95rem;
}
.ae-page .en-accord > summary::-webkit-details-marker { display: none; }
.ae-page .en-accord > summary::before {
  content: "+";
  font-weight: 800;
  color: var(--ae-acc);
  font-size: 1.1rem;
  line-height: 1;
}
.ae-page .en-accord[open] > summary::before { content: "\2212"; }
.ae-page .en-accord > summary:focus-visible { outline: 2px solid var(--ae-acc); outline-offset: 2px; }
.ae-page .en-accord-c { margin: .85rem 0 .2rem; }
.ae-page .en-accord-c > *:first-child { margin-top: 0; }

/* ============================================================== TABLEAU =====
   Le tableau des numeros. La barre d'ecart est un element de mesure, pas une
   decoration : sa largeur est proportionnelle a l'ecart le plus long de la
   section, et la valeur reste lisible en chiffres a cote. */

.ae-page .en-tab { width: 100%; border-collapse: collapse; font-size: .9rem; }
.ae-page .en-tab caption {
  caption-side: top;
  text-align: left;
  font-size: .82rem;
  color: var(--ae-mut);
  padding: 0 0 .45rem;
}
.ae-page .en-tab th,
.ae-page .en-tab td {
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--ae-bd-soft);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ae-page .en-tab thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--ae-card);
  border-bottom: 2px solid var(--ae-bd-fort);
  font-size: .76rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ae-mut);
  font-weight: 800;
}
/* Un en-tete triable porte deja le rembourrage du lien .ae-th-btn, herite de
   la feuille 2027 : le doubler eloignerait le libelle de sa colonne. */
.ae-page .en-tab thead th.en-th-tri { padding: 0; }
.ae-page .en-tab thead th.en-c-gauche .ae-th-btn { justify-content: flex-start; }
.ae-page .en-tab tbody th {
  text-align: left;
  font-weight: 800;
  color: var(--ae-ink);
}
.ae-page .en-tab tbody tr:hover td,
.ae-page .en-tab tbody tr:hover th { background: var(--ae-acc-l2); }
.ae-page .en-tab .en-c-gauche { text-align: left; white-space: normal; }
/* Le guide de la page annonce une ligne « signalee en rouge » quand l'ecart
   actuel depasse le record : c'est donc bien le rouge, et non l'ambre. */
.ae-page .en-tab-record td,
.ae-page .en-tab-record th { background: var(--ae-ko-bg); color: var(--ae-ko); }
.ae-page .en-tab-record th { font-weight: 800; }
.ae-page .en-tab-record:hover td,
.ae-page .en-tab-record:hover th { background: #fee2e2; }

.ae-page .en-barre {
  display: flex;
  align-items: center;
  gap: .45rem;
  justify-content: flex-end;
}
.ae-page .en-barre-v { font-weight: 800; color: var(--ae-ink); min-width: 1.6rem; text-align: right; }
.ae-page .en-barre-p {
  flex: 0 0 84px;
  height: .5rem;
  border-radius: var(--ae-pill);
  background: var(--ae-soft);
  overflow: hidden;
}
/* display:block est INDISPENSABLE : .en-barre-f est un <span>, donc inline par
   defaut, et ni width ni height ne s'appliquent a un element inline non
   remplace. La barre restait grise et vide en production. Son parent, lui,
   etait blockifie par le flex du conteneur, ce qui masquait le probleme. */
.ae-page .en-barre-f { display: block; height: 100%; border-radius: var(--ae-pill); background: var(--ae-acc); }
.ae-page .en-tab-record .en-barre-v { color: var(--ae-ko); }
.ae-page .en-tab-record .en-barre-f { background: var(--ae-ko); }

/* ============================================================== CHIFFRES ====
   Les tuiles de synthese. Elles portent toujours leur echantillon : un chiffre
   sans son nombre de courses n'a pas sa place sur cette page. */

.ae-page .en-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ae-page .en-tuile {
  background: var(--ae-card2);
  border: 1px solid var(--ae-bd);
  border-radius: var(--ae-r-sm);
  padding: .7rem .75rem;
  min-width: 0;
}
.ae-page .en-tuile-l {
  display: block;
  font-size: .7rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ae-mut);
  font-weight: 700;
  margin: 0 0 .25rem;
}
.ae-page .en-tuile-v {
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--ae-ink);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.ae-page .en-tuile-n { display: block; margin: .25rem 0 0; font-size: .8rem; color: var(--ae-mut); }
.ae-page .en-tuile-acc { background: var(--ae-acc-l2); border-color: var(--ae-acc-l); }
.ae-page .en-tuile-acc .en-tuile-v { color: var(--ae-acc-d); }

/* ============================================================ REPARTITION ===
   Une distribution en barres horizontales : composition de l'arrivee, rapport
   par tranche. Chaque ligne porte sa part en chiffres, la barre n'est qu'un
   soutien de lecture. */

.ae-page .en-dist { margin: 0; padding: 0; list-style: none; display: grid; gap: .35rem; }
.ae-page .en-dist li {
  display: grid;
  grid-template-columns: minmax(6.5rem, auto) 1fr minmax(5.5rem, auto);
  align-items: center;
  gap: .55rem;
  font-size: .9rem;
}
.ae-page .en-dist-l { color: var(--ae-ink2); font-weight: 600; }
.ae-page .en-dist-p { height: .55rem; border-radius: var(--ae-pill); background: var(--ae-soft); overflow: hidden; }
.ae-page .en-dist-f { display: block; height: 100%; border-radius: var(--ae-pill); background: var(--ae-acc); }
.ae-page .en-dist-v { text-align: right; font-weight: 700; color: var(--ae-ink); font-variant-numeric: tabular-nums; }

/* ============================================================== ARCHIVE =====
   Les Quintes deja courus sur l'hippodrome du jour. C'est le bloc qui remplit
   les sections ou la statistique ne dit rien : douze courses ne se mesurent
   pas, mais elles se lisent. */

.ae-page .en-arch { width: 100%; border-collapse: collapse; font-size: .87rem; }
.ae-page .en-arch th,
.ae-page .en-arch td {
  padding: .45rem .55rem;
  border-bottom: 1px solid var(--ae-bd-soft);
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ae-page .en-arch thead th {
  background: var(--ae-card);
  border-bottom: 2px solid var(--ae-bd-fort);
  font-size: .74rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ae-mut);
  font-weight: 800;
}
.ae-page .en-arch .en-c-gauche { text-align: left; }
.ae-page .en-arch tbody tr:hover td { background: var(--ae-acc-l2); }
.ae-page .en-arch-prix { color: var(--ae-mut); white-space: normal; min-width: 9rem; }
.ae-page .en-arr-mini {
  display: inline-flex;
  gap: .18rem;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.ae-page .en-arr-mini span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.55rem;
  height: 1.55rem;
  padding: 0 .25rem;
  border-radius: var(--ae-r-xs);
  background: var(--ae-soft);
  border: 1px solid var(--ae-bd);
  font-weight: 700;
  font-size: .8rem;
}
.ae-page .en-arr-mini span:first-child { background: var(--ae-acc); border-color: var(--ae-acc); color: #fff; }

/* ============================================================ AGENTS IA =====
   Le bloc qui annonce les formats lisibles par machine. Il est visible : une
   page qui se veut citable doit dire ou trouver ses donnees. */

.ae-page .en-ia {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .8rem;
  padding: .75rem .9rem;
  border-radius: var(--ae-r-sm);
  background: var(--ae-info-bg);
  border: 1px solid var(--ae-info-bd);
  font-size: .9rem;
  color: var(--ae-ink2);
}
.ae-page .en-ia-t { font-weight: 800; color: var(--ae-info); }
.ae-page .en-ia code {
  font-size: .84rem;
  background: var(--ae-card);
  border: 1px solid var(--ae-bd);
  border-radius: var(--ae-r-xs);
  padding: .1rem .35rem;
}

/* ================================================================ DIVERS ====*/

.ae-page .en-src {
  font-size: .82rem;
  color: var(--ae-mut);
  margin: .6rem 0 0;
}
.ae-page .en-src time { font-variant-numeric: tabular-nums; }

/* ============================================================ RESPONSIVE ====
   Mobile-first : tout ce qui precede vaut pour le telephone. Les paliers
   ci-dessous n'ajoutent que des colonnes. Aucune declaration de mise en page
   ne doit apparaitre APRES eux (lecon du 11/07/2026 : une regle posee apres sa
   media query gagne a specificite egale). */

@media (min-width: 620px) {
  .ae-page .en-faits { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ae-page .en-jour { grid-template-columns: 1fr; padding: 1.1rem 1.2rem; }
  .ae-page .en-tab { font-size: .93rem; }
}

@media (min-width: 900px) {
  .ae-page .en-grille { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); }
  .ae-page .en-barre-p { flex-basis: 120px; }
}

/* Le tableau ne se replie pas : il defile. Replier des colonnes derriere un
   chevron par ligne, c'est ce que faisait DataTables, et le turfiste mobile ne
   voyait plus ni frequence, ni ecart moyen, ni record. */
@media (max-width: 520px) {
  .ae-page .en-tab th,
  .ae-page .en-tab td { padding: .45rem .45rem; }
  .ae-page .en-tuile-v { font-size: 1.2rem; }
  .ae-page .en-dist li { grid-template-columns: minmax(5rem, auto) 1fr minmax(4.5rem, auto); font-size: .85rem; }
  .ae-page .en-top { font-size: .82rem; padding: .4rem .62rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ae-page .en-top { transition: none; }
}