/* ============================================================================
   assets/css/ecuriebzh.css
   [EcurieBZH 2026-08-19] Feuille de style de la page du jour.

   PORTEE. Tout est scope sous .ebz-page. Le site charge Bootstrap globalement
   et le prefixe .ebz- evite la collision decrite dans 02-conventions.md. Aucun
   !important : la specificite vient du double selecteur .ebz-page .ebz-X.

   MOBILE D'ABORD. Les deux tableaux se replient en cartes empilees sous 34rem
   au lieu de demander un defilement lateral. Mesure sur la maquette : le
   resume de la journee demandait 532 px dans un contenant de 336 px. Aucun
   chiffre n'est masque au passage : masquer une colonne sur telephone est le
   defaut qu'on repare ici, pas la solution.
   ========================================================================== */

.ebz-page{
  --ebz-ac:#0a7c91; --ebz-ac-d:#04586C; --ebz-ac-l:#e6f3f6; --ebz-ac-l2:#f2f9fb;
  --ebz-or:#F8C300; --ebz-tx:#0f172a; --ebz-tx2:#334155; --ebz-mu:#475569;
  --ebz-bd:#cbd5e1; --ebz-bd-soft:#e2e8f0; --ebz-bg:#ffffff; --ebz-bg-soft:#f8fafc;
  --ebz-warn-bg:#fffbeb; --ebz-warn-bd:#fcd34d; --ebz-warn-tx:#78350f;
  --ebz-info-bg:#eff6ff; --ebz-info-bd:#bfdbfe; --ebz-info-tx:#1e3a8a;
  --ebz-r:12px; --ebz-r-xs:8px;
  max-width:1180px; margin:0 auto; padding:1rem .875rem 3rem;
  color:var(--ebz-tx); line-height:1.6;
  font-variant-numeric:tabular-nums;
}
.ebz-page *{box-sizing:border-box}

/* ---------- en-tete du jour ---------- */
.ebz-page .ebz-hero{
  background:linear-gradient(135deg,#04586C 0%,#0a7c91 55%,#0b7288 100%);
  background-color:#0a7c91; color:#fff; border-radius:var(--ebz-r);
  padding:1.5rem 1.25rem; margin-bottom:1.25rem;
}
.ebz-page .ebz-hero-date{
  /* Mesure : a 0,92 d'opacite, le contraste tombait a 4,39 sur le point le plus
     clair du degrade, sous le seuil AA de 4,5 pour 12 px. Pleine opacite : 4,88. */
  display:block; font-size:.75rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; opacity:1; margin-bottom:.4rem;
}
.ebz-page .ebz-hero h1{
  margin:0 0 1rem; font-size:clamp(1.35rem,4.4vw,2rem); line-height:1.2;
  font-weight:800; letter-spacing:-.015em; color:#fff;
}
.ebz-page .ebz-hero-faits{
  display:grid; gap:.625rem;
  grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr));
}
.ebz-page .ebz-hero-fait{
  /* Mesure sur les pixels reellement rendus : avec un voile blanc a .13, le
     fond des cartes montait a rgb(41,138,156) et le libelle blanc de 13 px
     tombait a 4,03:1, sous le seuil AA de 4,50. Le voile passe en NOIR a .12,
     ce qui assombrit le fond au lieu de l'eclaircir : 5,80:1 mesure. */
  background:rgba(0,0,0,.12); border:1px solid rgba(255,255,255,.30);
  border-radius:var(--ebz-r-xs); padding:.75rem min(.875rem,5%);
}
.ebz-page .ebz-hero-val{font-size:1.65rem; font-weight:800; line-height:1.1}
.ebz-page .ebz-hero-une .ebz-hero-val{font-size:2.75rem}
.ebz-page .ebz-hero-lib{font-size:.8125rem; line-height:1.45; opacity:1; margin-top:.15rem;
  overflow-wrap:anywhere}
@media(max-width:30rem){ .ebz-page .ebz-hero-une .ebz-hero-val{font-size:2.25rem} }

/* ---------- blocs ---------- */
.ebz-page .ebz-bloc{
  background:var(--ebz-bg); border:1px solid var(--ebz-bd-soft);
  border-radius:var(--ebz-r); padding:1.125rem 1rem; margin-bottom:1.125rem;
}
.ebz-page .ebz-bloc-tete{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem .875rem;
  padding-bottom:.625rem; margin-bottom:.875rem;
  border-bottom:1px solid var(--ebz-bd-soft);
}
.ebz-page .ebz-bloc-tete h2,.ebz-page .ebz-bloc-tete h3{
  margin:0; font-size:.8125rem; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ebz-ac-d);
}
.ebz-page .ebz-bloc-tete .ebz-sous{font-size:.875rem; color:var(--ebz-mu)}
.ebz-page .ebz-bloc p{margin:0 0 .75rem; font-size:.9375rem; color:var(--ebz-tx2)}
.ebz-page .ebz-bloc p:last-child{margin-bottom:0}

/* ---------- notes ---------- */
.ebz-page .ebz-note{
  border-radius:var(--ebz-r-xs); padding:.75rem .875rem; margin:.875rem 0;
  font-size:.875rem; line-height:1.55;
}
.ebz-page .ebz-note h4{margin:0 0 .25rem; font-size:.875rem; font-weight:800}
.ebz-page .ebz-note p{margin:0 0 .5rem; font-size:.875rem}
.ebz-page .ebz-note p:last-child{margin-bottom:0}
.ebz-page .ebz-note.info{background:var(--ebz-info-bg); border:1px solid var(--ebz-info-bd);
  color:var(--ebz-info-tx)}
.ebz-page .ebz-note.warn{background:var(--ebz-warn-bg); border:1px solid var(--ebz-warn-bd);
  color:var(--ebz-warn-tx)}

/* ---------- replis ---------- */
.ebz-page .ebz-det{border:1px solid var(--ebz-bd-soft); border-radius:var(--ebz-r-xs);
  margin:.625rem 0; background:var(--ebz-bg-soft)}
