/* =============================================================================
   BILLETTERIE, habillage et composants
   -----------------------------------------------------------------------------
   Écrit en CSS simple, pas en classes Tailwind : la feuille dist/css/styles.css
   est compilée et purgée en amont, on ne peut donc pas y ajouter de nouvelles
   classes utilitaires sans relancer la chaîne de build du Premium Minisite
   Template. Toutes les classes de ce module sont préfixées « bt- » pour ne
   jamais entrer en collision avec celles du template.

   Aucune couleur ni aucune police en dur : tout provient des variables de
   static/css/config.css. Rebrander = modifier config.css, jamais ce fichier.

   Plan du fichier
     1.  Base et typographie
     2.  Bandeau maquette
     3.  Barre de contact, en-tête, retour au site, langues
     4.  (section retirée)
     5.  Couverture
     6.  Sections et titres
     7.  (section retirée)
     8.  Étapes
     9.  Filtres
     10. Cartes de spectacles
     11. Étape 2, widget
     12. Pied de page
     13. Responsive
   ============================================================================= */


/* =========================== 1. BASE ET TYPOGRAPHIE ========================= */
body {
  font-family: var(--bt-font-main);
  color: var(--bt-ink);
  background: var(--color-1);
  line-height: 1.6;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}
.bt-main { padding-top: 0; }

/* Les titres du template héritent de TypoTitle ; on bascule sur la famille
   définie dans config.css pour que le choix de police soit centralisé. */
/* Le serif (Playfair Display) est une fonte d'affichage à fort contraste :
   ses déliés disparaissent sous 16 px et ses chiffres sont elzéviriens
   (« 21h30 » descend sous la ligne). Il est donc réservé aux titres ; les
   petits libellés en capitales (étapes, compteur, filtres, dates) passent
   en police de texte. */
h1, h2, h3, h4, .font-title,
.bt-cover-title, .bt-section-title h2,
.bt-selected h3, .bt-btn, .bt-footer-name {
  font-family: var(--bt-font-title);
  font-weight: 500;
}
.bt-step, .bt-count, .bt-filter-label, .bt-when, .bt-back {
  font-family: var(--bt-font-main);
  font-weight: 600;
}

.bt-btn {
  display: inline-block;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: 0;
  border-radius: var(--bt-radius);
  padding: 10px 22px;
  font-size: 12.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
}
.bt-btn:hover { filter: brightness(1.08); }


/* =========================== 2. BANDEAU MAQUETTE =========================== */
/* Affiché uniquement si site.demoBanner.enabled vaut true dans config.js.
   À désactiver avant toute mise en ligne réelle. */
.bt-demo-bar {
  background: #ffe9b3;
  border-bottom: 1px solid #e8cf86;
  color: #5b4406;
  font-size: 12.5px;
  text-align: center;
  padding: 8px 16px;
  position: relative;
  z-index: 60;
}
.bt-demo-bar strong { font-weight: 700; }


/* ====================== 3. BARRE DE CONTACT ET EN-TÊTE ===================== */
.bt-topbar {
  background: var(--color-1);
  border-bottom: 1px solid #eceef1;
  font-size: 12px;
  color: #8b9099;
}
.bt-topbar .container {
  display: flex;
  gap: 22px;
  align-items: center;
  padding-top: 7px;
  padding-bottom: 7px;
}
.bt-topbar a { text-decoration: none; color: inherit; }
.bt-topbar a:hover { color: var(--color-2); }

.bt-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-1);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .07);
}
/* L'en-tête se dimensionne à partir du logo, comme sur le site du festival :
   le logo y occupe 70 % de la hauteur. Changer --bt-logo-height suffit donc
   à faire grandir ou rétrécir tout le bandeau. */
.bt-header-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: calc(var(--bt-logo-height) / 0.7);
}
.bt-logo { display: flex; align-items: center; flex-shrink: 0; }
.bt-logo img { display: block; height: var(--bt-logo-height); width: auto; max-width: 100%; }

.bt-header-right { display: flex; align-items: center; gap: 20px; }

/* --- Retour au site du festival ------------------------------------------
   Élément le plus important de l'en-tête après le logo : c'est la seule
   sortie du minisite. Il reste visible et explicite en mobile, où seul le
   libellé court s'affiche. */
