/* =============================================================================
   assets/css/corde-2027.css - turf.bzh
   Complement de assets/css/ecarts-quinte-2027.css pour suivi-corde-pmu.php.

   POURQUOI UNE FEUILLE DE PLUS. ecarts-quinte-2027.css porte le systeme 2027
   (.ae-*) et les regles de la page jockeys ; ecarts-numeros-2027.css celles des
   ecarts du Quinte+ ; ecarts-courses-2027.css celles des ecarts par code course.
   Cette page-ci a un objet a elle : l'ecart d'une position a sa PART ATTENDUE,
   qui se lit autour de 1 et non de zero. Y toucher dans une feuille partagee,
   ce serait mettre en jeu trois pages qui marchent.

   Prefixe : .sc- (suivi corde). Tout est porte par .ae-page.
   ========================================================================== */

/* ================================================== HIDDEN QUI TIENT ========
   Un composant a display explicite l'emporte sur [hidden]{display:none}, qui
   n'a aucune specificite. La regle est posee une fois, dans .ae-page. */
.ae-page [hidden]{ display: none !important; }

/* ====================================================== LA LECTURE ==========
   Trois etats, et un seul code couleur pour toute la page. Le vert ne veut pas
   dire « bon numero » : il veut dire « au-dessus de la part attendue, au-dela
   du seuil corrige ». La legende .sc-leg le dit sous chaque tableau. */

