/* =============================================================================
   assets/css/ecarts-courses-2027.css - turf.bzh
   Complement de assets/css/ecarts-quinte-2027.css pour la page
   statistiques-ecarts-numeros-courses.php (ecarts par CODE COURSE, R1C1...).

   POURQUOI UNE TROISIEME FEUILLE. ecarts-quinte-2027.css porte le systeme 2027
   (.ae-*) et les regles de la page jockeys ; ecarts-numeros-2027.css porte les
   composants propres aux ecarts du Quinte+ (.en-*). Cette page-ci a ses propres
   objets : le verdict d'un ecart contre son attendu, l'intervalle de confiance
   d'un rendement, le profil d'un code course. Ils n'ont rien a faire dans les
   deux autres feuilles, et y toucher mettrait en jeu des pages qui marchent.

   Prefixe : .ec- (ecarts courses). Tout est porte par .ae-page, comme le reste
   du systeme. Cette feuille se charge APRES ecarts-quinte-2027.css, dont elle
   reprend tous les jetons --ae-*.
   ========================================================================== */

/* ================================================== HIDDEN QUI TIENT ========
   Tout composant a qui cette feuille donne un display explicite l'emporterait
   sur la regle [hidden]{display:none} du navigateur, qui n'a aucune specificite.
   Un element marque hidden par le script resterait alors visible : c'est arrive
   a la ligne de graduations de l'intervalle de confiance. La regle est posee ici
   une fois, dans la portee .ae-page, et ne concerne aucune autre page. */
.ae-page [hidden]{ display: none !important; }

/* ======================================================== LE VERDICT ========
   Trois etats, et un seul code couleur pour toute la page. Le rouge ne veut
   PAS dire « un record est battu » : il veut dire « cet ecart depasse ce que la
   theorie prevoit pour ce numero ». C'est la seule lecture que la mesure
   autorise, et elle est expliquee dans la legende .ec-leg juste sous chaque
   tableau qui l'emploie. */

