/* =============================================================================
   assets/css/ecarts-quinte-2027.css - turf.bzh
   -----------------------------------------------------------------------------
   Page « Ecarts des jockeys et entraineurs au Quinte+ ». Meme systeme et meme
   vocabulaire de classes que avis-entraineurs-2027.css : les jetons --tbz-ag-*
   du theme, recopies en --ae-* avec une valeur de secours en dur, pour que la
   page tienne debout meme si le theme ne publie rien.

   POURQUOI UN FICHIER SEPARE. Le socle est identique a celui de la page des
   avis, volontairement : les deux pages doivent se lire comme un seul systeme.
   Il est recopie plutot que partage parce qu'un fichier commun se serait
   appele « avis-entraineurs » et aurait embarque le rendu de l'email et la
   page de reglages, qui n'ont rien a faire ici. Quand une troisieme page
   rejoindra la charte, le socle meritera son propre fichier.

   PORTEE. Tout est scope sous .ae-page. L'ancienne version de cette page
   ecrivait ses regles dans un <style> en ligne, sans prefixe, sur des
   selecteurs aussi generiques que body, h1 et .intro, en plus de charger
   DataTables : Bootstrap est charge globalement, la collision etait garantie.

   REGLE DE LARGEUR. Un bloc de texte ne porte jamais de largeur maximale a
   l'interieur d'un cadre, et une grille ne passe a deux colonnes que si elle a
   deux enfants : une colonne vide a cote d'un paragraphe se lit comme un texte
   coupe.

   @author Claude (Cowork mode, 2026-08-31)
   @version 1.0.0
   ========================================================================== */

