/* Billetterie (C28 ; billets express 04/11/2026) — téléphone d'abord, bureau sans défilement :
   produits à gauche, commande collée à droite. Composants : ui.css ; jetons du parcours :
   reserver.css. */

/* ── En-tête compact de la page ─────────────────────────────────────── */
.r-page--billets { padding-top: 20px; }
@media (min-width: 768px) { .r-page--billets { padding-top: 24px; } }
.r-page--billets .r-head { max-width: none; margin: 0 0 12px; }
.r-page--billets .r-eyebrow { margin-bottom: 4px; font-size: 12px; }
.r-page--billets .r-title { margin: 0 0 4px; font-size: clamp(26px, 3vw, 34px); }
.r-page--billets .r-lead { font-size: 15px; }
.r-page--billets .r-steps { margin: 0 0 16px; }
@media (min-width: 1024px) {
  /* Titre, phrase et étapes sur une seule bande : la vente commence au-dessus du pli. */
  .r-page--billets .r-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: end; }
  .r-page--billets .r-head { grid-column: 1; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 14px; margin: 0; }
  .r-page--billets .r-eyebrow { flex-basis: 100%; margin: 0 0 2px; }
  .r-page--billets .r-title { margin: 0; font-size: 30px; }
  .r-page--billets .r-lead { margin: 0; font-size: 14px; }
  .r-page--billets .r-steps { grid-column: 2; margin: 0 0 2px; gap: 6px 14px; }
  .r-page--billets .r-step__label { font-size: 13px; }
  .r-page--billets .r-wrap > .r-alert, .r-page--billets .r-wrap > .b-tunnel { grid-column: 1 / -1; }
  .r-page--billets .b-tunnel { margin-top: 14px; }
}

/* ── Grille bureau : produits | commande ────────────────────────────── */
.b-tunnel { position: relative; padding-bottom: 104px; }
.b-form { display: block; }
.b-form > .ui-alert { margin-bottom: 12px; }
.b-grid { display: grid; gap: 12px; align-items: start; }
.b-produits { display: grid; gap: 12px; min-width: 0; }
.b-resume { display: none; }
.b-mentions { padding: 0 2px; font-size: 12px; }
@media (min-width: 1024px) {
  .b-tunnel { padding-bottom: 24px; }
  .b-grid { grid-template-columns: minmax(0, 1fr) 352px; gap: 20px; }
  .b-resume { display: block; }
  .b-resume__carte { position: sticky; top: 96px; box-shadow: var(--ui-shadow-md); }
  .b-barre { display: none !important; }
}
@media (min-width: 1280px) { .b-grid { grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; } }

/* Bureau : lignes denses, en-têtes de carte sur une ligne — entrées, packs et bouton Payer
   tiennent au-dessus du pli à 1366 × 768. */
@media (min-width: 1024px) {
  .b-produits .ui-card__header { flex-direction: row; align-items: baseline; gap: 10px; padding: 10px 16px 8px; }
  .b-produits .ui-card__description { font-size: 12.5px; }
  .b-produits .ui-row { padding: 7px 16px; grid-template-columns: 40px minmax(0, 1fr) 72px 112px; }
  .b-produits .ui-thumb { width: 40px; height: 40px; }
  .b-produits .ui-row__desc { -webkit-line-clamp: 1; }
  .b-produits .ui-stepper { height: 34px; grid-template-columns: 34px 34px 34px; }
  .b-ajouts > summary { padding: 10px 16px; }
}

/* ── Récapitulatif ──────────────────────────────────────────────────── */
.b-resume__vide { padding: 4px 0 2px; }
.b-resume__vide[hidden] { display: none; }
.b-payer { margin-top: 12px; }
.b-resume__legal { margin: 10px 0 10px; font-size: 12px; line-height: 1.45; }
.b-resume__sav { margin: 10px 0 0; font-size: 12px; line-height: 1.45; }
.ui-summary__total { padding: 2px 0 0; }

/* ── Ajouts repliés ─────────────────────────────────────────────────── */
.b-ajouts > summary { list-style: none; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between; gap: 12px; cursor: pointer; }
.b-ajouts > summary::-webkit-details-marker { display: none; }
.b-ajouts > summary > span:first-child { display: grid; gap: 2px; }
.b-ajouts__chevron { flex: none; width: 9px; height: 9px; border-right: 1.5px solid var(--ui-muted-fg); border-bottom: 1.5px solid var(--ui-muted-fg); transform: rotate(45deg); transition: transform .15s; margin: 0 6px 4px 0; }
.b-ajouts[open] > summary .b-ajouts__chevron { transform: rotate(-135deg); margin-bottom: -2px; }
.b-ajouts__regle { padding: 0 16px 8px; }

