/* =============================================================================
   landing.css - page d'accueil turf.bzh
   -----------------------------------------------------------------------------
   Preferences : classes prefixees .tbz-lp-* exclusivement (anti-conflit avec
   Bootstrap et le CSS global), variables --tbz-ag-* du systeme 2027 reprises
   telles quelles depuis assets/css/agent.css, mobile-first.
   Aucune dependance : ni Tabulator, ni flatpickr, ni Tippy.
   ========================================================================== */

.tbz-lp {
  --lp-bg:      var(--tbz-ag-bg, #f8fafc);
  --lp-soft:    var(--tbz-ag-bg-soft, #f1f5f9);
  --lp-card:    var(--tbz-ag-card, #fff);
  --lp-card2:   var(--tbz-ag-card-2, #fbfcfd);
  --lp-bd:      var(--tbz-ag-border, #e5e7eb);
  --lp-bd-soft: var(--tbz-ag-border-soft, #eef0f3);
  --lp-ink:     var(--tbz-ag-text, #0f172a);
  --lp-ink2:    var(--tbz-ag-text-2, #1e293b);
  --lp-mut:     var(--tbz-ag-muted, #64748b);
  /* #64748b passe sur blanc (4,8:1) mais tombe a 4,3:1 sur les fonds teintes
     (#f1f5f9, #ecf7fa). Variante durcie pour le petit texte pose dessus. */
  --lp-mut-aa:  #55637a;
  /* #94a3b8 donne 2,6:1 sur blanc, sous le seuil AA de 4,5:1 pour du texte
     de 9 a 11 px. Le systeme garde sa valeur, la landing la durcit. */
  --lp-mut2:    #475569;
  --lp-acc:     var(--tbz-ag-accent, #0a7c91);
  --lp-acc-d:   var(--tbz-ag-accent-d, #075d6e);
  --lp-acc-l:   var(--tbz-ag-accent-l2, #ecf7fa);
  --lp-ok:      #047857;  /* #059669 = 3,4:1, insuffisant pour les libelles de 9,5 px */
  --lp-ok-bg:   var(--tbz-ag-success-bg, #ecfdf5);
  --lp-ok-bd:   var(--tbz-ag-success-bd, #a7f3d0);
  --lp-warn:    var(--tbz-ag-warn, #b45309);
  --lp-danger:  var(--tbz-ag-danger, #b91c1c);
  --lp-r-xs:    var(--tbz-ag-r-xs, 6px);
  --lp-r-sm:    var(--tbz-ag-r-sm, 10px);
  --lp-r-md:    var(--tbz-ag-r-md, 14px);
  --lp-pill:    var(--tbz-ag-r-pill, 999px);
  --lp-sh-xs:   var(--tbz-ag-sh-xs, 0 1px 2px 0 rgba(15,23,42,.04));
  --lp-sh-sm:   var(--tbz-ag-sh-sm, 0 1px 3px 0 rgba(15,23,42,.06));
  --lp-sh-md:   var(--tbz-ag-sh-md, 0 4px 6px -1px rgba(15,23,42,.07));
  --lp-ease:    var(--tbz-ag-ease-out, cubic-bezier(.16,1,.3,1));
  --lp-font:    var(--tbz-ag-font, 'Inter', 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif);

  background: var(--lp-bg);
  font-family: var(--lp-font);
  color: var(--lp-ink);
  letter-spacing: -.005em;
}
.tbz-lp *, .tbz-lp *::before, .tbz-lp *::after { box-sizing: border-box; }
/* L'attribut hidden doit primer sur les display: flex/grid poses plus bas.
   Sans cette regle, les deux vues du programme s'affichent en meme temps :
   la regle par defaut du navigateur ([hidden]{display:none}) perd contre un
   selecteur de classe. Specificite augmentee plutot que !important. */
.tbz-lp [hidden] { display: none; }
.tbz-lp-wrap { max-width: 1240px; margin: 0 auto; padding: 0 16px 40px; }

/* ── 1. Les deux lignes ──────────────────────────────────────────────────── */
.tbz-lp-intro { padding: 14px 0 11px; border-bottom: 1px solid var(--lp-bd-soft); }
.tbz-lp-p1 { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--lp-ink2); }
.tbz-lp-p1 b { font-weight: 650; color: var(--lp-ink); }
.tbz-lp-p1 a { color: var(--lp-acc); font-weight: 600; text-decoration: none; white-space: nowrap; }
.tbz-lp-p1 a:hover { text-decoration: underline; }
.tbz-lp-p2 { margin: 9px 0 0; font-size: 13.5px; line-height: 1.45; display: flex;
  align-items: baseline; gap: 9px; flex-wrap: wrap; }
.tbz-lp-p2 a { color: var(--lp-ink2); font-weight: 600; text-decoration: none; }
.tbz-lp-p2 a:hover { color: var(--lp-acc); }
.tbz-lp-tag { flex: 0 0 auto; background: #fffbeb; border: 1px solid #fde68a; color: #78350f;
  border-radius: var(--lp-pill); padding: 2px 10px; font-size: 11.5px; font-weight: 700; }

/* ── Sections ────────────────────────────────────────────────────────────── */
.tbz-lp-sec { margin: 24px 0 0; }
.tbz-lp-sech { display: flex; align-items: baseline; gap: 12px; margin: 0 0 12px; flex-wrap: wrap; }
.tbz-lp-sech h2 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.tbz-lp-meta { font-size: 12.5px; color: var(--lp-mut); font-variant-numeric: tabular-nums; }
/* Cible tactile. Mesure : 15 px de haut. Ce ne sont pas des liens dans une
   phrase, ils ne beneficient pas de l'exception « inline » du critere WCAG
   2.5.8 : il leur faut 24 px. Le padding vertical d'un element aligne sur la
   ligne de base ne deplace pas ses voisins dans .tbz-lp-sech, qui est en
   align-items: baseline. */
.tbz-lp-more { margin-left: auto; font-size: 12.5px; color: var(--lp-acc); font-weight: 600;
  text-decoration: none; padding: 5px 0; }
.tbz-lp-more:hover { text-decoration: underline; }
.tbz-lp-vide { font-size: 13.5px; color: var(--lp-mut); padding: 14px 2px; margin: 0; }
.tbz-lp-soir { background: var(--lp-acc-l); border: 1px solid #b6e3ec; border-radius: var(--lp-r-sm);
  padding: 12px 14px; margin: 0 0 10px; font-size: 13.5px; line-height: 1.55; color: var(--lp-ink2); }
.tbz-lp-soir b { color: var(--lp-acc-d); }

.tbz-lp-tabs { display: inline-flex; margin-left: auto; background: var(--lp-soft);
  border: 1px solid var(--lp-bd); border-radius: var(--lp-pill); padding: 3px; gap: 2px; }
.tbz-lp-tabs button { border: 0; background: transparent; color: var(--lp-mut-aa); font: inherit;
  font-size: 12.5px; font-weight: 600; padding: 5px 13px; border-radius: var(--lp-pill);
  cursor: pointer; transition: .16s var(--lp-ease); }
.tbz-lp-tabs button:hover { color: var(--lp-ink2); }
.tbz-lp-tabs button.is-on { background: #fff; color: var(--lp-acc); box-shadow: var(--lp-sh-xs); }
.tbz-lp-tabs button:focus-visible { outline: 2px solid var(--lp-acc); outline-offset: 2px; }

/* ── 2a. Vue chronologique ───────────────────────────────────────────────── */
.tbz-lp-fil { display: flex; flex-direction: column; gap: 7px; }
.tbz-lp-sep { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--lp-mut2); margin: 9px 0 1px; padding-left: 2px; }
.tbz-lp-row { display: flex; align-items: center; gap: 12px; background: var(--lp-card);
  border: 1px solid var(--lp-bd); border-radius: var(--lp-r-sm); padding: 10px 13px;
  text-decoration: none; color: inherit; transition: .16s var(--lp-ease); }
.tbz-lp-row:hover { border-color: var(--lp-acc); box-shadow: var(--lp-sh-md);
  transform: translateY(-1px); color: inherit; }
.tbz-lp-row:focus-visible { outline: 2px solid var(--lp-acc); outline-offset: 2px; }
.tbz-lp-row.tbz-lp-st-terminee { background: var(--lp-card2); }
.tbz-lp-row.tbz-lp-st-terminee .tbz-lp-h,
.tbz-lp-row.tbz-lp-st-terminee .tbz-lp-nom { color: var(--lp-mut); }
.tbz-lp-row.tbz-lp-st-annulee { opacity: .6; }
.tbz-lp-row.is-quinte { border-color: #f59e0b; background: linear-gradient(90deg, #fffbeb 0%, #fff 55%); }

.tbz-lp-h { font-weight: 750; font-size: 15.5px; font-variant-numeric: tabular-nums;
  min-width: 52px; letter-spacing: -.02em; }
.tbz-lp-rc { background: var(--lp-soft); border: 1px solid var(--lp-bd); border-radius: var(--lp-r-xs);
  font-size: 11.5px; font-weight: 700; padding: 3px 7px; color: var(--lp-ink2); white-space: nowrap;
  flex: 0 0 auto; }
/* La cellule R/C fait 53 px sur toutes les lignes, sauf sur celle du Quinté
   ou le badge Q+ la porte a 83 px : le nom de l'epreuve y demarre a 289 px au
   lieu de 259, seul decrochage de toute la liste, et sur la ligne la plus
   regardee. On reserve la place du badge partout au-dessus de 1180 px. Sous
   cette largeur la cellule reprend sa taille au contenu, la place y est trop
   rare pour la reserver. Mesure : 84 px couvrent « R10 C12 » plus le badge. */
@media (min-width: 1180px) {
  .tbz-lp-rc { flex: 0 0 84px; box-sizing: border-box; }
}
.tbz-lp-q { display: inline-block; background: #f59e0b; color: #3b2000; font-size: 10px;
  font-weight: 800; border-radius: 4px; padding: 1px 4px; margin-left: 5px; }
.tbz-lp-m { min-width: 0; flex: 1 1 150px; }
.tbz-lp-nom { display: block; font-weight: 650; font-size: 14px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.tbz-lp-sub { display: block; font-size: 11.5px; color: var(--lp-mut); margin-top: 2px;
  font-variant-numeric: tabular-nums; }
/* La colonne de lisibilite. Sur une ligne de bureau de 1208 px, la cellule
   du nom occupait 861 px et laissait environ 460 px de vide avant le favori.
   On y met l'indice d'ouverture, qui est un indicateur maison et qui repond
   exactement a la question posee en parcourant la liste. */
.tbz-lp-diff { display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  min-width: 108px; flex: 0 0 auto; }
.tbz-lp-diff b { font-size: 12.5px; font-weight: 700; white-space: nowrap; line-height: 1.2; }
.tbz-lp-diff-f b { color: #047857; }
.tbz-lp-diff-a b { color: #0e7490; }
.tbz-lp-diff-d b { color: #b45309; }
.tbz-lp-diff-x b { color: var(--lp-danger); }
@media (max-width: 900px) { .tbz-lp-diff { display: none; } }

/* Largeur FIXE et non minimale : avec min-width, une arrivee a cinq numeros
   depassait la colonne du favori et decalait la Lisibilite de dix-sept pixels
   d'une ligne a l'autre. Trois abscisses differentes sur la meme liste se
   voient immediatement. Mesure au navigateur : la plus large des arrivees
   tient en 124 px. */
.tbz-lp-fav, .tbz-lp-arr { display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  flex: 0 0 124px; width: 124px; min-width: 0; }

.tbz-lp-lbl { font-size: 9.5px; color: var(--lp-mut2); text-transform: uppercase;
  letter-spacing: .06em; font-weight: 700; line-height: 1; }
.tbz-lp-arr .tbz-lp-lbl { color: var(--lp-ok); }
.tbz-lp-fav b, .tbz-lp-arr b { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
  line-height: 1.2; white-space: nowrap; }
.tbz-lp-arr b { font-size: 13.5px; letter-spacing: .02em; overflow: hidden;
  text-overflow: ellipsis; max-width: 100%; }
.tbz-lp-fav i { font-style: normal; display: inline-block; background: var(--lp-ink); color: #fff;
  border-radius: 5px; padding: 1px 6px; margin-right: 5px; font-size: 12.5px; }
/* « 12 5,1 » se lisait comme un seul nombre, et personne ne devinait lequel
   etait le numero et lequel la cote. « 12 à 5,1 » est la facon dont un
   turfiste le dit a voix haute : deux caracteres, plus aucune ambiguite. */
.tbz-lp-fav em, .tbz-lp-tfav em.tbz-lp-a { font-style: normal; font-weight: 400;
  font-size: 10.5px; color: var(--lp-mut-aa); margin: 0 3px 0 0; }
.tbz-lp-tfav i + em { font-style: normal; font-weight: 400; font-size: 9.5px;
  color: var(--lp-mut-aa); margin: 0 2px 0 0; text-transform: none;
  letter-spacing: 0; display: inline; }
.tbz-lp-etat { min-width: 62px; text-align: right; font-size: 11.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--lp-danger); }
.tbz-lp-st-en_cours .tbz-lp-etat { color: var(--lp-warn); }
.tbz-lp-st-annulee .tbz-lp-etat { color: var(--lp-mut); }

/* ── 2b. Vue en grille ───────────────────────────────────────────────────── */
/* La grille est contenue et defile : sans cela, huit reunions de dix courses
   poussent tout le reste de la page hors de vue. Hauteur liee a la fenetre,
   plafonnee pour les grands ecrans.
   [30/07/2026] overscroll-behavior: contain a ete retire. C'est la propriete
   qui empeche le geste de repartir sur la page une fois le bloc arrive au
   bout, et elle rendait la molette captive : mesure sur la page rendue, huit
   crans de molette pointeur pose dans le bloc faisaient avancer la page de
   zero pixel. Le bloc garde sa hauteur et son ascenseur, il ne garde plus le
   geste. */
.tbz-lp-grille { max-height: min(58vh, 540px); overflow-y: auto;
  padding-right: 4px; scrollbar-width: thin; }
.tbz-lp-grille::-webkit-scrollbar { width: 8px; }
.tbz-lp-grille::-webkit-scrollbar-thumb { background: var(--lp-mut2); border-radius: 4px; }
.tbz-lp-reu { background: var(--lp-card); border: 1px solid var(--lp-bd);
  border-radius: var(--lp-r-sm); margin-bottom: 8px; overflow: hidden; }
.tbz-lp-reu.is-annulee { opacity: .62; }
.tbz-lp-reuh { display: flex; align-items: center; gap: 10px; padding: 9px 13px;
  border-bottom: 1px solid var(--lp-bd-soft); background: var(--lp-card2); }
.tbz-lp-rnum { background: var(--lp-acc); color: #fff; font-weight: 700; font-size: 12px;
  border-radius: var(--lp-r-xs); padding: 3px 8px; }
.tbz-lp-rhip { font-weight: 650; font-size: 14px; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.tbz-lp-rmeta { font-size: 11.5px; color: var(--lp-mut); margin-left: auto; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.tbz-lp-scroll { display: flex; gap: 7px; padding: 10px 13px; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.tbz-lp-tile { scroll-snap-align: start; flex: 0 0 auto; min-width: 116px; background: var(--lp-card);
  border: 1px solid var(--lp-bd); border-radius: var(--lp-r-xs); padding: 8px 10px;
  text-decoration: none; color: inherit; position: relative; transition: .16s var(--lp-ease); }
.tbz-lp-tile:hover { border-color: var(--lp-acc); box-shadow: var(--lp-sh-sm);
  transform: translateY(-1px); color: inherit; }
.tbz-lp-tile:focus-visible { outline: 2px solid var(--lp-acc); outline-offset: 2px; }
.tbz-lp-tile.is-quinte { border-color: #f59e0b; background: #fffbeb; }
.tbz-lp-thead { display: flex; align-items: center; gap: 6px; padding-right: 14px; }
.tbz-lp-thead b { font-weight: 750; font-size: 13.5px; }
.tbz-lp-thead em { font-style: normal; font-size: 12.5px; color: var(--lp-mut);
  font-variant-numeric: tabular-nums; margin-left: auto; }
.tbz-lp-tsub { display: block; font-size: 11px; color: var(--lp-mut); margin-top: 4px; }
.tbz-lp-tfav { display: block; margin-top: 5px; padding-top: 5px; border-top: 1px dashed var(--lp-bd);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; min-height: 34px; }
/* « Favori » ecrit en toutes lettres : un numero et un nombre cote a cote ne
   se comprennent pas seuls. */
.tbz-lp-tfav em { font-style: normal; display: block; font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--lp-mut2); margin-bottom: 1px; }
.tbz-lp-tfav i { font-style: normal; background: var(--lp-ink); color: #fff; border-radius: 4px;
  padding: 0 5px; margin-right: 4px; font-size: 11px; }
.tbz-lp-tarr { display: block; margin-top: 5px; padding-top: 5px;
  border-top: 1px dashed var(--lp-ok-bd); font-size: 11.5px; font-weight: 700; color: #065f46;
  font-variant-numeric: tabular-nums; min-height: 34px; }
.tbz-lp-dot { width: 8px; height: 8px; border-radius: 50%; position: absolute; top: 9px; right: 8px; }
.tbz-lp-st-a_venir  .tbz-lp-dot { background: #28a745; }
.tbz-lp-st-en_cours .tbz-lp-dot { background: #ffc107; box-shadow: 0 0 0 3px rgba(255,193,7,.28); }
.tbz-lp-st-terminee .tbz-lp-dot { background: #dc3545; }
.tbz-lp-st-annulee  .tbz-lp-dot { background: var(--lp-mut2); }

/* ── 3. Quinté+ ──────────────────────────────────────────────────────────── */
/* L'image du Quinte est produite en 1200 x 630 pour Google Discover.
   Deux essais avant celui-ci. Le premier l'affichait en 320 x 340 avec
   object-fit: cover : rognee de plus de la moitie de sa largeur. Le second
   respectait le ratio natif mais laissait une large zone grise sous elle,
   la carte etant plus haute que l'image.
   Choix retenu : l'image REMPLIT toute la colonne, quitte a n'en montrer
   qu'une bande. object-position: center 42 % garde la ligne des chevaux,
   qui est ce qui compte dans une photo de course. La colonne est etroite
   (300 px) pour que la bande conservee reste large et lisible. */
.tbz-lp-q5 { display: grid; grid-template-columns: 300px 1fr; background: var(--lp-card);
  border: 1px solid var(--lp-bd); border-radius: var(--lp-r-md); overflow: hidden;
  box-shadow: var(--lp-sh-sm); }
.tbz-lp-q5img { background: var(--lp-soft); position: relative; min-height: 100%; }
.tbz-lp-q5img img { display: block; position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%; }
.tbz-lp-q5b { padding: 16px 18px; min-width: 0; }
.tbz-lp-q5top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 7px; }
.tbz-lp-q5rc { background: #f59e0b; color: #3b2000; font-weight: 800; font-size: 11.5px;
  border-radius: var(--lp-r-xs); padding: 3px 8px; }
.tbz-lp-q5h { font-size: 12.5px; color: var(--lp-mut); font-variant-numeric: tabular-nums; }
.tbz-lp-q5t { margin: 0 0 5px; font-size: 19px; font-weight: 750; letter-spacing: -.022em;
  line-height: 1.25; }
.tbz-lp-q5meta { margin: 0 0 11px; font-size: 12.5px; color: var(--lp-mut); }
.tbz-lp-q5p { font-size: 14px; line-height: 1.62; color: var(--lp-ink2); margin-bottom: 13px; }
.tbz-lp-q5p p { margin: 0 0 8px; }
.tbz-lp-q5p p:last-child { margin-bottom: 0; }
.tbz-lp-q5p a { color: var(--lp-acc); font-weight: 600; }

.tbz-lp-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.tbz-lp-b1, .tbz-lp-b2 { border-radius: var(--lp-r-sm); padding: 9px 15px; font-size: 13.5px;
  font-weight: 650; text-decoration: none; display: inline-block; transition: .16s var(--lp-ease); }
.tbz-lp-b1 { background: var(--lp-acc); color: #fff; }
.tbz-lp-b1:hover { background: var(--lp-acc-d); color: #fff; }
.tbz-lp-b2 { background: #fff; color: var(--lp-ink2); border: 1px solid var(--tbz-ag-border-strong, #d1d5db); }
.tbz-lp-b2:hover { border-color: var(--lp-acc); color: var(--lp-acc); }

/* ── Adaptations ─────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  /* En colonne unique, l'image reprend sa hauteur naturelle : il n'y a plus
     de texte a cote dont il faudrait egaler la hauteur, donc plus de raison
     de rogner. On plafonne simplement pour ne pas manger l'ecran. */
  .tbz-lp-q5 { grid-template-columns: 1fr; }
  .tbz-lp-q5img { min-height: 0; }
  .tbz-lp-q5img img { position: static; height: auto; aspect-ratio: 1200 / 630;
    max-height: 240px; object-position: center 42%; }
}
/* Sous 700 px, l'illustration du Quinte est retiree : elle coute 210 px de
   hauteur et n'aide en rien a decider. Le texte remonte d'autant. */
@media (max-width: 700px) { .tbz-lp-q5img { display: none; } }
@media (max-width: 640px) {
  .tbz-lp-wrap { padding: 0 12px 32px; }
  .tbz-lp-intro { padding: 11px 0 9px; }
  .tbz-lp-p1 { font-size: 13px; line-height: 1.45; }
  .tbz-lp-p2 { font-size: 12.5px; gap: 7px; margin-top: 7px; }
  .tbz-lp-sec { margin: 18px 0 0; }
  .tbz-lp-sech h2 { font-size: 17px; }
  .tbz-lp-tabs { margin-left: 0; width: 100%; }
  .tbz-lp-tabs button { flex: 1; padding: 6px 8px; }

  /* La ligne passe sur deux rangs : identite au-dessus, favori et etat
     en dessous. Le nom garde une largeur plancher pour forcer le retour a
     la ligne plutot que de s'ecraser. */
  .tbz-lp-row { gap: 9px; padding: 9px 10px; flex-wrap: wrap; }
  .tbz-lp-h { font-size: 14.5px; min-width: 44px; }
  .tbz-lp-rc { font-size: 11px; padding: 2px 6px; }
  .tbz-lp-m { flex: 1 1 142px; min-width: 142px; }
  .tbz-lp-nom { font-size: 13px; }
  /* Sous 640 px, le libelle de la course est sacrifie : l'hippodrome et les
     caracteristiques suffisent a decider, et la ligne reste sur un rang. */
  .tbz-lp-lib { display: none; }
  .tbz-lp-fav { flex: 0 0 auto; flex-direction: row; align-items: baseline; gap: 6px;
    min-width: 0; margin-left: 53px; order: 5; }
  .tbz-lp-fav b { font-size: 13px; }
  .tbz-lp-arr { flex: 1 0 100%; align-items: flex-start; padding-left: 53px; min-width: 0;
    margin-top: 1px; order: 5; }
  .tbz-lp-etat { order: 6; margin-left: auto; min-width: 0; }
  .tbz-lp-q5b { padding: 13px 14px; }
  .tbz-lp-q5t { font-size: 17px; }
  .tbz-lp-q5p { font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .tbz-lp * { transition: none !important; animation: none !important; }
  .tbz-lp-row:hover, .tbz-lp-tile:hover { transform: none; }
}

/* ── Lien Direct, légende, extrait ───────────────────────────────────────── */
.tbz-lp-live { display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
  font-size: 12.5px; font-weight: 650; color: var(--lp-danger); text-decoration: none;
  border: 1px solid #fecaca; background: #fef2f2; border-radius: var(--lp-pill); padding: 4px 12px;
  transition: .16s var(--lp-ease); }
.tbz-lp-live:hover { background: #fee2e2; color: var(--lp-danger); }
.tbz-lp-livedot { width: 7px; height: 7px; border-radius: 50%; background: var(--lp-danger);
  box-shadow: 0 0 0 3px rgba(185,28,28,.16); }
.tbz-lp-live + .tbz-lp-tabs { margin-left: 10px; }

.tbz-lp-legende { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin: 8px 2px 0;
  font-size: 11.5px; color: var(--lp-mut); }
.tbz-lp-legende span { display: inline-flex; align-items: center; gap: 5px; }
.tbz-lp-lg { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.tbz-lp-lg1 { background: #28a745; } .tbz-lp-lg2 { background: #ffc107; } .tbz-lp-lg3 { background: #dc3545; }
.tbz-lp-lgf b { color: var(--lp-ink2); font-weight: 700; }
/* Le libelle porte desormais la date (« Lire l'analyse complete du Quinté+ du
   mardi 28 juillet 2026 »), soit une quarantaine de signes de plus : en
   nowrap il debordait de 156 px a 320 px. Il suit maintenant le fil du
   paragraphe, ce qui est sa place : c'est une fin de phrase, pas un bouton. */
.tbz-lp-suite { color: var(--lp-acc); font-weight: 600; text-decoration: none; }
.tbz-lp-suite:hover { text-decoration: underline; }

/* ── Autour du Quinté+ ───────────────────────────────────────────────────
   Six portes d'entree pour le visiteur le plus qualifie de la page. */
/* Le bloc porte un titre : sans lui, « La sagesse des foules du Quinté+ »
   et « La sagesse des foules » plus bas dans la page se ressemblaient trop. */
.tbz-lp-qmore { margin-top: 12px; }
.tbz-lp-qmoret { display: block; margin: 0 2px 8px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--lp-mut-aa); }
/* Six cartes nues apres l'analyse se lisaient comme du maillage interne. La
   phrase les transforme en menu de questions. */
.tbz-lp-qlt { margin: 0 2px 9px; font-size: 13.5px; line-height: 1.5; color: var(--lp-mut); }
.tbz-lp-qlinks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tbz-lp-qlinks a { display: block; background: var(--lp-card); border: 1px solid var(--lp-bd);
  border-radius: var(--lp-r-sm); padding: 10px 13px; text-decoration: none; color: inherit;
  transition: .16s var(--lp-ease); }
.tbz-lp-qlinks a:hover { border-color: var(--lp-acc); box-shadow: var(--lp-sh-sm); color: inherit; }
.tbz-lp-qlinks a:focus-visible { outline: 2px solid var(--lp-acc); outline-offset: 2px; }
.tbz-lp-qlinks b { display: block; font-size: 13.5px; font-weight: 650; letter-spacing: -.012em;
  color: var(--lp-ink); }
.tbz-lp-qlinks span { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.4;
  color: var(--lp-mut-aa); }
@media (max-width: 900px) { .tbz-lp-qlinks { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tbz-lp-qlinks { grid-template-columns: 1fr; } }

/* La mention d'arret de mesure, sous un chiffre cite. */
.tbz-lp-pxs2 { margin: 0 0 8px; font-size: 11px; line-height: 1.45; color: var(--lp-mut-aa); }

/* ── Consensus des modèles ───────────────────────────────────────────────── */
.tbz-lp-cons { border: 1px solid var(--lp-bd); border-radius: var(--lp-r-sm); overflow: hidden;
  margin-bottom: 13px; }
.tbz-lp-consh { background: var(--lp-acc-l); padding: 6px 11px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--lp-acc-d);
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tbz-lp-consh span { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--lp-mut-aa);
  font-size: 10.5px; white-space: nowrap; }
/* Une ligne d'en-tete pour nommer les colonnes. La cote etait affichee sans
   libelle : le lecteur voyait un nombre et devait deviner. */
/* En-tete de colonnes. Classes DEDIEES et non celles des lignes de donnees :
   .tbz-lp-consb est une barre de 64 x 5 px en overflow: hidden, y poser un
   libelle le tronquait a une bande de cinq pixels de haut. Les largeurs
   ci-dessous recopient exactement celles des lignes pour que les colonnes
   tombent l'une sous l'autre. Le libelle est « Borda » et non « Points
   Borda » : soixante-quatre pixels ne contiennent pas douze caracteres, et
   le bandeau juste au-dessus dit deja « points Borda ». */
.tbz-lp-consth { display: flex; align-items: center; gap: 10px; padding: 6px 11px 5px;
  border-bottom: 1px solid var(--lp-bd-soft); font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--lp-mut-aa); }
.tbz-lp-cthn   { min-width: 26px; text-align: center; flex: 0 0 auto; }
.tbz-lp-cthnom { flex: 1; min-width: 0; }
.tbz-lp-cthb   { width: 88px; flex: 0 0 auto; text-align: right; }
.tbz-lp-cthc   { min-width: 34px; flex: 0 0 auto; text-align: right; }

.tbz-lp-consr { display: flex; align-items: center; gap: 10px; padding: 6px 11px;
  border-top: 1px solid var(--lp-bd-soft); font-size: 13px; }
.tbz-lp-consn { background: var(--lp-ink); color: #fff; font-weight: 700; border-radius: 5px;
  padding: 1px 7px; font-size: 12px; font-variant-numeric: tabular-nums; min-width: 26px;
  text-align: center; }
.tbz-lp-consnom { font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
/* La barre porte son nombre. Elle faisait 64 x 5 px sans graduation, sans
   nombre et sans unite : cinq traits de longueurs proches (100, 86, 83, 70 et
   50 % du premier) dont on ne pouvait rien tirer. La colonne passe a 88 px,
   soit 44 px de barre et 36 px de nombre, et l'en-tete « Borda » suit. */
.tbz-lp-consb { flex: 0 0 88px; width: 88px; height: auto; background: none;
  overflow: visible; display: flex; align-items: center; gap: 8px; }
.tbz-lp-consb i { display: block; flex: 0 0 44px; height: 5px; border-radius: 3px;
  background: var(--lp-soft); position: relative; overflow: hidden; }
.tbz-lp-consb i::before { content: ""; position: absolute; inset: 0 auto 0 0;
  width: 100%; border-radius: 3px;
  background: var(--tbz-ag-accent-grad, linear-gradient(135deg,#0a7c91,#06b6d4)); }
.tbz-lp-consb em { font-style: normal; margin-left: auto; font-size: 11.5px;
  font-weight: 700; color: var(--lp-mut-aa); font-variant-numeric: tabular-nums; }
.tbz-lp-consc { font-size: 11.5px; color: var(--lp-mut); font-variant-numeric: tabular-nums;
  min-width: 34px; text-align: right; }

/* ── ChatBZH ─────────────────────────────────────────────────────────────── */
/* Contraste. Le fond est un degrade : les audits qui lisent backgroundColor
   le voient transparent et ne signalent rien. Mesure a l'extremite claire du
   degrade (#0a7c91), voile blanc de la puce compose par-dessus :
   .tbz-lp-chat p 3,68 | .tbz-lp-chip 3,38 | .tbz-lp-chatf 3,68. Il en faut
   4,5 pour du texte de 11,5 a 13,5 px. On assombrit le degrade et on remonte
   les deux gris clairs. Le bloc reste exactement aussi sombre-turquoise, il y
   gagne meme en profondeur. */
.tbz-lp-chat { background: linear-gradient(135deg, #08414f 0%, #0b5566 100%);
  border-radius: var(--lp-r-md); padding: 20px 22px; color: #fff; }
.tbz-lp-chat h2 { margin: 0 0 4px; font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.tbz-lp-chat p { margin: 0 0 13px; font-size: 13.5px; color: #d8eefb; line-height: 1.5; }
.tbz-lp-chatin { display: flex; gap: 8px; background: #fff; border-radius: var(--lp-r-sm);
  padding: 6px 6px 6px 14px; align-items: center; box-shadow: var(--lp-sh-md); }
.tbz-lp-chatin input { flex: 1; border: 0; outline: 0; font: inherit; font-size: 14px;
  color: var(--lp-ink); background: transparent; min-width: 0; }
.tbz-lp-chatin button { background: var(--lp-acc); color: #fff; border: 0; border-radius: var(--lp-r-xs);
  padding: 9px 16px; font: inherit; font-size: 13.5px; font-weight: 650; cursor: pointer;
  white-space: nowrap; transition: .16s var(--lp-ease); }
.tbz-lp-chatin button:hover { background: var(--lp-acc-d); }
.tbz-lp-chips { display: flex; gap: 7px; margin-top: 11px; flex-wrap: wrap; }
.tbz-lp-chip { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.30);
  color: #e0f2fe; border-radius: var(--lp-pill); padding: 6px 12px; font-size: 12.5px;
  text-decoration: none; transition: .16s var(--lp-ease); }
.tbz-lp-chip:hover { background: rgba(255,255,255,.24); color: #fff; }
/* Contour blanc et non --lp-acc : #0a7c91 serait quasi invisible sur le
   degrade #08414f - #0b5566 du bloc. */
.tbz-lp-chip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* [30/07/2026] Cette regle n'avait aucun effet : .tbz-lp-chat p (declare plus
   haut, specificite 0,1,1) bat .tbz-lp-chatf (0,1,0) et lui imposait
   margin: 0 0 13px. Mesure sur la page rendue : 0 px entre les pastilles et
   cette phrase, collees l'une a l'autre, et 13 px perdus sous le bloc. On
   monte la specificite pour que la valeur voulue s'applique enfin. */
/* La taille reste celle qui est rendue aujourd'hui. .tbz-lp-chat p n'imposait
   pas que la marge : il imposait aussi font-size: 13.5px, et rendre la regle
   effective aurait fait maigrir la ligne de 13,5 a 11,5 px au moment meme ou
   elle se met a porter le solde. On ne corrige que la marge. */
.tbz-lp-chat .tbz-lp-chatf { margin: 14px 0 0; font-size: 13.5px; color: #d8eefb; }
/* Etat « la ligne porte un solde ». Tant que la phrase ne dit qu'une
   generalite, elle peut se lire comme une quatrieme pastille. Des qu'elle
   porte un chiffre nominatif, non : on la sort du groupe et le filet rend cet
   espace intentionnel plutot que vide. Le reglage est accroche a l'ETAT :
   les deux autres branches ne bougent pas. */
.tbz-lp-chat .tbz-lp-chatf.is-solde { margin-top: 17px; padding-top: 13px;
  border-top: 1px solid rgba(255,255,255,.16); }
/* Le solde change a chaque question posee : chasse fixe, sinon la ligne danse
   d'une visite a l'autre. Blanc plein plutot que le #d8eefb du reste de la
   phrase, parce que c'est la seule information que l'abonne vient chercher
   ici. Contraste mesure a l'extremite claire du degrade (#0b5566) : 8,4:1. */
.tbz-lp-chatn { font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }

/* ── Quatre questions, quatre outils ─────────────────────────────────────── */
.tbz-lp-secsub { margin: -4px 0 14px; font-size: 13.5px; color: var(--lp-mut); line-height: 1.5;
  max-width: 760px; }
.tbz-lp-g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.tbz-lp-q4 { background: var(--lp-card); border: 1px solid var(--lp-bd); border-radius: var(--lp-r-md);
  padding: 15px 16px; text-decoration: none; color: inherit; display: flex; flex-direction: column;
  transition: .18s var(--lp-ease); }
.tbz-lp-q4:hover { border-color: var(--lp-acc); box-shadow: var(--lp-sh-md); transform: translateY(-2px);
  color: inherit; }
.tbz-lp-q4q { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -.02em;
  line-height: 1.3; margin-bottom: 5px; }
.tbz-lp-q4n { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--lp-acc); margin-bottom: 8px; }
.tbz-lp-q4 p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.55; color: var(--lp-mut); flex: 1; }
.tbz-lp-q4k { display: block; border-top: 1px solid var(--lp-bd-soft); padding-top: 9px;
  font-size: 11.5px; color: var(--lp-ink2); }
.tbz-lp-q4k b { display: block; font-size: 21px; font-weight: 750; letter-spacing: -.03em;
  line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--lp-ink); }
.tbz-lp-g4t { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
.tbz-lp-t4 { background: var(--lp-card2); border: 1px solid var(--lp-bd-soft);
  border-radius: var(--lp-r-sm); padding: 12px 14px; text-decoration: none; color: inherit;
  transition: .16s var(--lp-ease); }
.tbz-lp-t4:hover { border-color: var(--lp-acc); background: #fff; box-shadow: var(--lp-sh-xs);
  color: inherit; }
.tbz-lp-t4n { display: block; font-size: 13.5px; font-weight: 650; letter-spacing: -.015em;
  margin-bottom: 4px; }
.tbz-lp-t4d { display: block; font-size: 12px; line-height: 1.5; color: var(--lp-mut); }

/* ── Actualités ──────────────────────────────────────────────────────────── */
.tbz-lp-g4b { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.tbz-lp-art { background: var(--lp-card); border: 1px solid var(--lp-bd); border-radius: var(--lp-r-sm);
  overflow: hidden; text-decoration: none; color: inherit; transition: .16s var(--lp-ease); }
.tbz-lp-art:hover { border-color: var(--lp-acc); box-shadow: var(--lp-sh-sm); color: inherit; }
.tbz-lp-arti { display: block; height: 104px; background: var(--lp-soft); overflow: hidden; }
.tbz-lp-arti img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tbz-lp-artb { display: block; padding: 11px 13px; }
.tbz-lp-artd { display: block; font-size: 11px; color: var(--lp-mut2); margin-bottom: 4px; }
.tbz-lp-artt { display: block; font-size: 13.5px; font-weight: 650; line-height: 1.35;
  letter-spacing: -.01em; }

/* ── Live et API ─────────────────────────────────────────────────────────── */
.tbz-lp-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tbz-lp-duo { background: var(--lp-card); border: 1px solid var(--lp-bd); border-radius: var(--lp-r-md);
  padding: 16px 18px; text-decoration: none; color: inherit; transition: .16s var(--lp-ease); }
.tbz-lp-duo:hover { border-color: var(--lp-acc); box-shadow: var(--lp-sh-md); color: inherit; }
.tbz-lp-duo h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.tbz-lp-duo p { margin: 0 0 10px; font-size: 13px; color: var(--lp-mut); line-height: 1.55; }
.tbz-lp-duok { display: inline-block; margin-right: 18px; font-size: 11.5px; color: var(--lp-ink2); }
.tbz-lp-duok b { display: block; font-size: 15px; font-weight: 750; font-variant-numeric: tabular-nums;
  letter-spacing: -.02em; }

/* ── Clôture ─────────────────────────────────────────────────────────────── */
.tbz-lp-close { background: var(--lp-card); border: 1px solid var(--lp-bd);
  border-radius: var(--lp-r-md); padding: 20px 22px; display: grid;
  grid-template-columns: 1fr 268px; gap: 22px; align-items: center; box-shadow: var(--lp-sh-sm); }
.tbz-lp-close h2 { margin: 0 0 7px; font-size: 20px; font-weight: 750; letter-spacing: -.025em; }
.tbz-lp-close p { margin: 0 0 13px; font-size: 13.5px; color: var(--lp-mut); line-height: 1.55; }
.tbz-lp-close ul { margin: 0 0 15px; padding: 0; list-style: none; display: grid;
  grid-template-columns: 1fr 1fr; gap: 6px 16px; }
.tbz-lp-close li { font-size: 13px; color: var(--lp-ink2); padding-left: 20px; position: relative; }
.tbz-lp-close li::before { content: ""; position: absolute; left: 0; top: 6px; width: 11px; height: 6px;
  border-left: 2px solid var(--lp-ok); border-bottom: 2px solid var(--lp-ok);
  transform: rotate(-45deg); }
.tbz-lp-ebk { background: var(--tbz-ag-warn-bg, #fffbeb); border: 1px solid var(--tbz-ag-warn-bd, #fde68a);
  border-radius: var(--lp-r-sm); padding: 14px 16px; }
.tbz-lp-ebkt { display: block; font-size: 14px; font-weight: 700; color: #78350f; margin-bottom: 6px; }
.tbz-lp-ebkd { display: block; font-size: 12px; color: #92400e; line-height: 1.5; margin-bottom: 8px; }
.tbz-lp-ebko { display: block; font-size: 12px; font-weight: 700; color: #78350f; }

/* ── Adaptations des nouvelles sections ──────────────────────────────────── */
@media (max-width: 980px) {
  .tbz-lp-g4, .tbz-lp-g4t, .tbz-lp-g4b { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .tbz-lp-close { grid-template-columns: 1fr; }
  .tbz-lp-close ul { grid-template-columns: 1fr; }
}
@media (max-width: 660px) {
  .tbz-lp-g2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tbz-lp-g4, .tbz-lp-g4t, .tbz-lp-g4b { grid-template-columns: 1fr; }
  /* [30/07/2026] L'ascenseur interieur est retire sur telephone. Il faisait
     460 px de haut sur un ecran de 844, soit 55 % de la hauteur : le doigt
     tombait dedans presque a coup sur, et le balayage vertical scrollait le
     bloc au lieu de la page. Mesure avec de vrais evenements tactiles sur un
     390 x 844 : cinq balayages complets, page inchangee, zero pixel. Pour se
     degager il fallait poser le doigt sous le bloc, c'est-a-dire tout en bas
     de l'ecran.
     Un ascenseur imbrique dans celui de la page se dispute le geste a chaque
     balayage : sur telephone il n'y a pas de reglage qui rende cela agreable,
     il faut le retirer. Le bloc coule donc avec la page. Chaque reunion tient
     en un en-tete plus une rangee de tuiles qui defile horizontalement, soit
     environ 110 px : six reunions font 990 px, l'ordre de grandeur d'un bloc
     de page ordinaire. Ceux qui veulent la liste courte ont l'onglet
     « Prochains departs » et le panneau de personnalisation juste au-dessus.
     Meme geste apres correctif : cinq balayages, 2 003 px gagnes. */
  .tbz-lp-grille { max-height: none; overflow-y: visible; padding-right: 0; }
  .tbz-lp-chat { padding: 16px 15px; }
  .tbz-lp-chatin { padding: 5px 5px 5px 12px; }
  .tbz-lp-chatin button { padding: 8px 12px; font-size: 13px; }
  /* Le bloc perd 4 px de remplissage vertical sous 640 px : le pied suit,
     sinon son ecart depasse la marge du bloc lui-meme. */
  .tbz-lp-chat .tbz-lp-chatf.is-solde { margin-top: 13px; padding-top: 11px; }
  /* Le lien Direct remonte a droite du titre, la ou il reste de la place ;
     le compte des reunions passe sur son propre rang. On economise une
     rangee entiere de controles au-dessus du programme. */
  .tbz-lp-live { margin-left: auto; order: 2; }
  .tbz-lp-meta { flex: 1 0 100%; order: 3; margin-top: 1px; }
  .tbz-lp-tabs { order: 4; }
  .tbz-lp-live + .tbz-lp-tabs { margin-left: 0; }
  .tbz-lp-filtres { margin-bottom: 8px; }
  .tbz-lp-fbtn { padding: 5px 12px; font-size: 12px; }
  .tbz-lp-legende { gap: 10px 14px; }
  .tbz-lp-arti { height: 150px; }
}

/* ── En-tête éditorial ───────────────────────────────────────────────────── */
.tbz-lp-hero { padding: 18px 0 14px; border-bottom: 1px solid var(--lp-bd-soft); }
.tbz-lp-hero h1 { margin: 0 0 8px; font-size: 26px; font-weight: 780; letter-spacing: -.03em;
  line-height: 1.2; color: var(--lp-ink); }
.tbz-lp-lead { margin: 0 0 14px; font-size: 14.5px; line-height: 1.6; color: var(--lp-ink2);
  max-width: 900px; }
.tbz-lp-lead b { font-weight: 650; color: var(--lp-ink); }
.tbz-lp-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 0 12px;
  padding: 0; list-style: none; }
/* [30/07/2026] Le <li> est la cellule de grille : il prend la hauteur de la
   rangee. Le <a>, lui, restait en display:block et gardait la hauteur de son
   propre texte. Des qu'un libelle passait sur deux lignes, le bas des quatre
   cartes cessait d'etre aligne. Mesure au navigateur, meme page rendue, de
   360 a 1600 px : <li> a 83,3 px contre <a> a 67,2 px, soit 16,1 px d'ecart,
   exactement une ligne de libelle (11,5 px x 1,4). L'ecart etait present sur
   toutes les largeurs de bureau, en permanence.
   Le <a> devient un element flex qui remplit sa cellule. La hauteur totale de
   la rangee ne bouge pas d'un pixel. On ne touche PAS a son display : la
   regle mobile plus bas le passe deja en flex ligne et compte sur la
   direction row par defaut. */
.tbz-lp-kpi li { display: flex; min-width: 0; }
.tbz-lp-kpi a { display: block; flex: 1 1 auto; min-width: 0; background: var(--lp-card);
  border: 1px solid var(--lp-bd); border-radius: var(--lp-r-sm); padding: 11px 13px;
  text-decoration: none; color: inherit; box-shadow: var(--lp-sh-xs);
  transition: .16s var(--lp-ease); }
/* Carte blanche sur fond #f8fafc : 1,05:1. Seule la bordure grise dessinait la
   carte, d'ou la rangee terne. --lp-sh-xs est le minimum de la fourchette
   autorisee. Survol en --lp-sh-md, sinon l'elevation ne se distingue plus du
   repos ; c'est deja le survol des lignes de course. */
.tbz-lp-kpi a:hover { border-color: var(--lp-acc); box-shadow: var(--lp-sh-md); color: inherit; }
/* Six autres elements cliquables de la page ont leur anneau, pas les
   vignettes : elles recevaient l'outline par defaut du navigateur sur une
   carte a coins arrondis. */
.tbz-lp-kpi a:focus-visible { outline: 2px solid var(--lp-acc); outline-offset: 2px; }
/* Une seule des quatre vignettes change dans la journee. C'est le point
   d'entree de la rangee, et la seule raison de la teinter : quatre fonds
   colores redonneraient la texture uniforme qu'on cherche a casser. */
.tbz-lp-kpi .is-now { background: var(--lp-acc-l); border-color: rgba(10,124,145,.28); }
/* Le chiffre etait peint par un degrade clippe qui finit a #06b6d4, soit
   2,4:1 sur blanc : sous le seuil de 3:1 du gros texte, et delave a l'oeil.
   L'accent plein donne 4,9:1, ce qui tient aussi sous 640 px ou le chiffre
   tombe a 14 px et cesse d'etre du gros texte au sens WCAG. */
.tbz-lp-kpi b { display: block; font-size: 23px; font-weight: 780; letter-spacing: -.035em;
  line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--lp-acc); }
/* Sur la vignette teintee, --lp-acc tombe a 4,5:1 tout juste. --lp-acc-d y
   donne 6,9:1. */
.tbz-lp-kpi .is-now b { color: var(--lp-acc-d); }
/* Le degrade clippe mangeait l'appel de note, d'ou -webkit-text-fill-color.
   Le degrade parti, la rustine se reduit a de la mise en forme. */
.tbz-lp-kpi b sup { color: var(--lp-mut-aa); font-size: 11px; font-weight: 700;
  top: -.75em; margin-left: 1px; }

/* Le nom porte le sens, le complement le precise : deux valeurs de gris au
   lieu d'une seule, sinon l'oeil doit lire la phrase entiere au lieu
   d'attraper un couple chiffre + nom. Aucun changement de graisse : le site
   ne charge Open Sans qu'en 400, 600 et 700, et pour une graisse demandee
   au-dessus de 500 le navigateur prend la premiere valeur disponible
   au-dessus. Demander 550 rendrait donc du 600, soit un cran entier de plus
   sur les quatre libelles. */
.tbz-lp-kpi span { display: block; font-size: 11.5px; color: var(--lp-ink2); line-height: 1.4;
  margin-top: 3px; }
/* Le complement de libelle vit dans un <i> pour pouvoir disparaitre sous
   640 px. Il n'est pas une mise en emphase : on annule l'italique. */
.tbz-lp-kpi i { font-style: normal; color: var(--lp-mut-aa); }

/* ── Personnalisation du programme ───────────────────────────────────────── */
.tbz-lp-filtres { margin: 0 0 10px; }
.tbz-lp-fbtn { display: inline-flex; align-items: center; gap: 8px; background: var(--lp-card);
  border: 1px solid var(--lp-bd); border-radius: var(--lp-pill); padding: 6px 14px;
  font: inherit; font-size: 12.5px; font-weight: 650; color: var(--lp-ink2); cursor: pointer;
  transition: .16s var(--lp-ease); }
.tbz-lp-fbtn:hover { border-color: var(--lp-acc); color: var(--lp-acc); }
.tbz-lp-fbtn.is-open { border-color: var(--lp-acc); color: var(--lp-acc); background: var(--lp-acc-l); }
.tbz-lp-fbtn:focus-visible { outline: 2px solid var(--lp-acc); outline-offset: 2px; }
.tbz-lp-fbtn::before { content: ""; width: 13px; height: 13px; flex: 0 0 auto;
  background: currentColor; opacity: .75;
  -webkit-mask: repeating-linear-gradient(to bottom, currentColor 0 2px, transparent 2px 5px);
  mask: repeating-linear-gradient(to bottom, currentColor 0 2px, transparent 2px 5px); }
.tbz-lp-fcount { display: none; }
.tbz-lp-fcount.is-on { display: inline-block; background: var(--lp-acc); color: #fff;
  border-radius: var(--lp-pill); min-width: 18px; padding: 0 6px; font-size: 11px;
  font-weight: 700; text-align: center; line-height: 18px; }
.tbz-lp-fpanel { margin-top: 9px; background: var(--lp-card); border: 1px solid var(--lp-bd);
  border-radius: var(--lp-r-sm); padding: 13px 15px; display: flex; flex-wrap: wrap;
  gap: 16px 26px; align-items: flex-start; }
.tbz-lp-fgrp { min-width: 0; }
.tbz-lp-fglib { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--lp-mut2); margin-bottom: 6px; }
.tbz-lp-fpills { display: flex; gap: 6px; flex-wrap: wrap; }
.tbz-lp-fpill { display: inline-flex; align-items: center; background: var(--lp-soft);
  border: 1px solid var(--lp-bd); border-radius: var(--lp-pill); padding: 4px 11px;
  font-size: 12.5px; color: var(--lp-ink2); cursor: pointer; transition: .16s var(--lp-ease);
  user-select: none; }
.tbz-lp-fpill:hover { border-color: var(--lp-acc); }
.tbz-lp-fpill.is-on { background: var(--lp-acc); border-color: var(--lp-acc); color: #fff;
  font-weight: 600; }
.tbz-lp-fpill input { position: absolute; opacity: 0; width: 0; height: 0; }
.tbz-lp-fpill:focus-within { outline: 2px solid var(--lp-acc); outline-offset: 2px; }
/* Les trois seuils des Stats Premium. Le libelle du groupe porte une infobulle
   qui dit ce qui est mesure et ce que cela ne vaut pas : on met le curseur
   d'aide dessus pour que l'infobulle se signale. */
.tbz-lp-fgrp-sp .tbz-lp-fglib { cursor: help; }
.tbz-lp-fgrp-sp .tbz-lp-fglib b { font-weight: 500; text-transform: none;
  letter-spacing: 0; opacity: .78; }
.tbz-lp-fseuils { display: flex; gap: 6px; flex-wrap: wrap; }
.tbz-lp-fseuil { display: inline-flex; align-items: center; gap: 5px; background: var(--lp-soft);
  border: 1px solid var(--lp-bd); border-radius: var(--lp-pill); padding: 3px 5px 3px 11px;
  font-size: 12.5px; color: var(--lp-ink2); cursor: help; user-select: none; }
.tbz-lp-fseuil span { white-space: nowrap; }
.tbz-lp-fseuil input { width: 54px; min-width: 0; border: 1px solid var(--lp-bd);
  border-radius: var(--lp-r-sm); background: var(--lp-card); font: inherit; font-size: 12.5px;
  color: var(--lp-ink); padding: 3px 6px; text-align: right; cursor: text;
  font-variant-numeric: tabular-nums; }
.tbz-lp-fseuil input:focus { outline: none; border-color: var(--lp-acc);
  box-shadow: 0 0 0 3px var(--lp-acc-l); }
/* Les fleches natives volent la moitie d'un champ de 54 px et ne servent a
   rien pour saisir un pourcentage : on saisit au clavier. */
.tbz-lp-fseuil input::-webkit-outer-spin-button,
.tbz-lp-fseuil input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tbz-lp-fseuil input[type=number] { -moz-appearance: textfield; appearance: textfield; }

.tbz-lp-freset { margin-left: auto; align-self: flex-end; background: transparent; border: 0;
  color: var(--lp-mut); font: inherit; font-size: 12px; text-decoration: underline;
  cursor: pointer; padding: 4px 0; }
.tbz-lp-freset:hover { color: var(--lp-acc); }
.tbz-lp-fnote { margin: 7px 2px 0; font-size: 12px; color: var(--lp-mut); }
.tbz-lp-fnote:empty { display: none; }

/* Le filtrage masque, il ne supprime jamais. */
.tbz-lp-off { display: none; }

@media (max-width: 980px) { .tbz-lp-kpi { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .tbz-lp-hero { padding: 11px 0 9px; }
  .tbz-lp-hero h1 { font-size: 19.5px; line-height: 1.18; margin-bottom: 6px; }
  .tbz-lp-lead { font-size: 13px; line-height: 1.5; margin-bottom: 9px; }
  .tbz-lp-statut { font-size: 11.5px; margin-top: 5px; }
  /* Les quatre chiffres sont la seule preuve chiffree au-dessus de la ligne de
     flottaison. En bandeau qui defile ils ne coutaient que 35 px, mais mesure
     au navigateur : un seul des quatre etait visible a 390 px, les trois
     autres derriere un geste que personne ne fait. Grille deux par deux, mise
     en ligne compacte (le chiffre et son libelle cote a cote, le complement
     dans <i> retire) : 87 px au lieu de 35, quatre preuves sur quatre, et le
     programme demarre a 506 px, toujours au-dessus de la ligne de flottaison
     d'un 390 x 844. */
  .tbz-lp-kpi { display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
    margin: 0 0 9px; }
  .tbz-lp-kpi li { min-width: 0; }
  .tbz-lp-kpi a { display: flex; align-items: baseline; gap: 4px; padding: 5px 9px;
    min-width: 0; }
  .tbz-lp-kpi b { font-size: 14px; flex: 0 0 auto; white-space: nowrap; }
  .tbz-lp-kpi span { font-size: 10.5px; margin-top: 0; line-height: 1.22;
    flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
  .tbz-lp-kpi i { display: none; }
  .tbz-lp-fpanel { gap: 13px 18px; padding: 11px 12px; }
  /* Pleine largeur sur sa propre ligne : en flex-wrap le bouton se rangeait a
     cote du libelle du dernier groupe, et « Tout afficher » avait l'air d'etre
     une option du groupe « Affichage ». */
  .tbz-lp-freset { width: 100%; margin-left: 0; align-self: flex-start;
    text-align: left; padding-top: 2px; }
  /* Les trois champs prennent toute la largeur, un par ligne : a 320 px, trois
     pastilles cote a cote debordaient. 16 px sur le champ evite le zoom
     automatique d'iOS a la mise au point. */
  .tbz-lp-fgrp-sp { width: 100%; }
  .tbz-lp-fseuils { display: grid; grid-template-columns: 1fr; gap: 5px; }
  .tbz-lp-fseuil { justify-content: space-between; padding: 3px 5px 3px 12px; }
  .tbz-lp-fseuil input { width: 78px; font-size: 16px; padding: 2px 6px; }
}

/* ── Precisions du chapo et de la ligne de course ────────────────────────── */
.tbz-lp-statut { display: block; margin-top: 7px; font-size: 12.5px; color: var(--lp-mut);
  line-height: 1.5; }
.tbz-lp-maj { font-variant-numeric: tabular-nums; }
/* Le nom de l'epreuve, masque dans la ligne du dessus sous 640 px, revient
   ici ou il y a la place. Au-dessus de 640 px il ferait doublon. */
.tbz-lp-libm { display: none; }
@media (max-width: 640px) { .tbz-lp-libm { display: inline; } }

/* ── La base en chiffres ─────────────────────────────────────────────────
   Huit nombres, pas trois : c'est la densite elle-meme qui fait la preuve.
   Une grille auto-ajustee plutot qu'un nombre de colonnes fixe, pour que les
   nombres restent lisibles de 320 a 1920 px sans huit points de rupture. */
/* Huit est divisible par huit, quatre et deux : trois paliers suffisent et
   aucune carte ne se retrouve seule sur sa rangee. L'auto-fit produisait
   7 + 1 vers 1024 px, 6 + 2 vers 900, 5 + 3 vers 700 et 3 + 3 + 2 sur
   telephone : une grille de preuve qui a l'air bancale ne prouve rien. */
/* L'appel de note du chapo. Meme piege que celui des KPI : sans couleur
   pleine il heriterait du remplissage transparent d'un degrade clippe. */
.tbz-lp-ast { -webkit-text-fill-color: var(--lp-mut-aa); color: var(--lp-mut-aa);
  font-size: 11px; font-weight: 700; top: -.45em; margin-left: 1px; }
.tbz-lp-chif { display: grid; grid-template-columns: repeat(8, 1fr);
  gap: 9px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 1100px) { .tbz-lp-chif { grid-template-columns: repeat(4, 1fr); } }
.tbz-lp-chif li { background: var(--lp-card); border: 1px solid var(--lp-bd);
  border-radius: var(--lp-r-sm); padding: 12px 13px; }
.tbz-lp-chif b { display: block; font-size: 21px; font-weight: 780; letter-spacing: -.035em;
  line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--lp-ink); }
.tbz-lp-chif span { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.35;
  color: var(--lp-mut-aa); }
.tbz-lp-chifn { margin: 10px 2px 0; font-size: 12px; line-height: 1.5; color: var(--lp-mut-aa); }
.tbz-lp-chifn a { color: var(--lp-acc); font-weight: 600; text-decoration: none; }
.tbz-lp-chifn a:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .tbz-lp-chif { grid-template-columns: repeat(2, 1fr); gap: 7px; }
  .tbz-lp-chif li { padding: 10px 11px; }
  .tbz-lp-chif b { font-size: 17px; }
  .tbz-lp-chif span { font-size: 11px; }
}

/* ── L'abonnement, au milieu de la page ──────────────────────────────────── */
.tbz-lp-prix { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.tbz-lp-pxg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px;
  margin-top: 6px; }  /* la pastille « le plus choisi » deborde de 9 px vers le haut */
.tbz-lp-pxa { margin-top: 13px; }
.tbz-lp-pxr { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.tbz-lp-pxr li { font-size: 12px; color: var(--lp-mut); line-height: 1.45; padding-left: 18px;
  position: relative; }
.tbz-lp-pxr li::before { content: ""; position: absolute; left: 0; top: 5px; width: 9px; height: 5px;
  border-left: 2px solid var(--lp-ok); border-bottom: 2px solid var(--lp-ok);
  transform: rotate(-45deg); }
.tbz-lp-px { position: relative; display: block; background: var(--lp-card);
  border: 1px solid var(--lp-bd); border-radius: var(--lp-r-md); padding: 15px 13px 14px;
  text-decoration: none; color: inherit; text-align: center; transition: .16s var(--lp-ease); }
.tbz-lp-px:hover { border-color: var(--lp-acc); box-shadow: var(--lp-sh-md);
  transform: translateY(-2px); color: inherit; }
.tbz-lp-px:focus-visible { outline: 2px solid var(--lp-acc); outline-offset: 2px; }
.tbz-lp-px-h { border-color: var(--lp-acc); background: var(--lp-acc-l); }
/* La pastille porte « Plus de 3 mois offerts », soit une quinzaine de signes de
   plus que l'ancien libelle. Mesure : a 1024 px la carte annuelle ne fait que
   157 px et la pastille en demandait 173. Elle est donc bornee a la largeur de
   sa carte, et la police se resserre juste avant de deborder. */
.tbz-lp-pxb { position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  background: var(--lp-acc); color: #fff; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; border-radius: var(--lp-pill);
  padding: 2px 9px; white-space: nowrap;
  max-width: calc(100% - 10px); box-sizing: border-box; }
@media (min-width: 641px) and (max-width: 1150px) {
  .tbz-lp-pxb { font-size: 8.5px; letter-spacing: .02em; padding: 2px 7px; }
}
.tbz-lp-pxl { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--lp-mut-aa); margin-bottom: 5px; }
.tbz-lp-pxv { display: block; font-size: 26px; font-weight: 780; letter-spacing: -.035em;
  line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--lp-ink); }
.tbz-lp-pxv i { font-style: normal; font-size: 17px; font-weight: 700; }
.tbz-lp-pxs { display: block; font-size: 11.5px; color: var(--lp-mut-aa); margin-top: 5px;
  line-height: 1.35; }
.tbz-lp-pxc { background: var(--lp-card); border: 1px solid var(--lp-bd);
  border-radius: var(--lp-r-md); padding: 15px 17px; }
.tbz-lp-pxc h3 { margin: 0 0 8px; font-size: 14.5px; font-weight: 700; letter-spacing: -.015em; }
.tbz-lp-pxc p { margin: 0 0 8px; font-size: 13px; line-height: 1.58; color: var(--lp-ink2); }
.tbz-lp-pxc p b { font-weight: 700; color: var(--lp-ink); }
.tbz-lp-pxc p.tbz-lp-pxn { margin-bottom: 0; margin-top: 10px; padding-top: 9px;
  border-top: 1px solid var(--lp-bd-soft); color: var(--lp-ink); font-weight: 600; }

/* ── Deux colonnes de cloture : gratuit a gauche, Premium a droite ───────── */
.tbz-lp-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 14px; }
.tbz-lp-cmpc { background: var(--lp-soft); border: 1px solid var(--lp-bd-soft);
  border-radius: var(--lp-r-sm); padding: 12px 14px; }
.tbz-lp-cmpc-p { background: var(--lp-acc-l); border-color: #b6e3ec; }
.tbz-lp-cmph { display: block; margin: 0 0 8px; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--lp-mut-aa); }
.tbz-lp-cmpc-p .tbz-lp-cmph { color: var(--lp-acc-d); }
.tbz-lp-cmpc ul { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 0; padding: 0;
  list-style: none; }
.tbz-lp-cmpc ul li { font-size: 12.5px; line-height: 1.45; color: var(--lp-ink2);
  padding-left: 19px; position: relative; }
.tbz-lp-cmpc ul li::before { content: ""; position: absolute; left: 0; top: 5px; width: 10px;
  height: 5px; border-left: 2px solid var(--lp-ok); border-bottom: 2px solid var(--lp-ok);
  transform: rotate(-45deg); }
.tbz-lp-cmpc-p ul li::before { border-color: var(--lp-acc); }
.tbz-lp-cmpc ul li b { font-weight: 700; color: var(--lp-ink); }
.tbz-lp-close p.tbz-lp-cond { margin: 11px 0 0; font-size: 11.5px; color: var(--lp-mut);
  line-height: 1.5; }
/* Meme raison : 14 px mesures. Le margin-top passe de 10 a 6 px pour
   compenser exactement les 5 px de padding ajoutes en haut. */
.tbz-lp-ebkl { display: inline-block; margin-top: 6px; padding: 5px 0; font-size: 12px; font-weight: 650;
  color: #78350f; text-decoration: underline; }
.tbz-lp-ebkl:hover { color: #78350f; text-decoration: underline; }

@media (max-width: 980px) {
  .tbz-lp-prix { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .tbz-lp-cmp { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tbz-lp-pxg { gap: 6px; margin-top: 0; }
  .tbz-lp-px { padding: 13px 6px 11px; }
  /* Sur une carte de cent dix pixels de large, une pastille flottante de
     quatre-vingt-cinq pixels deborde des deux cotes. Elle devient un bandeau
     interne, pleine largeur : plus rien ne sort du cadre, et l'element le plus
     strategique de la page cesse d'avoir l'air bricole. */
  .tbz-lp-px-h { padding-top: 0; overflow: hidden; }
  /* Bandeau interne pleine largeur. white-space revient a normal : le libelle
     long doit pouvoir passer sur deux lignes plutot que d'etre coupe. */
  .tbz-lp-pxb { position: static; transform: none; display: block; width: 100%;
    max-width: none; border-radius: 0; padding: 4px 3px; margin: 0 0 9px;
    font-size: 8.5px; letter-spacing: .02em; white-space: normal; line-height: 1.25; }
  .tbz-lp-pxl { font-size: 10px; letter-spacing: .04em; }
  .tbz-lp-pxv { font-size: 20px; }
  .tbz-lp-pxv i { font-size: 13px; }
  .tbz-lp-pxs { font-size: 10.5px; }
  .tbz-lp-pxc { padding: 13px 14px; }
  .tbz-lp-close { padding: 16px 15px; gap: 16px; }
}