/* Le Billet (design 01 des fiches, choisi par Mathieu le 2026-11-04) : la fiche d'un événement des deux vues, pour tout le monde
   (partials/event_billet_body, pages/monde/event, Support/EventBillet).
   Repris de la maquette « Designs des fiches » (design 1, page Événement) : ses jetons, ses polices et ses règles, posés sur les vrais
   blocs de la page. Sous .bt-page : la souche en haut (fond doux de l'accent, cadre pointillé arrondi : pastilles, « ← Événements »,
   titre, faits en colonnes ; à droite, les boutons empilés), puis la colonne principale (image, À propos) et la colonne de droite
   (Partager, invitation Facebook, Sur le web, Sur la carte). Une image n'est jamais rognée. Les variantes ne diffèrent que par la place
   d'une image carrée ou en portrait. */

/* La page : la grille de la fiche s'efface, le Billet prend sa place, dans la largeur commune du site (celle de l'en-tête et du pied). */
.sfiche.bt-page, .sevpage.bt-page { display: block; }

/* Les jetons de la maquette (fond clair seulement, comme le site). */
.bt {
  --bt-ground: #FFF8EC; --bt-surface: #FFFDF8; --bt-surface-2: #FFEDCC; --bt-surface-3: #FBE0B0;
  --bt-ink: #491703; --bt-text-2: #6B3A1E; --bt-muted: #7A4E33;
  --bt-accent: #C7721C; --bt-accent-text: #9D5A16; --bt-accent-soft: #FFE3BF; --bt-on-accent: #FFFDF8;
  --bt-border: rgba(73, 23, 3, 0.14); --bt-border-strong: rgba(73, 23, 3, 0.32);
  --bt-mus-bg: #FFE3BF; --bt-mus-ink: #8A3C08; --bt-fb: #1877F2; --bt-fb-ink: #FFFFFF;
  --bt-display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --bt-body: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bt-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  display: flex; flex-direction: column; gap: 26px;
  margin: 0 0 32px; color: var(--bt-ink); font: 16px/1.55 var(--bt-body); letter-spacing: normal;
}
@media (min-width: 900px) {
  .bt { display: grid; gap: 26px 34px; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-template-areas: "souche souche" "main side"; align-items: start; }
}
/* Les blocs déplacés gardent leur grid-area et leurs marges de fiche.css : on les efface dans le Billet. */
.bt :is(.bt-souche, .bt-info, .bt-kick, .bt-title, .bt-cta, .bt-main, .bt-side, .bt-text, .bt-pair, .bt-fact) > * { grid-area: auto; }
.bt a { color: var(--bt-accent-text); }
.bt :is(h1, h2, h3, p, ul, dl, dd, figure) { font-family: inherit; }
/* La page garde « ← Événements » au-dessus quand le Billet est éteint ; dans la souche, il passe sous les pastilles. */
.bt-main { grid-area: main; min-width: 0; display: grid; gap: 22px; align-content: start; }
.bt-side { grid-area: side; min-width: 0; display: grid; gap: 22px; align-content: start; }
.bt-text { min-width: 0; }

