/* =============================================================================
   tbz-chrome.css - en-tete et pied de page turf.bzh
   -----------------------------------------------------------------------------
   Feuille dediee au « chrome » du site : la barre du haut, le menu, le tiroir
   mobile, la palette de recherche et le pied de page. Chargee sur toutes les
   pages par header.php, APRES assets/global.css.

   REGLES DE COHABITATION
   1. Prefixes .tbz-hd-* (haut) et .tbz-ft-* (bas) exclusivement. Aucune classe
      Bootstrap n'est stylee ici, aucune classe d'ici n'est utilisee ailleurs.
   2. global.css pose des regles sur #masthead et #topbarbis, que l'on doit
      conserver pour infos-premium-pmu.php (il mesure la hauteur de #masthead).
      Un selecteur d'identifiant ne se bat pas avec une classe : les regles qui
      doivent gagner s'ecrivent donc #masthead.tbz-hd et #topbarbis.tbz-hd-tick.
      C'est la seule raison de la presence d'identifiants ici.
   3. Aucun !important, sauf le bloc de mouvement reduit en fin de fichier.
   4. Variables --tbz-ag-* du systeme 2027 (assets/css/agent.css) quand elles
      existent, valeur de repli sinon : la feuille reste autonome.
   ========================================================================== */

.tbz-hd, .tbz-ft, .tbz-hd-drawer, .tbz-hd-pal {
  --hd-deep:   #04303c;
  --hd-deep2:  #052b35;
  --hd-bar:    #04566c;
  --hd-bar2:   #067d97;
  --hd-ink:    #ffffff;
  /* #d3ecf3 tombait a 4,3:1 sur la partie claire du degrade (« Rechercher »
     et « Se connecter », mesures au pixel). #e4f4fa passe a 4,7:1 partout,
     sans rien changer a l'allure de la barre. */
  --hd-ink2:   #e4f4fa;
  --hd-ink3:   #a7d3df;
  --hd-line:   rgba(255, 255, 255, .15);
  --hd-line2:  rgba(255, 255, 255, .28);
  --hd-hover:  rgba(255, 255, 255, .11);
  --hd-acc:    #22d3ee;
  --hd-cta:    #f59e0b;
  --hd-cta-d:  #d97706;
  --hd-cta-ink:#3b2000;
  --hd-live:   #34d399;
  --hd-off:    #94a3b8;
  --hd-r-xs:   var(--tbz-ag-r-xs, 6px);
  --hd-r-sm:   var(--tbz-ag-r-sm, 10px);
  --hd-r-md:   var(--tbz-ag-r-md, 14px);
  --hd-pill:   var(--tbz-ag-r-pill, 999px);
  --hd-ease:   var(--tbz-ag-ease-out, cubic-bezier(.16, 1, .3, 1));
  /* Inter etait declaree en premier choix alors qu'elle n'est chargee nulle
     part sur le site : la pile mentait sur son intention et le rendu tombait
     sur Open Sans chez presque tout le monde. Open Sans est reellement
     chargee, en 400, 600 et 700 : le chrome n'utilise donc que ces trois
     graisses. Les valeurs 650, 750 et 800 rendaient toutes en 700. */
  --hd-font:   var(--tbz-ag-font, 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif);
  --hd-h:      58px;   /* hauteur de la barre principale */
  --hd-h2:     30px;   /* hauteur du bandeau d'etat */
  /* Loupe en masque SVG plutot qu'en bordures CSS : le trace au trait donnait
     un cercle sans manche lisible sous 16 px. Un masque suit la couleur du
     texte, donc l'etat de survol, sans requete supplementaire. */
  --hd-loupe:  url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.8'/%3E%3Cpath d='M20 20l-4.6-4.6'/%3E%3C/svg%3E");
}

.tbz-hd *, .tbz-hd *::before, .tbz-hd *::after,
.tbz-ft *, .tbz-ft *::before, .tbz-ft *::after,
.tbz-hd-drawer *, .tbz-hd-pal * { box-sizing: border-box; }

/* L'attribut hidden doit primer sur les display: flex/grid poses plus bas.
   Specificite augmentee plutot que !important. */
.tbz-hd [hidden], .tbz-hd-drawer[hidden], .tbz-hd-pal[hidden],
.tbz-hd-scrim[hidden], .tbz-ft [hidden] { display: none; }
/* Les panneaux et les listes repliables portent un display pose par une regle
   a DEUX classes (.tbz-hd-pan.is-mega). Une regle a une classe plus un
   attribut perd contre elles : les panneaux restaient tous ouverts. On monte
   donc a deux classes plus l'attribut. Verifie au rendu. */
.tbz-hd .tbz-hd-pan[hidden],
.tbz-hd-drawer .tbz-hd-dp[hidden],
.tbz-hd-drawer .tbz-hd-dfast[hidden],
.tbz-ft .tbz-ft-l[hidden] { display: none; }

/* =============================================================================
   1. L'EN-TETE
   ========================================================================== */

/* Le double selecteur #masthead.tbz-hd neutralise les regles d'identifiant de
   global.css (padding .74rem, fond plat) sans les supprimer : les pages qui
   mesurent #masthead continuent de fonctionner. */
/* Une barre collante masque toute ancre atteinte par un saut : le haut de la
   cible arrive a y=0, sous les 58 px de la barre. Cela touchait le lien
   d'evitement lui-meme et tous les sommaires internes du site
   (infos-premium-pmu.php, api-docs.php, ebook-turf.php, le blog).
   Deux declarations, aucun script. Regression introduite par ce chrome. */
html { scroll-padding-top: calc(var(--tbz-hd-collant, 58px) + 12px); }
#tbzHdEnd { scroll-margin-top: calc(var(--tbz-hd-collant, 58px) + 12px); }