.bt-back-site {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  white-space: nowrap;
  font-family: var(--bt-font-main);
  font-size: 13px;
  font-weight: 600;
  color: var(--bt-ink);
  border: 1px solid var(--bt-line);
  border-radius: 999px;
  padding: 7px 15px;
  transition: .14s;
}
.bt-back-site:hover { border-color: var(--color-2); color: var(--color-2); }
.bt-back-site:focus-visible { outline: 2px solid var(--bt-secondary); outline-offset: 2px; }
.bt-back-arrow { font-size: 15px; line-height: 1; }
.bt-back-short { display: none; }

/* Sélecteur de langue, markup du template, habillage de la maquette. */
.lang-selector { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.lang-selector li { padding: 0; border: 0; }
.lang-selector a {
  display: block;
  font-family: var(--bt-font-main);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bt-muted);
  padding: 6px 10px;
  border: 1px solid var(--bt-line);
  border-right: 0;
  opacity: 1;
}
.lang-selector li:first-child a { border-radius: var(--bt-radius) 0 0 var(--bt-radius); }
.lang-selector li:last-child  a { border-right: 1px solid var(--bt-line); border-radius: 0 var(--bt-radius) var(--bt-radius) 0; }
.lang-selector a:hover  { color: var(--color-2); }
.lang-selector a.active { background: var(--color-2); border-color: var(--color-2); color: var(--color-1); }

/* Menu natif compact, affiché à la place de la liste sous 900 px. */
.bt-lang-select {
  display: none;
  font-family: var(--bt-font-main);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  color: var(--bt-ink);
  border: 1px solid var(--bt-line);
  border-radius: var(--bt-radius);
  cursor: pointer;

  /* Le chevron natif est dessiné au ras du bord et son écart varie d'un
     navigateur à l'autre. On neutralise l'apparence système et on le dessine
     en fond : espacement maîtrisé, et couleur de la charte. */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 8px 28px 8px 11px;
  background-color: var(--color-1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a62e55' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 7px;
}
.bt-lang-select::-ms-expand { display: none; }
.bt-lang-select:hover { border-color: var(--color-2); }
.bt-lang-select:focus-visible { outline: 2px solid var(--bt-secondary); outline-offset: 2px; }

@media (max-width: 899px) {
  .lang-selector   { display: none; }
  .bt-lang-select  { display: block; }
  .bt-back-long    { display: none; }
  .bt-back-short   { display: inline; }
  .bt-back-site    { padding: 7px 13px; font-size: 12.5px; line-height: 1; }
}


/* ============================ 4. (section retirée) ========================= */
/* Le rail de partage latéral a été supprimé : ses boutons n'étaient reliés à
   rien, et il était masqué sous 1240 px, donc absent de tous les mobiles,
   c'est-à-dire là où se font les partages. Remplacé par un bouton de partage
   sur le spectacle choisi, voir § 11. */

/* ============================= 5. COUVERTURE =============================== */
.bt-cover {
  position: relative;
  overflow: hidden;
  background: var(--bt-cover-bg);
  color: var(--bt-cover-ink);
  text-align: center;
  padding: 52px 0 56px;
  border-bottom: 1px solid var(--bt-line);
}
.bt-cover-decor { position: absolute; inset: 0; width: 100%; height: 100%; }
.bt-cover-media { object-fit: cover; }
.bt-cover-veil  { position: absolute; inset: 0; background: var(--color-2); opacity: var(--bt-cover-veil); }
.bt-cover .container { position: relative; z-index: 1; }
.bt-cover-content { position: relative; z-index: 1; }

.bt-cover-eyebrow {
  font-size: 11.5px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--color-2);
  margin: 0 0 10px;
  font-family: var(--bt-font-main);
  font-weight: 700;
}
.bt-cover-title {
  font-size: var(--h1-xs);
  line-height: 1.08;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0;
  font-weight: 700;
}
.bt-cover-edition { margin: 12px 0 0; font-size: 14px; color: var(--bt-muted); }

/* --- Couverture portant le visuel de l'édition ----------------------------
   Le visuel s'affiche en pleine largeur, sans recadrage : il contient le nom
   du festival et les dates, les rogner les rendrait incomplets. Le fond crème
   prend le relais sur les écrans plus larges que l'image. */
/* Pas de bande de couleur sous le visuel : elle intercalait un troisième
   aplat entre l'illustration et le blanc de la page. Le bouton est épinglé à
   cheval sur le bord bas de l'image, qui touche donc directement la page. */