.ae-page .sc-l{
  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: normal; text-wrap: balance;
}
.ae-page .sc-l::before{ content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.ae-page .sc-l-plus { color: #065f46; background: var(--ae-ok-bg);   border-color: var(--ae-ok-bd); }
.ae-page .sc-l-egal { color: var(--ae-mut); background: var(--ae-card2); border-color: var(--ae-bd); }
.ae-page .sc-l-moins{ color: #9f1239; background: var(--ae-ko-bg);   border-color: var(--ae-ko-bd); }
.ae-page .sc-l-court{ color: #075985; background: var(--ae-info-bg); border-color: var(--ae-info-bd); }

.ae-page .sc-ligne-plus  > td, .ae-page .sc-ligne-plus  > th{ background: var(--ae-ok-bg); }
.ae-page .sc-ligne-moins > td, .ae-page .sc-ligne-moins > th{ background: var(--ae-ko-bg); }
.ae-page .sc-ligne-plus  > th{ box-shadow: inset 3px 0 0 0 #065f46; }
.ae-page .sc-ligne-moins > th{ box-shadow: inset 3px 0 0 0 #9f1239; }

.ae-page .sc-leg{
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .85rem;
  margin: .6rem 0 0; font-size: .85rem; color: var(--ae-mut);
}
.ae-page .sc-leg-t{ font-weight: 700; color: var(--ae-ink2); }
.ae-page .sc-leg-i{ display: flex; align-items: baseline; gap: .4rem; flex: 1 1 100%; }
/* Dans la legende la pastille est un exemple, pas une cellule : la laisser
   retrecir la coupait en quatre lignes sur un telephone. */
.ae-page .sc-leg .sc-l{ flex: 0 0 auto; white-space: nowrap; }
@media (min-width: 52rem){ .ae-page .sc-leg-i{ flex: 0 1 auto; align-items: center; } }

/* ======================================================= LA JAUGE ===========
   Elle porte le chiffre que le turfiste vient chercher : combien de fois sur
   cent cette corde gagne, combien de fois elle se place. Elle part donc de zero
   et monte jusqu'au taux, toutes les barres d'une meme colonne a la meme
   echelle, celle du plus haut taux du tableau.

   Sa COULEUR porte l'autre information, celle qui demande un calcul : verte
   quand la corde reussit plus souvent que ce qu'on attendrait d'elle compte tenu
   des pelotons ou elle a reellement couru, rouge quand elle reussit moins,
   neutre quand elle est dans la normale. Le chiffre se lit d'un coup d'oeil, la
   nuance vient ensuite, et rien n'oblige a comprendre la seconde pour lire la
   premiere.

   .sc-jauge-f est un span : sans display:block la largeur ne s'appliquerait pas
   et la barre resterait vide. Le defaut a ete releve en production sur une autre
   page de ce meme chantier. Il porte aussi left:0 : la largeur seule ne suffit
   pas a placer un element absolu. */

.ae-page .sc-jauge{
  display: flex; align-items: center; gap: .5rem;
  min-width: 7rem; max-width: 12rem; margin-left: auto; justify-content: flex-end;
}
/* flex:0 0 auto et nowrap : sans eux, la cellule etroite du mode cartes coupait
   « 26,7 % » entre le nombre et le signe, sur deux lignes. */
.ae-page .sc-jauge-v{
  flex: 0 0 auto; white-space: nowrap; text-align: right;
  font-weight: 800; font-variant-numeric: tabular-nums; min-width: 2.9rem;
}
.ae-page .sc-jauge-p{
  display: block; position: relative; flex: 1 1 6rem; min-width: 4.5rem;
  height: .62rem; background: var(--ae-card);
  border: 1px solid var(--ae-bd); border-radius: var(--ae-r-xs); overflow: hidden;
}
.ae-page .sc-jauge-f{
  display: block; position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--ae-mut); opacity: .55;
}
.ae-page .sc-jauge-f.sc-f-plus { background: var(--ae-ok); opacity: 1; }
.ae-page .sc-jauge-f.sc-f-moins{ background: #9f1239; opacity: 1; }
.ae-page .ae-tab-cartes .sc-jauge{ flex: 1 1 auto; }

/* --------------------------------------------- LES DEUX TAUX D'UNE CELLULE --
   « Pres du rail » et « loin du rail » portent chacun deux chiffres, gagnant et
   place. Les empiler dans une seule cellule vaut mieux que quatre colonnes de
   plus : le tableau des hippodromes en compte cinquante-trois lignes. */
.ae-page .sc-duo{ display: flex; flex-direction: column; gap: .1rem; }
.ae-page .sc-duo-x{ font-size: .9rem; color: var(--ae-mut); white-space: nowrap; }
.ae-page .sc-duo-x b{
  font-weight: 800; color: var(--ae-ink); font-variant-numeric: tabular-nums;
  margin-right: .25rem;
}
/* Une ligne peut porter deux lectures, une par bande : elles s'empilent au lieu
   de se serrer, sinon un badge de 174 px deborde le telephone. */
.ae-page .sc-duo-l{ display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; }
.ae-page .sc-duo-l .sc-l{ white-space: normal; }

/* ======================================================= LE PELOTON =========
   La vue par cinquiemes. Cinq rangees, de l'interieur vers l'exterieur, chacune
   avec sa jauge. C'est la seule vue qui ne melange pas les tailles de champ. */

.ae-page .sc-peloton{ display: grid; grid-template-columns: 1fr; gap: .45rem; margin: .3rem 0 0; }
.ae-page .sc-rang{
  display: grid; grid-template-columns: 1fr; gap: .45rem .9rem;
  background: var(--ae-card2); border: 1px solid var(--ae-bd);
  border-radius: var(--ae-r-sm); padding: .65rem .85rem;
}
.ae-page .sc-rang-plus { background: var(--ae-ok-bg); border-color: var(--ae-ok-bd); }
.ae-page .sc-rang-moins{ background: var(--ae-ko-bg); border-color: var(--ae-ko-bd); }
.ae-page .sc-rang-t{ font-weight: 800; color: var(--ae-ink); font-size: .97rem; }
.ae-page .sc-rang-s{ display: block; font-size: .82rem; color: var(--ae-mut); font-weight: 500; margin-top: .1rem; }
/* Les deux lectures d'une meme bande, gagnant et place, chacune avec sa jauge
   et sa pastille : teinter la rangee sur l'une en n'affichant que l'autre
   donnait un fond rouge a cote d'une pastille « a sa part ». */
.ae-page .sc-rang-m{ display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .55rem; min-width: 0; }
.ae-page .sc-rang-q{
  font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ae-mut); min-width: 4.2rem;
}
.ae-page .sc-rang-m .sc-jauge{ max-width: none; margin-left: 0; flex: 1 1 auto; }
.ae-page .sc-rang-m .sc-jauge-p{ min-width: 5rem; height: .7rem; }
.ae-page .sc-rang-m .sc-l{ flex: 0 0 auto; }
@media (min-width: 58rem){
  .ae-page .sc-rang{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.1fr); align-items: center; }
  .ae-page .sc-rang-id{ align-self: center; }
}

/* ======================================================= LES VIGNETTES ====== */
.ae-page .sc-tuiles{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: .6rem; margin: 0 0 .2rem;
}
.ae-page .sc-tuile{
  background: var(--ae-card2); border: 1px solid var(--ae-bd);
  border-radius: var(--ae-r-sm); padding: .7rem .8rem;
}
.ae-page .sc-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 .sc-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 .sc-tuile-v-txt{ font-size: 1.12rem; letter-spacing: -.01em; }
.ae-page .sc-tuile-s{ display: block; font-size: .8rem; color: var(--ae-mut); margin-top: .12rem; }
.ae-page .sc-tuile-sur{ font-size: .82rem; font-weight: 700; color: var(--ae-mut); white-space: nowrap; }
.ae-page .sc-tuile-acc{ background: var(--ae-acc-l2); border-color: var(--ae-acc-l); }
.ae-page .sc-tuile-acc .sc-tuile-v{ color: var(--ae-acc-d); }

/* ======================================================= LE FAIT MESURE ===== */
.ae-page .sc-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 .sc-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 .sc-fait p{ margin: 0 0 .45rem; color: var(--ae-ink2); font-size: .97rem; line-height: 1.6; }
.ae-page .sc-fait p:last-child{ margin-bottom: 0; }
.ae-page .sc-fait strong{ color: var(--ae-ink); font-weight: 800; }
.ae-page .sc-fait-rien{ background: var(--ae-card2); border-color: var(--ae-bd); border-left-color: var(--ae-bd-fort); }
.ae-page .sc-fait-rien .sc-fait-t{ color: var(--ae-mut); }
.ae-page .sc-fait.ae-mt{ margin-top: 1.3rem; }

/* Le rappel qui accompagne toute lecture de biais. */
.ae-page .sc-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 .sc-garde strong{ color: #7c2d12; font-weight: 800; }

/* ======================================================= LES FILTRES ========
   Un vrai formulaire GET : chaque combinaison a son adresse, se partage et
   revient par le bouton Precedent. L'ancienne page perdait tout au rechargement. */
.ae-page .sc-filtres{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: .75rem; align-items: end;
  padding: .9rem .95rem; margin: 0 0 .9rem;
  background: var(--ae-soft); border: 1px solid var(--ae-bd); border-radius: var(--ae-r-sm);
}
.ae-page .sc-filtres > div{ min-width: 0; }
.ae-page .sc-filtres label{
  display: block; font-size: .75rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ae-mut); margin-bottom: .25rem;
}
.ae-page .sc-filtres label small{ font-weight: 600; text-transform: none; letter-spacing: 0; }
/* La case a cocher est un <label>, donc elle heritait du texte en capitales des
   etiquettes de filtre : « QUINTE+ SEULEMENT » criait au milieu du formulaire. */
.ae-page .sc-filtres label.sc-coche{
  text-transform: none; letter-spacing: 0; font-size: inherit;
  font-weight: inherit; color: inherit; margin-bottom: 0;
}
.ae-page .sc-coche{ display: flex; align-items: center; gap: .4rem; min-height: 2.6rem; }
.ae-page .sc-coche input{ margin: 0; width: 1.05rem; height: 1.05rem; accent-color: var(--ae-acc-d); }
.ae-page .sc-coche span{ font-weight: 700; color: var(--ae-ink2); font-size: .92rem; }
.ae-page .sc-actions{ display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.ae-page .sc-etat{
  display: flex; flex-wrap: wrap; gap: .3rem .7rem; align-items: baseline;
  font-size: .88rem; color: var(--ae-mut); margin: 0 0 .8rem;
}
.ae-page .sc-etat strong{ color: var(--ae-ink); font-weight: 800; }

/* Le tableau des hippodromes mesures. */
.ae-page .sc-pistes{ display: grid; grid-template-columns: 1fr; gap: .6rem; }
@media (min-width: 52rem){ .ae-page .sc-pistes{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ae-page .sc-piste{
  background: var(--ae-card); border: 1px solid var(--ae-bd);
  border-radius: var(--ae-r-sm); padding: .75rem .85rem;
}
.ae-page .sc-piste-plus { border-color: var(--ae-ok-bd);  background: var(--ae-ok-bg); }
.ae-page .sc-piste-moins{ border-color: var(--ae-ko-bd);  background: var(--ae-ko-bg); }
.ae-page .sc-piste-t{ font-weight: 800; color: var(--ae-acc-d); display: block; }
.ae-page .sc-piste-t a{ color: inherit; text-decoration: none; }
.ae-page .sc-piste-t a:hover{ text-decoration: underline; }
.ae-page .sc-piste-d{ font-size: .88rem; color: var(--ae-ink2); display: block; margin-top: .2rem; line-height: 1.55; }
.ae-page .sc-piste-n{ font-size: .8rem; color: var(--ae-mut); display: block; margin-top: .25rem; }

/* L'accordeon et le prefixe de carte. */
.ae-page .sc-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 .sc-accord[open]{ background: var(--ae-card2); border-color: var(--ae-acc-l); }
.ae-page .sc-accord > summary{
  cursor: pointer; font-weight: 700; color: var(--ae-acc-d);
  list-style: none; display: flex; align-items: baseline; gap: .5rem;
}
.ae-page .sc-accord > summary::-webkit-details-marker{ display: none; }
.ae-page .sc-accord > summary::before{ content: "+"; font-weight: 800; color: var(--ae-acc); font-size: 1.05rem; line-height: 1; }
.ae-page .sc-accord[open] > summary::before{ content: "\2212"; }
.ae-page .sc-accord-c{ margin-top: .6rem; }
/* Prefixe visible seulement en mode cartes, sous 52 rem. */
.ae-page .sc-pfx{ font-weight: 700; }
@media (min-width: 52rem){ .ae-page .sc-pfx{ display: none; } }

@media print{
  .ae-page .sc-filtres, .ae-page .sc-actions{ display: none !important; }
  .ae-page .sc-l{ border: 1px solid #666; }
}

/* La ligne du choix en cours, dans le tableau des hippodromes ou des distances.
   Le lien porte aussi aria-current : la couleur seule ne suffit pas. */
.ae-page .ae-tab tr.sc-actif{ background: var(--ae-acc-l2); }
.ae-page .ae-tab tr.sc-actif > th{ box-shadow: inset 3px 0 0 var(--ae-acc); }