.ae-page .ec-v{
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .78rem; font-weight: 700; line-height: 1.25;
  padding: .16rem .45rem; border-radius: var(--ae-r-xs);
  border: 1px solid transparent; white-space: nowrap;
}
.ae-page .ec-v::before{ content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.ae-page .ec-v-sur { color: #9f1239; background: var(--ae-ko-bg);   border-color: var(--ae-ko-bd); }
.ae-page .ec-v-dans{ color: #92400e; background: var(--ae-warn-bg); border-color: var(--ae-warn-bd); }
.ae-page .ec-v-sous{ color: #065f46; background: var(--ae-ok-bg);   border-color: var(--ae-ok-bd); }
/* Jamais reussi : la conclusion est « pas anormal », mais elle ne repose pas sur
   une chance mesuree, seulement bornee. Une couleur a part le dit. */
.ae-page .ec-v-borne{ color: #075985; background: var(--ae-info-bg); border-color: var(--ae-info-bd); }
.ae-page .ec-v-nd  { color: var(--ae-mut); background: var(--ae-card2); border-color: var(--ae-bd); }

/* La ligne entiere se teinte quand, et seulement quand, la mesure conclut. */
.ae-page .ec-l-sur > td, .ae-page .ec-l-sur > th{ background: var(--ae-ko-bg); }
.ae-page .ec-l-sur > th{ box-shadow: inset 3px 0 0 0 #9f1239; }

/* Legende. Servie uniquement si le tableau contient au moins une ligne rouge :
   expliquer une couleur absente, c'est faire douter d'un tableau sain. */
.ae-page .ec-leg{
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .85rem;
  margin: .6rem 0 0; font-size: .85rem; color: var(--ae-mut);
}
.ae-page .ec-leg-t{ font-weight: 700; color: var(--ae-ink2); }
.ae-page .ec-leg-i{ display: flex; align-items: baseline; gap: .4rem; flex: 1 1 100%; }
/* Des qu'il y a la place, les cinq entrees se rangent sur la meme ligne ; sous
   cette largeur chacune prend sa ligne, faute de quoi la pastille et son
   explication se coupent en plein milieu. */
@media (min-width: 52rem){
  .ae-page .ec-leg-i{ flex: 0 1 auto; align-items: center; }
}

/* ==================================================== LE FAIT MESURE ========
   Le paragraphe calcule qui ouvre une section. Il porte toujours son
   echantillon : sans lui, une phrase chiffree n'est qu'une affirmation. */

.ae-page .ec-fait{
  background: var(--ae-acc-l2); border: 1px solid var(--ae-acc-l);
  border-left: 4px solid var(--ae-acc); border-radius: var(--ae-r-sm);
  padding: .8rem .95rem; margin: 0 0 1rem;
}
.ae-page .ec-fait-t{
  display: block; font-size: .74rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ae-acc-d); margin: 0 0 .3rem;
}
.ae-page .ec-fait p{ margin: 0 0 .45rem; color: var(--ae-ink2); font-size: .97rem; line-height: 1.6; }
.ae-page .ec-fait p:last-child{ margin-bottom: 0; }
.ae-page .ec-fait strong{ color: var(--ae-ink); font-weight: 800; }
/* Quand la mesure ne conclut pas, le bloc le dit et cesse d'attirer l'oeil. */
.ae-page .ec-fait-rien{
  background: var(--ae-card2); border-color: var(--ae-bd); border-left-color: var(--ae-bd-fort);
}
.ae-page .ec-fait-rien .ec-fait-t{ color: var(--ae-mut); }
/* Marge quand le bloc suit des vignettes : sans cette regle il se colle
   contre elles, meme defaut que celui releve sur la page du Quinte+. */
.ae-page .ec-fait.ae-mt{ margin-top: 1.3rem; }

/* ======================================================== LES VIGNETTES =====
   Un chiffre, son libelle, et la phrase qui dit de quoi il est tire. */

.ae-page .ec-tuiles{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: .6rem; margin: 0 0 .2rem;
}
.ae-page .ec-tuile{
  background: var(--ae-card2); border: 1px solid var(--ae-bd);
  border-radius: var(--ae-r-sm); padding: .7rem .8rem;
}
.ae-page .ec-tuile-l{
  display: block; font-size: .72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ae-mut); margin-bottom: .2rem;
}
.ae-page .ec-tuile-v{
  display: block; font-size: 1.4rem; font-weight: 800; color: var(--ae-ink);
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.ae-page .ec-tuile-s{ display: block; font-size: .8rem; color: var(--ae-mut); margin-top: .12rem; }
/* Le denominateur d'une vignette de comptage. « 0 » tout seul se lit comme une
   panne ; « 0 sur 1 518 » se comprend sans mode d'emploi. Le denominateur est
   plus petit et plus discret que le compte, qui reste la valeur. */
.ae-page .ec-tuile-sur{ font-size: .82rem; font-weight: 700; color: var(--ae-mut); white-space: nowrap; }
/* Vignette dont la valeur est un libelle et non un nombre : « R1C8 no 16 ». */
.ae-page .ec-tuile-v-txt{ font-size: 1.12rem; letter-spacing: -.01em; text-decoration: none; }
.ae-page a.ec-tuile-v-txt{ color: var(--ae-acc-d); }
.ae-page a.ec-tuile-v-txt:hover{ text-decoration: underline; }
.ae-page .ec-tuile-v-txt sup{ font-size: .62em; }
.ae-page .ec-tuile-acc{ background: var(--ae-acc-l2); border-color: var(--ae-acc-l); }
.ae-page .ec-tuile-acc .ec-tuile-v{ color: var(--ae-acc-d); }
.ae-page .ec-tuile-pos .ec-tuile-v{ color: #065f46; }
.ae-page .ec-tuile-neg .ec-tuile-v{ color: #9f1239; }

/* ===================================================== LE PROFIL DU CODE ====
   Ce qu'un code course est reellement : un creneau du programme, pas une
   course. Cette carte le montre en chiffres avant que le turfiste ne lise un
   seul ecart. */

.ae-page .ec-profil{
  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;
}
/* 9,5 rem et pas 8 : sous cette largeur les libelles passaient a la ligne et
   decalaient la valeur d'une cellule a l'autre dans la meme rangee. */
.ae-page .ec-faits{ display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .55rem .9rem; margin: 0; }
.ae-page .ec-faits > div{ min-width: 0; }
.ae-page .ec-faits dt{
  font-size: .72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ae-mut);
}
.ae-page .ec-faits dd{ margin: .1rem 0 0; font-size: 1.02rem; font-weight: 800; color: var(--ae-ink); font-variant-numeric: tabular-nums; }

.ae-page .ec-hippos{ display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.ae-page .ec-hippos li{
  font-size: .84rem; font-weight: 600; color: var(--ae-acc-d);
  background: var(--ae-acc-l2); border: 1px solid var(--ae-acc-l);
  border-radius: var(--ae-pill); padding: .18rem .6rem;
}
.ae-page .ec-hippos li span{ color: var(--ae-mut); font-weight: 500; }

/* ================================================ TITRE DE CARTE ===========
   Sous 52 rem une ligne de tableau devient une carte et son <th> en devient le
   titre. « 7 » tout seul ne fait pas un titre ; « Numéro 7 » si. Au-dessus de
   52 rem la colonne porte deja le libelle et le prefixe serait une redite.
   ATTENTION : ne pas confondre avec .ae-carte-h de la feuille de base, qui est
   masquee dans les DEUX modes et n'a donc rien a faire sur un <th>. */
.ae-page .ec-pfx{ font-weight: 700; }
@media (min-width: 52rem){ .ae-page .ec-pfx{ display: none; } }

/* ================================================= LE CHOIX DU CODE =========
   Un formulaire, pas un select qui recharge. Le clavier doit pouvoir parcourir
   580 codes sans declencher 580 chargements de page. */

.ae-page .ec-choix{
  display: flex; flex-wrap: wrap; gap: .7rem; align-items: flex-end;
  padding: .85rem .9rem; margin: 0 0 .9rem;
  background: var(--ae-soft); border: 1px solid var(--ae-bd); border-radius: var(--ae-r-sm);
}
.ae-page .ec-choix > div{ flex: 1 1 12rem; min-width: 0; }
.ae-page .ec-choix label{
  display: block; font-size: .75rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ae-mut); margin-bottom: .25rem;
}
.ae-page .ec-rapide{ display: flex; flex-wrap: wrap; gap: .35rem; margin: .1rem 0 0; }
.ae-page .ec-rapide a{
  font-size: .84rem; font-weight: 700; text-decoration: none;
  color: var(--ae-acc-d); background: var(--ae-card);
  border: 1px solid var(--ae-bd); border-radius: var(--ae-r-xs); padding: .22rem .55rem;
  transition: border-color .18s var(--ae-ease), background .18s var(--ae-ease);
}
.ae-page .ec-rapide a:hover{ border-color: var(--ae-acc); background: var(--ae-acc-l2); }
.ae-page .ec-rapide a[aria-current="page"]{ color: #fff; background: var(--ae-acc-d); border-color: var(--ae-acc-d); }

/* ============================================ LES ONGLETS QUI NE RECHARGENT =
   Le serveur rend les deux panneaux. Le script en masque un. Sans JavaScript
   les deux restent visibles, chacun avec son propre titre : personne ne se
   retrouve devant un panneau qu'aucun bouton ne peut ouvrir. */

.ae-page .ec-tabs{ display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .8rem; }
.ae-page .ec-tab-b{
  -webkit-appearance: none; appearance: none; font: inherit; cursor: pointer;
  font-size: .86rem; font-weight: 700; color: var(--ae-acc-d);
  background: var(--ae-card); border: 1px solid var(--ae-bd);
  border-radius: var(--ae-r-sm); padding: .38rem .8rem; min-height: 2.1rem;
  transition: border-color .18s var(--ae-ease), background .18s var(--ae-ease), color .18s var(--ae-ease);
}
.ae-page .ec-tab-b:hover{ border-color: var(--ae-acc); background: var(--ae-acc-l2); }
.ae-page .ec-tab-b[aria-selected="true"]{ color: #fff; background: var(--ae-acc-d); border-color: var(--ae-acc-d); }
/* Titre du panneau : utile sans JavaScript, redondant avec l'onglet des qu'il
   existe. C'est le SCRIPT qui pose .ec-js sur le conteneur. */
.ae-page .ec-js .ec-panneau-t{ display: none; }
.ae-page .ec-panneau-t{ font-size: .95rem; font-weight: 800; color: var(--ae-acc-d); margin: 1rem 0 .4rem; }
.ae-page .ec-panneau + .ec-panneau{ margin-top: 1.2rem; }
.ae-page .ec-js .ec-panneau + .ec-panneau{ margin-top: 0; }

/* ======================================================= LES BARRES =========
   .ec-barre-f est un span : sans display:block la largeur ne s'applique pas et
   la barre reste vide. Le defaut a ete releve en production sur la page du
   Quinte+, il ne se reproduit pas ici. */

/* La barre ne s'etire pas sur toute la largeur d'une colonne large : le groupe
   valeur + jauge reste compact et cale a droite, sous un en-tete lui-meme cale
   a droite. Sans max-width, la jauge poussait la valeur a l'autre bout de la
   cellule et la colonne perdait son alignement. */
.ae-page .ec-barre{
  display: flex; align-items: center; gap: .5rem;
  min-width: 6.5rem; max-width: 11rem; margin-left: auto; justify-content: flex-end;
}
.ae-page .ec-barre-v{ font-weight: 800; font-variant-numeric: tabular-nums; min-width: 2.2rem; text-align: right; }
.ae-page .ec-barre-p{
  display: block; flex: 1 1 3.5rem; height: .5rem; min-width: 3rem;
  background: var(--ae-bd); border-radius: var(--ae-pill); overflow: hidden;
}
.ae-page .ec-barre-f{ display: block; height: 100%; border-radius: var(--ae-pill); background: var(--ae-acc); }
.ae-page .ec-barre-f.ec-f-sur { background: #9f1239; }
.ae-page .ec-barre-f.ec-f-dans{ background: var(--ae-warn); }
.ae-page .ec-barre-f.ec-f-sous{ background: var(--ae-ok); }
.ae-page .ec-barre-f.ec-f-borne{ background: var(--ae-info); }
/* En mode cartes la cellule est un flex justifie a droite : la barre y garde
   sa place au lieu de s'ecraser a zero. */
.ae-page .ae-tab-cartes .ec-barre{ flex: 1 1 auto; }

/* ====================================================== LE FILTRE VIF =======
   Un seul champ, applique par le script sur des lignes deja servies. Sans
   JavaScript toutes les lignes restent la, ce qui est le bon defaut. */

.ae-page .ec-vif{
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .7rem;
  padding: .8rem .9rem; margin: 0 0 .7rem;
  background: var(--ae-soft); border: 1px solid var(--ae-bd); border-radius: var(--ae-r-sm);
}
.ae-page .ec-vif label{
  display: block; font-size: .75rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ae-mut); margin-bottom: .25rem;
}
.ae-page .ec-vif .ae-champ{ max-width: 8rem; }
.ae-page .ec-vif-etat{ font-size: .88rem; color: var(--ae-mut); margin-left: auto; align-self: center; }

/* ================================================== LE SIMULATEUR ===========
   Le formulaire de rendement. Chaque champ est etiquete ; les reunions sont
   des cases a cocher dans un groupe nomme, pas des div cliquables. */

.ae-page .ec-form{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .8rem; padding: .95rem 1rem; margin: 0 0 .8rem;
  background: var(--ae-soft); border: 1px solid var(--ae-bd); border-radius: var(--ae-r-sm);
}
.ae-page .ec-form > div{ min-width: 0; }
.ae-page .ec-form-large{ grid-column: 1 / -1; }
.ae-page .ec-form label{
  display: block; font-size: .75rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ae-mut); margin-bottom: .25rem;
}
.ae-page .ec-form label small{ font-weight: 600; text-transform: none; letter-spacing: 0; }
.ae-page .ec-cases{ display: flex; flex-wrap: wrap; gap: .3rem; }
.ae-page .ec-cases label{
  display: inline-flex; align-items: center; gap: .3rem; margin: 0;
  font-size: .84rem; font-weight: 700; text-transform: none; letter-spacing: 0;
  color: var(--ae-acc-d); background: var(--ae-card);
  border: 1px solid var(--ae-bd); border-radius: var(--ae-r-xs);
  padding: .22rem .5rem; cursor: pointer;
}
.ae-page .ec-cases label:hover{ border-color: var(--ae-acc); }
.ae-page .ec-cases input{ margin: 0; accent-color: var(--ae-acc-d); }
/* Une liste a choix multiple n'est pas un menu deroulant : la fleche heritee de
   .ae-sel y promettait un deploiement qui n'arrive jamais. */
.ae-page .ec-liste{ min-height: 7rem; background-image: none; padding-right: .65rem; }
.ae-page .ec-actions{ display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 .9rem; }
.ae-page .ec-etat{ font-size: .88rem; color: var(--ae-mut); }

/* L'intervalle de confiance, en une barre. Le zero y est une graduation
   visible : c'est le seul repere qui compte pour un rendement. */
.ae-page .ec-ic{
  position: relative; height: 2.6rem; margin: .7rem 0 .3rem;
  background: var(--ae-card2); border: 1px solid var(--ae-bd); border-radius: var(--ae-r-sm);
  overflow: hidden;
}
.ae-page .ec-ic-bande{
  position: absolute; top: .8rem; height: .65rem; border-radius: var(--ae-pill);
  background: var(--ae-acc); opacity: .38;
}
.ae-page .ec-ic-pos .ec-ic-bande{ background: var(--ae-ok); }
.ae-page .ec-ic-neg .ec-ic-bande{ background: #9f1239; }
.ae-page .ec-ic-zero{ position: absolute; top: .3rem; bottom: .3rem; width: 2px; background: var(--ae-ink); opacity: .55; }
.ae-page .ec-ic-point{
  position: absolute; top: .62rem; width: 1rem; height: 1rem; margin-left: -.5rem;
  border-radius: 50%; background: var(--ae-card); border: 3px solid var(--ae-acc-d);
}
.ae-page .ec-ic-lib{
  display: flex; justify-content: space-between; font-size: .78rem; color: var(--ae-mut);
  font-variant-numeric: tabular-nums;
}

.ae-page .ec-pill{
  display: inline-block; font-size: .76rem; font-weight: 800;
  padding: .12rem .45rem; border-radius: var(--ae-r-xs); white-space: nowrap;
}
.ae-page .ec-pill-ok{ color: #065f46; background: var(--ae-ok-bg); }
.ae-page .ec-pill-ko{ color: #9f1239; background: var(--ae-ko-bg); }
.ae-page .ec-perte td{ color: var(--ae-mut); }

/* Le rappel du prelevement. Il ne se replie pas et ne s'habille pas en
   promotion : c'est l'esperance du jeu, elle se lit avant le rendement. */
.ae-page .ec-garde{
  background: var(--ae-warn-bg); border: 1px solid var(--ae-warn-bd);
  border-left: 4px solid var(--ae-warn); border-radius: var(--ae-r-sm);
  padding: .8rem .95rem; margin: 0 0 1rem; color: #713f12; font-size: .93rem; line-height: 1.6;
}
.ae-page .ec-garde strong{ color: #7c2d12; font-weight: 800; }

/* ======================================================= L'ACCORDEON ========
   Le detail par numero n'a pas a occuper l'ecran par defaut. */
.ae-page .ec-accord{
  border: 1px solid var(--ae-bd); border-radius: var(--ae-r-sm);
  padding: .55rem .8rem; margin: .7rem 0 0; background: var(--ae-card);
}
.ae-page .ec-accord[open]{ background: var(--ae-card2); border-color: var(--ae-acc-l); }
.ae-page .ec-accord > summary{
  cursor: pointer; font-weight: 700; color: var(--ae-acc-d);
  list-style: none; display: flex; align-items: baseline; gap: .5rem;
}
.ae-page .ec-accord > summary::-webkit-details-marker{ display: none; }
.ae-page .ec-accord > summary::before{ content: "+"; font-weight: 800; color: var(--ae-acc); font-size: 1.05rem; line-height: 1; }
.ae-page .ec-accord[open] > summary::before{ content: "\2212"; }
.ae-page .ec-accord-c{ margin-top: .6rem; }

/* La formule, citee telle que la publie calculateur-ecart-maximal-pmu.php. */
.ae-page .ec-formule{
  display: block; text-align: center; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.02rem; font-weight: 700; color: var(--ae-acc-d);
  background: var(--ae-acc-l2); border: 1px solid var(--ae-acc-l);
  border-radius: var(--ae-r-sm); padding: .7rem .8rem; margin: .6rem 0;
}

/* ============================================================ AU LARGE ====== */
@media (min-width: 52rem){
  .ae-page .ec-profil{ grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
  .ae-page .ec-tuiles{ gap: .75rem; }
}
@media (min-width: 68rem){
  .ae-page .ec-form{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==================================================== IMPRESSION ============
   Un turfiste imprime le tableau des ecarts pour l'emporter. Les commandes ne
   servent a rien sur papier, la couleur du verdict si. */
@media print{
  .ae-page .ec-tabs, .ae-page .ec-vif, .ae-page .ec-form,
  .ae-page .ec-actions, .ae-page .ec-choix{ display: none !important; }
  .ae-page .ec-panneau-t{ display: block !important; }
  .ae-page .ec-v{ border: 1px solid #666; }
}