.bt-cover.has-image {
  padding: 0;
  border-bottom: 0;
  overflow: visible;
  margin-bottom: 28px;
}
.bt-cover.has-image .container { position: static; }
.bt-cover-img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/* Titre conservé pour le référencement et les lecteurs d'écran lorsque le
   visuel porte déjà l'information. */
.bt-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Bouton de descente vers le sélecteur --------------------------------- */
.bt-cover-cta {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 auto;
  padding: 11px 24px;
  background: var(--color-2);
  color: var(--color-1);
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--bt-font-main);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  transition: .16s;
}
.bt-cover-cta svg { transition: transform .16s; }
.bt-cover-cta:hover { filter: brightness(1.12); }
.bt-cover-cta:hover svg { transform: translateY(2px); }
.bt-cover-cta:focus-visible { outline: 2px solid var(--bt-secondary); outline-offset: 3px; }

.bt-cover { display: flex; flex-direction: column; align-items: center; }

/* Avec un visuel : le bouton chevauche le bord bas de l'image, moitié dessus,
   moitié sur le fond de page. L'ombre portée le détache de l'illustration
   quelle que soit la zone qu'il recouvre. */
.bt-cover.has-image .bt-cover-cta {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  box-shadow: 0 6px 18px rgba(58, 35, 40, .22);
}
/* Avec le motif de vagues : le bouton reste dans le flux. */
.bt-cover:not(.has-image) .bt-cover-cta { margin-top: 24px; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Compense l'en-tête collant lors d'un saut d'ancre. */
#billetterie, #cover, #infos {
  scroll-margin-top: calc(var(--bt-logo-height) / 0.7 + 20px);
}
/* Ligne de thème de l'édition : « Les femmes des pays celtes » en 2027. */
.bt-cover-theme {
  margin: 6px 0 0;
  font-family: var(--bt-font-main);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bt-secondary);
}
@media (min-width: 768px) { .bt-cover-title { font-size: var(--h1); } }


/* ========================== 6. SECTIONS ET TITRES ========================== */
.bt-section { padding: 40px 0; position: relative; }

.bt-section-title { text-align: center; margin-bottom: 6px; }
.bt-section-title h2 {
  font-size: var(--h2-xs);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--color-2);
  margin: 0;
  font-weight: 600;
}
.bt-section-title .bt-rule {
  display: block;
  width: 64px;
  height: 3px;
  background: var(--color-3);
  border-radius: 2px;
  margin: 12px auto 10px;
}
.bt-section-title p {
  color: var(--bt-muted);
  font-size: 14px;
  max-width: 620px;
  margin: 0 auto 28px;
}
@media (min-width: 768px) { .bt-section-title h2 { font-size: var(--h2); } }


/* ============================ 7. (section retirée) ========================= */
/* La section « informations pratiques » a été supprimée du corps de page : un
   minisite de billetterie n'a qu'un seul objet. Les liens pratiques, tarifs
   réduits, accessibilité, FAQ, sont descendus en pied de page, où ils restent
   accessibles sans occuper l'écran. Voir § 12. */

/* ------------------------- Avant de réserver ------------------------------
   Boutons pilule, comme les liens pratiques du pied de page : même vocabulaire
   visuel, donc reconnaissables comme « information » et non comme action
   d'achat. Deux entrées seulement, au-delà, la ligne devient un menu et entre
   en concurrence avec le sélecteur, qui est l'action principale de l'écran. */
.bt-prebook {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: -10px 0 26px;
}
.bt-prebook-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.bt-prebook-links a {
  font-size: 12.5px;
  text-decoration: none;
  color: var(--color-2);
  background: var(--color-1);
  border: 1px solid var(--bt-line);
  border-radius: 999px;
  padding: 6px 15px;
  transition: .14s;
}
.bt-prebook-links a:hover { border-color: var(--color-2); background: var(--bt-surface); }
.bt-prebook-links a:focus-visible { outline: 2px solid var(--bt-secondary); outline-offset: 2px; }

@media (max-width: 620px) {
  .bt-prebook { gap: 6px; margin-bottom: 22px; }
}

/* =============================== 8. ÉTAPES ================================= */
.bt-steps {
  display: flex; justify-content: center; flex-wrap: wrap;
  list-style: none; margin: 0 0 28px; padding: 0;
}
.bt-step {
  display: flex; align-items: center; gap: 9px; padding: 8px 20px;
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  color: #9aa0a8;
}
.bt-step-num {
  width: 23px; height: 23px; border-radius: 50%;
  border: 1.5px solid currentColor; display: grid; place-items: center; font-size: 11.5px;
}
.bt-step[aria-current="step"] { color: var(--color-2); }
.bt-step[aria-current="step"] .bt-step-num {
  background: var(--color-3); border-color: var(--color-3); color: var(--color-1);
}
.bt-step-sep { align-self: center; color: var(--bt-line); }


