/* =============================================================================
   assets/css/avis-entraineurs-2027.css - turf.bzh
   -----------------------------------------------------------------------------
   Page « Avis des entraineurs ». Meme systeme que tarif-quinte-2027.css et
   simulateur-gains-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.

   PORTEE. Tout est scope sous .ae-page. L'ancienne version de la page ecrivait
   ses regles dans un <style> en ligne, sans prefixe, sur des selecteurs aussi
   generiques que body, h1, table.dataTable et .tabs : 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 : on decoupe le CONTENU en blocs autonomes poses dans
   une grille. Pas de flux multi-colonnes, qui renvoie l'oeil en haut a droite
   au milieu d'une phrase.

   COULEUR SEULE. L'avis n'est jamais porte par la couleur uniquement : chaque
   etat a sa forme (carre, rond, triangle) et son libelle. C'est la regle du
   fichier d'origine, gardee et rendue moins couteuse : le triangle etait un SVG
   inline de deux polygones repete 21 990 fois sur la page.

   @author Claude (Cowork mode, 2026-08-30)
   @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-pagi-ici, .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;
}

/* ================================================== 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. */
.ae-page .ae-tabwrap{ overflow-x: visible; margin: .3rem 0 0; }
.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);
}

/* -------------------------------------------------------- PAGINATION ------ */
/* Des liens, pas des boutons : ils s'ouvrent dans un onglet, se mettent en
   favori, et fonctionnent sans JavaScript. Chaque cible fait au moins 2,5rem
   de cote, soit 40 px : au-dessus des 24 px exiges, et visable au pouce. */
.ae-page .ae-pagi{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .5rem .9rem; margin: .7rem 0 0;
}
.ae-page .ae-pagi-etat{ margin: 0; font-size: .86rem; color: var(--ae-mut); }
/* Barre du haut : pas de decompte, donc pas de colonne gauche a equilibrer. */
.ae-page .ae-pagi-nu{ justify-content: flex-start; margin-top: .5rem; }
.ae-page .ae-pagi-nu .ae-pagi-l{ margin-left: 0; }
.ae-page .ae-pagi-etat strong{ color: var(--ae-ink); }
.ae-page .ae-pagi-l{
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem;
  list-style: none; margin: 0; padding: 0; margin-left: auto;
}
.ae-page .ae-pagi-b{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.5rem; min-height: 2.5rem; padding: 0 .55rem;
  font-size: .88rem; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--ae-acc-d); text-decoration: none;
  background: var(--ae-card); border: 1px solid var(--ae-mut);
  border-radius: var(--ae-r-sm);
  transition: border-color .18s var(--ae-ease), background .18s var(--ae-ease);
}
.ae-page a.ae-pagi-b:hover{ border-color: var(--ae-acc); background: var(--ae-acc-l2); }
/* La page courante n'est pas un lien : elle ne mene nulle part. */
.ae-page .ae-pagi-ici{
  color: #fff; background: var(--ae-acc-d); border-color: var(--ae-acc-d); cursor: default;
}
.ae-page .ae-pagi-prec, .ae-page .ae-pagi-suiv{ padding: 0 .8rem; }
.ae-page .ae-pagi-saut{
  min-width: 1.2rem; text-align: center; color: var(--ae-mut); user-select: none;
}

/* ------------------------------------------- RECEVOIR PAR EMAIL ----------- */
/* Deux colonnes a partir de 46rem : l'argument a gauche, la preuve a droite.
   En dessous, l'un sous l'autre, l'argument d'abord. */
.ae-page .ae-al-grille{ display: grid; grid-template-columns: 1fr; gap: 1.3rem 2.2rem; align-items: start; }
.ae-page .ae-al-grille > *{ min-width: 0; }
.ae-page .ae-al-h3{ font-size: .96rem; font-weight: 800; color: var(--ae-acc-d); margin: 0 0 .3rem; }
.ae-page .ae-al-h3 + p{ margin-bottom: 1rem; }
.ae-page .ae-al-cta{ display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin-top: 1.1rem; }
.ae-page .ae-al-note{ font-size: .86rem; color: var(--ae-mut); }
.ae-page .ae-al-etat{
  margin-top: 1.1rem; padding: .7rem .85rem; background: var(--ae-ok-bg);
  border: 1px solid var(--ae-ok-bd); border-radius: var(--ae-r-sm);
}
.ae-page .ae-al-etat strong{ color: var(--ae-ok); }

/* L'apercu se lit comme un email, pas comme un encart : d'ou la barre
   « De / Objet » et le cadre. Le corps vient de notre propre fonction de
   rendu, avec ses styles en ligne ; rien ici ne cherche a le repeindre. */
