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

   POURQUOI UNE FEUILLE DE PLUS. ecarts-quinte-2027.css porte le systeme 2027
   (.ae-*) partage par les pages de statistiques. Cette page-ci a un objet a
   elle : la reussite d'un numero comparee a ce que la COTE de ses chevaux
   annoncait. Les composants viennent de corde-2027.css, recopies sous le
   prefixe .sa- plutot que partages : y toucher dans une feuille commune, ce
   serait mettre en jeu une page qui marche.

   Prefixe : .sa- (suivi autostart). Tout est porte par .sa-page, pose sur le
   meme <main> que .ae-page. Aucune declaration !important.
   ========================================================================== */

/* ====================================================== LES CHIFFRES ========
   .ae-page pose des chiffres a chasse fixe sur toute la page. Avec la police
   Inter, ce reglage elargit aussi le trait d'union : « Pays-Bas » s'affichait
   « Pays - Bas ». Les chiffres a chasse fixe restent la ou ils servent, dans
   les cellules de nombres et les jauges. */
.sa-page{ font-variant-numeric: normal; }
.sa-page .ae-tab{ font-variant-numeric: normal; }
.sa-page .ae-tab td{ font-variant-numeric: tabular-nums; }

/* ====================================================== LES PAYS ============
   Le pays est le premier choix de la page : il change la regle de placement
   derriere la voiture. Des liens, pas un menu deroulant : on voit d'un coup
   d'oeil quels pays existent et combien de courses chacun pese. */
