/* Confort de navigation : favoris, listes peintes en JS, partage, barre mobile.
   Les couleurs viennent EXCLUSIVEMENT de tokens.css — source unique de la DA. */

.tlb-favori {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;          /* zone tactile confortable (mobile first) */
  padding: .4rem .8rem;
  border: 1px solid var(--tlb-filet-fort);   /* composant : 3:1 exigé */
  border-radius: 999px;
  background: var(--tlb-surface);
  color: var(--tlb-texte);
  cursor: pointer;
  font: inherit;
  font-size: .875rem;
  line-height: 1.2;
}

.tlb-favori__icone { color: var(--tlb-attenue); font-size: 1rem; }
.tlb-favori--actif { border-color: var(--tlb-violet-500); }
.tlb-favori--actif .tlb-favori__icone { color: var(--tlb-violet-500); }
.tlb-favori:focus-visible { outline: 3px solid var(--tlb-focus); outline-offset: 2px; }

/* Sur une carte, le cœur se pose en haut à droite du visuel. Il est un FRÈRE du
   lien (jamais son enfant : un <button> dans un <a> est invalide), d'où le
   positionnement absolu. */
.tlb-billet { position: relative; }
.tlb-billet .tlb-favori {
  position: absolute;
  top: .5rem;
  right: .5rem;
  min-height: 40px;
  padding: .35rem .55rem;
  background: rgba(255, 255, 255, .92);
}
.tlb-billet .tlb-favori__libelle {
  /* Le libellé reste lu par les lecteurs d'écran, mais n'encombre pas la carte. */
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.tlb-liste-js { margin-block: 2.5rem; }
.tlb-liste-js__titre { font-size: 1.25rem; margin: 0 0 1rem; }
.tlb-liste-js__grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--tlb-gouttiere);
}
.tlb-liste-js__vide { color: var(--tlb-attenue); }

.tlb-actions-differees {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-block: 1.25rem;
}

.tlb-agenda,
.tlb-partage {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .5rem 1rem;
  border: 1px solid var(--tlb-filet-fort);   /* composant : 3:1 exigé */
  border-radius: var(--tlb-rayon-bouton);
  background: transparent;
  color: var(--tlb-texte);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.tlb-agenda:focus-visible,
.tlb-partage:focus-visible { outline: 3px solid var(--tlb-focus); outline-offset: 2px; }

/* Barre d'action mobile — fiche représentation uniquement. */
.tlb-barre-mobile {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 40;                /* sous les overlays RGPD / chatbot */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 1rem;
  background: var(--tlb-surface);
  border-top: 1px solid var(--tlb-filet);
  transition: transform .2s ease;
}

.tlb-barre-mobile__prix { font-size: .875rem; color: var(--tlb-attenue); }
.tlb-barre-mobile__prix b { color: var(--tlb-encre); font-size: 1rem; }

.tlb-barre-mobile--repliee { transform: translateY(100%); }

/* Hauteur RÉSERVÉE dans le flux : la barre ne doit rien décaler (CLS < 0,1). */
.tlb-fiche--representation { padding-bottom: 84px; }

@media (min-width: 768px) {
  .tlb-barre-mobile { display: none; }
  .tlb-fiche--representation { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tlb-barre-mobile { transition: none; }
  .tlb-barre-mobile--repliee { transform: none; }  /* reste visible, sans animation */
}