.ae-page .ae-al-fig{
  margin: 0; border: 1px solid var(--ae-bd-fort); border-radius: var(--ae-r-md);
  overflow: hidden; background: #fff; box-shadow: var(--ae-sh-md);
}
.ae-page .ae-al-tel{ padding: .6rem .85rem; background: var(--ae-soft); border-bottom: 1px solid var(--ae-bd); }
.ae-page .ae-al-tel-l{
  margin: 0; font-size: .84rem; color: var(--ae-ink2); line-height: 1.45;
  overflow-wrap: anywhere;
}
.ae-page .ae-al-tel-l span{
  display: inline-block; min-width: 3.2rem; font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em; color: var(--ae-mut);
}
/* Hauteur bornee : l'apercu est une preuve, pas le contenu principal de la
   page. Il defile dans son cadre plutot que de pousser la FAQ trois ecrans
   plus bas. */
.ae-page .ae-al-corps{ max-height: 26rem; overflow-y: auto; }
.ae-page .ae-al-fig figcaption{
  padding: .65rem .85rem; font-size: .84rem; color: var(--ae-mut);
  background: var(--ae-card2); border-top: 1px solid var(--ae-bd);
}

/* ------------------------------------------------ MES ALERTES ------------- */
/* mes-alertes.php reutilise cette feuille : memes jetons, memes boutons, meme
   grille. C'est la feuille des alertes autant que celle de la page d'etude. */
.ae-page .ma-msg{
  margin: 0 0 1rem; padding: .7rem .9rem; border-radius: var(--ae-r-sm);
  font-weight: 600;
}
.ae-page .ma-msg-ok{ background: var(--ae-ok-bg); border: 1px solid var(--ae-ok-bd); color: var(--ae-ok); }
.ae-page .ma-msg-ko{ background: var(--ae-ko-bg); border: 1px solid var(--ae-ko-bd); color: var(--ae-ko); }
/* Ni succes ni echec : un etat d'attente, le temps que le cron soit en place. */
.ae-page .ma-msg-attente{
  background: var(--ae-warn-bg); border: 1px solid var(--ae-warn-bd);
  color: var(--ae-ink2); font-weight: 400;
}
.ae-page .ma-msg-attente strong{ color: var(--ae-warn); }

.ae-page .ma-tete{ display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: flex-start; justify-content: space-between; }
.ae-page .ma-tete > div{ min-width: 0; flex: 1 1 18rem; }
/* L'interrupteur maitre se distingue des reglages fins : c'est lui qu'on
   cherche quand on vient couper. */
.ae-page .ma-inter{
  display: flex; align-items: center; gap: .5rem; margin: 0;
  padding: .55rem .8rem; background: var(--ae-acc-l2);
  border: 1px solid var(--ae-acc-l); border-radius: var(--ae-r-sm);
  font-weight: 700; color: var(--ae-acc-d);
}
.ae-page .ma-inter label{ cursor: pointer; }

.ae-page .ma-champ{ border: 0; padding: 0; margin: 1.3rem 0 0; min-width: 0; }
.ae-page .ma-champ legend, .ae-page .ma-lab{
  padding: 0; font-size: .78rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ae-mut); margin-bottom: .35rem; display: block;
}
.ae-page .ma-aide{ font-size: .86rem; color: var(--ae-mut); margin: 0 0 .5rem; }

.ae-page .ma-cases{ display: grid; grid-template-columns: 1fr; gap: .5rem; }
/* Toute la carte est cliquable, pas seulement la case : sur telephone viser
   une case de 13 px releve du jeu d'adresse. */
.ae-page .ma-case{
  display: flex; align-items: flex-start; gap: .6rem; margin: 0;
  padding: .65rem .8rem; background: var(--ae-card); border: 1px solid var(--ae-bd-fort);
  border-radius: var(--ae-r-sm); transition: border-color .18s var(--ae-ease), background .18s var(--ae-ease);
}
.ae-page .ma-case:hover{ border-color: var(--ae-acc); background: var(--ae-acc-l2); }
.ae-page .ma-case input{ width: 1.15rem; height: 1.15rem; margin: .18rem 0 0; flex: 0 0 auto; accent-color: var(--ae-acc-d); }
.ae-page .ma-case label{ cursor: pointer; min-width: 0; }
.ae-page .ma-case-t{ display: block; font-weight: 700; color: var(--ae-ink); }
.ae-page .ma-case-d{ display: block; font-size: .88rem; color: var(--ae-mut); }
.ae-page .ma-case:has(input:checked){ border-color: var(--ae-acc-d); background: var(--ae-acc-l); }

.ae-page .ma-jours{ display: flex; flex-wrap: wrap; gap: .4rem; }
.ae-page .ma-jour{
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .7rem; min-height: 2.5rem;
  background: var(--ae-card); border: 1px solid var(--ae-bd-fort); border-radius: var(--ae-pill);
}
.ae-page .ma-jour input{ width: 1.05rem; height: 1.05rem; accent-color: var(--ae-acc-d); }
/* 1,5rem = 24 px : la cible cliquable est le LIBELLE, pas seulement la case.
   Le conteneur faisait bien 40 px mais n'etait pas cliquable, et l'ensemble
   case + texte ne mesurait que 23 px de haut, un pixel sous le seuil. */