/* Remplace body.h-100 de Bootstrap. Meme effet visible (le pied reste en bas
   des pages courtes, grace au d-flex flex-column conserve sur le body) mais
   avec min-height au lieu de height : le body garde sa hauteur reelle, donc le
   bloc conteneur du sticky ci-dessous n'est plus borne a une fenetre.
   Sans cette regle, la barre collante disparait passe le premier ecran sur les
   23 pages qui incluent header.php. */
body.tbz-body { min-height: 100vh; }

#masthead.tbz-hd {
  position: sticky;
  /* Top NEGATIF de la hauteur du bandeau d'etat : au defilement, le bandeau
     sort de l'ecran et seule la barre principale reste collee. On garde ainsi
     l'acces permanent au menu sans immobiliser 88 px de hauteur, ce qui compte
     surtout sur telephone. */
  top: calc(-1 * var(--hd-h2));
  z-index: 1030;
  margin: 0;
  padding: 0;
  background: linear-gradient(96deg, var(--hd-bar) 0%, #05637b 58%, var(--hd-bar2) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .07), 0 6px 22px -8px rgba(2, 30, 38, .55);
  font-family: var(--hd-font);
  color: var(--hd-ink);
  letter-spacing: -.005em;
  isolation: isolate;
}
/* Une page peut neutraliser le collant en posant la classe sur <body>.
   Utile si un jour un tableau plein ecran a besoin de toute la hauteur. */
body.tbz-no-sticky #masthead.tbz-hd { position: static; }

.tbz-hd-skip {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 1200;
  background: #fff;
  color: #04566c;
  font-weight: 700;
  font-size: 13.5px;
  border-radius: var(--hd-r-sm);
  padding: 9px 15px;
  text-decoration: none;
  transition: top .18s var(--hd-ease);
}
.tbz-hd-skip:focus { top: 8px; color: #04566c; }

.tbz-hd-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Gouttiere commune a l'en-tete et au pied : sans elle, a 1600 px de
     fenetre, les deux logos etaient decales de 152 px. La valeur n'est pas
     choisie, elle est mesuree : a 1240 px le conteneur cessait de grandir
     alors que le contenu continuait de se rajouter avec la largeur, et la
     navigation passait sous la zone d'actions des 1366 px. 1440 est la plus
     petite valeur ou la configuration complete tient. */
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 16px;
  min-height: var(--hd-h);
}

/* ── 1.1 La marque ───────────────────────────────────────────────────────── */
.tbz-hd-brand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border-radius: var(--hd-r-sm);
}
.tbz-hd-brand img {
  display: block;
  height: 40px;
  width: auto;
  transition: height .22s var(--hd-ease);
}
.tbz-hd-brand:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ── 1.2 La navigation principale ────────────────────────────────────────── */
.tbz-hd-nav { flex: 1 1 auto; min-width: 0; }
.tbz-hd-nav > ul {
  display: flex;
  align-items: center;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tbz-hd-it { position: relative; }
.tbz-hd-lk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: var(--hd-ink2);
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  padding: 9px 12px;
  border-radius: var(--hd-r-sm);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .16s var(--hd-ease), color .16s var(--hd-ease);
}
.tbz-hd-lk:hover { background: var(--hd-hover); color: var(--hd-ink); }
.tbz-hd-lk:focus-visible { outline: 2px solid #fff; outline-offset: -2px; color: var(--hd-ink); }
.tbz-hd-lk[aria-expanded="true"] { background: var(--hd-hover); color: var(--hd-ink); }
/* La page en cours est marquee, pas seulement survolee : sur un site de
   soixante pages, savoir ou l'on est fait gagner un clic a chaque fois. */
.tbz-hd-lk.is-here { color: var(--hd-ink); }
.tbz-hd-lk.is-here::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--hd-acc);
}
/* Le chevron tourne quand le panneau est ouvert. Dessine en CSS : pas une
   icone de plus a telecharger. */