.sa-page .sa-pays{
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  margin: 0 0 .8rem;
}
.sa-page .sa-pays-t{
  font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ae-mut); margin-right: .2rem;
}
.sa-page .sa-pays-a{
  display: inline-flex; align-items: center; gap: .4rem; min-height: 2.3rem;
  padding: .3rem .75rem; border: 1px solid var(--ae-bd-fort); border-radius: var(--ae-pill);
  background: var(--ae-card); color: var(--ae-acc-d); font-weight: 700; font-size: .88rem;
  text-decoration: none;
  transition: border-color .18s var(--ae-ease), background .18s var(--ae-ease);
}
.sa-page .sa-pays-a:hover{ border-color: var(--ae-acc); background: var(--ae-acc-l2); }
.sa-page .sa-pays-n{
  font-size: .74rem; font-weight: 700; color: var(--ae-mut); font-variant-numeric: tabular-nums;
}
.sa-page .sa-pays-a[aria-current="page"]{
  background: var(--ae-acc-d); border-color: var(--ae-acc-d); color: #fff;
}
.sa-page .sa-pays-a[aria-current="page"] .sa-pays-n{ color: #e0f2f6; }

/* ====================================================== LA LECTURE ==========
   Trois etats et un seul code couleur pour toute la page. Le vert ne veut pas
   dire « bon numero » : il veut dire « mieux que sa cote, au-dela du seuil
   corrige ». La legende .sa-leg le dit sous chaque tableau. */
.sa-page .sa-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; text-align: left;
}
.sa-page .sa-l::before{ content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.sa-page .sa-l-plus { color: #065f46; background: var(--ae-ok-bg);   border-color: var(--ae-ok-bd); }
.sa-page .sa-l-egal { color: var(--ae-mut); background: var(--ae-card2); border-color: var(--ae-bd); }
.sa-page .sa-l-moins{ color: #9f1239; background: var(--ae-ko-bg);   border-color: var(--ae-ko-bd); }
.sa-page .sa-l-court{ color: #075985; background: var(--ae-info-bg); border-color: var(--ae-info-bd); }

.sa-page .sa-ligne-plus  > td, .sa-page .sa-ligne-plus  > th{ background: var(--ae-ok-bg); }
.sa-page .sa-ligne-moins > td, .sa-page .sa-ligne-moins > th{ background: var(--ae-ko-bg); }
.sa-page .sa-ligne-plus  > th{ box-shadow: inset 3px 0 0 0 #065f46; }
.sa-page .sa-ligne-moins > th{ box-shadow: inset 3px 0 0 0 #9f1239; }
/* Le fond alterne et le survol du systeme pesaient plus lourd que la teinte
   de lecture : une ligne paire perdait son vert. */
@media (min-width: 52rem){
  .sa-page .ae-tab tbody tr.sa-ligne-plus  > th, .sa-page .ae-tab tbody tr.sa-ligne-plus  > td{ background: var(--ae-ok-bg); }
  .sa-page .ae-tab tbody tr.sa-ligne-moins > th, .sa-page .ae-tab tbody tr.sa-ligne-moins > td{ background: var(--ae-ko-bg); }
}

.sa-page .sa-leg{
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .85rem;
  margin: .6rem 0 0; font-size: .85rem; color: var(--ae-mut);
}
.sa-page .sa-leg-t{ font-weight: 700; color: var(--ae-ink2); }
.sa-page .sa-leg-i{ display: flex; align-items: baseline; gap: .4rem; flex: 1 1 100%; }
.sa-page .sa-leg .sa-l{ flex: 0 0 auto; white-space: nowrap; }
.sa-page .sa-leg-trait{
  display: inline-block; flex: 0 0 auto; width: 2px; height: .95rem;
  background: var(--ae-ink); align-self: center;
}
@media (min-width: 52rem){ .sa-page .sa-leg-i{ flex: 0 1 auto; align-items: center; } }

/* ======================================================= LA JAUGE ===========
   La barre porte le chiffre que le turfiste vient chercher, de zero au taux.
   Le TRAIT vertical marque ce que la cote annoncait : une barre qui le depasse
   a fait mieux, une barre qui s'arrete avant a fait moins. La couleur ne
   s'allume que si l'ecart franchit le seuil. Toutes les barres d'une colonne
   sont a la meme echelle. */
.sa-page .sa-taux{
  position: relative;
  display: inline-flex; flex-direction: column; align-items: flex-end; gap: .1rem;
  min-width: 0; max-width: 100%;
}
.sa-page .sa-jauge{
  display: flex; align-items: center; gap: .5rem; justify-content: flex-end;
  min-width: 7.5rem; width: 100%; max-width: 12rem;
}
/* Sur grand ecran la colonne a de la place : une barre plus longue rend
   visible l'ecart entre le taux et le trait de la cote. */
@media (min-width: 62rem){
  .sa-page .sa-tab .sa-jauge{ width: 15rem; max-width: 15rem; }
  .sa-page .sa-tab .sa-taux{ max-width: none; }
}
/* flex:0 0 auto et nowrap : la cellule etroite du mode cartes coupait sinon
   « 12,5 % » entre le nombre et le signe. */
.sa-page .sa-jauge-v{
  flex: 0 0 auto; white-space: nowrap; text-align: right;
  font-weight: 800; font-variant-numeric: tabular-nums; min-width: 3rem;
}
.sa-page .sa-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);
}
.sa-page .sa-jauge-f{
  display: block; position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: calc(var(--ae-r-xs) - 1px);
  background: var(--ae-mut); opacity: .5;
}
.sa-page .sa-jauge-f.sa-f-plus { background: var(--ae-ok); opacity: 1; }
.sa-page .sa-jauge-f.sa-f-moins{ background: #9f1239; opacity: 1; }
/* Le trait de la cote depasse la barre en haut et en bas : il reste lisible
   quand la barre est pleine, et il ne se confond pas avec son bord. */
.sa-page .sa-jauge-m{
  display: block; position: absolute; top: -.24rem; bottom: -.24rem;
  width: 2px; margin-left: -1px; background: var(--ae-ink);
}
.sa-page .sa-cote{
  font-size: .76rem; color: var(--ae-mut); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.sa-page .ae-tab-cartes .sa-taux{ flex: 1 1 auto; max-width: 13rem; }
/* En mode cartes, l'etiquette de gauche garde sa ligne : c'est la pastille de
   droite qui passe a la ligne, pas « Face a la cote ». */
.sa-page .ae-tab-cartes td::before{ flex: 0 0 auto; white-space: nowrap; }

/* Le rang de la ligne, quand un hippodrome francais est choisi. */
.sa-page .sa-tag{
  display: inline-block; margin-left: .4rem; padding: .05rem .4rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  color: var(--ae-acc-d); background: var(--ae-acc-l); border-radius: var(--ae-pill);
  vertical-align: .1em;
}
.sa-page .sa-pfx{ font-weight: 700; }
@media (min-width: 52rem){ .sa-page .sa-pfx{ display: none; } }

/* --------------------------------------------- LES DEUX TAUX D'UNE CELLULE -- */
.sa-page .sa-duo{ display: flex; flex-direction: column; gap: .1rem; }
.sa-page .sa-duo-x{ font-size: .9rem; color: var(--ae-mut); white-space: nowrap; }
.sa-page .sa-duo-x b{
  font-weight: 800; color: var(--ae-ink); font-variant-numeric: tabular-nums; margin-right: .25rem;
}
/* Une cellule peut porter plusieurs lectures : elles s'empilent au lieu de se
   serrer, sinon une pastille longue deborde le telephone. */
.sa-page .sa-duo-l{ display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }
.sa-page .sa-duo-l .sa-l{ white-space: normal; text-align: left; }
@media (min-width: 52rem){ .sa-page .sa-duo-l{ align-items: flex-start; } }

/* ======================================================= LES DEUX LIGNES ====
   Deux rangees, chacune avec ses deux lectures, gagnant et place. */
.sa-page .sa-rangs{ display: grid; grid-template-columns: 1fr; gap: .45rem; margin: .9rem 0 0; }
.sa-page .sa-rang{
  display: grid; grid-template-columns: 1fr; gap: .55rem .9rem;
  background: var(--ae-card2); border: 1px solid var(--ae-bd);
  border-radius: var(--ae-r-sm); padding: .7rem .85rem;
}
.sa-page .sa-rang-plus { background: var(--ae-ok-bg); border-color: var(--ae-ok-bd); }
.sa-page .sa-rang-moins{ background: var(--ae-ko-bg); border-color: var(--ae-ko-bd); }
.sa-page .sa-rang-t{ font-weight: 800; color: var(--ae-ink); font-size: .97rem; }
.sa-page .sa-rang-s{ display: block; font-size: .82rem; color: var(--ae-mut); font-weight: 500; margin-top: .1rem; }
.sa-page .sa-rang-m{ display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; min-width: 0; }
.sa-page .sa-rang-q{
  font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ae-mut); min-width: 4.2rem;
}
.sa-page .sa-rang-m .sa-taux{ flex: 1 1 10rem; align-items: stretch; }
.sa-page .sa-rang-m .sa-jauge{ max-width: none; justify-content: flex-start; }
.sa-page .sa-rang-m .sa-jauge-v{ text-align: left; }
.sa-page .sa-rang-m .sa-cote{ align-self: flex-start; }
.sa-page .sa-rang-m .sa-l{ flex: 0 0 auto; }
@media (min-width: 58rem){
  .sa-page .sa-rang{ grid-template-columns: minmax(0, .8fr) minmax(0, 1.1fr) minmax(0, 1.1fr); align-items: center; }
}

/* ======================================================= LES VIGNETTES ====== */
.sa-page .sa-tuiles{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: .6rem; margin: 0;
}
.sa-page .sa-tuile{
  background: var(--ae-card2); border: 1px solid var(--ae-bd);
  border-radius: var(--ae-r-sm); padding: .7rem .8rem; min-width: 0;
}
.sa-page .sa-tuile-l{
  display: block; font-size: .72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ae-mut); margin-bottom: .2rem;
}
.sa-page .sa-tuile-v{
  display: block; font-size: 1.4rem; font-weight: 800; color: var(--ae-ink);
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.sa-page .sa-tuile-s{ display: block; font-size: .8rem; color: var(--ae-mut); margin-top: .15rem; line-height: 1.45; }
.sa-page .sa-tuile-sur{ font-size: .86rem; font-weight: 700; color: var(--ae-mut); white-space: nowrap; }
.sa-page .sa-tuile-acc{ background: var(--ae-acc-l2); border-color: var(--ae-acc-l); }
.sa-page .sa-tuile-acc .sa-tuile-v{ color: var(--ae-acc-d); }

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

/* Le rappel qui accompagne toute lecture de numero. */
.sa-page .sa-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: 1rem 0 0; color: #713f12; font-size: .93rem; line-height: 1.6;
}

/* ======================================================= LES FILTRES ========
   Un vrai formulaire GET : chaque combinaison a son adresse. */
/* En flex et non en grille : les listes s'etirent, la case et le bouton
   gardent leur largeur. En grille a colonnes egales, « Tous les hippodromes »
   etait coupe par la fleche de la liste. */
.sa-page .sa-filtres{
  display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-end;
  padding: .9rem .95rem; margin: 0 0 .9rem;
  background: var(--ae-soft); border: 1px solid var(--ae-bd); border-radius: var(--ae-r-sm);
}
.sa-page .sa-filtres > div{ flex: 1 1 13.5rem; min-width: 0; }
.sa-page .sa-filtres > .sa-f-fixe{ flex: 0 0 auto; }
.sa-page .sa-filtres label{
  display: block; font-size: .75rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ae-mut); margin-bottom: .25rem;
}
/* La case a cocher est un <label> : sans cette regle elle heritait des
   capitales des etiquettes de filtre. */
.sa-page .sa-filtres label.sa-coche{
  text-transform: none; letter-spacing: 0; font-size: inherit;
  font-weight: inherit; color: inherit; margin-bottom: 0;
}
.sa-page .sa-coche{ display: flex; align-items: center; gap: .4rem; min-height: 2.6rem; }
.sa-page .sa-coche input{ margin: 0; width: 1.05rem; height: 1.05rem; accent-color: var(--ae-acc-d); }
.sa-page .sa-coche span{ font-weight: 700; color: var(--ae-ink2); font-size: .92rem; }
.sa-page .sa-actions{ display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.sa-page .sa-actions .ae-raz{ margin-left: 0; }
.sa-page .sa-etat{
  display: flex; flex-wrap: wrap; gap: .3rem .7rem; align-items: baseline;
  font-size: .88rem; color: var(--ae-mut); margin: 0 0 .8rem;
}
.sa-page .sa-etat strong{ color: var(--ae-ink); font-weight: 800; }
.sa-page .sa-note-ligne{ margin: 0 0 .6rem; }
.sa-page .sa-note-ligne strong{ color: var(--ae-ink); }

.sa-page .sa-outils{ margin-top: 1rem; padding-bottom: 0; }
.sa-page .sa-export-ferme .ae-btn{ color: var(--ae-mut); }
.sa-page .sa-export-ferme .ae-btn .fas{ font-size: .78em; }
.sa-page .sa-avis{ margin: 0 0 1.25rem; }
.sa-page .sa-avis a{ font-weight: 700; color: #78350f; }

/* Les hippodromes moins fournis. */
.sa-page .sa-pistes{ display: grid; grid-template-columns: 1fr; gap: .6rem; }
@media (min-width: 40rem){ .sa-page .sa-pistes{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem){ .sa-page .sa-pistes{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sa-page .sa-piste{
  background: var(--ae-card); border: 1px solid var(--ae-bd);
  border-radius: var(--ae-r-sm); padding: .65rem .8rem;
}
.sa-page .sa-piste-t{ font-weight: 800; color: var(--ae-acc-d); display: block; }
.sa-page .sa-piste-t a{ color: inherit; text-decoration: none; }
.sa-page .sa-piste-t a:hover{ text-decoration: underline; }
.sa-page .sa-piste-n{ font-size: .8rem; color: var(--ae-mut); display: block; margin-top: .2rem; }

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

/* La ligne du choix en cours, dans les tableaux transverses. Le lien porte
   aussi aria-current : la couleur seule ne suffit pas. */
.sa-page .ae-tab tr.sa-actif > th, .sa-page .ae-tab tr.sa-actif > td{ background: var(--ae-acc-l2); }
.sa-page .ae-tab tr.sa-actif > th{ box-shadow: inset 3px 0 0 var(--ae-acc); }

/* ================================================ PUBLICITE ET JEU ========== */
.sa-page .sa-pub{ text-align: center; margin: 0 0 1.25rem; overflow: hidden; }
.sa-page .sa-pub p{
  font-size: .75rem; color: var(--ae-mut); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 .4rem;
}
.sa-page .sa-pub:has(ins[data-ad-status="unfilled"]){ display: none; }
.sa-page .sa-jeu{
  border: 1px solid var(--ae-bd); border-left: 4px solid var(--ae-acc);
  background: var(--ae-acc-l2); border-radius: var(--ae-r-sm);
  padding: .85rem 1rem; font-size: .9rem; color: var(--ae-ink2);
}
.sa-page .sa-jeu p{ margin: 0 0 .4rem; }
.sa-page .sa-jeu p:last-child{ margin-bottom: 0; }
.sa-page .sa-jeu strong{ color: var(--ae-ink); }

/* ================================================ L'ENCART DU LIVRE ========
   global.css ne porte que les regles qui en chassent la publicite : la mise
   en forme est ici, sous .sa-page, comme sur le calculateur d'ecart maximal. */
.sa-page .ebook-cta{
  display: flex; gap: 28px; align-items: center; margin: 0 0 1.25rem; padding: 30px;
  border-radius: var(--ae-r-lg);
  background: radial-gradient(120% 140% at 80% 10%, #0c4a5d 0%, #073542 52%, #04222b 100%);
  color: #eaf3f5; box-shadow: 0 18px 44px rgba(4,34,43,.28);
}
.sa-page .ebook-cta-cover{
  width: 130px; height: 190px; flex: 0 0 130px; object-fit: cover; border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0,0,0,.45); display: block;
}
.sa-page .ebook-cta-body{ flex: 1; min-width: 0; text-align: left; }
.sa-page .ebook-cta-eyebrow{
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: #e7c977;
  font-weight: 800; margin: 0 0 8px;
}
.sa-page .ebook-cta h2{ color: #fff; font-size: 1.45rem; line-height: 1.2; margin: 0 0 10px; }
.sa-page .ebook-cta h2 .g{ color: #e7c977; }
.sa-page .ebook-cta p{ color: #cfe0e6; line-height: 1.6; margin: 0 0 14px; font-size: .98rem; }
.sa-page .ebook-cta-value{ color: #fff; font-weight: 700; }
.sa-page .ebook-cta-urgency{
  font-size: .78rem; letter-spacing: .04em; color: #e7c977; font-weight: 700;
  text-transform: uppercase; margin: 0 0 16px;
}
.sa-page .ebook-cta-actions{ display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.sa-page .ebook-cta-btn{
  display: inline-block; background: linear-gradient(180deg,#e7c977,#caa04a); color: #2a2103;
  font-weight: 800; padding: 14px 26px; border-radius: 8px; text-decoration: none;
  box-shadow: 0 6px 18px rgba(202,160,74,.3);
  transition: transform .15s ease, box-shadow .15s ease;
}
.sa-page .ebook-cta-btn:hover{ color: #2a2103; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(202,160,74,.42); text-decoration: none; }
.sa-page .ebook-cta-link{ color: #eaf3f5; font-weight: 600; text-decoration: underline; font-size: .92rem; }
.sa-page .ebook-cta-link:hover{ color: #fff; }
@media (max-width: 680px){
  .sa-page .ebook-cta{ flex-direction: column; text-align: center; padding: 24px 18px; }
  .sa-page .ebook-cta-cover{ flex-basis: auto; max-width: 100%; height: auto; }
  .sa-page .ebook-cta-body{ text-align: center; }
  .sa-page .ebook-cta-actions{ justify-content: center; }
}

@media (prefers-reduced-motion: reduce){
  .sa-page .ebook-cta-btn:hover{ transform: none; }
}

@media print{
  .sa-page .sa-filtres, .sa-page .sa-actions, .sa-page .sa-pays, .sa-page .sa-pub, .sa-page .ebook-cta{ display: none; }
  .sa-page .sa-l{ border: 1px solid #666; }
}