/* La souche. */
.bt-souche { grid-area: souche; display: grid; gap: 22px; padding: 20px 22px; border: 2px dashed var(--bt-border-strong); border-radius: 14px; background: var(--bt-surface-2); }
.bt-info { min-width: 0; display: grid; gap: 22px; align-content: start; }
.bt-info > *, .bt-kick > *, .bt-title > * { margin: 0; }
.bt-kick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }
.bt-kick:empty, .bt-info > :empty { display: none; }
.bt-kick .sf-tags--crumbs, .bt-kick .sf-crumbs, .bt-kick .sf-crumbs ol { display: contents; }
html body .bt-page .bt-kick .stags { width: auto; flex: 0 1 auto; }
html body .bt-page .bt-kick .sevpage__parent { flex: 0 1 auto; }
html body .bt-page .bt-kick :is(.stags, .sf-crumbs ol) { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
html body .bt-page .bt-kick :is(.stag, .sf-crumbs li) { display: inline-flex; align-items: center; margin: 0; padding: 3px 10px; border: 1px solid var(--bt-border-strong); border-radius: 999px; background: transparent; color: var(--bt-text-2); font: 600 13px/1.4 var(--bt-body); letter-spacing: normal; text-transform: none; }
.bt-kick .sf-crumbs li::before, .bt-kick .sf-crumbs li::after { content: none; }
html body .bt-page .bt-kick :is(.stag--cat, .stag--disc, .sf-crumbs li:first-child) { border-color: transparent; background: var(--bt-mus-bg); color: var(--bt-mus-ink); }
.bt-kick .sf-crumbs a { color: inherit; text-decoration: none; }
.bt-kick .sevpage__parent { font-size: 14px; color: var(--bt-text-2); }
.bt-title .sback { margin: 0 0 8px; font-size: 14px; }
.bt-title .sback a { color: var(--bt-muted); text-decoration: none; }
.bt-title .sback a:hover { text-decoration: underline; }
html body .bt-page .bt .bt-title h1 { margin: 0; font: 800 clamp(30px, 4.2vw, 52px)/1.02 var(--bt-display); letter-spacing: -0.01em; color: var(--bt-ink); text-wrap: balance; overflow-wrap: anywhere; text-transform: none; }
.bt-info .sf-head { display: contents; border: 0; padding: 0; margin: 0; }
.bt-info .sf-head .eyebrow, .bt-info > .eyebrow { display: none; }
.bt-cta .sevpage__members { margin: 0; padding: 0; border: 0; }
.bt-info .sf-head .sf-kicker:not(:has(:not(.eyebrow))) { display: none; }
.bt-info .sf-notices { display: grid; gap: 6px; }

/* Quand, Où, Qui, Prix : des colonnes, l'étiquette en petites capitales espacées, la valeur, puis le détail plus petit. */
.bt :is(.sf-facts, .bt-facts) { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0; }
.bt .sf-fact, .bt .bt-fact { display: grid; align-content: start; margin: 0; padding: 0; border: 0; }
html body .bt-page .bt :is(.sf-fact dt, .sf-lab, .bt-dt) { margin: 0; font: 700 12px/1.6 var(--bt-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--bt-muted); }
.bt :is(.sf-fact dd, .bt-fact) { margin: 0; font-size: 16px; color: var(--bt-ink); }
.bt :is(.sf-fact dd, .bt-fact) > * { margin: 0; }
.bt :is(.sf-fact dd, .bt-fact) :is(.muted, .small, small, .sf-hours, .sevpage__access) { display: block; font-size: 14px; color: var(--bt-text-2); }
.bt :is(.sf-fact dd, .bt-fact) .sevpage__when { font: 400 16px/1.55 var(--bt-body); }
.bt .sevpage__where .muted { display: inline; }

/* Un bloc caché par le Billet reste caché, même quand une règle du Billet lui donne un affichage. */
.bt [hidden] { display: none !important; }

/* Quand et Prix réécrits (heures : les portes d'abord ; prix : le montant, puis les précisions). */
.bt .bt-sub { display: block; margin: 0; font-size: 14px; color: var(--bt-text-2); }
.bt .bt-val { margin: 0; font-size: 16px; color: var(--bt-ink); }
.bt dd.bt-price { margin: 0; }

/* Les boutons, empilés sur toute la largeur de la colonne, séparés de la souche par un trait pointillé. */
.bt-cta { display: flex; flex-direction: column; justify-content: center; gap: 8px; min-width: 0; padding-top: 14px; border-top: 2px dashed var(--bt-border-strong); }
.bt-cta > *, .bt-cta .smarks > *, .bt-cta .smarks__buttons > * { margin: 0; }
.bt-cta .sf-cta, .bt-cta .smarks, .bt-cta .smarks__buttons, .bt-cta .smarks__buttons form { display: contents; }
html body .bt-page .bt-cta :is(.sbtn, .smark, .bt-btn) { display: flex; justify-content: center; align-items: center; gap: 6px; width: 100%; min-height: 0; margin: 0; padding: 9px 14px; border: 1px solid var(--bt-border-strong); border-radius: 10px; background: var(--bt-surface); color: var(--bt-ink); font: 600 15px/1.3 var(--bt-body); letter-spacing: normal; text-transform: none; text-decoration: none; box-shadow: none; cursor: pointer; }
html body .bt-page .bt-cta .sbtn { border-color: var(--bt-accent); background: var(--bt-accent); color: var(--bt-on-accent); }
html body .bt-page .bt-cta .smark[aria-pressed="true"] { border-color: var(--bt-accent); background: var(--bt-accent-soft); }
.bt-cta .smark__tick { color: inherit; }
.bt-cta .smarks__counts { text-align: center; font-size: 13px; color: var(--bt-muted); }
.bt-cal summary { list-style: none; white-space: nowrap; }
.bt-cal summary::-webkit-details-marker { display: none; }
.bt-cal .scal { display: grid; gap: 6px; margin: 8px 0 0; }
.bt-cal .scal .sshare__label { display: none; }
.bt-cal .scal .sshare__btn { justify-content: center; }
@media (min-width: 900px) {
  .bt-souche { grid-template-columns: minmax(0, 1fr) 240px; gap: 16px 22px; }
  .bt-cta { padding: 0 0 0 20px; border-top: 0; border-left: 2px dashed var(--bt-border-strong); align-self: stretch; }
}

/* Le visuel : coins arrondis, légende dessous, jamais rogné. */
.bt-fig { margin: 0; min-width: 0; }
.bt-fig a { display: block; }
.bt-fig img { display: block; width: auto; max-width: 100%; height: auto; margin-inline: auto; border-radius: 10px; cursor: zoom-in; }
.bt-fig figcaption { margin-top: 4px; font-size: 12px; color: var(--bt-muted); }
.bt[data-format="paysage"] .bt-fig img { width: 100%; }
/* Téléphone : pleine largeur, au plus la moitié de l'écran en hauteur (un toucher l'agrandit). */
.bt .bt-fig img { max-height: 50vh; }
.bt-spill { display: grid; gap: 22px; }
.bt-pair, .bt-pair__texte { display: grid; gap: 22px; align-content: start; min-width: 0; }
.bt-spill:empty { display: none; }
.bt-extras { display: grid; gap: 22px; align-content: start; }

@media (min-width: 900px) {
  .bt .bt-fig img { max-height: 560px; }
  .bt:not([data-format="paysage"]) .bt-fig img { margin-inline: 0; }
  /* Peu de texte : le texte (puis Sur le web et la carte) à gauche, le visuel à droite, dans la colonne principale. */
  .bt-pair { grid-template-columns: minmax(0, 1fr) minmax(220px, 44%); gap: 26px; align-items: start; }
  .bt-pair > .bt-fig { grid-column: 2; grid-row: 1; }
  .bt-pair > .bt-pair__texte { grid-column: 1; grid-row: 1; }
  .bt-pair > .bt-fig img { width: auto; max-width: 100%; max-height: 560px; margin-inline: 0; }
  /* Carré, portrait ou photo d'artiste : dans la colonne de droite, sous Partager. */
  .bt-side > .bt-fig img { width: auto; max-width: 100%; max-height: 640px; margin-inline: auto; }
}

/* À propos, Partager, Sur le web, Sur la carte : les titres de la maquette. */
html body .bt-page .bt :is(.bt-h2, .sf-desc > .sf-lab, .sshare__label, .sweb__label, .smap > .sf-lab, .splayers h2) { display: block; margin: 0 0 10px; font: 700 20px/1.2 var(--bt-display); letter-spacing: normal; text-transform: none; color: var(--bt-ink); }
.bt .sf-desc { margin: 0; padding: 0; border: 0; }
.bt .sprose { font: 16px/1.55 var(--bt-body); color: var(--bt-ink); }
.bt .sprose p { margin: 0 0 12px; max-width: 68ch; }

/* Partager et Sur le web : des pilules. */
.bt-side > * { margin: 0; }
.bt :is(.bt-side, .bt-spill) :is(.sshare, .sweb) { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
html body .bt-page .bt :is(.sshare__label, .sweb__label) { flex: 0 0 100%; }
html body .bt-page .bt :is(.sshare__btn, .sweb__link) { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 7px 12px; border: 1px solid var(--bt-border-strong); border-radius: 999px; background: var(--bt-surface); color: var(--bt-ink); font: 600 14px/1.3 var(--bt-body); letter-spacing: normal; text-transform: none; text-decoration: none; box-shadow: none; }
html body .bt-page .bt :is(.sshare__btn, .sweb__link) svg { width: 18px; height: 18px; flex: none; }
.bt .sshare__btn[hidden] { display: none; }
/* L'invitation Facebook : une ligne de texte sous les boutons de partage, comme la maquette. */
html body .bt-page .bt-side .sinvite { margin: -10px 0 0; padding: 0; border: 0; background: none; box-shadow: none; font-size: 14px; color: var(--bt-text-2); }
html body .bt-page .bt-side .sinvite__card { display: none; }
html body .bt-page .bt-side .sinvite__title { display: inline; margin: 0; font: inherit; color: inherit; }
html body .bt-page .bt-side .sinvite__actions { display: inline; margin: 0 0 0 4px; }
html body .bt-page .bt-side .sinvite__btn { display: inline; padding: 0; border: 0; background: none; color: var(--bt-accent-text); font: 600 14px/1.5 var(--bt-body); text-decoration: underline; }
html body .bt-page .bt-side .sinvite__btn svg { display: none; }
.bt-side .smap { margin: 0; padding: 0; border: 0; }
.bt-side .smap__box { border: 1px solid var(--bt-border); border-radius: 10px; overflow: hidden; }
html body .bt-page .bt-side :is(.sreport, .sclaim, .snudge) { margin: 0; font-size: 13px; color: var(--bt-muted); }

/* La mini-fiche de la salle : logo, nom, adresse, lien vers sa fiche. */
.bt-venue { display: flex; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--bt-border); border-radius: 12px; background: var(--bt-surface); }
.bt-venue__logo { flex: none; width: 56px; height: 56px; object-fit: contain; border-radius: 8px; background: var(--bt-ground); }
.bt-venue__logo--initiale { display: grid; place-items: center; background: var(--bt-accent-soft); color: var(--bt-accent-text); font: 800 26px/1 var(--bt-display); }
.bt-venue__text { min-width: 0; }
.bt-venue__text p { margin: 0; }
.bt-venue__name { font: 700 17px/1.25 var(--bt-display); }
.bt-venue__name a { color: var(--bt-ink); text-decoration: none; }
.bt-venue__where { font-size: 14px; color: var(--bt-text-2); }
.bt-venue__more, .bt-venue__extra { margin: 0; font-size: 13px; }
.bt-venue__extra a { color: var(--bt-accent-text); }

/* Le zoom (zoom.js) : la vue monde ne charge pas components.css, ses règles sont reprises ici telles quelles. */
.zoom { max-width: min(96vw, 72rem); max-height: 94dvh; margin: auto; padding: var(--space-4); border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-card); overflow: auto; }
.zoom[open] { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.zoom::backdrop { background: color-mix(in srgb, var(--color-ink) 70%, transparent); }
.zoom__img { display: block; max-width: 100%; max-height: calc(94dvh - 9rem); width: auto; height: auto; object-fit: contain; }
.zoom__info { max-width: 40em; text-align: center; color: var(--color-text-2); font-size: 0.9375rem; }
.zoom__info a { color: var(--color-ink); font-weight: 600; }
.zoom__close { position: sticky; top: 0; align-self: flex-end; flex: 0 0 auto; width: 44px; height: 44px; margin-bottom: calc(-1 * var(--space-3) - 44px); z-index: 1; border: 0; border-radius: var(--radius-pill); background: var(--color-surface-2); color: var(--color-ink); font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.zoom__close:hover { background: var(--color-accent-soft); }