/* ============================================
   BILLETTERIE — layout de page
   Le contenu de .billetterie-embed est du HTML
   tiers collé dans le panel (iframe, widget…) :
   la page reprend la main sur son dimensionnement.
   ============================================ */

/* body > main est déjà flex:1 (base.css) : la colonne suffit à
   pousser le bandeau partenaires en bas quand le contenu est court. */
.billetterie-page {
  display: flex;
  flex-direction: column;
}

.billetterie-embed {
  flex: 1;
  padding: var(--gutter);
}

/* Le code du prestataire arrive avec ses propres styles inline
   (height, border…) : !important est nécessaire pour reprendre la main.
   Hauteur dérivée du header, pas d'une valeur fixe arbitraire.
   (height:100% ne marcherait pas : body n'a qu'un min-height, donc
   aucune hauteur définie à laquelle rapporter le pourcentage.) */
.billetterie-embed iframe {
  display: block;
  width: 100% !important;
  height: calc(100vh - var(--header-height) - var(--gutter) * 2) !important;
  min-height: 600px;
  border: 0 !important;
}

/* dvh : évite que la barre d'URL mobile rogne l'iframe */
@supports (height: 100dvh) {
  .billetterie-embed iframe {
    height: calc(100dvh - var(--header-height) - var(--gutter) * 2) !important;
  }
}

/* Sans code d'intégration, plus rien ne pousse le bandeau vers le bas. */
.billetterie-page .partners-banner {
  margin-top: auto;
}

.billetterie-fallback {
  padding: 0 var(--gutter) var(--gutter);
}

/* Même langage visuel que .event-card__cta */
.billetterie-fallback__link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  width: fit-content;
  font-size: var(--text-md);
  line-height: var(--leading-md);
  letter-spacing: var(--tracking);
  padding: 3px 8px;
  border: 1px solid var(--color-border);
  transition: all 0.2s ease;
}

.billetterie-fallback__link::after {
  content: '↗';
}

.billetterie-fallback__link:hover {
  background: var(--color-text);
  color: var(--color-bg);
}