.ae-page{
  --ae-bg:      var(--tbz-ag-bg, #f8fafc);
  --ae-soft:    var(--tbz-ag-bg-soft, #f1f5f9);
  --ae-card:    var(--tbz-ag-card, #ffffff);
  --ae-card2:   var(--tbz-ag-card-2, #fbfcfd);
  --ae-bd:      var(--tbz-ag-border, #e5e7eb);
  --ae-bd-soft: var(--tbz-ag-border-soft, #eef0f3);
  --ae-bd-fort: var(--tbz-ag-border-strong, #d1d5db);
  --ae-ink:     var(--tbz-ag-text, #0f172a);
  --ae-ink2:    var(--tbz-ag-text-2, #1e293b);
  --ae-mut:     #475569;
  --ae-acc:     var(--tbz-ag-accent, #0a7c91);
  --ae-acc-d:   var(--tbz-ag-accent-d, #075d6e);
  --ae-acc-l:   var(--tbz-ag-accent-l, #e0f2f6);
  --ae-acc-l2:  var(--tbz-ag-accent-l2, #ecf7fa);
  /* Degrade mesure : le degrade du theme finit sur #06b6d4, ou le blanc ne
     fait que 2,43:1. Celui-ci reste dans la palette 2027 et donne 4,88 au pire
     point. */
  --ae-grad:    linear-gradient(135deg,#075d6e 0%,#0a7c91 55%,#0e7490 100%);
  --ae-ok:      #047857;
  --ae-ok-bg:   var(--tbz-ag-success-bg, #ecfdf5);
  --ae-ok-bd:   var(--tbz-ag-success-bd, #a7f3d0);
  --ae-warn:    #92620a;
  --ae-warn-bg: var(--tbz-ag-warn-bg, #fffbeb);
  --ae-warn-bd: var(--tbz-ag-warn-bd, #fde68a);
  --ae-ko:      #b91c1c;
  --ae-ko-bg:   #fef2f2;
  --ae-ko-bd:   #fecaca;
  --ae-info:    var(--tbz-ag-info, #1d4ed8);
  --ae-info-bg: var(--tbz-ag-info-bg, #eff6ff);
  --ae-info-bd: var(--tbz-ag-info-bd, #bfdbfe);
  --ae-r-xs:    var(--tbz-ag-r-xs, 6px);
  --ae-r-sm:    var(--tbz-ag-r-sm, 10px);
  --ae-r-md:    var(--tbz-ag-r-md, 14px);
  --ae-r-lg:    var(--tbz-ag-r-lg, 18px);
  --ae-pill:    var(--tbz-ag-r-pill, 999px);
  --ae-sh-sm:   var(--tbz-ag-sh-sm, 0 1px 3px 0 rgba(15,23,42,.06), 0 1px 2px -1px rgba(15,23,42,.04));
  --ae-sh-md:   var(--tbz-ag-sh-md, 0 4px 6px -1px rgba(15,23,42,.07), 0 2px 4px -2px rgba(15,23,42,.05));
  --ae-sh-lg:   var(--tbz-ag-sh-lg, 0 10px 15px -3px rgba(15,23,42,.08), 0 4px 6px -4px rgba(15,23,42,.05));
  --ae-glow:    var(--tbz-ag-sh-glow, 0 0 0 4px rgba(10,124,145,.12));
  --ae-ease:    var(--tbz-ag-ease-out, cubic-bezier(.16,1,.3,1));
  --ae-font:    var(--tbz-ag-font, 'Inter','Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif);

  max-width: 1180px;
  margin: 0 auto;
  padding: 1rem .875rem 3.5rem;
  font-family: var(--ae-font);
  color: var(--ae-ink);
  line-height: 1.62;
  letter-spacing: -.005em;
  font-variant-numeric: tabular-nums;
}
.ae-page *, .ae-page *::before, .ae-page *::after{ box-sizing: border-box; }

.ae-page h1, .ae-page h2, .ae-page h3, .ae-page h4{
  font-family: inherit; color: inherit; text-transform: none;
  letter-spacing: -.018em; margin: 0;
}
.ae-page p{ margin: 0 0 .7rem; }
.ae-page p:last-child{ margin-bottom: 0; }
.ae-page a{ color: var(--ae-acc-d); }
.ae-page :focus-visible{ outline: 2px solid var(--ae-acc); outline-offset: 2px; }

/* ---------------------------------------------------------------- en-tete -- */
.ae-page .ae-hero{
  background: var(--ae-grad);
  color: #fff;
  border-radius: var(--ae-r-lg);
  padding: 1.6rem 1.4rem 1.4rem;
  box-shadow: var(--ae-sh-lg);
  margin-bottom: 1.25rem;
}
.ae-page .ae-hero-oeil{
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .13em;
  color: #fff; background: rgba(3,38,48,.30);
  border-radius: var(--ae-pill); padding: .22rem .7rem; margin-bottom: .7rem;
}
.ae-page .ae-hero h1{
  font-size: clamp(1.35rem, 4.4vw, 2rem); font-weight: 800; line-height: 1.16; margin-bottom: .55rem;
}
.ae-page .ae-hero-sous{
  display: grid; grid-template-columns: 1fr; gap: .1rem 2.4rem;
  color: #fff; font-size: 1rem; line-height: 1.6;
}
.ae-page .ae-hero-sous strong{ color: #fff; font-weight: 700; }
.ae-page .ae-hero-chiffres{ display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.ae-page .ae-hero-chip{
  background: rgba(3,38,48,.28); border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--ae-pill); padding: .28rem .8rem;
  font-size: .84rem; font-weight: 700; color: #fff;
}

/* --------------------------------------------------------------- sommaire -- */
.ae-page .ae-somm{ display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.25rem; }
.ae-page .ae-somm a{
  font-size: .84rem; font-weight: 700; color: var(--ae-acc-d);
  background: var(--ae-card); border: 1px solid var(--ae-bd);
  border-radius: var(--ae-pill); padding: .3rem .8rem; text-decoration: none;
  transition: border-color .18s var(--ae-ease), background .18s var(--ae-ease);
}
.ae-page .ae-somm a:hover{ border-color: var(--ae-acc); background: var(--ae-acc-l2); }

/* ------------------------------------------------------------------ blocs -- */
.ae-page .ae-bloc{
  background: var(--ae-card); border: 1px solid var(--ae-bd);
  border-radius: var(--ae-r-md); box-shadow: var(--ae-sh-sm);
  padding: 1.15rem 1.05rem; margin-bottom: 1.25rem;
}
.ae-page .ae-bloc-t{ font-size: 1.12rem; font-weight: 800; color: var(--ae-acc-d); margin-bottom: .2rem; }
.ae-page .ae-bloc-st{ font-size: .9rem; color: var(--ae-mut); margin-bottom: .9rem; }
.ae-page .ae-note{ color: var(--ae-mut); font-size: .88rem; }
/* Hors ecran, mais dans le flux d'accessibilite : la mention « indicatif »
   doit atteindre un lecteur d'ecran, qui ne voit ni le gris ni le pointille. */
.ae-page .ae-vh{
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Un element en position absolue se cale sur le premier ancetre POSITIONNE.
   Sans ces deux lignes, les .ae-vh loges dans la colonne « Ecart » prenaient
   pour reference le document : bien qu'invisibles et larges d'un pixel, ils
   etaient places a mille pixels du bord et faisaient defiler la page entiere
   sur 247 px entre 832 et 1 180 px de large. Le cadre du tableau, lui, ne
   defile que dans son propre cadre, ce qui est le comportement voulu. */
.ae-page .ae-peu, .ae-page .ae-tab-bloc{ position: relative; }
/* Un taux calcule sur trop peu de courses. Il n'est pas cache, il est degrade :
   gris au lieu de noir gras, souligne en pointilles, et double d'un texte hors
   ecran. Trois porteurs, dont aucun n'est la couleur seule. */
.ae-page .ae-peu{
  color: var(--ae-mut); font-weight: 600;
  /* 1,47:1 contre le blanc pour --ae-bd-fort : sous le seuil de 3:1 des
     elements non textuels. Le pointille reprend donc la couleur du texte. */
  border-bottom: 1px dotted var(--ae-mut); cursor: help;
}
.ae-page .ae-mt{ margin-top: 1.1rem; }

/* Grille de blocs de texte : chaque bloc est une idee complete. */
.ae-page .ae-txtg{ display: grid; grid-template-columns: 1fr; gap: 1.15rem 2.4rem; align-items: start; }
.ae-page .ae-txtg > *{ min-width: 0; }
.ae-page .ae-txtg h3{
  font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ae-acc-d); margin: 0 0 .3rem;
}
.ae-page .ae-txtg p{ color: var(--ae-ink2); font-size: 1rem; margin: 0 0 .5rem; }
.ae-page .ae-txtg p:last-child{ margin-bottom: 0; }
.ae-page .ae-txtg strong{ color: var(--ae-ink); font-weight: 700; }
.ae-page .ae-txtg-intro p{ font-size: 1.03rem; color: var(--ae-ink); }

/* ------------------------------------------------------------- messages --- */
.ae-page .ae-avis-bloc{
  border-radius: var(--ae-r-sm); padding: .8rem .95rem; font-size: .94rem;
  background: var(--ae-warn-bg); border: 1px solid var(--ae-warn-bd);
  border-left: 4px solid var(--ae-warn); color: #78350f;
}
.ae-page .ae-info-bloc{
  border-radius: var(--ae-r-sm); padding: .8rem .95rem; font-size: .94rem;
  background: var(--ae-info-bg); border: 1px solid var(--ae-info-bd);
  border-left: 4px solid var(--ae-info); color: #1e3a8a;
}

/* ================================================= LA COURSE DU JOUR ======= */
.ae-page .ae-course{
  display: grid; grid-template-columns: 1fr; gap: .55rem; margin-bottom: 1rem;
}
.ae-page .ae-course-item{
  background: var(--ae-card2); border: 1px solid var(--ae-bd-soft);
  border-radius: var(--ae-r-sm); padding: .55rem .7rem;
}
.ae-page .ae-course-lib{
  display: block; font-size: .72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ae-mut); margin-bottom: .1rem;
}
.ae-page .ae-course-val{ display: block; font-weight: 700; color: var(--ae-ink2); }

/* Compteur des avis du jour : trois pastilles de synthese. */
.ae-page .ae-repart{ display: flex; flex-wrap: wrap; gap: .5rem; margin: .9rem 0 0; }
.ae-page .ae-repart-item{
  display: inline-flex; align-items: center; gap: .45rem;
  border-radius: var(--ae-pill); padding: .3rem .8rem .3rem .45rem;
  font-size: .88rem; font-weight: 700; border: 1px solid var(--ae-bd);
  background: var(--ae-card);
}
.ae-page .ae-repart-n{ font-weight: 800; font-size: 1rem; }

/* ---------------------------------------------------- pastilles d'avis ---- */
/* Forme + couleur + libelle : jamais la couleur seule. */
.ae-page .ae-av{
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 700; font-size: .88rem; white-space: nowrap;
}
.ae-page .ae-av-f{
  display: inline-block; width: 1.05rem; height: 1.05rem; flex: 0 0 auto;
}
.ae-page .ae-av-pos{ color: var(--ae-ok); }
.ae-page .ae-av-pos .ae-av-f{ background: var(--ae-ok-bg); border: 2px solid var(--ae-ok); border-radius: 4px; }
.ae-page .ae-av-neu{ color: var(--ae-warn); }
.ae-page .ae-av-neu .ae-av-f{ background: var(--ae-warn-bg); border: 2px solid var(--ae-warn); border-radius: 50%; }
.ae-page .ae-av-neg{ color: var(--ae-ko); }
/* Triangle en clip-path : l'ancienne version posait un SVG de deux polygones
   par vignette, repete plus de vingt mille fois dans la page. */
.ae-page .ae-av-neg .ae-av-f{
  background: var(--ae-ko);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  border: 0;
}
.ae-page .ae-av-nd{ color: var(--ae-mut); font-weight: 600; }

/* --------------------------------------------- historique des 10 courses -- */
/* .ae-tab-cartes est porte par le tableau A TOUTES LES LARGEURS : c'est la
   classe qui autorise le mode cartes, pas qui l'active. Une regle
   .ae-tab-cartes .ae-hist posee ici s'appliquerait donc aussi sur grand ecran.
   Le repli des vignettes est declare dans le media query, pas ailleurs. */
.ae-page .ae-hist{ display: flex; flex-wrap: wrap; gap: .18rem; justify-content: flex-end; }
/* 1,75rem = 28 px. Ces vignettes sont des LIENS vers la page de la course :
   sous 24 px de cote elles echouent au critere de taille de cible WCAG 2.5.8,
   et sur telephone elles sont a peu pres impossibles a viser au pouce. */
.ae-page .ae-h{
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; flex: 0 0 auto;
  font-size: .76rem; font-weight: 800; line-height: 1;
  text-decoration: none; transition: transform .15s var(--ae-ease);
}
.ae-page .ae-h:hover{ transform: translateY(-1px); }
.ae-page .ae-h-pos{ background: var(--ae-ok-bg); color: var(--ae-ok); border: 2px solid var(--ae-ok); border-radius: 5px; }
.ae-page .ae-h-neu{ background: var(--ae-warn-bg); color: var(--ae-warn); border: 2px solid var(--ae-warn); border-radius: 50%; }
.ae-page .ae-h-neg{
  background: var(--ae-ko); color: #fff;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  align-items: flex-end; padding-bottom: .12rem;
}

/* Le favori du jour, en plus du resultat. La FORME dit le resultat (carre
   gagne, rond place, triangle ni l'un ni l'autre), l'anneau dit qu'il partait
   favori : deux informations, deux signaux distincts, et le libelle du lien
   les redit en toutes lettres pour les lecteurs d'ecran. */
/* L'anneau est porte par un ENVELOPPE, pas par la vignette. Pose sur la
   vignette, il etait rogne avec elle par le clip-path du triangle : un cheval
   parti favori et arrive au-dela de la 3e place - c'est-a-dire la majorite des
   cas - etait rendu identique a un non-favori, et la legende mentait. */
.ae-page .ae-h-e{ display: inline-flex; border-radius: 50%; line-height: 0; }
.ae-page .ae-h-e-fav{ box-shadow: 0 0 0 2px var(--ae-card), 0 0 0 4px var(--ae-acc); margin: 2px; }

/* ================================================== OUTILS ET TABLEAUX ==== */
.ae-page .ae-filtres{
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end;
  padding: .85rem .9rem; margin-bottom: .6rem;
  background: var(--ae-soft); border: 1px solid var(--ae-bd); border-radius: var(--ae-r-sm);
}
.ae-page .ae-filtre{ flex: 1 1 11rem; min-width: 0; }
/* Le bouton ne s'etire pas comme un champ : c'est l'action, pas une saisie.
   Il est indispensable depuis que les listes n'envoient plus le formulaire
   toutes seules - un <select> qui recharge la page a chaque fleche du clavier
   empeche d'atteindre l'option visee (WCAG 3.2.2). */
.ae-page .ae-filtre-btn{ flex: 0 0 auto; }
/* Les listes de tri ne servent qu'en mode cartes : au-dela, les en-tetes de
   colonne font le meme travail, et mieux. Masquees en display:none, elles
   envoient quand meme leur valeur : le tri survit a un « Appliquer ». */
.ae-page .ae-filtre-mob{ display: block; }
/* Action secondaire : elle efface, elle ne valide pas. Elle se distingue du
   bouton principal par le poids, pas par la couleur seule. */
.ae-page .ae-raz{
  min-height: 2.6rem; padding: .5rem .9rem; font-weight: 600;
  text-decoration: none; margin-left: .4rem;
}
.ae-page .ae-filtre-btn{ display: flex; align-items: center; }
.ae-page .ae-filtre label{
  display: block; font-size: .74rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ae-mut); margin-bottom: .25rem;
}
.ae-page .ae-sel, .ae-page .ae-champ{
  -webkit-appearance: none; appearance: none;
  font-family: inherit; font-size: .95rem; font-weight: 600; color: var(--ae-ink);
  /* --ae-bd-fort ne fait que 1,47:1 contre le blanc : sous le seuil de 3:1
     exige pour la limite d'un composant de saisie (WCAG 1.4.11). */
  background: var(--ae-card); border: 1px solid var(--ae-mut);
  border-radius: var(--ae-r-sm); padding: .5rem .65rem; width: 100%; min-height: 2.6rem;
  transition: border-color .18s var(--ae-ease), box-shadow .18s var(--ae-ease);
}
.ae-page .ae-sel{
  padding-right: 2.1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23475569'%3E%3Cpath d='M8 11.2 3.6 6.8l.9-.9L8 9.4l3.5-3.5.9.9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .6rem center; background-size: 1rem 1rem;
}
.ae-page .ae-sel:focus, .ae-page .ae-champ:focus{
  border-color: var(--ae-acc); box-shadow: var(--ae-glow); outline: none;
}

.ae-page .ae-outils{
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap; padding-bottom: .6rem;
}
.ae-page .ae-tri-mob{ display: flex; align-items: flex-end; gap: .4rem; flex-wrap: wrap; min-width: 0; }
.ae-page .ae-tri-mob > div{ min-width: 0; flex: 1 1 8rem; }
.ae-page .ae-tri-mob label{
  display: block; font-size: .74rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ae-mut); margin-bottom: .25rem;
}
.ae-page .ae-tri-mob select{
  font-family: inherit; font-size: .92rem; font-weight: 600; color: var(--ae-ink);
  background: var(--ae-card); border: 1px solid var(--ae-mut);
  border-radius: var(--ae-r-sm); padding: .38rem .55rem; width: 100%; max-width: 100%;
}
.ae-page .ae-export{ display: flex; align-items: center; gap: .4rem; margin-left: auto; flex-wrap: wrap; }
.ae-page .ae-export-lib{
  font-size: .74rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ae-mut);
}
.ae-page .ae-btn{
  -webkit-appearance: none; appearance: none;
  font-family: inherit; font-size: .84rem; font-weight: 700; color: var(--ae-acc-d);
  background: var(--ae-card); border: 1px solid var(--ae-mut);
  border-radius: var(--ae-r-sm); padding: .34rem .7rem; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; min-height: 1.9rem;
  transition: border-color .18s var(--ae-ease), background .18s var(--ae-ease);
}
.ae-page .ae-btn:hover{ border-color: var(--ae-acc); background: var(--ae-acc-l2); }
.ae-page .ae-btn:active{ background: var(--ae-acc-l); }
/* Action principale. Ce bloc DOIT rester apres .ae-btn : a specificite egale
   c'est la derniere regle qui gagne, et pose plus haut il etait sans effet -
   le bouton « Appliquer » s'affichait en secondaire depuis le premier jour. */
/* Action principale du formulaire de filtres. */
.ae-page .ae-btn-p{
  color: #fff; background: var(--ae-acc-d); border-color: var(--ae-acc-d);
  min-height: 2.6rem; padding: .5rem 1.1rem; font-size: .92rem;
}
.ae-page .ae-btn-p:hover{ background: var(--ae-acc); border-color: var(--ae-acc); color: #fff; }
.ae-page .ae-btn-p:active{ background: var(--ae-acc-d); }

/* Region d'etat du tri : hors ecran, mais dans le flux d'accessibilite. */
.ae-page .ae-tri-etat{
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------- TABLEAUX -------- */
/* SOCLE = TELEPHONE. Chaque ligne est une carte : l'en-tete de colonne est
   repris devant chaque valeur par td::before, et le tableau ne defile pas.
   Le tableau proprement dit est retabli plus bas, dans le seul media query
   min-width de ce fichier. */
/* POSITION RELATIVE, ET CE N'EST PAS DECORATIF. Les .ae-vh (texte reserve aux
   lecteurs d'ecran) sont en position absolue : sans ancetre positionne PLUS
   PROCHE que le cadre du tableau, ils se calent sur ce cadre, gardent leur
   position statique a l'interieur du tableau defile - jusqu'a 1 417 px - et
   font defiler la PAGE ENTIERE de 187 px. Mesure faite au navigateur.
   OVERFLOW A TOUTES LES LARGEURS : le tableau de la mesure n'est pas en mode
   cartes, il debordait donc de 20 px sur tablette, ou le cadre etait encore en
   overflow visible. */
.ae-page .ae-tabwrap{
  overflow-x: auto; position: relative; margin: .3rem 0 0;
  -webkit-overflow-scrolling: touch;
  /* Les deux degrades disent qu'il reste du contenu a droite ou a gauche. Ils
     etaient declares dans le seul media query min-width : sous 52 rem, les
     tableaux de mesure - qui ne passent jamais en cartes - se coupaient en
     plein milieu d'une phrase sans le moindre indice. */
  background:
    linear-gradient(to right, var(--ae-card) 30%, rgba(255,255,255,0)),
    linear-gradient(to right, rgba(255,255,255,0), var(--ae-card) 70%) 100% 0,
    linear-gradient(to right, rgba(15,23,42,.12), rgba(15,23,42,0)),
    linear-gradient(to left, rgba(15,23,42,.12), rgba(15,23,42,0)) 100% 0;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}
/* Un cadre qui defile sans rien de focalisable dedans est inatteignable au
   clavier sur Firefox et Safari (WCAG 2.1.1). tabindex="0" est pose dans le
   HTML sur ces cadres-la ; ici on lui donne un focus visible. */
.ae-page .ae-tabwrap:focus-visible{ outline: 2px solid var(--ae-acc); outline-offset: 2px; }
.ae-page .ae-tab{ border-collapse: collapse; width: 100%; font-size: .93rem; font-variant-numeric: tabular-nums; }
.ae-page .ae-tab caption{
  caption-side: top; text-align: left; padding: 0 0 .6rem; font-size: .87rem; color: var(--ae-mut);
}
.ae-page .ae-cap-js:empty{ display: none; }
/* En cartes le tableau est un bloc : sa legende doit l'etre aussi, sans quoi
   elle se pose en boite anonyme par-dessus les premieres lignes. */
.ae-page .ae-tab-cartes caption{ display: block; }
/* Complement de titre de carte, masque des que le tableau redevient tableau,
   et des que la colonne « Cheval » est depliee juste en dessous. */
.ae-page .ae-carte-h{ font-weight: 700; }
.ae-page .ae-tab-cartes:not(.ae-tab-replie) .ae-carte-h{ display: none; }
.ae-page .ae-tab-cartes thead{ display: none; }
.ae-page .ae-tab-cartes,
.ae-page .ae-tab-cartes tbody,
.ae-page .ae-tab-cartes tr,
.ae-page .ae-tab-cartes th,
.ae-page .ae-tab-cartes td{ display: block; width: 100%; }
.ae-page .ae-tab-cartes tr{
  border: 1px solid var(--ae-bd); border-radius: var(--ae-r-sm);
  margin-bottom: .6rem; overflow: hidden;
}
.ae-page .ae-tab-cartes tbody th{
  background: var(--ae-acc-l); color: var(--ae-acc-d); font-weight: 700; text-align: left;
  padding: .45rem .75rem; border-bottom: 1px solid var(--ae-bd);
}
.ae-page .ae-tab-cartes td{
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; text-align: right; padding: .4rem .75rem; white-space: normal;
  border-bottom: 1px solid var(--ae-bd-soft);
}
.ae-page .ae-tab-cartes tr td:last-child{ border-bottom: 0; }
/* Colonnes secondaires repliees. Dix colonnes font dix lignes par carte : la
   liste mesurait 54 000 px, soit cent trente-huit ecrans de telephone. C'est
   le SCRIPT qui pose .ae-tab-replie, jamais le HTML servi : sans JavaScript le
   bouton « Toutes les colonnes » n'existe pas, et personne ne doit se
   retrouver devant quatre colonnes qu'aucun controle ne peut rouvrir. */
.ae-page .ae-tab-cartes.ae-tab-replie td.ae-sec{ display: none; }
.ae-page .ae-tout[aria-pressed="true"]{
  color: #fff; background: var(--ae-acc-d); border-color: var(--ae-acc-d);
}
.ae-page .ae-tab-cartes td::before{
  content: attr(data-lib); font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--ae-mut); text-align: left;
}

/* Libelle d'en-tete servi par le serveur. JavaScript le remplace par un bouton
   de tri de meme allure ; sans JavaScript il reste un libelle, pas un bouton
   mort. Les deux partagent donc exactement la meme mise en forme. */
.ae-page .ae-th-lib, .ae-page .ae-th-btn{
  -webkit-appearance: none; appearance: none; width: 100%;
  display: flex; align-items: center; justify-content: flex-end; gap: .35rem;
  background: transparent; border: 0; font: inherit;
  font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ae-acc-d); padding: .46rem .7rem;
  transition: background .18s var(--ae-ease);
}
.ae-page .ae-th-btn{ cursor: pointer; text-decoration: none; }
/* Rendu en lien par le serveur sur le tableau pagine, en bouton par le script
   sur les petits tableaux : meme allure, meme cible, deux natures. */
.ae-page a.ae-th-btn:hover{ background: var(--ae-acc-l); text-decoration: none; }
.ae-page .ae-th-btn:hover{ background: var(--ae-acc-l); }
.ae-page .ae-th-btn:focus-visible{ outline-offset: -2px; }
.ae-page .ae-th-fl{ font-size: .9em; opacity: .35; }

/* Legende du code de formes. Les vignettes disent trois choses a la fois -
   avis, place, lien - et rien sur la page ne l'expliquait. */
.ae-page .ae-legende{
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem;
  margin: .55rem 0 0; font-size: .85rem; color: var(--ae-mut);
}
.ae-page .ae-legende-t{ font-weight: 700; color: var(--ae-ink2); }
.ae-page .ae-legende-i{ display: inline-flex; align-items: center; gap: .35rem; }
/* Dans la legende, la vignette est un exemple : ni lien, ni cible a viser. */
.ae-page .ae-legende .ae-h{ cursor: default; }

/* Bloc du jeu complet. Il ne se confond pas avec les exports du tableau juste
   au-dessus, qui suivent le filtre affiche : celui-ci les ignore tous. */
.ae-page .ae-jeu{
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem;
  margin: .9rem 0 0; padding: .7rem .85rem;
  background: var(--ae-acc-l2); border: 1px solid var(--ae-acc-l);
  border-radius: var(--ae-r-sm);
}
.ae-page .ae-jeu-t{ font-weight: 800; color: var(--ae-acc-d); }
.ae-page .ae-jeu-d{ color: var(--ae-mut); font-size: .88rem; flex: 1 1 14rem; }
.ae-page .ae-jeu-l{ display: flex; gap: .4rem; flex-wrap: wrap; margin-left: auto; }

.ae-page .ae-fort{ font-weight: 800; color: var(--ae-ink); }
.ae-page .ae-nd{ color: var(--ae-mut); }
.ae-page .ae-vide{
  padding: 1.2rem; text-align: center; color: var(--ae-mut);
  background: var(--ae-card2); border: 1px dashed var(--ae-bd-fort); border-radius: var(--ae-r-sm);
}

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

.ae-page .ae-liens{ display: grid; grid-template-columns: 1fr; gap: .6rem; }
.ae-page .ae-lien{
  display: block; background: var(--ae-card); border: 1px solid var(--ae-bd);
  border-radius: var(--ae-r-sm); padding: .75rem .9rem; text-decoration: none; color: inherit;
  transition: border-color .18s var(--ae-ease), box-shadow .18s var(--ae-ease), transform .18s var(--ae-ease);
}
.ae-page .ae-lien:hover{ border-color: var(--ae-acc); box-shadow: var(--ae-sh-md); transform: translateY(-1px); }
.ae-page .ae-lien-t{ font-weight: 800; color: var(--ae-acc-d); display: block; }
.ae-page .ae-lien-d{ font-size: .88rem; color: var(--ae-mut); display: block; margin-top: .1rem; }

/* ================================================ SECTIONS DE CETTE PAGE == */

/* --------------------------------------------------- navigation par date -- */
/* Elle remplace le champ flatpickr : trois liens servis par le serveur, qui ne
   proposent que des journees dont les donnees existent vraiment. */
.ae-page .eq-nav{
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: 0 0 1.25rem;
}
.ae-page .eq-nav-j{
  flex: 1 1 auto; min-width: 0;
  font-weight: 800; font-size: 1.02rem; color: var(--ae-ink);
}
.ae-page .eq-nav-j span{ display: block; font-weight: 600; font-size: .86rem; color: var(--ae-mut); }
.ae-page .eq-nav-b{
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .5rem .85rem; min-height: 2.6rem;
  background: var(--ae-card); border: 1px solid var(--ae-bd-fort);
  border-radius: var(--ae-r-sm); color: var(--ae-acc-d); font-weight: 700;
  text-decoration: none; font-size: .9rem;
  transition: border-color .18s var(--ae-ease), background-color .18s var(--ae-ease);
}
.ae-page .eq-nav-b:hover{ border-color: var(--ae-acc); background: var(--ae-acc-l2); }
.ae-page .eq-nav-b[aria-disabled="true"]{
  color: var(--ae-mut); border-color: var(--ae-bd); background: var(--ae-soft);
  pointer-events: none;
}
.ae-page .eq-dates{ margin-top: .75rem; }
.ae-page .eq-dates summary{
  cursor: pointer; font-weight: 700; color: var(--ae-acc-d); font-size: .9rem;
}
.ae-page .eq-dates-l{
  display: flex; flex-wrap: wrap; gap: .35rem; margin: .6rem 0 0; padding: 0; list-style: none;
}
.ae-page .eq-dates-l a{
  display: inline-block; padding: .3rem .6rem; font-size: .85rem; font-weight: 700;
  background: var(--ae-card); border: 1px solid var(--ae-bd); border-radius: var(--ae-r-xs);
  color: var(--ae-acc-d); text-decoration: none;
}
.ae-page .eq-dates-l a:hover{ border-color: var(--ae-acc); background: var(--ae-acc-l2); }
.ae-page .eq-dates-l a[aria-current="page"]{
  background: var(--ae-acc-d); border-color: var(--ae-acc-d); color: #fff;
}

.ae-page .eq-form{ margin-top: .9rem; }
.ae-page .eq-form-l{ display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .3rem; }
.ae-page .eq-form .ae-sel{ flex: 1 1 14rem; min-width: 0; max-width: 22rem; }
.ae-page .ma-lab{
  display: block; font-size: .78rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ae-mut); margin-bottom: .25rem;
}
/* Le pave publicitaire : il se replie a zero quand Google ne sert rien, plutot
   que de laisser un trou de 90 px au milieu de la page. */
.ae-page .eq-pub{ width: 100%; margin: 0 0 1.25rem; min-height: 90px; overflow: hidden; text-align: center; }
.ae-page .eq-pub:has(ins[data-ad-status="unfilled"]), .ae-page .eq-pub:empty{ min-height: 0; margin: 0; }

/* ------------------------------------------------- le cheval du jour ------ */
.ae-page .eq-cheval{
  display: block; margin-top: .2rem; font-weight: 600; font-size: .88rem; color: var(--ae-acc-d);
}
.ae-page .eq-cheval + .eq-cheval{ margin-top: .1rem; }
.ae-page .eq-num{
  display: inline-block; min-width: 1.5rem; padding: 0 .3rem; margin-right: .3rem;
  text-align: center; font-weight: 800; color: #fff; background: var(--ae-acc);
  border-radius: var(--ae-r-xs); font-size: .8rem;
}
.ae-page .eq-cote{ color: var(--ae-mut); font-weight: 600; }

/* -------------------------------------------- le tableau de la mesure ----- */
/* Les barres disent d'un coup d'oeil ce que les chiffres disent en detail :
   elles sont toutes de la meme longueur, et c'est precisement le propos. */
.ae-page .eq-mes{ width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ae-page .eq-mes caption{ caption-side: top; text-align: left; padding: 0 0 .6rem; font-size: .87rem; color: var(--ae-mut); }
.ae-page .eq-mes th, .ae-page .eq-mes td{ padding: .45rem .3rem; border-bottom: 1px solid var(--ae-bd-soft); }
.ae-page .eq-mes thead th{
  text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ae-mut); border-bottom: 2px solid var(--ae-bd-fort);
}
.ae-page .eq-mes tbody th{ text-align: left; font-weight: 700; }
.ae-page .eq-mes td{ text-align: right; }
/* SOCLE = TELEPHONE. Sous 32 rem, la colonne des barres disparait : elle ne
   fait que redire en image ce que le pourcentage dit en chiffres, et sans elle
   le tableau tient dans l'ecran au lieu de defiler. Ce n'est pas une troncature,
   c'est un choix : aucune information n'est perdue. */
.ae-page .eq-mes .eq-barre{ display: none; }
.ae-page .eq-b{
  display: block; height: .55rem; border-radius: var(--ae-pill);
  background: var(--ae-acc); min-width: 2px;
}
.ae-page .eq-b-ref{ background: var(--ae-bd-fort); }
.ae-page .eq-ic{ display: block; font-size: .82rem; color: var(--ae-mut); }

/* -------------------------------------------------- verdict et rappel ----- */
.ae-page .eq-verdict{
  margin: 0 0 1rem; padding: .85rem 1rem;
  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);
  font-size: 1rem; color: var(--ae-ink);
}
.ae-page .eq-verdict strong{ color: var(--ae-acc-d); }

/* ============================================================== RESPONSIVE = */
/* Le socle ci-dessus est celui du telephone. Tout ce qui suit elargit. */

@media (min-width: 30rem){
  .ae-page .ae-course{ grid-template-columns: 1fr 1fr; }
}

@media (min-width: 32rem){
  .ae-page .eq-mes .eq-barre{ display: table-cell; width: 100%; text-align: left; }
  .ae-page .eq-mes th, .ae-page .eq-mes td{ padding-left: .5rem; padding-right: .5rem; }
}

@media (min-width: 46rem){
  /* Le nom du jour et les deux boutons tiennent sur une ligne. */
  .ae-page .eq-nav{ flex-wrap: nowrap; }
  /* Les tableaux de mesure ont besoin de 385 px chacun. A 46 rem, deux
     colonnes leur en laissaient 316 : moins qu'un telephone, et la legende se
     coupait en plein mot. Ils attendent donc 62 rem, plus bas.
     .ae-txtg.eq-grille et non .eq-grille seul : la regle a deux colonnes de
     .ae-txtg est declaree PLUS BAS dans le meme media query, et a specificite
     egale c'est la derniere qui gagne. */
  .ae-page .ae-txtg.eq-grille{ grid-template-columns: 1fr; }
  .ae-page{ padding: 1.35rem 1.15rem 4rem; }
  .ae-page .ae-hero{ padding: 2rem 1.9rem 1.8rem; }
  .ae-page .ae-bloc{ padding: 1.4rem 1.35rem; }
  .ae-page .ae-course{ grid-template-columns: repeat(3, 1fr); }
  .ae-page .ae-liens{ grid-template-columns: repeat(2, 1fr); }
  .ae-page .ae-txtg{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* A partir d'ici il y a la place d'un vrai tableau : les cartes redeviennent
   des lignes et des cellules. Le tableau d'etude compte dix colonnes ; entre
   832 et 1 345 px il defile lateralement DANS son cadre, la page elle-meme ne
   deborde jamais. Les deux degrades signalent qu'il reste du contenu a droite
   ou a gauche ; ils disparaissent en bout de course grace a
   background-attachment: local. */
@media (min-width: 52rem){
  .ae-page .ae-tri-mob{ display: none; }
  .ae-page .ae-filtre-mob{ display: none; }
  .ae-page .ae-h{ width: 1.55rem; height: 1.55rem; font-size: .72rem; }
  .ae-page .ae-hist{ flex-wrap: nowrap; }
  .ae-page .ae-tab-cartes{ display: table; }
  .ae-page .ae-tab-cartes caption{ display: table-caption; }
  .ae-page .ae-carte-h{ display: none; }
  .ae-page .ae-tab-cartes thead{ display: table-header-group; }
  .ae-page .ae-tab-cartes tbody{ display: table-row-group; }
  .ae-page .ae-tab-cartes tr{
    display: table-row; width: auto;
    border: 0; border-radius: 0; margin: 0; overflow: visible;
  }
  .ae-page .ae-tab-cartes th,
  .ae-page .ae-tab-cartes td,
  /* (0,4,1) dans le socle cartes : un media query n'ajoute pas de poids, il
     fallait donc egaler la specificite ici. Sans cela, une tablette passee en
     paysage apres un appui sur « Toutes les colonnes » gardait des cellules
     masquees ou en flex, et lisait les valeurs sous les mauvais en-tetes. */
  .ae-page .ae-tab-cartes.ae-tab-replie td.ae-sec{ display: table-cell; width: auto; }
  .ae-page .ae-tab-cartes td::before{ display: none; }
  .ae-page .ae-tab th, .ae-page .ae-tab td{
    padding: .46rem .7rem; border-bottom: 1px solid var(--ae-bd-soft);
    text-align: right; white-space: nowrap;
  }
  /* Filets : deux regles du socle cartes pesaient plus lourd que celle-ci et
     laissaient la derniere colonne sans trait, la premiere avec un trait plus
     sombre. Elles sont rendues a l'identique du reste du tableau. */
  .ae-page .ae-tab-cartes tr td:last-child{ border-bottom: 1px solid var(--ae-bd-soft); }
  .ae-page .ae-tab-cartes tbody th{ border-bottom: 1px solid var(--ae-bd-soft); }
  .ae-page .ae-tab thead th{
    border-bottom: 2px solid var(--ae-acc); background: var(--ae-acc-l2); padding: 0;
  }
  .ae-page .ae-tab thead th:first-child, .ae-page .ae-tab tbody th{ text-align: left; }
  .ae-page .ae-tab tbody th{
    font-weight: 700; color: var(--ae-acc-d); background: transparent;
    padding: .46rem .7rem;
  }
  /* La premiere colonne reste visible pendant le defilement lateral. C'est ce
     que faisait fixedColumns dans l'ancienne version : sans elle, le lecteur
     arrive au bout des dix dernieres courses sans plus savoir de qui il s'agit.
     Le fond est opaque, sinon les valeurs defilent par transparence dessous. */
  .ae-page .eq-tab tbody th,
  .ae-page .eq-tab thead th:first-child{
    position: sticky; left: 0; z-index: 2;
    background: var(--ae-card);
    box-shadow: 1px 0 0 var(--ae-bd);
  }
  .ae-page .eq-tab thead th:first-child{ background: var(--ae-acc-l2); }
  .ae-page .eq-tab tbody tr:nth-child(even) th{ background: var(--ae-card2); }
  .ae-page .eq-tab tbody tr:hover th{ background: var(--ae-acc-l2); }
  .ae-page .ae-tab td.ae-tab-txt{ text-align: left; white-space: normal; }
  .ae-page .ae-tab thead th.ae-tab-txt{ text-align: left; }
  .ae-page .ae-tab thead th.ae-tab-txt .ae-th-btn,
  .ae-page .ae-tab thead th.ae-tab-txt .ae-th-lib{ justify-content: flex-start; }
  .ae-page .ae-tab thead th:first-child .ae-th-btn,
  .ae-page .ae-tab thead th:first-child .ae-th-lib{ justify-content: flex-start; }
  .ae-page .ae-tab tbody tr:nth-child(even) th,
  .ae-page .ae-tab tbody tr:nth-child(even) td{ background: var(--ae-card2); }
  .ae-page .ae-tab tbody tr:hover th, .ae-page .ae-tab tbody tr:hover td{ background: var(--ae-acc-l2); }
  .ae-page .ae-tab thead th[aria-sort="ascending"] .ae-th-fl,
  .ae-page .ae-tab thead th[aria-sort="descending"] .ae-th-fl{ opacity: 1; }
  .ae-page .ae-tab thead th[aria-sort="ascending"],
  .ae-page .ae-tab thead th[aria-sort="descending"]{ background: var(--ae-acc-l); }
  /* Dix colonnes dans 1 135 px : sur ce tableau precis le rembourrage se
     resserre. Les autres tableaux gardent le confort de lecture. */
  .ae-page #ae-etude th, .ae-page #ae-etude td{ padding-left: .45rem; padding-right: .45rem; }
  .ae-page #ae-etude .ae-th-btn, .ae-page #ae-etude .ae-th-lib{ padding-left: .45rem; padding-right: .45rem; }
}

/* Treize colonnes. Le rembourrage se resserre pour que la colonne des dix
   derniers Quintes - celle qu'on vient regarder - tienne dans un ecran de
   portable sans faire defiler le cadre. Les autres tableaux de la page gardent
   le confort de lecture. */
@media (min-width: 52rem){
  .ae-page .eq-tab th, .ae-page .eq-tab td{ padding-left: .42rem; padding-right: .42rem; }
  .ae-page .eq-tab .ae-th-btn, .ae-page .eq-tab .ae-th-lib{ padding-left: .42rem; padding-right: .42rem; }
  /* 1,5 rem = 24 px pile : le plancher que ce fichier se fixe lui-meme plus
     haut au titre du critere de taille de cible. On ne descend pas en dessous
     pour gagner quelques pixels de tableau. */
  .ae-page .eq-tab .ae-h{ width: 1.5rem; height: 1.5rem; font-size: .7rem; }
  .ae-page .eq-tab .ae-hist{ gap: .12rem; }
}

@media (min-width: 62rem){
  .ae-page .ae-txtg.eq-grille{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Cette page-ci respire plus large que les autres, et pour une raison
     precise : son tableau porte treize colonnes, dont celle des dix dernieres
     courses, qui est ce qu'on vient regarder. Dans le gabarit commun elle
     restait coupee sur tous les ecrans de bureau. */
  .ae-page.eq-page{ max-width: 1360px; }
  /* Deux colonnes SEULEMENT s'il y a deux paragraphes. Avec un seul, la
     deuxieme colonne restait vide et le texte se coupait au milieu de la
     largeur disponible, ce qui se lit comme une troncature. Un navigateur qui
     ne connait pas :has() ignore la regle et garde la pleine largeur, qui est
     le bon repli. */
  .ae-page .ae-hero-sous:has(p + p){ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ae-page .ae-course{ grid-template-columns: repeat(6, 1fr); }
}

@media (prefers-reduced-motion: reduce){
  .ae-page *, .ae-page *::before, .ae-page *::after{ transition-duration: .01ms; animation-duration: .01ms; }
  .ae-page .ae-h:hover, .ae-page .ae-lien:hover{ transform: none; }
}

@media print{
  .ae-page .ae-outils, .ae-page .ae-filtres, .ae-page .ae-somm{ display: none; }
  .ae-page .ae-hero{ background: none; color: #000; box-shadow: none; }
  .ae-page .ae-hero-sous, .ae-page .ae-hero-chip, .ae-page .ae-hero-oeil{ color: #000; }
  /* Les navigateurs n'impriment pas les fonds : un jeton blanc sur blanc
     disparaissait. Il se lit ici par son contour. */
  .ae-page .ae-hero-chip{ background: none; border: 1px solid #000; }
  .ae-page .ae-tabwrap{ overflow-x: visible; background: none; }
  .ae-page .ae-tab{ font-size: .8rem; }
  /* Une page A4 fait 794 px CSS, soit moins de 52rem : c'est le mode cartes
     qui s'imprime. Or « Toutes les colonnes » est masque a l'impression, donc
     quatre colonnes disparaissaient sans le moindre signal. Elles sont
     depliees d'office sur le papier. */
  .ae-page .ae-tab-cartes.ae-tab-replie td.ae-sec{
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  }
  /* Des liens de page sur du papier ne menent nulle part. Le decompte, lui,
     dit quelle tranche on tient en main : il reste. */
  .ae-page .ae-tab-cartes tr{ break-inside: avoid; page-break-inside: avoid; }
}

/* ============================================================ FIN DE FEUILLE */
/* Ce bloc ferme le fichier a dessein : il doit passer APRES toute regle de
   meme poids. En mode cartes, tr{display:block} est une regle d'auteur : elle
   bat la regle [hidden] du navigateur, et la recherche ne masquait donc rien
   sur telephone - le compteur affichait 1, les 97 lignes restaient a l'ecran.
   Cacher une ligne ne se discute pas ; aucune declaration prioritaire n'est
   necessaire, il suffit d'etre plus precis et plus bas dans la feuille. */
.ae-page [hidden]{ display: none; }
.ae-page .ae-tab-cartes tr[hidden],
.ae-page .ae-tab-cartes thead[hidden],
.ae-page .ae-tab-cartes tbody[hidden],
.ae-page .ae-tab-cartes th[hidden],
.ae-page .ae-tab-cartes td[hidden]{ display: none; }