/* Les regles ci-dessous existent en double : avec « .htm-entry-content »
   pour peser plus lourd que le socle du theme HTM, et sans lui pour agir
   sous n importe quel autre theme. Sans la seconde forme, le style de
   lien du theme hote traverserait le module. */
/* =============================================================================
   HZM Ticker — bandeau d'actualités à deux étages

   Le défilement repose sur une piste doublée qu'on translate de la moitié de
   sa largeur : arrivée au bout, elle se retrouve exactement au point de départ
   et la boucle ne se voit pas. C'est ce qui évite le saut des bandeaux mal
   faits, où le contenu repart brutalement.
   ========================================================================== */

.hzm-tk {
  --tk-h1: 54px;
  --tk-h2: 48px;
  --tk-gap: 30px;
  --tk-dur: 26s;
  --tk-radius: 12px;
  position: relative;
  overflow: hidden;
  border-radius: var(--tk-radius);
}

/* La bordure du bandeau, quand elle est demandée. L'habillage « bordure
   animée » garde la sienne : les deux se superposeraient. */
.hzm-tk:not(.hzm-tk--border) {
  border: var(--tk-bw, 0) solid var(--tk-bd, transparent);
}

.hzm-tk--sh-soft { box-shadow: 0 6px 20px rgba(20, 30, 55, .08); }
.hzm-tk--sh-strong { box-shadow: 0 14px 36px rgba(20, 30, 55, .18); }

/* --- Les étages ----------------------------------------------------------- */