.ebz-page .ebz-det>summary{
  cursor:pointer; list-style:none; padding:.75rem .875rem; font-weight:700;
  font-size:.9375rem; color:var(--ebz-ac-d); display:flex; align-items:center;
  gap:.5rem; min-height:2.75rem;
}
.ebz-page .ebz-det>summary::-webkit-details-marker{display:none}
.ebz-page .ebz-det>summary::before{
  content:''; width:.5rem; height:.5rem; flex:none;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); transition:transform .18s cubic-bezier(.16,1,.3,1);
}
.ebz-page .ebz-det[open]>summary::before{transform:rotate(-135deg)}
.ebz-page .ebz-det>summary:focus-visible{outline:2px solid var(--ebz-ac); outline-offset:-2px}
.ebz-page .ebz-det-corps{padding:0 .875rem .875rem}
.ebz-page .ebz-det-corps>p:first-child{margin-top:0}

/* ---------- tableaux ---------- */
.ebz-page .ebz-tabwrap{overflow-x:auto; -webkit-overflow-scrolling:touch; position:relative}
.ebz-page .ebz-tab{border-collapse:collapse; width:100%; font-size:.875rem}
.ebz-page .ebz-tab caption{text-align:left; font-size:.8125rem; color:var(--ebz-mu);
  padding-bottom:.5rem}
.ebz-page .ebz-tab th,.ebz-page .ebz-tab td{
  padding:.5rem .5rem; border-bottom:1px solid var(--ebz-bd-soft); text-align:left;
  vertical-align:top;
}
.ebz-page .ebz-tab thead th{
  font-size:.72rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ebz-mu); border-bottom:2px solid var(--ebz-bd);
}
.ebz-page .ebz-tab td.n,.ebz-page .ebz-tab th.n{text-align:right; white-space:nowrap}
.ebz-page .ebz-tab tbody tr:last-child td{border-bottom:0}
.ebz-page .ebz-jour tbody tr:hover{background:var(--ebz-ac-l2)}
.ebz-page .ebz-jour-nom{font-weight:700}
/* Cible tactile : le lien nu faisait 26 px de haut, sous les 44 px exiges. On
   ne grossit pas le texte, on elargit la zone cliquable autour de lui. */
.ebz-page .ebz-jour-nom a{color:var(--ebz-ac-d); text-decoration:none;
  display:inline-flex; align-items:center; min-height:2.75rem; padding:.25rem 0}
.ebz-page .ebz-jour-nom a:hover{text-decoration:underline}
.ebz-page .ebz-jour-h{color:var(--ebz-mu); white-space:nowrap}

/* ---------- bandeau d'hippodrome ---------- */
.ebz-page .ebz-bande{
  display:flex; align-items:baseline; justify-content:space-between; gap:.75rem;
  background:var(--ebz-ac-d); color:#fff; border-radius:var(--ebz-r-xs);
  padding:.4rem .75rem; margin:1.125rem 0 .5rem; font-size:.8125rem;
  font-weight:800; letter-spacing:.02em; text-transform:uppercase;
}
.ebz-page .ebz-bande:first-child{margin-top:0}
.ebz-page .ebz-bande-n{font-weight:400; text-transform:none; letter-spacing:0; font-size:.78rem}

/* ---------- la ligne d'ecurie ---------- */
.ebz-page .ebz-l{
  border:1px solid var(--ebz-bd-soft); border-left:4px solid var(--ebz-ac);
  border-radius:var(--ebz-r-xs); background:var(--ebz-bg); margin-bottom:.5rem;
  overflow:hidden;
}
.ebz-page .ebz-l-tete{
  display:grid; width:100%; gap:.25rem .75rem; padding:.7rem .875rem;
  grid-template-columns:auto 1fr auto; grid-template-areas:"h c chev" "m m m";
  align-items:center; text-align:left; background:none; border:0; font:inherit;
  min-height:2.75rem; cursor:pointer; color:inherit;
}
.ebz-page .ebz-l-tete[disabled]{cursor:default}
.ebz-page .ebz-l-tete:hover:not([disabled]){background:var(--ebz-ac-l2)}
.ebz-page .ebz-l-tete:focus-visible{outline:2px solid var(--ebz-ac); outline-offset:-2px}
.ebz-page .ebz-l-h{grid-area:h; font-size:.875rem; font-weight:800; color:var(--ebz-ac-d);
  white-space:nowrap}
.ebz-page .ebz-l-c{grid-area:c; min-width:0; display:flex; flex-direction:column; gap:.2rem}
.ebz-page .ebz-l-nom{font-size:1rem; font-weight:800; line-height:1.25;
  overflow-wrap:anywhere}
.ebz-page .ebz-l-nom a{color:var(--ebz-tx); text-decoration:none}
.ebz-page .ebz-l-nom a:hover{color:var(--ebz-ac-d); text-decoration:underline}
.ebz-page .ebz-l-lieu{font-size:.8125rem; color:var(--ebz-mu); line-height:1.35}
.ebz-page .ebz-l-sig{display:flex; flex-wrap:wrap; gap:.25rem; margin-top:.15rem}
/* Rayon 4px, pas 999px. Mesure cote a cote : le tag inerte avait exactement
   le meme fond (rgb 230,243,246), la meme couleur (rgb 4,88,108) et la meme
   forme de pastille que la pastille de filtre, qui elle est navigante. Deux
   objets identiques, l'un cliquable, l'autre non, dans la meme page. Le tag
   garde sa couleur et cesse d'emprunter la forme d'un lien. */
/* RAYON 4px, PAS 999px. Mesure cote a cote au pixel : le tag inerte avait
   exactement le meme fond (rgb 230,243,246), la meme couleur de texte (rgb
   4,88,108) et la meme forme de pastille que la pastille de filtre, qui elle
   est navigante. Deux objets identiques dans la meme page, l'un cliquable,
   l'autre non. Le tag garde sa couleur et sa force, il cesse d'emprunter la
   forme d'un lien. Meme regle que .ebz-rc-s plus bas. */