.tbz-hd-lk[data-tbz-pan]::before {
  content: "";
  order: 2;
  width: 7px;
  height: 7px;
  margin-left: 1px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: .7;
  transition: transform .2s var(--hd-ease);
}
.tbz-hd-lk[aria-expanded="true"]::before { transform: translateY(1px) rotate(-135deg); opacity: 1; }
.tbz-hd-q { color: #fde68a; }
.tbz-hd-q:hover, .tbz-hd-q[aria-expanded="true"] { color: #fef3c7; }

/* ── 1.3 Les panneaux ────────────────────────────────────────────────────── */
.tbz-hd-pan {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  z-index: 60;
  background: #fff;
  color: var(--tbz-ag-text, #0f172a);
  border: 1px solid var(--tbz-ag-border, #e5e7eb);
  border-radius: var(--hd-r-md);
  box-shadow: 0 20px 44px -12px rgba(2, 30, 38, .34), 0 2px 8px rgba(2, 30, 38, .1);
  padding: 15px 17px;
  animation: tbzHdPop .17s var(--hd-ease);
}
@keyframes tbzHdPop {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}
.tbz-hd-pan.is-mega { display: grid; grid-template-columns: repeat(3, minmax(210px, 1fr)); gap: 6px 26px; }
.tbz-hd-pan.is-mega4 { grid-template-columns: repeat(4, minmax(190px, 1fr)); }
/* Le panneau du programme a une premiere colonne plus large : elle porte les
   noms d'hippodrome, l'heure et le compte de courses. */
.tbz-hd-pan.is-prog { grid-template-columns: minmax(262px, 1.05fr) minmax(205px, 1fr) minmax(205px, 1fr); }
.tbz-hd-pan.is-list { display: block; min-width: 250px; }
/* Un panneau large ne doit jamais sortir de l'ecran a droite. */
.tbz-hd-it.is-right .tbz-hd-pan { left: auto; right: 0; }

.tbz-hd-col { min-width: 0; }
.tbz-hd-ct {
  display: block;
  margin: 0 0 7px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #55637a;
}
.tbz-hd-col + .tbz-hd-col .tbz-hd-ct { margin-top: 0; }
.tbz-hd-col ul { margin: 0; padding: 0; list-style: none; }
.tbz-hd-pan a {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 5px 8px;
  margin: 0 -8px;
  border-radius: var(--hd-r-xs);
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--tbz-ag-text-2, #1e293b);
  text-decoration: none;
  transition: background .13s var(--hd-ease), color .13s var(--hd-ease);
}
.tbz-hd-pan a:hover { background: var(--tbz-ag-accent-l2, #ecf7fa); color: var(--tbz-ag-accent-d, #075d6e); }
.tbz-hd-pan a:focus-visible { outline: 2px solid var(--tbz-ag-accent, #0a7c91); outline-offset: -2px; }
.tbz-hd-pan a b { font-weight: 600; }
.tbz-hd-pan a em {
  font-style: normal;
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-radius: var(--hd-pill);
  padding: 2px 7px;
  white-space: nowrap;
  align-self: center;
}
.tbz-hd-tn { background: #d1fae5; color: #065f46; }   /* nouveau */
.tbz-hd-tl { background: #fee2e2; color: #991b1b; }   /* live */
.tbz-hd-tq { background: #fef3c7; color: #78350f; }   /* quinte */
.tbz-hd-to { background: #f1f5f9; color: #55637a; }   /* obsolete */
.tbz-hd-sep { margin: 8px 0 7px; border: 0; border-top: 1px solid var(--tbz-ag-border-soft, #eef0f3); }
.tbz-hd-note { margin: 8px 0 0; font-size: 11.5px; line-height: 1.45; color: #55637a; }

/* Le programme du jour, en tete du premier panneau. */
.tbz-hd-reu { display: grid; grid-template-columns: 1fr; gap: 2px; }
/* min-width: 0 sur toute la chaine, sinon « MESLAY DU MAINE » plus le compte
   de courses depasse la colonne et vient se poser sur la suivante. */
.tbz-hd-reu a { align-items: center; gap: 9px; min-width: 0; overflow: hidden; }
.tbz-hd-rn {
  flex: 0 0 auto;
  background: var(--tbz-ag-accent, #0a7c91);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--hd-r-xs);
  padding: 2px 7px;
  font-variant-numeric: tabular-nums;
}
.tbz-hd-rh { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.tbz-hd-rc { flex: 0 0 auto; margin-left: auto; padding-left: 8px; font-size: 11px;
  color: #55637a; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tbz-hd-vide { margin: 4px 0 0; font-size: 12.5px; color: #55637a; }

/* ── 1.4 Le bloc de droite ───────────────────────────────────────────────── */
.tbz-hd-act { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; margin-left: auto; }

.tbz-hd-src {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid var(--hd-line);
  border-radius: var(--hd-pill);
  color: var(--hd-ink2);
  font: inherit;
  font-size: 13px;
  padding: 6px 8px 6px 12px;
  cursor: pointer;
  transition: background .16s var(--hd-ease), border-color .16s var(--hd-ease);
}
.tbz-hd-src:hover { background: rgba(255, 255, 255, .18); border-color: var(--hd-line2); color: #fff; }
.tbz-hd-src:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tbz-hd-src::before {
  content: "";
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--hd-loupe) center / contain no-repeat;
  mask: var(--hd-loupe) center / contain no-repeat;
}
.tbz-hd-kbd {
  font-size: 10.5px;
  font-weight: 700;
  border: 1px solid var(--hd-line);
  border-radius: var(--hd-r-xs);
  padding: 1px 5px;
  opacity: .85;
  font-family: var(--hd-font);
}

.tbz-hd-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid var(--hd-line);
  border-radius: var(--hd-pill);
  color: var(--hd-ink);
  font-size: 12.5px;
  font-weight: 700;
  padding: 5px 12px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .16s var(--hd-ease), border-color .16s var(--hd-ease);
}
.tbz-hd-pill:hover { background: rgba(255, 255, 255, .19); border-color: var(--hd-line2); color: #fff; }
.tbz-hd-pill:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tbz-hd-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hd-off); flex: 0 0 auto; }
.is-on .tbz-hd-dot { background: var(--hd-live); box-shadow: 0 0 0 3px rgba(52, 211, 153, .28); }
.is-on.tbz-hd-live { border-color: rgba(52, 211, 153, .5); }

.tbz-hd-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--hd-cta);
  border: 1px solid var(--hd-cta);
  border-radius: var(--hd-pill);
  color: var(--hd-cta-ink);
  font-size: 13px;
  font-weight: 700;
  padding: 7px 15px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .16s var(--hd-ease), transform .16s var(--hd-ease);
}
.tbz-hd-cta:hover { background: #fbbf24; color: var(--hd-cta-ink); transform: translateY(-1px); }
.tbz-hd-cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tbz-hd-log {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--hd-ink2);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 10px;
  border-radius: var(--hd-pill);
  text-decoration: none;
  white-space: nowrap;
  transition: background .16s var(--hd-ease), color .16s var(--hd-ease);
}
.tbz-hd-log:hover { background: var(--hd-hover); color: #fff; }
.tbz-hd-log:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Le menu du compte. */
.tbz-hd-me {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid var(--hd-line);
  border-radius: var(--hd-pill);
  color: var(--hd-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .16s var(--hd-ease);
}
.tbz-hd-me:hover { background: rgba(255, 255, 255, .2); }
.tbz-hd-me:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tbz-hd-av {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}
.tbz-hd-bd {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-radius: var(--hd-pill);
  padding: 2px 7px;
}
.tbz-hd-bd-f { background: #fef3c7; color: #78350f; }
.tbz-hd-bd-p { background: #ccfbf1; color: #0f766e; }
.tbz-hd-bd-e { background: rgba(255, 255, 255, .22); color: #fff; }

/* ── 1.5 Le bandeau d'etat ───────────────────────────────────────────────── */
#topbarbis.tbz-hd-tick {
  background: var(--hd-deep);
  color: var(--hd-ink3);
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 0;
  margin: 0;
  text-align: left;
  line-height: 1.3;
  box-shadow: none;
  animation: none;
  font-family: var(--hd-font);
  font-weight: 400;
}
/* [30/07/2026] width: 100% et min-width: 0 manquaient, et le bandeau debordait
   de 434 px quelle que soit la largeur du telephone : mesure a 320, 360, 390 et
   414 px, TOUT le site defilait horizontalement.

   La cause est subtile. #topbarbis est un conteneur flex en direction COLONNE.
   .tbz-hd-tin y est donc un element flex dont la largeur est la dimension
   TRANSVERSE. Or la regle CSS dit que des marges auto sur l'axe transverse
   annulent l'etirement : avec margin: 0 auto, l'element n'est plus etire a la
   largeur du conteneur, il est dimensionne a son contenu (434 px), et les marges
   auto se contentent de le centrer. Ni flex-shrink ni min-width: 0 n'y changent
   quoi que ce soit, puisque le retrecissement ne joue que sur l'axe principal,
   ici la hauteur.

   width: 100% redonne une largeur explicite, que max-width plafonne a 1440 px et
   que margin: 0 auto centre au dela. min-width: 0 complete la chaine decrite
   plus bas, celle qui permet a la breve de se couper au lieu de pousser.

   Ne pas remplacer par flex: 1 1 auto : en direction colonne cela agirait sur la
   HAUTEUR du bandeau, pas sur sa largeur. */
.tbz-hd-tin {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  min-width: 0;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 16px;
  min-height: var(--hd-h2);
  font-size: 11.5px;
}
.tbz-hd-maj { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tbz-hd-majs { display: none; }
.tbz-hd-maj::before {
  content: "";
  width: 11px;
  height: 11px;
  border: 1.7px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  opacity: .8;
}
/* La breve est le seul element elastique du bandeau : elle doit se couper,
   jamais deborder. Une ellipse ne marche pas sur un conteneur flex : il faut
   min-width: 0 sur toute la chaine et la coupure sur le texte lui-meme. */
.tbz-hd-news { display: flex; align-items: center; min-width: 0; overflow: hidden; margin-left: auto; }
.tbz-hd-news .news-item {
  display: none;
  align-items: center;
  gap: 7px;
  /* [30/07/2026] Le padding seul ne suffisait pas. Mesure a 390 px : la boite
     faisait 23,58 px et non 24, parce que le line-height calcule tombe a
     13,58 px sur une police de 10,45 px. 13,58 + 5 + 5 = 23,58, soit un demi
     pixel sous le seuil de la regle AA 2.5.8. min-height le garantit quelle que
     soit la taille de police retenue par le navigateur. */
  min-height: 24px;
  padding: 5px 0;
  min-width: 0;
  max-width: 100%;
  color: var(--hd-ink2);
  text-decoration: none;
  font-size: 11.5px;
  white-space: nowrap;
}
.tbz-hd-news .topbar-highlight { flex: 0 0 auto; }
.tbz-hd-news .topbar-normal { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tbz-hd-news .news-item.active { display: inline-flex; animation: tbzHdFade .45s var(--hd-ease); }
.tbz-hd-news .news-item:hover { color: #fff; }
.tbz-hd-news .topbar-highlight { font-weight: 700; }
@keyframes tbzHdFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* La position du site, dans le bandeau d'etat. Elle disparait des que la
   largeur manque : le bandeau porte deja la fraicheur et la breve. */
.tbz-hd-pos { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--hd-ink3); }
@media (max-width: 1100px) { .tbz-hd-pos { display: none; } }

/* Note : le prix a ete essaye dans le bouton de la barre. Mesure, il coutait
   95 px de largeur, et c'est exactement ce qui manquait a la navigation aux
   grandes largeurs. Il reste affiche la ou il y a la place : en pied de
   tiroir, dans la carte du pied de page, et sur la page d'abonnement. */

/* ── 1.6 Le bouton du tiroir ─────────────────────────────────────────────── */
.tbz-hd-burger {
  display: none;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid var(--hd-line);
  border-radius: var(--hd-r-sm);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 7px 11px;
  cursor: pointer;
}
.tbz-hd-burger:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tbz-hd-bg { display: block; width: 16px; height: 11px; position: relative; }
.tbz-hd-bg i {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .22s var(--hd-ease), opacity .16s var(--hd-ease);
}
.tbz-hd-bg i:nth-child(1) { top: 0; }
.tbz-hd-bg i:nth-child(2) { top: 4.5px; }
.tbz-hd-bg i:nth-child(3) { top: 9px; }
[aria-expanded="true"] .tbz-hd-bg i:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
[aria-expanded="true"] .tbz-hd-bg i:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .tbz-hd-bg i:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }

/* ── 1.6bis Le marqueur d'acces ──────────────────────────────────────────
   Une vingtaine de liens du site demandent un abonnement. Ne pas le dire, c'est
   promener le visiteur ; le dire avec un cadenas, c'est lui fermer la porte au
   nez vingt fois de suite. On ecrit donc le MOT, pas l'interdit, et surtout le
   marqueur CHANGE DE SENS une fois connecte : « Premium » devient « Inclus ».
   L'abonne voit alors, sur chaque page et sans rien demander, ce que son
   abonnement lui ouvre. C'est le seul dispositif du chrome qui lui donne une
   preuve quotidienne d'achat, et il ne coute pas une requete. */
.tbz-hd-pr, .tbz-ft-pr {
  font-style: normal;
  flex: 0 0 auto;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: var(--hd-pill);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
  background: rgba(245, 158, 11, .2);
  color: #fde3ab;
}
.tbz-hd-pr.is-in, .tbz-ft-pr.is-in { background: rgba(52, 211, 153, .2); color: #b6f2da; }
/* « Acces libre » : les pages ouvertes a tous mais plus completes en Premium.
   Ni or (reserve) ni vert (deja paye) : un bleu neutre, qui invite au lieu de
   fermer. ChatBZH est la porte d'entree la plus large du site, elle ne doit
   pas porter le mot « reserve ». Contraste mesure sur le fond du pied
   (#0b2733) : 8,1 pour 4,5 requis. */
.tbz-hd-pr.is-ouv, .tbz-ft-pr.is-ouv { background: rgba(125, 211, 252, .17); color: #cbe9fb; }
.tbz-hd-pan .tbz-hd-pr.is-ouv { background: #e2f2fd; color: #0b4a6e; }
/* Dans les panneaux du menu, le fond est blanc : la teinte doit changer. */
.tbz-hd-pan .tbz-hd-pr { background: #fdf0d8; color: #7c4a03; }
.tbz-hd-pan .tbz-hd-pr.is-in { background: #d6f5e8; color: #04624a; }
/* Le marqueur ne prend jamais la place du libelle : il se pousse a droite. */
.tbz-hd-pan a .tbz-hd-pr, .tbz-ft-l a .tbz-ft-pr { margin-left: auto; }
.tbz-ft-l a { display: flex; align-items: baseline; gap: 6px; }
.tbz-hd-dp a .tbz-hd-pr { margin-left: auto; }

/* ── 1.7 Repli sans JavaScript ───────────────────────────────────────────
   Les panneaux et le tiroir sont fermes par l'attribut hidden : sans script,
   ils le restent. Ce bandeau donne alors les dix destinations essentielles.
   Il n'existe que dans un <noscript>, donc il ne coute rien au cas normal. */
.tbz-hd-nojs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  background: var(--tbz-ag-bg-soft, #f1f5f9);
  border-bottom: 1px solid var(--tbz-ag-border, #e5e7eb);
  padding: 9px 16px;
  font-family: var(--hd-font);
}
.tbz-hd-nojs a {
  padding: 5px 11px;
  border-radius: var(--hd-pill);
  background: #fff;
  border: 1px solid var(--tbz-ag-border, #e5e7eb);
  font-size: 13px;
  font-weight: 600;
  color: var(--tbz-ag-accent-d, #075d6e);
  text-decoration: none;
}

/* =============================================================================
   2. LE TIROIR MOBILE
   ========================================================================== */
.tbz-hd-scrim {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(2, 25, 32, .55);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .22s var(--hd-ease);
}
.tbz-hd-scrim.is-on { opacity: 1; }

.tbz-hd-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  width: min(88vw, 372px);
  background: var(--hd-deep2);
  color: var(--hd-ink);
  font-family: var(--hd-font);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform .26s var(--hd-ease);
  box-shadow: 12px 0 40px -12px rgba(0, 0, 0, .6);
}
.tbz-hd-drawer.is-on { transform: none; }
.tbz-hd-dh {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--hd-line);
  background: linear-gradient(96deg, var(--hd-bar) 0%, #05637b 100%);
}
.tbz-hd-dh img { height: 34px; width: auto; display: block; }
.tbz-hd-dx {
  margin-left: auto;
  width: 34px;
  height: 34px;
  border: 1px solid var(--hd-line);
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.tbz-hd-dx:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tbz-hd-db { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 12px 12px 26px; -webkit-overflow-scrolling: touch; }

.tbz-hd-dsrc {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  background: rgba(255, 255, 255, .09);
  border: 1px solid var(--hd-line);
  border-radius: var(--hd-r-sm);
  color: var(--hd-ink3);
  font: inherit;
  font-size: 13.5px;
  padding: 10px 13px;
  margin-bottom: 12px;
  cursor: pointer;
  text-align: left;
}
.tbz-hd-dsrc::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--hd-loupe) center / contain no-repeat;
  mask: var(--hd-loupe) center / contain no-repeat;
}

/* Les raccourcis du haut du tiroir : ce qu'un turfiste ouvre neuf fois sur
   dix, atteignable sans deplier une seule section. */
.tbz-hd-dfast { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.tbz-hd-dfast a {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--hd-line);
  border-radius: var(--hd-r-sm);
  padding: 10px 12px;
  color: #fff;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
}
.tbz-hd-dfast a:hover, .tbz-hd-dfast a:focus-visible { background: rgba(255, 255, 255, .14); color: #fff; }
.tbz-hd-dfast a span { font-size: 11px; font-weight: 400; color: var(--hd-ink3); }
/* Doctrine de couleur : l'ambre designe l'acte d'achat et rien d'autre. Le
   Quinte+ est le produit GRATUIT du site : l'habiller de la couleur du bouton
   d'abonnement, juste au-dessus de ce bouton, brouillait le seul repere
   commercial du tiroir. Le cyan --hd-acc designe le contenu gratuit.
   La regle :hover est ecrite explicitement : sans elle, .is-q ne gagnait sur
   .tbz-hd-dfast a:hover que par son ordre d'ecriture, a specificite egale. */
.tbz-hd-dfast a.is-q { background: rgba(34, 211, 238, .16); border-color: rgba(34, 211, 238, .48); }
.tbz-hd-dfast a.is-q span { color: #a5f3fc; }
.tbz-hd-dfast a.is-q:hover, .tbz-hd-dfast a.is-q:focus-visible { background: rgba(34, 211, 238, .26); }

.tbz-hd-dsec { border-top: 1px solid var(--hd-line); }
.tbz-hd-dsec:first-of-type { border-top: 0; }
.tbz-hd-dt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: 0;
  color: #fff;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  padding: 13px 4px;
  cursor: pointer;
  text-align: left;
}
.tbz-hd-dt:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.tbz-hd-dt::after {
  content: "";
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--hd-ink3);
  border-bottom: 2px solid var(--hd-ink3);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s var(--hd-ease);
}
.tbz-hd-dt[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.tbz-hd-dp { padding: 0 0 10px 4px; }
.tbz-hd-dp .tbz-hd-ct { color: var(--hd-ink3); margin-top: 8px; }
.tbz-hd-dp ul { margin: 0; padding: 0; list-style: none; }
.tbz-hd-dp a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  margin: 0 -6px;
  border-radius: var(--hd-r-xs);
  color: var(--hd-ink2);
  text-decoration: none;
  font-size: 13.5px;
  line-height: 1.35;
}
.tbz-hd-dp a:hover, .tbz-hd-dp a:focus-visible { background: rgba(255, 255, 255, .1); color: #fff; }
.tbz-hd-dp a em {
  font-style: normal;
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-radius: var(--hd-pill);
  padding: 2px 6px;
}
.tbz-hd-df { flex: 0 0 auto; border-top: 1px solid var(--hd-line); padding: 12px 14px; display: grid; gap: 8px; }
.tbz-hd-df .tbz-hd-cta, .tbz-hd-df .tbz-hd-pill { justify-content: center; padding: 11px 15px; font-size: 14px; }

/* =============================================================================
   3. LA PALETTE DE RECHERCHE
   -----------------------------------------------------------------------------
   Soixante pages reparties dans cinq menus : personne ne les retient. La
   palette cherche dans les titres ET dans des mots-cles, sans accent et sans
   casse, entierement cote client. Aucun appel serveur.
   ========================================================================== */
.tbz-hd-pal {
  position: fixed;
  inset: 0;
  z-index: 1060;
  background: rgba(2, 25, 32, .5);
  backdrop-filter: blur(3px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 10vh 16px 16px;
  font-family: var(--hd-font);
}
.tbz-hd-palc {
  width: min(620px, 100%);
  max-height: 74vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--hd-r-md);
  box-shadow: 0 30px 70px -18px rgba(2, 30, 38, .55);
  overflow: hidden;
  animation: tbzHdPop .18s var(--hd-ease);
}
.tbz-hd-palh { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--tbz-ag-border, #e5e7eb); }
.tbz-hd-palh input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 16px;
  color: var(--tbz-ag-text, #0f172a);
  outline: none;
}
.tbz-hd-palh input::placeholder { color: #55637a; }
.tbz-hd-pali {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  background: #55637a;
  -webkit-mask: var(--hd-loupe) center / contain no-repeat;
  mask: var(--hd-loupe) center / contain no-repeat;
}
.tbz-hd-palx {
  flex: 0 0 auto;
  border: 1px solid var(--tbz-ag-border, #e5e7eb);
  border-radius: var(--hd-r-xs);
  background: var(--tbz-ag-bg-soft, #f1f5f9);
  color: #55637a;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 7px;
  cursor: pointer;
}
.tbz-hd-pall { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 7px; margin: 0; list-style: none; }
.tbz-hd-pall li { margin: 0; }
.tbz-hd-pall a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: var(--hd-r-sm);
  color: var(--tbz-ag-text-2, #1e293b);
  text-decoration: none;
  font-size: 14px;
}
.tbz-hd-pall a:hover, .tbz-hd-pall li.is-sel a { background: var(--tbz-ag-accent-l2, #ecf7fa); color: var(--tbz-ag-accent-d, #075d6e); }
.tbz-hd-palg {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #55637a;
  background: var(--tbz-ag-bg-soft, #f1f5f9);
  border-radius: var(--hd-pill);
  padding: 2px 8px;
}
.tbz-hd-palv { padding: 22px 16px; text-align: center; font-size: 13.5px; color: #55637a; margin: 0; }
.tbz-hd-palf {
  flex: 0 0 auto;
  display: flex;
  gap: 14px;
  align-items: center;
  border-top: 1px solid var(--tbz-ag-border, #e5e7eb);
  padding: 8px 14px;
  font-size: 11px;
  color: #55637a;
  background: var(--tbz-ag-bg-soft, #f1f5f9);
}
.tbz-hd-palf b { font-weight: 700; border: 1px solid var(--tbz-ag-border-strong, #d1d5db); border-radius: 4px; padding: 1px 5px; background: #fff; }

/* =============================================================================
   4. ADAPTATIONS DE L'EN-TETE
   ========================================================================== */
/* Degressif de la barre. Les seuils ne sont pas choisis a l'oeil : ils sont
   mesures. A 1024 px, avec un compte connecte, l'entree « API » passait sous
   le bouton de recherche, donc devenait incliquable. On retire donc les
   elements du plus accessoire au plus essentiel, et on bascule sur le tiroir
   avant que la navigation ne rencontre la zone d'actions. */
@media (max-width: 1460px) {
  .tbz-hd-lk { font-size: 13.5px; padding: 9px 10px; }
  .tbz-hd-kbd { display: none; }
  .tbz-hd-src span { display: none; }
  .tbz-hd-src { padding: 7px 10px; }
}
@media (max-width: 1400px) {
  .tbz-hd-chat { display: none; }
  .tbz-hd-lk { padding: 9px 8px; }
}
/* Sous 1200 px la navigation ne tient plus sans se chevaucher, et un menu
   deroulant au survol est de toute facon inutilisable au doigt : on bascule
   sur le tiroir, et la barre ne garde que l'essentiel. */
@media (max-width: 1199px) {
  .tbz-hd, .tbz-ft, .tbz-hd-drawer, .tbz-hd-pal { --hd-h: 54px; --hd-h2: 28px; }
  .tbz-hd-nav { display: none; }
  .tbz-hd-burger { display: inline-flex; }
  .tbz-hd-brand { margin-right: 2px; }
  .tbz-hd-brand img { height: 34px; }
  .tbz-hd-src span, .tbz-hd-kbd { display: none; }
  .tbz-hd-me span.tbz-hd-mn { display: none; }
}
@media (max-width: 720px) {
  .tbz-hd-bar { gap: 7px; padding: 0 11px; }
  .tbz-hd-tin { gap: 12px; padding: 0 11px; font-size: 11px; }
  .tbz-hd-burger em { display: none; }
  .tbz-hd-burger { padding: 8px 10px; }
  .tbz-hd-cta { padding: 7px 12px; font-size: 12.5px; }
  /* « Se connecter » quitte la barre : il occupe la place du seul bouton qui
     doit survivre a toutes les largeurs, l'abonnement. Il reste en pied de
     tiroir, atteignable en deux gestes. */
  .tbz-hd-log { display: none; }
  .tbz-hd-pal { padding: 6vh 10px 10px; }
  .tbz-hd-majl { display: none; }
  .tbz-hd-majs { display: inline; }
}
/* Tres petits ecrans : le bandeau d'etat garde la pastille Direct et la date,
   la breve passe a la ligne plutot que d'etre coupee. */
@media (max-width: 560px) {
  /* La pastille Direct quitte la barre a son tour : elle est le troisieme
     raccourci du tiroir, et le bouton d'abonnement doit rester entier. */
  .tbz-hd-live { display: none; }
  /* Sous cette largeur la breve doit pouvoir se couper en entier, badge
     compris : en flex: 0 0 auto, le badge poussait la ligne hors de l'ecran
     a 320 px. */
  .tbz-hd-news .topbar-highlight { flex: 0 1 auto; min-width: 0; overflow: hidden;
    text-overflow: ellipsis; }
}
@media (max-width: 480px) {
  .tbz-hd-brand img { height: 30px; }
  .tbz-hd-src { padding: 7px 9px; }
  .tbz-hd-tin { gap: 10px; padding: 0 11px; }
  .tbz-hd-maj { flex: 0 0 auto; }
}
/* Ecrans larges : la barre respire, le logo reprend sa taille. */
@media (min-width: 1600px) {
  .tbz-hd-brand img { height: 44px; }
}
/* Ecrans courts (portables 13 pouces en paysage, tablettes couchees) : le
   panneau ne doit jamais depasser la fenetre. */
.tbz-hd-pan { max-height: calc(100vh - var(--hd-h) - var(--hd-h2) - 24px); overflow-y: auto; }

/* =============================================================================
   5. LE PIED DE PAGE
   ========================================================================== */
.tbz-ft {
  background: linear-gradient(168deg, #04566c 0%, #04455a 46%, var(--hd-deep) 100%);
  color: var(--hd-ink2);
  font-family: var(--hd-font);
  margin: 0;
  padding: 0;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, .15);
  letter-spacing: -.004em;
}
.tbz-ft-in { max-width: 1440px; margin: 0 auto; padding: 34px 16px 8px; }

/* Cinq colonnes : la marque plus les quatre listes. En quatre colonnes, la
   quatrieme liste passait a la ligne sous la marque, ce qui donnait un pied
   de page bancal. */
.tbz-ft-top { display: grid; grid-template-columns: 1.25fr repeat(4, minmax(0, 1fr));
  gap: 28px 26px; }
.tbz-ft-brand p { margin: 10px 0 0; font-size: 13px; line-height: 1.6; color: var(--hd-ink3); max-width: 34em; }
.tbz-ft-logo img { height: 46px; width: auto; display: block; }
.tbz-ft-soc { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.tbz-ft-soc a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--hd-pill);
  padding: 6px 11px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--hd-ink2);
  text-decoration: none;
  transition: background .16s var(--hd-ease), border-color .16s var(--hd-ease);
}
.tbz-ft-soc a:hover { background: rgba(255, 255, 255, .12); border-color: var(--hd-line); color: #fff; }
.tbz-ft-soc a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tbz-ft-soc i { font-style: normal; }

/* Les titres de colonne sont des <button> et non des titres : quatre <h2>
   supplementaires par page diluent le plan de la page pour rien. Le sens est
   porte par le <nav aria-label> qui les entoure. */
.tbz-ft-h {
  display: block;
  width: 100%;
  margin: 0 0 11px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #ffffff;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hd-line);
  padding: 4px 0 8px;      /* 24 px de hauteur, regle AA 2.5.8 */
  cursor: default;
}
.tbz-ft-h:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tbz-ft-l { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; }
.tbz-ft-l a {
  display: block;
  padding: 5px 8px;
  margin: 0 -8px;
  border-radius: var(--hd-r-xs);
  font-size: 13px;
  line-height: 1.4;
  color: var(--hd-ink2);
  text-decoration: none;
  transition: background .13s var(--hd-ease), color .13s var(--hd-ease);
}
.tbz-ft-l a:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.tbz-ft-l a:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

/* Le bloc partenaire et la lettre du turfiste. */
.tbz-ft-side { display: grid; gap: 12px; margin-top: 26px; grid-template-columns: 1fr 1fr; }
/* Les deux cartes ont des textes de longueurs differentes : sans colonne
   flex, leurs boutons se decalaient de 19 px verticalement, ce qui se voit. */
.tbz-ft-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--hd-line);
  border-radius: var(--hd-r-md);
  padding: 15px 17px;
}
/* La liste d'avantages de la carte Premium. Quatre lignes, pas dix : au-dela
   plus personne ne lit, et la carte se met a ressembler a une publicite. */
.tbz-ft-adv { margin: 0 0 10px; padding: 0; list-style: none; display: grid; gap: 5px; }
.tbz-ft-adv li { position: relative; padding-left: 17px; font-size: 12.5px; line-height: 1.45;
  color: var(--hd-ink2); }
.tbz-ft-adv li::before { content: ""; position: absolute; left: 0; top: 5px; width: 9px;
  height: 5px; border-left: 2px solid var(--hd-live); border-bottom: 2px solid var(--hd-live);
  transform: rotate(-45deg); }
.tbz-ft-adv li b { color: #fff; font-weight: 700; }
.tbz-ft-card .tbz-ft-b { margin-top: auto; align-self: flex-start; }
.tbz-ft-card h3 { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: #fff; letter-spacing: -.015em; }
.tbz-ft-card p { margin: 0 0 11px; font-size: 12.5px; line-height: 1.55; color: var(--hd-ink3); }
.tbz-ft-card b { color: var(--hd-ink2); font-weight: 700; }
.tbz-ft-b {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid var(--hd-line2);
  border-radius: var(--hd-pill);
  padding: 7px 15px;
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  transition: background .16s var(--hd-ease);
}
.tbz-ft-b:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.tbz-ft-b:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tbz-ft-b-a { background: var(--hd-cta); border-color: var(--hd-cta); color: var(--hd-cta-ink); }
.tbz-ft-b-a:hover { background: #fbbf24; color: var(--hd-cta-ink); }

/* Le bas : mentions, avertissement legal, droits. */
/* Le bouton « remonter » est fixe en bas a droite, 48 px a 32 px du bord : au
   bas de la page il se posait sur la ligne de droits. On degage la zone. */
.tbz-ft-bot { border-top: 1px solid var(--hd-line); margin-top: 26px; padding: 18px 0 76px; }
/* La phrase qui dit ce que turf.bzh N'EST PAS, sous l'avertissement legal.
   C'est la reponse a la question qu'un visiteur se pose sans l'ecrire :
   « ce site prend-il mon argent ? » */
/* Le second lien de prevention, ajoute dans le bandeau legal, heritait de la
   hauteur de ligne de .ja-minors (14 px) : sous les 24 px de la regle AA 2.5.8.
   On ne touche pas au bandeau lui-meme, seulement a la cible. */
.tbz-ft .ja-minors a { display: inline-block; padding: 6px 4px; }

.tbz-ft-statut { max-width: 1440px; margin: 10px auto 0; text-align: center;
  font-size: 12px; line-height: 1.5; color: var(--hd-ink2); }
/* Les mentions courtes attachees a une carte : lien commercial, resiliation. */
.tbz-ft-com { margin: 9px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--hd-ink3); }
.tbz-ft-card .tbz-ft-com { margin-top: 9px; }
.tbz-ft-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  margin: 16px 0 0;
  font-size: 12px;
  color: var(--hd-ink3);
}
.tbz-ft-legal a { color: var(--hd-ink2); text-decoration: none; padding: 5px 0; }
.tbz-ft-legal a:hover { color: #fff; text-decoration: underline; }
.tbz-ft-cr { margin: 0 0 0 auto; text-align: right; font-size: 11.5px; color: var(--hd-ink3); line-height: 1.5; }
.tbz-ft-cr a { color: var(--hd-ink2); text-decoration: none; }
.tbz-ft-cr a:hover { color: #fff; }

@media (max-width: 1240px) {
  .tbz-ft-top { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tbz-ft-brand { grid-column: 1 / -1; }
  .tbz-ft-brand p { max-width: 62em; }
}
@media (max-width: 820px) {
  .tbz-ft-top { grid-template-columns: 1fr 1fr; gap: 22px; }
  .tbz-ft-side { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .tbz-ft-in { padding: 26px 12px 6px; }
  .tbz-ft-top { grid-template-columns: 1fr; gap: 6px; }
  /* Sur telephone, chaque colonne de liens se replie : quatre listes de huit
     liens deroulees font huit ecrans de pied de page. */
  .tbz-ft-col { border-top: 1px solid var(--hd-line); }
  .tbz-ft-col:first-child { border-top: 0; }
  .tbz-ft-h { border-bottom: 0; padding: 13px 0; margin: 0; cursor: pointer; display: flex; align-items: center; }
  .tbz-ft-h::after {
    content: "";
    margin-left: auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--hd-ink3);
    border-bottom: 2px solid var(--hd-ink3);
    transform: translateY(-2px) rotate(45deg);
    transition: transform .2s var(--hd-ease);
  }
  .tbz-ft-h[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
  .tbz-ft-l { padding-bottom: 10px; }
  .tbz-ft-l a { font-size: 13.5px; padding: 8px 8px; }
  .tbz-ft-legal { flex-direction: column; align-items: flex-start; gap: 10px; }
  .tbz-ft-cr { margin: 0; text-align: left; }
}

/* L'avertissement legal ANJ garde son style propre (defini dans footer.php,
   fond jaune Etat impose). global.css assurait l'heritage de couleur via
   .footer .ja-warning-banner * ; la classe .footer ayant disparu, on reprend
   la regle ici a l'identique. */
.tbz-ft .ja-warning-banner * { color: inherit; }
.tbz-ft .ja-warning-banner { margin-left: auto; margin-right: auto; }

/* =============================================================================
   6. MOUVEMENT REDUIT
   -----------------------------------------------------------------------------
   Seul endroit ou !important est utilise : la preference systeme doit primer
   sur toute animation posee ailleurs dans le chrome.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .tbz-hd *, .tbz-ft *, .tbz-hd-drawer, .tbz-hd-drawer *, .tbz-hd-pal, .tbz-hd-pal *, .tbz-hd-scrim {
    transition: none !important;
    animation: none !important;
  }
  .tbz-hd-cta:hover { transform: none; }
}