/* Téléphone : cibles de 44 px pour le compteur. */
@media (max-width: 639.98px) {
  .ui-stepper { height: 44px; grid-template-columns: 44px 44px 44px; }
  .ui-row { padding: 12px 14px; }
}

/* ── Visuels ────────────────────────────────────────────────────────── */
.b-visuel { width: 100%; height: 100%; display: block; }
.b-visuel--photo { object-fit: cover; }
.b-visuel__fond { fill: var(--ui-bg, #fff); }
.b-visuel__plein { fill: currentColor; stroke: none; opacity: .9; }

/* ── Barre collée (téléphone) ───────────────────────────────────────── */
.b-barre { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff; color: #09090b; border-top: 1px solid #e4e4e7; box-shadow: 0 -8px 24px rgba(0, 0, 0, .08); }
.b-barre__total { margin: 0; font: 500 13px/1.2 var(--font-sans); color: #71717a !important; }
.b-barre__label { display: block; margin-bottom: 2px; }
.b-barre__total strong { font-size: 20px; color: #09090b; font-variant-numeric: tabular-nums; }
.b-barre__total small { font-size: 11px; margin-left: 2px; }
.b-barre__actions { display: flex; align-items: center; gap: 12px; }
.b-barre__btn { min-width: 160px; }

/* Étape 3 */
.b-identite { margin: 0 0 14px; padding: 0; border: 0; }
.b-identite legend { margin: 0 0 8px; font: 800 14px/1.4 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--r-paper-soft); }
.b-identite__champs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.b-noms { margin-top: 18px; }
.b-noms .b-champ { color: var(--color-text-soft); }
.b-noms .b-champ input { color: var(--color-text); }
.b-champ { display: grid; gap: 4px; margin: 0 0 10px; font: 700 13px/1.4 var(--font-sans); color: var(--r-paper-soft); }
.b-champ input { min-height: 46px; padding: 0 12px; border: 1.5px solid rgba(0, 0, 0, .18); border-radius: 10px; font: 500 16px/1.3 var(--font-sans); color: var(--r-paper-text); background: #fff; }
.b-champ input:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 1px; }
.b-cgv { margin: 12px 0; }
.b-cgv summary { cursor: pointer; font: 700 14px/1.4 var(--font-sans); color: var(--r-paper-text); }
.b-case { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; font: 600 15px/1.45 var(--font-sans); color: var(--r-paper-text); }
.b-case input { width: 20px; height: 20px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--color-accent); }
/* Billetterie fermée (ID1.1) : être informé de l'ouverture, tarifs annoncés à côté */
.b-fermee { display: grid; gap: 20px; align-items: start; margin-bottom: 20px; }
.b-fermee > .r-card { margin: 0; }
@media (min-width: 960px) { .b-fermee { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.b-alerte .r-form { gap: 14px; }
.b-tarifs__liste { margin: 0; padding: 0; list-style: none; }
.b-tarifs__liste li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.b-tarifs__liste li:last-child { border-bottom: 0; }
.b-tarifs__nom { font-weight: 600; color: var(--color-text); }
.b-tarifs__nom small { display: block; font-weight: 400; font-size: 13px; color: var(--color-text-soft); }
.b-tarifs__prix { flex-shrink: 0; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-text); }
.b-alerte .b-case { margin: 0; }
.b-alerte__ok { margin: 0; padding: 12px 14px; border-left: 4px solid var(--color-accent); background: var(--color-accent-soft, rgba(0, 0, 0, .04)); font-weight: 600; color: var(--r-paper-text); }
.b-h3 { margin: 18px 0 8px; font: 800 15px/1.4 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-soft); }
[data-b-compte] strong { font-variant-numeric: tabular-nums; }

/* Thème Versailles, charte TCGCON v1.0 (ID1) : cartes 8 px, contrôles 4 px, arrondi complet
   réservé aux badges, bordures de champs à 3:1 au moins, lien et sélection cobalt. */
.theme-versailles .b-champ input { border: 1px solid #77777F; border-radius: 4px; }
.theme-versailles .b-champ input:focus-visible { outline-color: #101014; outline-offset: 3px; }
.theme-versailles .b-h3, .theme-versailles .b-identite legend { color: var(--color-text); font-weight: 600; letter-spacing: .14em; }
.b-expire { margin: 12px 0 0; }

/* ── Page de paiement : paiement à gauche, commande à droite (visible aussi sur téléphone) ── */
.b-grid--pay .b-resume { display: block; }
.b-grid--pay .b-produits { order: 1; }
.b-grid--pay .b-resume { order: 2; }
@media (min-width: 1024px) { .b-grid--pay .b-resume__carte { position: sticky; top: 96px; } }
.r-pay .r-checkout { min-height: 320px; }
.b-trust { margin-top: 12px; font-size: 12px; }
.b-cgv { margin-top: 10px; }
.b-cgv summary { cursor: pointer; }
.b-cgv p { margin-top: 8px; }