/* =============================== 9. FILTRES ================================ */
.bt-toolbar {
  background: var(--bt-surface);
  border: 1px solid var(--bt-line);
  border-radius: calc(var(--bt-radius) + 1px);
  padding: 18px 20px;
  margin-bottom: 22px;
}
.bt-field { position: relative; margin-bottom: 14px; }
.bt-field input {
  width: 100%; padding: 12px 40px 12px 42px;
  font-size: 14.5px; font-family: inherit; color: var(--bt-ink);
  background: var(--color-1); border: 1px solid var(--bt-line); border-radius: var(--bt-radius);
}
.bt-field input:focus {
  outline: none; border-color: var(--bt-secondary);
  box-shadow: 0 0 0 3px rgba(110, 154, 94, .18);
}
.bt-field-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--bt-muted); pointer-events: none; }
.bt-field-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: var(--bt-muted); font-size: 20px;
  line-height: 1; cursor: pointer; padding: 6px 9px;
}
.bt-field-clear:hover { color: var(--color-2); }

.bt-filter-row { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 11px; }
.bt-filter-row:last-child { margin-bottom: 0; }
.bt-filter-label {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .13em;
  color: var(--bt-muted); padding-top: 8px; min-width: 58px; flex-shrink: 0;
}
.bt-chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.bt-chip {
  border: 1px solid var(--bt-line); background: var(--color-1); color: #5a5f67;
  border-radius: var(--bt-radius); padding: 6px 13px; font-size: 12.5px;
  font-family: inherit; cursor: pointer; white-space: nowrap; transition: .12s;
}
.bt-chip:hover { border-color: var(--bt-secondary); color: var(--bt-secondary); }
.bt-chip[aria-pressed="true"] { background: var(--color-2); border-color: var(--color-2); color: var(--color-1); }
.bt-chip:focus-visible { outline: 2px solid var(--bt-secondary); outline-offset: 2px; }

.bt-resultbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.bt-count { font-size: 12.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--bt-muted); }
.bt-reset { background: none; border: 0; font-family: inherit; font-size: 12.5px; color: var(--bt-secondary); cursor: pointer; padding: 0; text-decoration: underline; }
.bt-reset:hover { color: var(--color-2); }


/* ========================= 10. CARTES DE SPECTACLES ======================== */
/* 360 px mini : 4 colonnes sur grand écran au lieu de 5, les titres tiennent
   sur 2 lignes au lieu de 3. */
.bt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; }
.bt-card {
  display: flex; overflow: hidden; text-align: left;
  background: var(--color-1); border: 1px solid var(--bt-line);
  border-radius: var(--bt-radius); padding: 0; font-family: inherit;
  cursor: pointer; transition: .15s;
}
.bt-card:hover { border-color: var(--color-2); box-shadow: 0 5px 18px rgba(58, 35, 40, .12); transform: translateY(-2px); }
.bt-card:focus-visible { outline: 2px solid var(--bt-secondary); outline-offset: 2px; }
/* Spectacle pas encore en vente : plus d'opacité globale, qui délavait la
   moitié de la grille. Le texte reste lisible ; seul le bandeau de date
   passe en couleur neutre pour signaler l'état. */
.bt-card[disabled] { cursor: default; opacity: 1; }
.bt-card[disabled] .bt-when { background: var(--bt-muted); }
.bt-card[disabled] .bt-title { color: var(--bt-ink); }
.bt-card[disabled]:hover { border-color: var(--bt-line); box-shadow: none; transform: none; }

.bt-when {
  display: flex; flex-direction: column; justify-content: center; text-align: center;
  background: var(--color-2); color: var(--color-1); min-width: 78px; padding: 14px 11px;
}
.bt-when { font-variant-numeric: lining-nums tabular-nums; }
.bt-when .dow  { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; opacity: .9; }
.bt-when .day  { font-size: 28px; line-height: 1.05; font-weight: 700; }
.bt-when .mon  { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; opacity: .9; }
.bt-when .hour { font-size: 13px; font-weight: 700; margin-top: 6px; padding-top: 5px; border-top: 1px solid rgba(255, 255, 255, .3); }