.ebz-page .ebz-sig-item{
  display:inline-block; font-size:.75rem; font-weight:700; line-height:1.35;
  padding:.15rem .5rem; border-radius:4px;
  background:var(--ebz-ac-l); color:var(--ebz-ac-d); border:1px solid #a8d3dc;
}
/* Espacement des tags de faits dans le tableau : sans lui, deux tags qui passent
   a la ligne se collent (« trajet inhabituel » sur « trois chevaux dans la meme
   course »). Un conteneur flex donne un ecart FIABLE dans les deux sens ; la marge
   basse d'un inline-block, elle, ne separe pas les lignes qui s'enroulent, l'ecart
   vertical y restant regi par le line-height. [2026-08-21] */
.ebz-page .ebz-d-faits{display:flex; flex-wrap:wrap; gap:.35rem}
.ebz-page .ebz-l-km,.ebz-page .ebz-l-eu{
  grid-area:m; font-size:.875rem; font-weight:800; line-height:1.3;
  white-space:nowrap; margin-top:.35rem;
}
.ebz-page .ebz-l-km{justify-self:start; text-align:left}
.ebz-page .ebz-l-eu{justify-self:end; text-align:right}
.ebz-page .ebz-l-km small,.ebz-page .ebz-l-eu small{
  display:block; font-size:.72rem; font-weight:400; color:var(--ebz-mu);
}
.ebz-page .ebz-l-chev{
  grid-area:chev; width:.55rem; height:.55rem; justify-self:end; flex:none;
  border-right:2px solid var(--ebz-mu); border-bottom:2px solid var(--ebz-mu);
  transform:rotate(45deg); transition:transform .18s cubic-bezier(.16,1,.3,1);
}
/* <details> natif ne pose JAMAIS aria-expanded : mesure, 59 chevrons sur la
   page et zero occurrence de l'attribut. Le selecteur venait d'une version a
   base de <button> et n'a jamais rien fait. C'est [open] qui porte l'etat. */
.ebz-page .ebz-l[open] .ebz-l-chev{transform:rotate(-135deg)}
/* Les faits isoles : meme ligne, bordure gauche neutre. La hierarchie se lit
   sans avoir a compter les pastilles. */
.ebz-page .ebz-l-mineur{border-left-color:var(--ebz-bd)}
.ebz-page .ebz-l-corps{padding:.25rem .875rem 1rem; border-top:1px solid var(--ebz-bd-soft)}
.ebz-page .ebz-liste{margin:.75rem 0; padding-left:1.1rem}
.ebz-page .ebz-liste li{margin-bottom:.5rem; font-size:.9375rem; line-height:1.55;
  color:var(--ebz-tx2)}
.ebz-page .ebz-liste li:last-child{margin-bottom:0}
.ebz-page .ebz-l-note{
  margin:.75rem 0 0; font-size:.8125rem; line-height:1.5; color:var(--ebz-warn-tx);
  background:var(--ebz-warn-bg); border:1px solid var(--ebz-warn-bd);
  border-radius:var(--ebz-r-xs); padding:.5rem .625rem;
}

@media(min-width:46rem){
  .ebz-page .ebz-l-tete{grid-template-columns:auto 1fr auto auto auto;
    grid-template-areas:"h c km eu chev"}
  .ebz-page .ebz-l-km{grid-area:km; justify-self:end; text-align:right; margin-top:0}
  .ebz-page .ebz-l-eu{grid-area:eu; justify-self:end; text-align:right; margin-top:0}
}

/* ---------- le verrou Premium ---------- */
.ebz-page .ebz-verrou{
  margin:.75rem 0 0; padding:.875rem; border-radius:var(--ebz-r-xs);
  background:var(--ebz-bg-soft); border:1px dashed var(--ebz-bd);
  display:flex; flex-wrap:wrap; align-items:center; gap:.75rem;
}
.ebz-page .ebz-verrou-tx{flex:1 1 16rem; min-width:0; font-size:.875rem;
  color:var(--ebz-tx2); line-height:1.5}