.hzm-tk-et {
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

.hzm-tk-et--1 {
  height: var(--tk-h1);
  background: var(--tk-bg1, #101A2B);
  color: var(--tk-t1, #fff);
}

.hzm-tk-et--2 {
  height: var(--tk-h2);
  background: var(--tk-bg2, #fff);
  color: var(--tk-t2, #101A2B);
  border-top: 1px solid rgba(128, 128, 128, .18);
}

/* --- L'étiquette ---------------------------------------------------------- */

.hzm-tk-lb {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  /* Les deux étages partagent la largeur de la plus longue étiquette, mesurée
     par le script : les flux démarrent alors au même endroit. Une valeur
     réglée à la main l'emporte. */
  min-width: var(--tk-lbw, auto);
  padding: 0 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hzm-tk--lbl-solid .hzm-tk-et--1 .hzm-tk-lb {
  background: var(--tk-lb1, #0072FF);
  color: var(--tk-lbtx, #fff);
}

.hzm-tk--lbl-solid .hzm-tk-et--2 .hzm-tk-lb {
  background: var(--tk-lb2, #EAF2FF);
  color: var(--tk-lbtx2, var(--tk-lb1, #0072FF));
}

.hzm-tk--lbl-text .hzm-tk-et--1 .hzm-tk-lb { color: var(--tk-lb1, #8FC2FF); }
.hzm-tk--lbl-text .hzm-tk-et--2 .hzm-tk-lb { color: var(--tk-lb2, #0072FF); }

/* La pastille ne colore que l'étiquette, pas toute la colonne. */
.hzm-tk--lbl-pill .hzm-tk-lb { padding: 0 14px 0 18px; }

.hzm-tk--lbl-pill .hzm-tk-lb span {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  background: var(--tk-lb1, #0072FF);
  color: var(--tk-lbtx, #fff);
}

.hzm-tk--lbl-pill .hzm-tk-et--2 .hzm-tk-lb span { background: var(--tk-lb2, #4ED199); }

/* --- Le flux -------------------------------------------------------------- */

.hzm-tk-flux {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* Une respiration après l'étiquette : sans elle, le premier titre lui est
     collé et les deux se lisent comme un seul mot. */
  padding-left: var(--tk-pad, 18px);
}

.hzm-tk-piste {
  display: flex;
  align-items: center;
  gap: var(--tk-gap);
  white-space: nowrap;
  will-change: transform;
  animation: hzm-tk-def var(--tk-dur) linear infinite;
}

/* Une piste doublée parcourt la moitié de sa largeur : au terme du cycle,
   la seconde moitié occupe la place de la première. */
@keyframes hzm-tk-def {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.hzm-tk--rtl .hzm-tk-piste { animation-direction: reverse; }

.hzm-tk--pause:hover .hzm-tk-piste,
.hzm-tk--pause:hover .hzm-tk-vert { animation-play-state: paused; }

/* Un visiteur qui a demandé moins d'animations voit le début du flux, figé. */
@media (prefers-reduced-motion: reduce) {
  .hzm-tk-piste,
  .hzm-tk-vert { animation: none !important; }
}

/* --- Une entrée ----------------------------------------------------------- */

.hzm-tk-it {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.hzm-tk-t {
  font-size: var(--tk-ts, .95rem);
  font-weight: 700;
  color: var(--tk-own, inherit);
}

.hzm-tk-s {
  font-size: var(--tk-ss, .86rem);
  opacity: .72;
}

/* Chaque étage a sa teinte de sous-titre : ce qui se lit sur un fond plein
   se perd sur un fond clair. */
.hzm-tk-et--1 .hzm-tk-s { color: var(--tk-s1, inherit); }
.hzm-tk-et--2 .hzm-tk-s { color: var(--tk-s2, inherit); }

.hzm-tk-d {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .04em;
  opacity: .62;
  font-variant-numeric: tabular-nums;
}

.hzm-tk-c {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: color-mix(in srgb, currentColor 14%, transparent);
}

.hzm-tk-vg {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  overflow: hidden;
  background: color-mix(in srgb, currentColor 16%, transparent);
}

.hzm-tk-vg-el,
.htm-entry-content .hzm-tk-vg .hzm-tk-vg-el {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: 0;
  object-fit: cover;
}
.hzm-tk-vg .hzm-tk-vg-el{
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: 0;
  object-fit: cover;
}

/* Le thème impose aux liens de contenu un soulignement et une couleur de
   survol — le violet de la marque. Les deux sont à neutraliser : sur un fond
   sombre, ce violet devient illisible au moment même où le visiteur regarde.
   Sa règle compte une classe et un élément ; il faut donc le même poids. */
.hzm-tk a,
.hzm-tk a:hover,
.hzm-tk-pan a,
.hzm-tk-pan a:hover,
.htm-entry-content .hzm-tk a,
.htm-entry-content .hzm-tk a:hover,
.htm-entry-content .hzm-tk-pan a,
.htm-entry-content .hzm-tk-pan a:hover {
  text-decoration: none;
  color: inherit;
}
.hzm-tk a,
.hzm-tk a:hover,
.hzm-tk-pan a,
.hzm-tk-pan a:hover{
  text-decoration: none;
  color: inherit;
}

/* La vedette garde ses propres teintes, y compris survolée. */
.hzm-tk .hzm-tk-ved:hover .hzm-tk-vt,
.htm-entry-content .hzm-tk .hzm-tk-ved:hover .hzm-tk-vt { color: var(--tk-vt, currentColor); }
.hzm-tk .hzm-tk-ved:hover .hzm-tk-vt{ color: var(--tk-vt, currentColor); }
.hzm-tk .hzm-tk-ved:hover .hzm-tk-vs,
.htm-entry-content .hzm-tk .hzm-tk-ved:hover .hzm-tk-vs { color: var(--tk-vs, currentColor); }
.hzm-tk .hzm-tk-ved:hover .hzm-tk-vs{ color: var(--tk-vs, currentColor); }
.hzm-tk .hzm-tk-ved:hover .hzm-tk-kk,
.htm-entry-content .hzm-tk .hzm-tk-ved:hover .hzm-tk-kk { color: var(--tk-vkk, var(--tk-own, currentColor)); }
.hzm-tk .hzm-tk-ved:hover .hzm-tk-kk{ color: var(--tk-vkk, var(--tk-own, currentColor)); }

/* Le survol se marque par la teinte, pas par un trait : le flux bouge déjà
   assez. */
a.hzm-tk-it:hover .hzm-tk-t { opacity: .78; }

/* --- Séparateurs ---------------------------------------------------------- */

.hzm-tk-sep {
  flex: 0 0 auto;
  color: var(--tk-sep, currentColor);
  opacity: .4;
}

.hzm-tk-sep--dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.hzm-tk-sep--bar {
  width: 1px;
  height: 16px;
  background: currentColor;
  opacity: .28;
}

.hzm-tk-sep--chev,
.hzm-tk-sep--slash,
.hzm-tk-sep--star { font-size: 15px; line-height: 1; }

.hzm-tk-sep--none { width: 0; }

/* --- Défilement vertical -------------------------------------------------- */

.hzm-tk--vertical .hzm-tk-flux { align-items: stretch; }

.hzm-tk-vert {
  display: flex;
  flex-direction: column;
  width: 100%;
  animation: hzm-tk-mont var(--tk-dur) steps(1, end) infinite;
}

.hzm-tk-et--1 .hzm-tk-vert { --tk-ln: var(--tk-h1); }
.hzm-tk-et--2 .hzm-tk-vert { --tk-ln: var(--tk-h2); }

.hzm-tk-ln {
  display: flex;
  align-items: center;
  height: var(--tk-ln, 54px);
  flex: 0 0 auto;
  padding-left: 16px;
}

/* Le nombre d'entrées n'étant connu qu'au rendu, le script fixe la distance
   et la durée : une animation écrite en dur ne saurait pas combien de crans
   il faut monter. */
@keyframes hzm-tk-mont {
  to { transform: translateY(calc(var(--tk-ln, 54px) * -1 * var(--tk-n, 1))); }
}

/* --- Dégradé de la marque -------------------------------------------------
   Sur les étiquettes et la pastille. C'est la signature du thème : elle mérite
   mieux qu'un aplat quand on veut qu'elle se remarque. */

/* En aplat, le dégradé prend toute la colonne ; en pastille, la pastille
   seule. Les poser tous les deux donnait un dégradé sur un dégradé. */
.hzm-tk--grad.hzm-tk--lbl-solid .hzm-tk-lb {
  background: var(--tk-grad, var(--htm-gradient-primary, linear-gradient(90deg, #0072FF, #8200F4, #FF6C5F)));
  color: var(--tk-lbtx, #fff);
}

.hzm-tk--grad.hzm-tk--lbl-solid .hzm-tk-et--2 .hzm-tk-lb { background-position: 40% 0; }

.hzm-tk--grad.hzm-tk--lbl-pill .hzm-tk-lb { background: none; }

.hzm-tk--grad.hzm-tk--lbl-pill .hzm-tk-lb span {
  background: var(--tk-grad, var(--htm-gradient-primary, linear-gradient(90deg, #0072FF, #8200F4, #FF6C5F)));
  color: var(--tk-lbtx, #fff);
}

.hzm-tk--grad.hzm-tk--lbl-pill .hzm-tk-et--2 .hzm-tk-lb span { background-position: 40% 0; }

/* En texte seul, un dégradé se pose sur les lettres. */
.hzm-tk--grad.hzm-tk--lbl-text .hzm-tk-lb {
  background: var(--tk-grad, var(--htm-gradient-primary, linear-gradient(90deg, #0072FF, #8200F4, #FF6C5F)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hzm-tk-fab--grad {
  background: var(--tk-grad, var(--htm-gradient-primary, linear-gradient(135deg, #0072FF, #8200F4, #FF6C5F))) !important;
}

/* --- Habillages ----------------------------------------------------------- */

/* Contrasté : l'étage haut porte l'urgent sur fond plein, l'étage bas le
   courant sur fond clair. La hiérarchie se lit sans qu'on l'annonce. */
.hzm-tk--contrast .hzm-tk-et--1 {
  background: var(--tk-bg1, #101A2B);
  color: var(--tk-t1, #fff);
}

.hzm-tk--contrast .hzm-tk-et--2 {
  background: var(--tk-bg2, #fff);
  color: var(--tk-t2, #101A2B);
}

.hzm-tk--light .hzm-tk-et--1 {
  background: var(--tk-bg1, #fff);
  color: var(--tk-t1, #101A2B);
}

.hzm-tk--light .hzm-tk-et--2 {
  background: var(--tk-bg2, #FAFBFD);
  color: var(--tk-t2, #465267);
}

.hzm-tk--dark .hzm-tk-et--1 {
  background: var(--tk-bg1, #101A2B);
  color: var(--tk-t1, #fff);
}

.hzm-tk--dark .hzm-tk-et--2 {
  background: var(--tk-bg2, #1B2438);
  color: var(--tk-t2, #B6C4DA);
  border-top-color: rgba(255, 255, 255, .12);
}

/* Un dégradé et un motif discret, pour un bandeau qui existe par lui-même. */
.hzm-tk--rich::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(120deg,
    var(--tk-bg1, #101A2B) 0%,
    color-mix(in srgb, var(--tk-bg1, #101A2B) 70%, #2B1B4A) 60%,
    #2B1B4A 100%);
}

.hzm-tk--rich::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .14;
  background: repeating-linear-gradient(45deg, #fff 0 2px, transparent 2px 9px);
}

.hzm-tk--rich .hzm-tk-et {
  position: relative;
  z-index: 1;
  background: transparent;
  color: var(--tk-t1, #fff);
}

/* Les deux étages sont sombres ici, alors que les palettes réservent au second
   une teinte pensée pour un fond clair — d'où du texte noir sur noir. Cet
   habillage impose donc ses propres couleurs, claires, et ne lit « --tk-t2 »
   que si l'auteur l'a réglé lui-même. */
.hzm-tk--rich .hzm-tk-et--2 {
  color: var(--tk-t2-force, #C7D2E4);
  border-top-color: rgba(255, 255, 255, .14);
}

.hzm-tk--rich .hzm-tk-et--2 .hzm-tk-s { color: var(--tk-s2-force, #9BAAC4); }
.hzm-tk--rich .hzm-tk-et--2 .hzm-tk-t { color: inherit; }

/* Bordure animée : le dégradé de la marque tourne autour du bandeau. Le nom
   de l'animation est unique au module — deux modules qui déclarent le même
   nom se marchent dessus, la portée étant globale. */
.hzm-tk--border {
  padding: 3px;
  background: var(--tk-grad, var(--htm-gradient-primary, linear-gradient(90deg, #0072FF, #8200F4, #FF6C5F)));
  background-size: 300% 100%;
  animation: hzm-tk-tourne 6s linear infinite;
}

.hzm-tk--border .hzm-tk-et:first-child { border-radius: calc(var(--tk-radius) - 3px) calc(var(--tk-radius) - 3px) 0 0; }
.hzm-tk--border .hzm-tk-et:last-child { border-radius: 0 0 calc(var(--tk-radius) - 3px) calc(var(--tk-radius) - 3px); }

.hzm-tk--border .hzm-tk-et--1 {
  background: var(--tk-bg1, #fff);
  color: var(--tk-t1, #101A2B);
}

.hzm-tk--border .hzm-tk-et--2 {
  background: var(--tk-bg2, #FAF9FE);
  color: var(--tk-t2, #465267);
}

@keyframes hzm-tk-tourne {
  to { background-position: 300% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hzm-tk--border { animation: none; }
}

/* --- Position ------------------------------------------------------------- */

.hzm-tk--fixe {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 9985;
  border-radius: 0;
}

.hzm-tk--fixe-top { top: 0; }

/* En bas, le bandeau laisse la place au dock d'icônes, qui vit plus haut. */
.hzm-tk--fixe-bottom { bottom: 0; }

.hzm-tk--bleed {
  width: calc(100vw - var(--htm-scrollbar, 0px));
  max-width: none;
  border-radius: 0;
  /* La distance au bord gauche de la fenêtre est mesurée par le script et
     posée ici. Aucun calcul en CSS ne peut la connaître : « 50 % » se réfère
     au conteneur, et une colonne bordée d'une barre latérale n'est pas
     centrée dans la fenêtre — le bandeau partait alors vers la gauche et son
     étiquette sortait de l'écran.

     Le repli vaut pour le cas courant, une colonne centrée, et sert le temps
     que le script mesure. */
  position: relative;
  left: var(--tk-bleed-x, calc(50% - 50vw));
  margin-left: 0;
  margin-right: 0;
}

/* --- Écrans étroits ------------------------------------------------------- */

@media (max-width: 640px) {
  /* Un défilement horizontal sur téléphone est illisible : trop rapide, ou
     interminable. Les étiquettes se réduisent et le texte secondaire cède la
     place au titre. */
  .hzm-tk-lb { padding: 0 12px; font-size: 11px; }
  .hzm-tk-lb i { display: none; }
  .hzm-tk-s { display: none; }
  .hzm-tk { --tk-gap: 20px; }
}

/* --- L'entrée vedette -----------------------------------------------------
   Elle ne défile pas : l'étage grandit pour la montrer, puis la rend. Une
   photo qui passerait en trois secondes ne se regarderait pas.

   La hauteur est animée sur l'étage lui-même : c'est ce qui donne l'effet de
   poussée, le reste de la page se décalant vers le bas. */

.hzm-tk-et { transition: height .55s cubic-bezier(.65, 0, .35, 1); }

.hzm-tk-et.is-ved-on { height: var(--tk-vh, 150px); }

/* Le flux ordinaire s'efface pendant que la vedette occupe la place. */
.hzm-tk-et.is-ved-on .hzm-tk-piste,
.hzm-tk-et.is-ved-on .hzm-tk-vert { visibility: hidden; }

.hzm-tk-ved {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px var(--tk-pad, 18px);
  text-decoration: none;
  color: inherit;
  opacity: 0;
  transition: opacity .3s ease .15s;
}

.hzm-tk-ved[hidden] { display: none; }
.hzm-tk-ved.is-on { opacity: 1; }

.hzm-tk-ph,
.hzm-tk-vd {
  flex: 0 0 auto;
  height: 100%;
  max-height: calc(var(--tk-vh, 150px) - 24px);
  border-radius: 12px;
  overflow: hidden;
  background: color-mix(in srgb, currentColor 14%, transparent);
}

.hzm-tk-ph { aspect-ratio: 1; }
.hzm-tk-vd { aspect-ratio: 16 / 9; background: #000; }

.hzm-tk-ph-el,
.htm-entry-content .hzm-tk-ph .hzm-tk-ph-el {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: 0;
  object-fit: cover;
}
.hzm-tk-ph .hzm-tk-ph-el{
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: 0;
  object-fit: cover;
}

.hzm-tk-vd iframe,
.hzm-tk-vd video {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
  pointer-events: none;
}

.hzm-tk-vtx {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* Les trois teintes de la vedette héritent de l'étage qui l'accueille, non de
   la palette d'étiquettes : une couleur pensée pour un aplat clair se perd sur
   le fond sombre d'une vedette. Chacune se règle séparément. */
.hzm-tk-kk {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tk-vkk, var(--tk-own, currentColor));
  opacity: .82;
}

.hzm-tk-vt {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--tk-vt, currentColor);
}

.hzm-tk-vs {
  font-size: .88rem;
  line-height: 1.45;
  color: var(--tk-vs, currentColor);
  opacity: .78;
  /* Deux lignes au plus : au-delà, la vedette devient un article. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 640px) {
  /* Sur téléphone, la photo mange toute la largeur : on la retire et on
     laisse le texte, qui est l'essentiel. */
  .hzm-tk-ph, .hzm-tk-vd { display: none; }
  .hzm-tk-vt { font-size: 1.05rem; }
  .hzm-tk-vs { -webkit-line-clamp: 3; }
}

@media (prefers-reduced-motion: reduce) {
  .hzm-tk-et { transition: none; }
  .hzm-tk-ved { transition: none; }
}

/* =============================================================================
   Le déclencheur et son panneau

   La pastille se range dans une colonne : le panier du thème occupe déjà le
   coin bas-droit et le lecteur audio le bas de l'écran. S'empiler au-dessus
   plutôt que de leur disputer la place évite d'avoir à déplacer l'existant.
   ========================================================================== */

/* Portés à la racine du document, ces trois-là ne doivent jamais pousser le
   contenu : un pied de page qui recule d'une vingtaine de pixels sans raison
   vient toujours d'un élément qu'on croyait hors du flux. */
.hzm-tk-voile[hidden],
.hzm-tk-pan[hidden] {
  display: none !important;
}

body > .hzm-tk-dock,
body > .hzm-tk-pan,
body > .hzm-tk-voile {
  position: fixed;
}

.hzm-tk-dock {
  position: fixed;
  z-index: 9996;
  /* Le dock reste sous le panneau : il n'a pas à flotter par-dessus. */
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 12px;
}

.hzm-tk-dock--br { right: var(--tk-dock-x, 22px); bottom: calc(var(--tk-dock-y, 90px) + var(--htm-bas-occupe, 0px)); }
.hzm-tk-dock--bl { left: var(--tk-dock-x, 22px); bottom: calc(var(--tk-dock-y, 90px) + var(--htm-bas-occupe, 0px)); }
.hzm-tk-dock--tr { right: var(--tk-dock-x, 22px); top: var(--tk-dock-y, 90px); }
.hzm-tk-dock--tl { left: var(--tk-dock-x, 22px); top: var(--tk-dock-y, 90px); }

.hzm-tk-fab {
  position: relative;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  color: var(--tk-lbtx, #fff);
  background: var(--tk-fab-bg, var(--tk-lb1, #0072FF));
  box-shadow: 0 8px 24px rgba(20, 30, 55, .28);
  transition: transform .2s ease, box-shadow .2s ease;
}

.hzm-tk-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(20, 30, 55, .34); }

/* Sans icône choisie, trois barres dessinées — pas de police à charger pour
   un pictogramme aussi simple. */
.hzm-tk-fab-ic,
.hzm-tk-fab-ic::before,
.hzm-tk-fab-ic::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.hzm-tk-fab-ic { position: relative; }
.hzm-tk-fab-ic::before,
.hzm-tk-fab-ic::after { content: ""; position: absolute; left: 0; }
.hzm-tk-fab-ic::before { top: -6px; }
.hzm-tk-fab-ic::after { top: 6px; width: 12px; }

.hzm-tk-bulle {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  border: 2px solid var(--htm-page-bg, #F6F7FB);
  background: var(--tk-own, #FF5A3C);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
}

.hzm-tk-etq {
  position: absolute;
  right: calc(100% + 10px);
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 7px;
  background: #101A2B;
  color: #fff;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s;
}

.hzm-tk-dock--bl .hzm-tk-etq,
.hzm-tk-dock--tl .hzm-tk-etq { right: auto; left: calc(100% + 10px); }

.hzm-tk-fab:hover .hzm-tk-etq,
.hzm-tk-fab:focus-visible .hzm-tk-etq { opacity: 1; }

/* --- Le panneau ----------------------------------------------------------- */

.hzm-tk-voile {
  position: fixed;
  inset: 0;
  /* Au-dessus du menu collant du thème, qui vit un cran plus bas. */
  z-index: 99997;
  background: rgba(16, 26, 43, .5);
  opacity: 0;
  transition: opacity .3s ease;
}

.hzm-tk-voile.is-on { opacity: 1; }
.hzm-tk-voile[hidden] { display: none; }

.hzm-tk-pan {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 99998;
  width: 400px;
  max-width: 88vw;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: -18px 0 50px rgba(20, 30, 55, .22);
  transition: transform .4s cubic-bezier(.65, 0, .35, 1);
}

.hzm-tk-pan[hidden] { display: none; }
.hzm-tk-pan--right { right: 0; transform: translateX(100%); }
.hzm-tk-pan--left { left: 0; transform: translateX(-100%); box-shadow: 18px 0 50px rgba(20, 30, 55, .22); }
.hzm-tk-pan.is-on { transform: none; }

/* --- La barre de titre du panneau ---------------------------------------- */

.hzm-tk-pan-h {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px;
  font-size: var(--tk-pan-ts, 16px);
  font-weight: 700;
  color: var(--tk-pan-tc, #101A2B);
  background: var(--tk-pan-bg, #fff);
  /* Le trait est dessiné à part : une bordure ne peut pas s'animer, ni porter
     un dégradé qui se déplace. */
  border-bottom: 0;
}

.hzm-tk-pan-h::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--tk-pan-bw, 1px);
  background: var(--tk-pan-bd, #E7EAF2);
}

/* Le trait en dégradé, immobile ou en mouvement. */
.hzm-tk-pan--grad .hzm-tk-pan-h::after {
  background: var(--tk-grad, var(--htm-gradient-primary, linear-gradient(90deg, #0072FF, #8200F4, #FF6C5F)));
  background-size: 300% 100%;
}

.hzm-tk-pan--anim .hzm-tk-pan-h::after {
  animation: hzm-tk-trait 6s linear infinite;
}

@keyframes hzm-tk-trait {
  to { background-position: 300% 0; }
}

/* Le titre lui-même peut porter le dégradé : les lettres le reçoivent, pas
   leur fond. */
.hzm-tk-pan--tgrad .hzm-tk-pan-h > span:first-child {
  background: var(--tk-grad, var(--htm-gradient-primary, linear-gradient(90deg, #0072FF, #8200F4, #FF6C5F)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .hzm-tk-pan--anim .hzm-tk-pan-h::after { animation: none; }
}

.hzm-tk-pan-x {
  border: 0;
  background: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: #8891A8;
}

.hzm-tk-pan-l {
  flex: 1;
  overflow: auto;
  padding: 6px 0;
  overscroll-behavior: contain;
}

.hzm-tk-pan-e {
  display: flex;
  gap: 12px;
  padding: 13px 22px;
  border-bottom: 1px solid #F1F3F7;
  text-decoration: none;
  color: inherit;
}

a.hzm-tk-pan-e:hover { background: #F7F9FD; }

.hzm-tk-pan-vg {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 9px;
  overflow: hidden;
  background: #E4E8F0;
}

.hzm-tk-pan-vg-el,
.htm-entry-content .hzm-tk-pan-vg .hzm-tk-pan-vg-el {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: 0;
  object-fit: cover;
}
.hzm-tk-pan-vg .hzm-tk-pan-vg-el{
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: 0;
  object-fit: cover;
}

.hzm-tk-pan-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.hzm-tk-pan-c {
  align-self: flex-start;
  padding: 2px 7px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--tk-lb1, #0072FF) 14%, transparent);
  color: var(--tk-lb1, #0072FF);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.hzm-tk-pan-t { font-size: 14px; font-weight: 700; line-height: 1.35; color: #101A2B; }
.hzm-tk-pan-s { font-size: 12.5px; color: #5A6478; line-height: 1.45; }
.hzm-tk-pan-d { font-size: 11.5px; color: #8891A8; }

@media (max-width: 640px) {
  /* Trois pastilles de 56 px mangent le coin d'un écran de téléphone. */
  .hzm-tk-fab { width: 48px; height: 48px; font-size: 18px; }
  .hzm-tk-dock--br, .hzm-tk-dock--bl { bottom: calc(var(--tk-dock-y, 80px) + var(--htm-bas-occupe, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .hzm-tk-pan, .hzm-tk-voile, .hzm-tk-fab { transition: none; }
}

/* --- Panneau horizontal ---------------------------------------------------
   Il monte du bas plutôt que de venir du côté. Les entrées s'y rangent en
   colonnes : la lecture se fait d'un balayage, sans faire défiler. C'est la
   disposition qui convient quand le bandeau lui-même est en bas de l'écran —
   le panneau prolonge alors le geste au lieu de traverser la page. */

.hzm-tk-pan--bottom,
.hzm-tk-pan--top {
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  width: auto;
  max-width: none;
  max-height: 62vh;
  box-shadow: 0 -18px 50px rgba(20, 30, 55, .22);
  border-radius: 16px 16px 0 0;
  transform: translateY(100%);
}

.hzm-tk-pan--top {
  top: 0;
  bottom: auto;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 18px 50px rgba(20, 30, 55, .22);
  transform: translateY(-100%);
}

.hzm-tk-pan--bottom.is-on,
.hzm-tk-pan--top.is-on { transform: none; }

/* Une poignée, pour dire que ça se referme en tirant. */
.hzm-tk-pan--bottom .hzm-tk-pan-h::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 42px;
  height: 4px;
  border-radius: 2px;
  background: #D9DEEA;
  transform: translateX(-50%);
}

.hzm-tk-pan--bottom .hzm-tk-pan-h { position: relative; padding-top: 24px; }

.hzm-tk-pan--bottom .hzm-tk-pan-l,
.hzm-tk-pan--top .hzm-tk-pan-l {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0;
  padding: 0;
}

.hzm-tk-pan--bottom .hzm-tk-pan-e,
.hzm-tk-pan--top .hzm-tk-pan-e {
  /* Un trait à droite sépare les colonnes ; le dernier de chaque rangée n'en
     a pas besoin, mais un trait de trop se remarque moins qu'un manquant. */
  border-right: 1px solid #F1F3F7;
}

@media (max-width: 640px) {
  .hzm-tk-pan--bottom .hzm-tk-pan-l,
  .hzm-tk-pan--top .hzm-tk-pan-l { grid-template-columns: 1fr; }
  .hzm-tk-pan--bottom, .hzm-tk-pan--top { max-height: 78vh; }
}

/* --- Rubriques en colonnes ------------------------------------------------
   Une liste plate perd son sens dès la vingtième entrée. Chaque catégorie
   devient une colonne, et les flèches font défiler quand elles débordent. */

.hzm-tk-pan-corps {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
}

.hzm-tk-pan-l--rub {
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 0;
}

.hzm-tk-pan-l--rub::-webkit-scrollbar { display: none; }

.hzm-tk-rub {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid #F1F3F7;
}

.hzm-tk-rub-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 14px 22px 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tk-lb1, #0072FF);
  border-bottom: 1px solid #F1F3F7;
}

.hzm-tk-rub-n {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 9px;
  background: color-mix(in srgb, currentColor 14%, transparent);
  font-size: 11px;
  text-align: center;
}

.hzm-tk-rub-l {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Une rubrique chargée défile pour elle seule, les autres restent en place.
     La barre du navigateur étant peu discrète, on l'affine. */
  scrollbar-width: thin;
  scrollbar-color: #C9D0DC transparent;
}

.hzm-tk-rub-l::-webkit-scrollbar { width: 6px; }
.hzm-tk-rub-l::-webkit-scrollbar-track { background: transparent; }
.hzm-tk-rub-l::-webkit-scrollbar-thumb { background: #C9D0DC; border-radius: 3px; }
.hzm-tk-rub-l::-webkit-scrollbar-thumb:hover { background: #A8B2C4; }

.hzm-tk-pan-arw {
  flex: 0 0 auto;
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  border: 0;
  cursor: pointer;
  font-size: 24px;
  color: #465267;
  background: #F7F9FD;
  transition: background .2s ease, color .2s ease;
}

/* Les flèches n'apparaissent que si les rubriques débordent vraiment. */
.hzm-tk-pan-corps.is-over .hzm-tk-pan-arw { display: flex; }

.hzm-tk-pan-arw:hover { color: #fff; background: var(--tk-lb1, #0072FF); }
.hzm-tk-pan-arw[disabled] { opacity: .3; pointer-events: none; }

/* --- Replier --------------------------------------------------------------
   Le panneau se réduit à sa barre de titre plutôt que de disparaître : on
   garde le repère, et un clic le rouvre. */

.hzm-tk-pan-b { display: flex; align-items: center; gap: 4px; }

/* Commandes rangees du cote du titre. Le coin oppose est le plus dispute
   d une page : messagerie, bandeau de cookies, retour en haut s y installent
   tous, et les boutons du panneau y passent dessous. */
.hzm-tk-pan--cmdl .hzm-tk-pan-h { justify-content: flex-start; gap: 14px; }

.hzm-tk-pan-pli,
.hzm-tk-pan-x {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  /* Une pastille claire quel que soit le fond : sur un bandeau de titre
     sombre ou coloré, un simple glyphe gris disparaît. */
  color: var(--tk-pan-btn-c, #465267);
  background: var(--tk-pan-btn-bg, rgba(255, 255, 255, .92));
  box-shadow: 0 1px 4px rgba(20, 30, 55, .16);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.hzm-tk-pan-pli:hover,
.hzm-tk-pan-x:hover {
  color: #101A2B;
  background: #fff;
  transform: scale(1.06);
}

/* Un chevron dit dans quel sens ça va ; un signe moins ne dit rien. */
.hzm-tk-pan-pli { font-size: 15px; }
.hzm-tk-pan-pli span { display: block; transition: transform .25s ease; }
.hzm-tk-pan.is-plie .hzm-tk-pan-pli span { transform: rotate(180deg); }

.hzm-tk-pan.is-plie .hzm-tk-pan-corps { display: none; }

.hzm-tk-pan--bottom.is-plie,
.hzm-tk-pan--top.is-plie { max-height: none; }

/* En colonne, replier n'aurait pas de sens : le panneau occupe la hauteur.
   Le bouton disparaît plutôt que de ne rien faire. */
.hzm-tk-pan--left .hzm-tk-pan-pli,
.hzm-tk-pan--right .hzm-tk-pan-pli { display: none; }

@media (max-width: 640px) {
  .hzm-tk-rub { flex: 0 0 82vw; }
}

/* =============================================================================
   PASTILLE EN PILULE
   Le rond ne dit rien de ce qu'il ouvre : sous un autre theme, ou aux cotes
   d'autres boutons flottants, il faut un libelle. L'etiquette existait deja
   mais ne paraissait qu'au survol — on la fait entrer dans le bouton.
   ========================================================================== */
.hzm-tk-dock--pilule .hzm-tk-fab {
	width: auto;
	height: auto;
	min-height: 44px;
	padding: 0 18px 0 14px;
	border-radius: 999px;
	gap: 9px;
	font-size: 15px;
}

.hzm-tk-dock--pilule .hzm-tk-etq {
	position: static;
	right: auto;
	left: auto;
	opacity: 1;
	pointer-events: auto;
	background: none;
	padding: 0;
	border-radius: 0;
	color: inherit;
	font-size: inherit;
	font-weight: 600;
	transition: none;
}

/* Le compteur revient dans le flux : colle au libelle plutot que de flotter
   sur un coin qui n'existe plus. */
.hzm-tk-dock--pilule .hzm-tk-bulle {
	position: static;
	transform: none;
	margin-left: 2px;
}

/* Etroit, la pilule redevient ronde : le libelle mangerait la largeur. */
@media (max-width: 560px) {
	.hzm-tk-dock--pilule .hzm-tk-fab {
		width: 56px;
		padding: 0;
		border-radius: 50%;
		gap: 0;
	}
	.hzm-tk-dock--pilule .hzm-tk-etq { display: none; }
}