.bt-body  { flex: 1; min-width: 0; padding: 14px 16px; }
.bt-title { display: block; font-family: var(--bt-font-main); font-size: 16.5px; line-height: 1.3; font-weight: 700; color: var(--color-2); margin-bottom: 4px; }
.bt-sub   { display: block; font-size: 13.5px; color: var(--bt-muted); margin-bottom: 4px; }
.bt-venue { display: block; font-size: 13.5px; font-weight: 600; color: var(--bt-muted); margin-bottom: 10px; }
.bt-meta  { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.bt-cta   { align-self: center; padding: 0 15px; color: var(--color-2); font-family: var(--bt-font-title); font-size: 22px; }

.bt-badge {
  display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; padding: 3px 8px; border-radius: 3px;
  background: var(--bt-surface); color: var(--bt-muted);
  font-family: var(--bt-font-main);
}
.bt-badge-free     { background: rgba(110, 154, 94, .14); color: #4d7340; }
.bt-badge-numbered { background: rgba(166, 46, 85, .11);  color: #8d2547; }
.bt-badge-few      { background: #fdf0d8; color: #8a6414; }
.bt-badge-soldout  { background: #f2f3f5; color: #71767e; }
.bt-badge-soon     { background: #f3efe9; color: #7a6a52; }
.bt-badge-on-dark  { background: rgba(255, 255, 255, .18); color: var(--color-1); }

.bt-empty { padding: 40px; text-align: center; color: var(--bt-muted); font-size: 14px; border: 1px dashed var(--bt-line); border-radius: var(--bt-radius); }
.bt-empty-hint { margin-top: 6px; font-size: 13px; opacity: .8; }
.bt-helpnote { margin-top: 20px; font-size: 12.5px; color: var(--bt-muted); text-align: center; }


/* =========================== 11. ÉTAPE 2 : WIDGET ========================== */
.bt-back {
  background: none; border: 0; font-size: 12.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--bt-secondary); cursor: pointer;
  padding: 0; margin-bottom: 20px;
}
.bt-back:hover { color: var(--color-2); }

.bt-selected {
  position: relative; overflow: hidden;
  background: var(--color-2); color: var(--color-1);
  border-radius: var(--bt-radius) var(--bt-radius) 0 0;
  padding: 22px 26px;
}
.bt-selected-decor { position: absolute; inset: 0; width: 100%; height: 100%; }
.bt-selected-in { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.bt-selected h3 { font-size: var(--h3-xs); letter-spacing: .04em; margin: 0 0 5px; }
.bt-selected-meta { font-size: 13.5px; opacity: .85; }
.bt-selected-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Partage du spectacle choisi. Discret : il ne doit pas concurrencer le
   widget d'achat, qui reste l'action principale de l'écran. */
.bt-share {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  background: rgba(255, 255, 255, .14);
  color: var(--color-1);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  font-family: var(--bt-font-main);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: .14s;
}
.bt-share:hover { background: rgba(255, 255, 255, .24); }
.bt-share:focus-visible { outline: 2px solid var(--color-1); outline-offset: 2px; }
.bt-share svg { flex-shrink: 0; }
@media (min-width: 768px) { .bt-selected h3 { font-size: var(--h3); } }

/* Cadre du widget : UNE seule bordure pour la bande de texte et le widget.
   -----------------------------------------------------------------------------
   Auparavant les deux éléments portaient chacun leur bordure latérale, et le
   moindre écart entre eux rompait le filet. Ici la bordure est portée par le
   conteneur : la rupture est impossible par construction.

   Le rembourrage haut du widget Weezevent, lui, est à l'intérieur de l'iframe
   et varie selon l'état affiché (tarifs, ventes non ouvertes, complet). Il
   n'est pas atteignable depuis la page. Le fond blanc continu le fait lire
   comme une respiration plutôt que comme un raccord raté. */
.bt-widget-box {
  border: 1px solid var(--bt-line);
  border-top: 0;
  border-radius: 0 0 var(--bt-radius) var(--bt-radius);
  background: var(--color-1);
  overflow: hidden;
}
.bt-widget-intro {
  margin: 0;
  padding: 13px 26px 0;
  font-size: 13.5px;
  color: var(--bt-muted);
}
.bt-widget-slot {
  background: var(--color-1);
  min-height: 300px;
  line-height: 0;
  font-size: 0;
}
.bt-widget-slot iframe,
.bt-widget-slot > div,
.bt-widget-slot > span {
  display: block;
  width: 100%;
  border: 0;
  vertical-align: bottom;
}
.bt-widget-slot > *:first-child { margin-top: var(--bt-widget-offset) !important; }
.bt-widget-slot > a.weezevent-widget-integration { display: none !important; }
.bt-widget-slot .bt-widget-loading { line-height: 1.5; font-size: 13.5px; }

.bt-widget-loading { line-height: 1.5; font-size: 13.5px; }
.bt-widget-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; min-height: 400px; color: var(--bt-muted); font-size: 13.5px;
}
.bt-spinner {
  width: 30px; height: 30px; border: 3px solid var(--bt-line);
  border-top-color: var(--bt-secondary); border-radius: 50%;
  animation: bt-spin .8s linear infinite;
}
@keyframes bt-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bt-spinner { animation: none; } .bt-card { transition: none; } }

.bt-after {
  margin-top: 18px; background: var(--bt-surface); border: 1px solid var(--bt-line);
  border-radius: var(--bt-radius); padding: 16px 20px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
}
.bt-after p { margin: 0; font-size: 13.5px; color: var(--bt-muted); }


/* ============================ 12. PIED DE PAGE ============================= */
.bt-footwave { display: block; width: 100%; height: auto; margin-top: 40px; }

.bt-footer {
  background: var(--bt-dark);
  color: #aab3c0;
  padding: 30px 0 22px;
  font-size: 12.5px;
}
.bt-footer a { color: inherit; text-decoration: none; opacity: .8; }
.bt-footer a:hover { opacity: 1; color: var(--color-3); }

.bt-footer-links {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding-bottom: 22px; margin-bottom: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.bt-footer-links a {
  font-size: 12.5px; text-decoration: none; opacity: .85;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px; padding: 6px 14px;
}
.bt-footer-links a:hover { opacity: 1; border-color: var(--color-3); color: var(--color-3); }

.bt-footer-cols { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.bt-footer-name { color: var(--color-1); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.bt-footer-contact { line-height: 1.7; }
.bt-footer-socials ul { display: flex; align-items: center; justify-content: center; list-style: none; margin: 0; padding: 0; }
.bt-footer-socials li { margin: 0 8px; }
.bt-footer-socials a { display: flex; align-items: center; color: #aab3c0; }
.bt-footer-socials svg { height: 20px; width: auto; }
.bt-footer-legal ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; flex-wrap: wrap; justify-content: flex-end; }

.bt-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  margin-top: 22px; padding-top: 14px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 11.5px; opacity: .6;
}


/* ============================== 13. RESPONSIVE ============================= */
@media (max-width: 899px) {
  .bt-topbar .container { justify-content: center; font-size: 11px; gap: 14px; }
  .bt-logo img { height: var(--bt-logo-height-mobile); }
  .bt-header-in { min-height: calc(var(--bt-logo-height-mobile) / 0.54); }
  .bt-header-right { gap: 10px; }
}
@media (max-width: 400px) {
  .bt-logo img { height: calc(var(--bt-logo-height-mobile) * 0.9); }
  .bt-back-site { padding: 7px 11px; }
  .bt-lang-select { padding: 8px 25px 8px 9px; background-position: right 8px center; }
  .bt-back-short { font-size: 12px; }
}
@media (max-width: 767px) {
  .bt-cover.has-image { margin-bottom: 24px; }
  .bt-cover.has-image .bt-cover-cta { padding: 10px 20px; font-size: 12.5px; }
  #billetterie, #cover, #infos { scroll-margin-top: calc(var(--bt-logo-height-mobile) / 0.54 + 16px); }
}
@media (max-width: 620px) {
  .bt-filter-row { flex-direction: column; gap: 7px; }
  .bt-filter-label { padding-top: 0; }
  .bt-toolbar { padding: 14px; }
  .bt-grid { grid-template-columns: 1fr; }
  .bt-step { padding: 8px 12px; font-size: 11.5px; }
  .bt-selected { padding: 18px; }
  .bt-widget-intro { padding: 12px 18px 0; }
  .bt-footer-links { justify-content: center; }
  .bt-footer-cols { flex-direction: column; text-align: center; }
  .bt-footer-legal ul { justify-content: center; }
  .bt-footer-bottom { flex-direction: column; text-align: center; }
}
.bt-powered { opacity: .75; text-decoration: none; }
.bt-powered:hover { opacity: 1; color: var(--color-3); text-decoration: underline; }