.ebz-page .ebz-verrou-tx b{color:var(--ebz-tx)}
.ebz-page .ebz-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  min-height:2.75rem; padding:.6rem 1.1rem; border-radius:var(--ebz-r-xs);
  background:var(--ebz-ac-d); color:#fff; font-weight:800; font-size:.9375rem;
  text-decoration:none; border:1px solid var(--ebz-ac-d);
  /* Pas de white-space:nowrap : le libelle « Comment nous mesurons tout cela »
     debordait de 22 px entre 300 et 342 px de large. Un bouton qui passe sur
     deux lignes reste cliquable ; un bouton qui deborde ne l'est plus. */
  text-align:center; max-width:100%; overflow-wrap:anywhere;
}
.ebz-page .ebz-btn:hover{background:#034856; color:#fff}
.ebz-page .ebz-btn:focus-visible{outline:2px solid var(--ebz-or); outline-offset:2px}
.ebz-page .ebz-btn-2{background:#fff; color:var(--ebz-ac-d); border-color:var(--ebz-bd)}
.ebz-page .ebz-btn-2:hover{background:var(--ebz-ac-l2); color:var(--ebz-ac-d)}

/* ---------- la barre des journees ---------- */
.ebz-page .ebz-jours{
  display:flex; flex-wrap:wrap; align-items:center; gap:.375rem;
  margin-bottom:1.125rem; padding:.5rem .625rem; border:1px solid var(--ebz-bd-soft);
  border-radius:var(--ebz-r-xs); background:var(--ebz-bg);
}
.ebz-page .ebz-jours-lib{
  font-size:.7rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ebz-mu); margin-right:.25rem;
}
.ebz-page .ebz-jour-t{
  display:inline-flex; align-items:center; min-height:2.75rem; padding:.25rem .7rem;
  border:1px solid var(--ebz-bd); border-radius:999px; background:#fff;
  color:var(--ebz-ac-d); font-size:.8125rem; font-weight:700; text-decoration:none;
  white-space:nowrap;
}
.ebz-page .ebz-jour-t:hover{background:var(--ebz-ac-l2); color:var(--ebz-ac-d)}
.ebz-page .ebz-jour-t.is-actif{background:var(--ebz-ac-d); border-color:var(--ebz-ac-d);
  color:#fff}
.ebz-page .ebz-jour-t:focus-visible{outline:2px solid var(--ebz-ac); outline-offset:2px}

/* ---------- codes de course, cotes, arrivees ---------- */
/* Code de course en clair, non cliquable : il vit dans un <summary> et un lien
   pose la capture la tape destinee a l'ouverture. Contraste mesure : 7,07. */
.ebz-page .ebz-rc-s{
  /* PAS de pastille turquoise ici. Mesuree cote a cote, la version precedente
     avait exactement la meme couleur (rgb 4,88,108), le meme fond (rgb
     230,243,246) et le meme contraste (7,07) que le lien .ebz-rcl : deux
     pastilles identiques, l'une inerte, l'autre navigante, dans la meme page.
     Ce code est une information, il en a l'apparence. */
  display:inline-block; margin-right:.25rem; color:var(--ebz-mu);
  font-weight:800; font-size:.8125rem; letter-spacing:.02em; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
/* Code de course cliquable. Cible mesuree : 48 x 24 px au-dela de 34rem, ce
   qui satisfait le seuil AA de 24 x 24 ; 56 x 44 px en dessous, seuil AAA de
   44 x 44 atteint la ou le doigt remplace la souris. Contrastes : 7,07 au
   repos, 8,02 au survol. */
.ebz-page .ebz-rcl{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:3rem; min-height:1.5rem; padding:0 .4rem;
  border-radius:var(--ebz-r-xs); background:var(--ebz-ac-l);
  border:1px solid #bfe0e7; color:var(--ebz-ac-d); font-weight:800;
  font-size:.875rem; text-decoration:none; white-space:nowrap;
}
.ebz-page .ebz-rcl:hover{background:var(--ebz-ac-d); border-color:var(--ebz-ac-d);
  color:#fff}
.ebz-page .ebz-rcl:focus-visible{outline:2px solid var(--ebz-ac); outline-offset:2px}
/* Le rappel des courses sous le verrou : la seule porte du visiteur anonyme. */
.ebz-page .ebz-vcourses{
  flex:1 1 100%; margin:.25rem 0 0; display:flex; flex-wrap:wrap;
  align-items:center; gap:.375rem;
}
.ebz-page .ebz-vfiche{flex:1 1 100%; margin:0; font-size:.8125rem}
.ebz-page .ebz-jour-nav{font-weight:800}
.ebz-page .ebz-vcourses-l{
  color:var(--ebz-mu); font-weight:800; font-size:.7rem; letter-spacing:.06em;
  text-transform:uppercase;
}
.ebz-page .ebz-part td a{color:var(--ebz-ac-d); font-weight:700; text-decoration:none}
.ebz-page .ebz-part td a:hover{text-decoration:underline}
.ebz-page .ebz-part td small{display:block; font-size:.72rem; font-weight:400;
  color:var(--ebz-mu)}
.ebz-page .ebz-arr{
  display:inline-block; min-width:2rem; padding:.1rem .35rem; border-radius:var(--ebz-r-xs);
  font-weight:800; font-size:.8125rem; text-align:center;
  background:var(--ebz-bg-soft); color:var(--ebz-tx2); border:1px solid var(--ebz-bd);
}
/* Le 1er et le podium sont marques parce que c'est ce que l'oeil cherche, pas
   parce que nous aurions prevu quoi que ce soit. Contrastes mesures : 7,04 sur
   l'or fonce, 5,92 sur le teal clair. */
.ebz-page .ebz-arr.is-1{background:#fde68a; border-color:#d69e2e; color:#4a3200}
.ebz-page .ebz-arr.is-p{background:var(--ebz-ac-l); border-color:#a8d3dc; color:#04424f}
/* Un statut n'est pas une place. Le trait discontinu et l'absence de couleur
   pleine le disent avant meme la lecture : le cheval n'a pas de rang. Mesure :
   contraste 9,45 pour le texte, 4,76 pour le trait. */
.ebz-page .ebz-arr-s{
  background:var(--ebz-bg-soft); border:1px dashed #64748b; color:var(--ebz-tx2);
  font-size:.75rem; letter-spacing:.02em;
}
/* La legende ne liste que les codes reellement presents sous le tableau. */
.ebz-page .ebz-legende{
  margin:.5rem 0 0; font-size:.8125rem; color:var(--ebz-mu); line-height:1.5;
}
.ebz-page .ebz-legende b{color:var(--ebz-tx); font-weight:800}
.ebz-page .ebz-vide-c{color:#64748b}

/* ---------- le bandeau d'offre, en haut ---------- */
.ebz-page .ebz-offre{
  display:flex; flex-wrap:wrap; align-items:center; gap:.75rem;
  border:1px solid var(--ebz-or); border-left:4px solid var(--ebz-or);
  background:#fffdf5; border-radius:var(--ebz-r-xs); padding:.75rem .875rem;
  margin-bottom:1.125rem;
}
.ebz-page .ebz-offre-tx{flex:1 1 18rem; min-width:0; font-size:.875rem;
  line-height:1.5; color:var(--ebz-tx2)}

/* ---------- titres et liens de la fiche ---------- */
.ebz-page .ebz-fh3{margin:1.125rem 0 .4rem; font-size:1rem; font-weight:800;
  color:var(--ebz-ac-d)}
.ebz-page .ebz-fh3:first-of-type{margin-top:0}
.ebz-page .ebz-l-lien{margin:.75rem 0 0; font-size:.875rem}
/* Cible tactile : un lien nu dans un paragraphe fait 17 px de haut. On elargit
   la zone cliquable sans grossir le texte. */
.ebz-page .ebz-l-lien a,.ebz-page .ebz-retour a,.ebz-page .ebz-vfiche a{
  display:inline-flex; align-items:center; min-height:2.75rem;
  color:var(--ebz-ac-d); font-weight:700;
}

/* ---------- le bloc Premium de bas de page ---------- */
.ebz-page .ebz-prem{
  border:2px solid var(--ebz-or); border-radius:var(--ebz-r); overflow:hidden;
  margin-bottom:1.125rem; background:#fff;
}
.ebz-page .ebz-prem-tete{
  background:var(--ebz-ac-d); color:#fff; padding:1rem 1.125rem;
}
.ebz-page .ebz-prem-eyebrow{
  display:inline-block; background:var(--ebz-or); color:#3a2c00; font-size:.7rem;
  font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:.2rem .55rem; border-radius:999px; margin-bottom:.5rem;
}
.ebz-page .ebz-prem-tete h2{margin:0; font-size:1.2rem; font-weight:800; color:#fff;
  line-height:1.3}
.ebz-page .ebz-prem-corps{padding:1.125rem}
.ebz-page .ebz-prem-av{list-style:none; margin:0 0 1rem; padding:0; display:grid;
  gap:.5rem}
.ebz-page .ebz-prem-av li{
  position:relative; padding-left:1.6rem; font-size:.9375rem; line-height:1.5;
  color:var(--ebz-tx2);
}
.ebz-page .ebz-prem-av li::before{
  content:''; position:absolute; left:.25rem; top:.45rem; width:.4rem; height:.7rem;
  border-right:2px solid var(--ebz-ac); border-bottom:2px solid var(--ebz-ac);
  transform:rotate(45deg);
}
.ebz-page .ebz-prem-ex{
  background:var(--ebz-ac-l2); border:1px solid #a8d3dc; border-radius:var(--ebz-r-xs);
  padding:.875rem; margin:0 0 1rem;
}
.ebz-page .ebz-prem-ex-lib{
  font-size:.7rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ebz-ac-d); margin-bottom:.4rem;
}
.ebz-page .ebz-prem-actions{display:flex; flex-wrap:wrap; gap:.625rem}

/* ---------- etat des donnees ---------- */
.ebz-page .ebz-etat{
  font-size:.8125rem; color:var(--ebz-mu); margin:0 0 1rem; padding:.5rem .75rem;
  background:var(--ebz-bg-soft); border-radius:var(--ebz-r-xs);
  border:1px solid var(--ebz-bd-soft);
}
.ebz-page .ebz-vide{
  text-align:center; padding:2.5rem 1rem; color:var(--ebz-mu); font-size:.9375rem;
}

/* ---------- tableau des partants ---------- */
.ebz-page .ebz-part{border-collapse:collapse; width:100%; font-size:.85rem;
  min-width:min(30rem,100%)}
.ebz-page .ebz-part th,.ebz-page .ebz-part td{padding:.45rem .5rem;
  border-bottom:1px solid var(--ebz-bd-soft); text-align:left}
.ebz-page .ebz-part thead th{font-size:.7rem; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ebz-mu)}
.ebz-page .ebz-part td.n{text-align:right; white-space:nowrap}
.ebz-page .ebz-part .ch{font-weight:700}
.ebz-page .ebz-part tbody tr:last-child td{border-bottom:0}

/* ---------- cartes empilees sur telephone ---------- */
@media(max-width:34rem){
  .ebz-page .ebz-jour thead,.ebz-page .ebz-part thead{
    position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
    white-space:nowrap;
  }
  .ebz-page .ebz-jour,.ebz-page .ebz-jour tbody,.ebz-page .ebz-jour tr,
  .ebz-page .ebz-jour td,.ebz-page .ebz-part,.ebz-page .ebz-part tbody,
  .ebz-page .ebz-part tr,.ebz-page .ebz-part td{display:block; width:100%}
  .ebz-page .ebz-part{min-width:0}
  .ebz-page .ebz-jour caption,.ebz-page .ebz-part caption{display:block; width:100%;
    text-align:left; margin-bottom:.5rem}
  .ebz-page .ebz-jour tbody tr,.ebz-page .ebz-part tbody tr{
    border:1px solid var(--ebz-bd); border-radius:var(--ebz-r-xs);
    padding:.5rem .625rem; margin-bottom:.5rem;
  }
  .ebz-page .ebz-jour td,.ebz-page .ebz-part td{
    border:0; padding:.125rem 0; display:flex; justify-content:space-between;
    gap:.75rem; text-align:left;
  }
  .ebz-page .ebz-jour td::before,.ebz-page .ebz-part td::before{
    content:attr(data-lib); color:var(--ebz-mu); font-size:.8125rem; flex:none;
  }
  .ebz-page .ebz-jour td.n,.ebz-page .ebz-part td.n{text-align:right; white-space:nowrap}
  .ebz-page .ebz-jour td.ebz-jour-nom,.ebz-page .ebz-part td.ch{
    font-weight:800; font-size:1rem; padding-bottom:.375rem;
    border-bottom:1px solid var(--ebz-bd-soft); margin-bottom:.25rem;
  }
  .ebz-page .ebz-jour td.ebz-jour-nom::before,.ebz-page .ebz-part td.ch::before{content:none}
  /* Le doigt remplace la souris : la cible du code de course passe de
     48 x 24 px a 56 x 44 px. Mesure a 390 px de large. */
  .ebz-page .ebz-rcl{min-width:3.5rem; min-height:2.75rem; font-size:.9375rem}
}

/* ---------- contraintes systeme ---------- */
@media(prefers-reduced-motion:reduce){
  .ebz-page .ebz-l-chev,.ebz-page .ebz-det>summary::before{transition:none}
}
@media(forced-colors:active){
  .ebz-page .ebz-hero,.ebz-page .ebz-bande,.ebz-page .ebz-prem-tete{
    background:Canvas; color:CanvasText; border:1px solid;
  }
  .ebz-page .ebz-sig-item,.ebz-page .ebz-btn{border:1px solid; background:Canvas;
    color:CanvasText}
}
@media print{
  .ebz-page .ebz-hero,.ebz-page .ebz-bande,.ebz-page .ebz-prem-tete{
    background:#fff; color:#000; border:1px solid #000;
  }
  .ebz-page .ebz-hero h1,.ebz-page .ebz-prem-tete h2{color:#000}
  .ebz-page .ebz-btn{background:#fff; color:#000; border:1px solid #000}
  .ebz-page .ebz-l-corps{display:block}
  .ebz-page .ebz-det-corps{display:block}
}

/* ==========================================================================
   LA BARRE D'OUTILS : tri, filtres, compte, vue, export
   Vocabulaire visuel repris de .ebz-jour-t, que le lecteur a deja appris sur
   la barre des journees. Blanc au repos, plein #04586C en actif : contrastes
   mesures 7,07 et 8,02.
   ========================================================================== */
.ebz-page .ebz-outils{
  margin:0 0 1rem; padding:.75rem .875rem; border:1px solid var(--ebz-bd-soft);
  border-radius:var(--ebz-r-xs); background:var(--ebz-bg-soft);
}
.ebz-page .ebz-o-lib{
  font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ebz-mu); flex:none;
}
.ebz-page .ebz-o-tri{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  margin:0 0 .5rem}
/* Sous 52rem : un select natif de 44 px. Mesure, les six criteres en pastilles
   occupaient 168 px de haut a 390 px et 318 px a 300 px. */
.ebz-page .ebz-o-sel{
  /* base 6rem et non 10 : a 10, le select grandissait jusqu'a chasser le
     bouton Trier sur une deuxieme ligne, soit 44 px perdus a 390 px. */
  flex:1 1 6rem; min-width:0; min-height:2.75rem; padding:.4rem .6rem;
  border:1px solid var(--ebz-bd); border-radius:var(--ebz-r-xs); background:#fff;
  color:var(--ebz-tx); font-size:.9375rem; font-family:inherit;
}
.ebz-page .ebz-o-go{
  min-height:2.75rem; padding:.4rem .9rem; border:1px solid var(--ebz-ac-d);
  border-radius:var(--ebz-r-xs); background:var(--ebz-ac-d); color:#fff;
  font-weight:700; font-size:.875rem; font-family:inherit; cursor:pointer;
}
.ebz-page .ebz-o-pastilles{display:none}
.ebz-page .ebz-o-p,.ebz-page .ebz-o-f,.ebz-page .ebz-o-b{
  display:inline-flex; align-items:center; gap:.35rem; min-height:2.75rem;
  padding:.25rem .75rem; border:1px solid var(--ebz-bd); border-radius:999px;
  background:#fff; color:var(--ebz-ac-d); font-size:.8125rem; font-weight:700;
  text-decoration:none;
}
.ebz-page .ebz-o-p:hover,.ebz-page .ebz-o-f:hover,.ebz-page .ebz-o-b:hover{
  background:var(--ebz-ac-l2); color:var(--ebz-ac-d)}
.ebz-page .ebz-o-p.is-actif,.ebz-page .ebz-o-f.is-actif,.ebz-page .ebz-o-b.is-actif{
  background:var(--ebz-ac-d); border-color:var(--ebz-ac-d); color:#fff}
.ebz-page .ebz-o-p:focus-visible,.ebz-page .ebz-o-f:focus-visible,
.ebz-page .ebz-o-b:focus-visible,.ebz-page .ebz-o-sel:focus-visible,
.ebz-page .ebz-o-go:focus-visible,.ebz-page .ebz-o-som:focus-visible{
  outline:2px solid var(--ebz-ac); outline-offset:2px}
/* Le compte sur la pastille : 6,38 de contraste en etat actif, mesure. */
.ebz-page .ebz-o-f b{font-weight:800; color:var(--ebz-mu)}
.ebz-page .ebz-o-f.is-actif b{color:#cfeaf1}
/* Une pastille a zero cas reste visible, en pointilles et inerte : la masquer
   ferait croire que le fait n'existe plus. */
.ebz-page .ebz-o-f.is-vide{
  border-style:dashed; color:var(--ebz-mu); background:transparent; cursor:default}
.ebz-page .ebz-o-f2{border-color:var(--ebz-ac); background:var(--ebz-ac-l2)}
.ebz-page .ebz-o-raz{border-style:dashed}

/* La bande des filtres. Sur telephone, une seule ligne qui defile
   horizontalement : 44 px de haut au lieu des 368 px que prenaient les huit
   pastilles empilees, mesure a 390 px, et aucune pastille cachee. Au-dela de
   52rem elle passe a la ligne normalement. */
.ebz-page .ebz-o-filtres{display:flex; flex-wrap:wrap; align-items:center;
  gap:.5rem; margin:.25rem 0 0}
/* LES PASTILLES PASSENT A LA LIGNE, ELLES NE DEFILENT PAS. La bande a
   defilement horizontal tenait en 44 px de haut, mais elle cachait le reste :
   mesure a 390 px, 1 520 px de contenu dans 298 px de large, soit une pastille
   et demie visible sur neuf, et le degrade de bord se lisait comme une
   troncature. La regle de cette page interdit le texte tronque. Le retour a la
   ligne coute 368 px de haut a 390 px, une fois, au milieu de la page : c'est
   le prix pour que les neuf faits du jour soient tous lisibles d'un coup. */
.ebz-page .ebz-o-liste{
  display:flex; flex-wrap:wrap; gap:.375rem; flex:1 1 12rem; min-width:0;
  padding:.25rem .125rem;
  /* Trois rangees visibles, le reste par defilement VERTICAL. Trois mesures a
     390 px de large ont conduit ici : les neuf pastilles empilees prenaient
     402 px de haut et poussaient la barre a 586 px, soit 69 % d'un ecran de
     844 px ; la bande a defilement horizontal tenait en 44 px mais cachait
     1 222 px sur 1 520, et son degrade de bord se lisait comme une troncature ;
     un <details> ferme ne peut pas etre rouvert par CSS sur grand ecran, son
     contenu est masque par le slot interne et les pastilles disparaissaient.
     Le plafond de hauteur ne coupe aucun mot, ne cache rien de facon
     permanente, et ramene la barre a 316 px. */
  max-height:9.25rem; overflow-y:auto; overscroll-behavior:contain;
}
.ebz-page .ebz-o-liste:focus-visible{outline:2px solid var(--ebz-ac); outline-offset:2px}
.ebz-page .ebz-o-liste>*{flex:none}
.ebz-page .ebz-o-bilan{margin:.5rem 0 0; font-size:.875rem; color:var(--ebz-tx2)}
.ebz-page .ebz-o-bilan strong{color:var(--ebz-tx); font-weight:800}
.ebz-page .ebz-o-vue{display:flex; flex-wrap:wrap; gap:.375rem; margin:.625rem 0 0}
/* Pagination cote client [2026-08-21]. Cachee sans JavaScript (tout est alors
   affiche) ; revelee par .ebz-js, comme les autres controles personnels. */
.ebz-page .ebz-o-pag{display:none}
.ebz-js .ebz-page .ebz-o-pag{
  display:flex; flex-wrap:wrap; align-items:center; gap:.375rem; margin:.625rem 0 0;
}
.ebz-page .ebz-pag-plus{margin:.75rem 0 0; text-align:center}
.ebz-page .ebz-export{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin:.875rem 0 0;
  padding-top:.75rem; border-top:1px solid var(--ebz-bd-soft);
}

/* ---------- le tableau dense ---------- */
/* PAS d'overflow-x ici au-dela de 52rem. Poser overflow-x:auto calcule
   overflow-y a auto : le conteneur devient le bloc de defilement et le
   position:sticky de l'entete s'ancre sur LUI, pas sur la fenetre. Mesure a
   1280 px : apres 3 000 px de defilement, le top du <th> valait -3 000 px,
   l'entete etait donc perdu des le premier ecran, ce qui est exactement le cas
   pour lequel il avait ete rendu collant. Sous 52rem le tableau se replie en
   cartes, l'entete est masque, et le defilement lateral y sert encore. */
.ebz-page .ebz-densewrap{margin:0}
.ebz-page .ebz-densewrap:focus-visible{outline:2px solid var(--ebz-ac); outline-offset:2px}
.ebz-page .ebz-dense{width:100%; border-collapse:collapse; font-size:.875rem}
.ebz-page .ebz-dense th{
  position:sticky; top:0; z-index:2; background:#fff; text-align:left;
  padding:.5rem .5rem; border-bottom:2px solid var(--ebz-bd);
  font-size:.7rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ebz-mu); white-space:nowrap;
}
.ebz-page .ebz-dense td{padding:.4rem .5rem; border-bottom:1px solid var(--ebz-bd-soft);
  vertical-align:top}
.ebz-page .ebz-dense td.n{text-align:right; white-space:nowrap}
.ebz-page .ebz-dense th.n{text-align:right}
.ebz-page .ebz-dense tbody tr:hover{background:var(--ebz-ac-l2)}
.ebz-page .ebz-d-h{font-weight:700; color:var(--ebz-ac-d); white-space:nowrap}
.ebz-page .ebz-d-n{font-weight:700; overflow-wrap:anywhere}
.ebz-page .ebz-d-n a{color:var(--ebz-ac-d); text-decoration:none}
.ebz-page .ebz-d-n a:hover{text-decoration:underline}
.ebz-page .ebz-d-hip{color:var(--ebz-mu)}
.ebz-page .ebz-d-ec{font-weight:800; color:var(--ebz-tx)}
.ebz-page .ebz-dense td small{display:block; font-size:.7rem; font-weight:400;
  color:var(--ebz-mu); white-space:nowrap}

/* ---------- la rangee compacte ---------- */
.ebz-page .ebz-rangs{display:block}
.ebz-page .ebz-rang{
  display:grid; grid-template-columns:auto 1fr auto; gap:.125rem .625rem;
  grid-template-areas:"h n ec" "h m km" "t t t";
  padding:.5rem 0; border-bottom:1px solid var(--ebz-bd-soft);
}
.ebz-page .ebz-rg-h{grid-area:h; font-weight:700; color:var(--ebz-ac-d);
  white-space:nowrap; align-self:center}
.ebz-page .ebz-rg-n{grid-area:n; font-weight:800; overflow-wrap:anywhere}
.ebz-page .ebz-rg-n a{color:var(--ebz-tx); text-decoration:none}
.ebz-page .ebz-rg-n a:hover{color:var(--ebz-ac-d); text-decoration:underline}
.ebz-page .ebz-rg-ec{grid-area:ec; font-weight:800; text-align:right; white-space:nowrap}
.ebz-page .ebz-rg-m{grid-area:m; font-size:.8125rem; color:var(--ebz-mu)}
.ebz-page .ebz-rg-km{grid-area:km; font-size:.8125rem; color:var(--ebz-mu);
  text-align:right; white-space:nowrap}
.ebz-page .ebz-rg-t{grid-area:t; padding-top:.25rem}

/* ---------- l'etat vide ---------- */
.ebz-page .ebz-rien{
  padding:1rem; border:1px dashed var(--ebz-bd); border-radius:var(--ebz-r-xs);
  background:var(--ebz-bg-soft);
}
.ebz-page .ebz-rien h3{margin:0 0 .5rem; font-size:1.0625rem; color:var(--ebz-tx)}
.ebz-page .ebz-rien p{margin:0 0 .875rem; font-size:.9375rem; color:var(--ebz-tx2)}

/* ---------- au-dela de 52rem ---------- */
/* Le seuil est 52rem et non 34rem, et c'est mesure : le tableau a neuf
   colonnes exige 764 px et tient sans defilement lateral a partir de 826 px de
   fenetre. Le replier a 34rem produirait un defilement de 628 px dans un
   contenant de 482 px entre 544 et 826 px. */
@media(min-width:52rem){
  .ebz-page .ebz-o-sel,.ebz-page .ebz-o-go{display:none}
  .ebz-page .ebz-o-pastilles{display:flex; flex-wrap:wrap; gap:.375rem}
  .ebz-page .ebz-o-liste{flex:1 1 auto; max-height:none; overflow-y:visible}
}
@media(max-width:51.99rem){
  /* LE DOIGT REMPLACE LA SOURIS. Mesure a 390 px : le nom d'ecurie, seul lien
     de la rangee, faisait 17 px de haut dans la vue cartes et 26 px dans le
     tableau replie, sur 234 rangees. Au-dela de 52rem on est a la souris et
     26 px satisfont deja le seuil AA de 24 x 24 : la densite du tableau vaut
     mieux que 44 px inutiles la ou personne ne tape. */
  .ebz-page .ebz-rg-n a,.ebz-page .ebz-d-n a{
    display:inline-flex; align-items:center; min-height:2.75rem;
  }
  .ebz-page .ebz-densewrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .ebz-page .ebz-dense thead{
    position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
    white-space:nowrap;
  }
  .ebz-page .ebz-dense,.ebz-page .ebz-dense tbody,.ebz-page .ebz-dense tr,
  .ebz-page .ebz-dense td{display:block; width:100%}
  .ebz-page .ebz-dense tbody tr{
    border:1px solid var(--ebz-bd); border-radius:var(--ebz-r-xs);
    padding:.5rem .625rem; margin-bottom:.5rem;
  }
  .ebz-page .ebz-dense td{
    border:0; padding:.125rem 0; display:flex; justify-content:space-between;
    gap:.75rem; text-align:left;
  }
  .ebz-page .ebz-dense td::before{
    content:attr(data-lib); color:var(--ebz-mu); font-size:.8125rem; flex:none;
  }
  .ebz-page .ebz-dense td.n{text-align:right; white-space:nowrap}
  .ebz-page .ebz-dense td.ebz-d-n{
    font-weight:800; font-size:1rem; padding-bottom:.375rem;
    border-bottom:1px solid var(--ebz-bd-soft); margin-bottom:.25rem;
  }
  .ebz-page .ebz-dense td.ebz-d-n::before{content:none}
  .ebz-page .ebz-dense td.ebz-d-f{display:block}
  .ebz-page .ebz-dense td.ebz-d-f::before{display:block; margin-bottom:.25rem}
  .ebz-page .ebz-dense td small{display:inline; margin-left:.35rem}
}

/* La note d'apercu : elle explique pourquoi les trois lignes ne bougent pas
   quand on change le tri. Contraste mesure : 7,58 sur blanc. */
.ebz-page .ebz-apercu-note{
  margin:.5rem 0 0; font-size:.8125rem; color:var(--ebz-mu); line-height:1.5;
}

/* ---------- recherche, suivis, etoiles [2026-08-21] ------------------------- */
/* Controles PERSONNELS (aucune URL, aucun SEO), reveles par .ebz-js : sans
   JavaScript ils restent absents plutot qu'inertes. Zero !important : la
   specificite du selecteur suffit, conformement a la regle de cette feuille. */
.ebz-page .ebz-o-perso{display:none}
.ebz-js .ebz-page .ebz-o-perso{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin:.25rem 0 .5rem;
}
.ebz-page .ebz-o-rech-l{display:flex; align-items:center; gap:.4rem; flex:1 1 13rem; min-width:0}
.ebz-page .ebz-o-rech{
  flex:1 1 8rem; min-width:0; min-height:2.75rem; padding:.4rem .6rem;
  border:1px solid var(--ebz-bd); border-radius:var(--ebz-r-xs); background:#fff;
  color:var(--ebz-tx); font-size:.9375rem; font-family:inherit;
}
.ebz-page .ebz-o-suivis{cursor:pointer}
.ebz-page .ebz-o-suivis .ebz-star-ic{width:.95rem; height:.95rem; fill:currentColor; stroke:none; flex:none}

/* L'etoile de suivi, dans le tableau dense et les cartes. Contour gris muet
   (7:1 sur blanc) quand non suivi ; plein or a bord ambre quand suivi, l'etat
   se lit donc a la FORME (plein/contour) autant qu'a la couleur. */
.ebz-page .ebz-star{display:none}
.ebz-js .ebz-page .ebz-star{
  display:inline-flex; align-items:center; justify-content:center; vertical-align:middle;
  width:1.9rem; height:1.9rem; margin-right:.3rem; padding:.2rem; flex:none;
  border:0; background:none; border-radius:6px; cursor:pointer; color:var(--ebz-mu);
  line-height:0;
}
.ebz-page .ebz-star-ic{width:1.15rem; height:1.15rem; fill:none; stroke:currentColor;
  stroke-width:1.5; stroke-linejoin:round}
.ebz-js .ebz-page .ebz-star:hover{background:var(--ebz-ac-l); color:var(--ebz-ac-d)}
.ebz-page .ebz-star.is-on{color:#a16207}
.ebz-page .ebz-star.is-on .ebz-star-ic{fill:var(--ebz-or); stroke:#a16207; stroke-width:1}
.ebz-js .ebz-page .ebz-star:focus-visible{outline:2px solid var(--ebz-ac); outline-offset:1px}

/* Lignes masquees par la recherche ou par « mes suivis ». Specificite (0,3,2)
   pour battre l'affichage table/carte sans recourir a !important. */
.ebz-page .ebz-dense tbody tr.ebz-off,
.ebz-page .ebz-rangs .ebz-rang.ebz-off{display:none}