.ae-page .ma-jour label{
  cursor: pointer; font-size: .9rem; font-weight: 600;
  display: inline-flex; align-items: center; min-height: 1.5rem;
}
.ae-page .ma-jour:has(input:checked){ border-color: var(--ae-acc-d); background: var(--ae-acc-l); }

.ae-page .ma-email{ max-width: 24rem; }
/* --- Le champ « ajouter un entraineur » ---------------------------------- */
/* Le cadre des propositions est POSITIONNE : il flotte au-dessus de ce qui
   suit au lieu de pousser le formulaire vers le bas a chaque frappe. D'ou le
   position:relative sur le conteneur, sans lequel il se placerait par rapport
   a la page entiere. */
.ae-page .ma-cb{ position: relative; }
.ae-page .ma-cb-l{
    position: absolute; z-index: 30; left: 0; right: 0; top: 100%;
    margin: .25rem 0 0; padding: .25rem; list-style: none;
    background: var(--ae-card); border: 1px solid var(--ae-bd-fort);
    border-radius: var(--ae-r-sm); box-shadow: var(--ae-sh-lg);
    /* Huit propositions au plus, et jamais plus haut que ca : le deroulant du
       navigateur couvrait la page entiere sur une frappe d'une lettre. */
    max-height: 17rem; overflow-y: auto; overscroll-behavior: contain;
}
.ae-page .ma-cb-o{
    display: block; padding: .5rem .6rem; border-radius: var(--ae-r-xs);
    cursor: pointer; transition: background-color .12s var(--ae-ease);
}
.ae-page .ma-cb-o + .ma-cb-o{ border-top: 1px solid var(--ae-bd-soft); }
.ae-page .ma-cb-o:hover, .ae-page .ma-cb-o.est-actif{ background: var(--ae-acc-l); }
.ae-page .ma-cb-o-n{ display: block; font-weight: 700; color: var(--ae-ink); }
.ae-page .ma-cb-o-d{ display: block; font-size: .82rem; color: var(--ae-mut); }
.ae-page .ma-cb-h{ margin-top: .35rem; color: var(--ae-ok); font-weight: 600; }
.ae-page .ma-cb-v{ margin-top: .35rem; color: var(--ae-warn); font-weight: 600; }

/* L'adresse du compte, affichee et non saisie. */
.ae-page .ma-adresse{
    margin: 0 0 .35rem; font-weight: 700; font-size: 1rem; color: var(--ae-txt);
    word-break: break-word;
}

/* Mes entraineurs : une case a cocher par nom, toutes cochees. Decocher et
   enregistrer, c'est retirer. Un seul bouton d'enregistrement pour toute la
   page, et rien qui depende de JavaScript. */
.ae-page .ma-suivi-l{ list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; grid-template-columns: 1fr; gap: .4rem; }
.ae-page .ma-suivi{
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .5rem .7rem; background: var(--ae-card);
  border: 1px solid var(--ae-bd-fort); border-radius: var(--ae-r-sm);
}
.ae-page .ma-suivi input{ width: 1.15rem; height: 1.15rem; margin: .16rem 0 0; flex: 0 0 auto; accent-color: var(--ae-acc-d); }
.ae-page .ma-suivi label{ cursor: pointer; min-width: 0; }
.ae-page .ma-suivi-n{ display: block; font-weight: 700; color: var(--ae-acc-d); }
.ae-page .ma-suivi-d{ display: block; font-size: .84rem; color: var(--ae-mut); }
.ae-page .ma-suivi:has(input:checked){ border-color: var(--ae-acc-d); background: var(--ae-acc-l); }
/* Decoche : la ligne s'efface visuellement, on voit ce qu'on est en train de
   retirer avant d'enregistrer. */
.ae-page .ma-suivi:has(input:not(:checked)) .ma-suivi-n{ text-decoration: line-through; color: var(--ae-mut); }
.ae-page .ma-ajout{ margin: 0; max-width: 26rem; }
.ae-page .ma-vide{
  padding: .8rem .9rem; margin: 0 0 .8rem; color: var(--ae-mut);
  background: var(--ae-card2); border: 1px dashed var(--ae-bd-fort); border-radius: var(--ae-r-sm);
}

@media (min-width: 46rem){
  .ae-page .ma-suivi-l{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ae-page .ma-actions{ display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 1.4rem 0 0; }
.ae-page .ma-fig{ max-width: 620px; }

@media (min-width: 46rem){
  .ae-page .ma-cases{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------- 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; }

/* ============================================================== 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: 46rem){
  .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-al-grille{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .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-tabwrap{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    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;
  }
  .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;
  }
  .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; }
}

@media (min-width: 62rem){
  /* 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-pagi-l{ display: none; }
  .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; }