/* Mise en page produit.
   Leçon apprise à la dure : NE JAMAIS mettre le SVG du plan à l'échelle. Le
   moteur calcule ses zones cliquables sur la taille réelle ; toute mise à
   l'échelle CSS décale les clics. On garde la taille native et on SCROLLE. */

/* ─────────────── DESKTOP : plan à gauche, catégories à droite ─────────────── */
@media (min-width: 1024px) {
  .tm-seatmap-section { background: #fff !important; }

  .sm-planwrap.sm-stage {
    display: grid !important;
    grid-template-columns: minmax(0, 1.5fr) minmax(340px, 1fr);
    gap: 24px;
    max-width: 1300px;
    margin: 0 auto;
    padding: 20px clamp(16px, 3vw, 32px) 44px;
    height: auto !important;
    background: #fff !important;
    align-items: stretch;
  }

  .sm-planwrap.sm-stage > .sm-stage-pan {
    position: relative !important;
    height: 76vh !important;
    max-height: 76vh !important;
    overflow: auto !important;
    background: #fff !important;
    border: 1px solid #e6e1d8;
    border-radius: 14px;
    box-shadow: 0 10px 34px rgba(0, 0, 0, .05);
    transform: none !important;
    touch-action: auto !important;
  }
  .sm-planwrap.sm-stage > .sm-stage-pan svg { max-height: none !important; max-width: none !important; }

  .sm-planwrap.sm-stage > .sm-sheetlist {
    position: static !important;
    height: 76vh !important;
    max-height: 76vh !important;
    overflow: auto !important;
    transform: none !important;
    inset: auto !important;
    background: #fff !important;
    border: 1px solid #e6e1d8;
    border-radius: 14px;
  }

  .sm-planwrap.sm-stage > .sm-stage__cue { display: none !important; }
}

/* ─────────────── MOBILE : tout empilé, scroll de page libre ───────────────
   Le moteur pose les catégories dans une "bottom-sheet" poussée par un
   transform:translateY(54%) et un scroll interne (.sm-sheetlist__scroll) — ce
   qui crée un grand vide gris et piège le tactile. On annule le transform, on
   déroule le scroll interne, on masque la poignée : la scène puis les catégories
   défilent naturellement avec la page, dans les deux sens. Pas de zoom. */
@media (max-width: 1023px) {
  .sm-planwrap.sm-stage {
    position: relative !important;
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .sm-planwrap.sm-stage > .sm-stage-pan {
    position: relative !important;
    inset: auto !important; left: auto !important; top: auto !important; right: auto !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    /* pan-y : le doigt fait défiler la page verticalement ET un tap ouvre la
       zone (avec `auto`, un vrai tap déclenche un scroll natif qui annule le
       tap → la modale ne s'ouvrait pas sur mobile réel). */
    touch-action: pan-y !important;
    transform: none !important;
    background: #fff !important;
    border: 1px solid #e6e1d8;
    border-radius: 12px;
    padding: 8px 0;
  }
  .sm-planwrap.sm-stage > .sm-stage-pan svg { touch-action: pan-y !important; }
  .sm-planwrap.sm-stage > .sm-sheetlist {
    position: relative !important;
    inset: auto !important; left: auto !important; top: auto !important; right: auto !important;
    transform: none !important;                 /* annule le translateY de la bottom-sheet */
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin-top: 16px;
    touch-action: pan-y !important;
    box-shadow: none !important;
  }
  .sm-sheetlist__scroll {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    touch-action: pan-y !important;
  }
  .sm-sheetlist__grip { display: none !important; }   /* poignée de sheet inutile en flux */
  .sm-planwrap.sm-stage > .sm-stage__cue { display: none !important; }

  /* La modale de zone est une bottom-sheet : on la fixe au viewport (jamais
     décalée par le scroll de page) et l'overlay fermé ne doit pas intercepter
     les taps. */
  .sm-dsheet-ov { position: fixed !important; inset: 0 !important; z-index: 99999 !important; }
  .sm-dsheet-ov:not(.is-open) { pointer-events: none !important; }
}

/* ─────────────── Modale de zone (desktop : deux colonnes) ───────────────
   Gauche : photo + prix + billets + garanties. Droite : choix des sièges. */
@media (min-width: 1024px) {
  .sm-dsheet { width: min(1060px, 94vw) !important; max-width: 1060px !important;
    height: auto !important; max-height: 90vh !important; }   /* plus de vide blanc */
  .sm-dsheet__body { min-height: 0 !important; overflow: auto !important; }
  .md-2col {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    column-gap: 28px;
    align-items: start;
  }
  .md-left, .md-right { min-width: 0; }
  .md-left .sm-view img { border-radius: 14px; }
  .md-right { max-height: 62vh; overflow: auto; padding-right: 4px; }
}

/* Garanties dans la modale (les deux réassurances). */
.md-assur { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.md-assur__item { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #2b2b2f;
  font-family: Manrope, system-ui, sans-serif; }
.md-assur__item svg { flex: none; width: 20px; height: 20px; color: #1f8a4c; }
.md-assur__item b { font-weight: 600; }
.md-assur__item span { color: #6b6b73; }
@media (max-width: 1023px) { .md-assur { margin: 16px clamp(12px, 4vw, 20px) 4px; } }

/* Logos de paiement, sous le bouton réserver (dans le pied de la modale). */
.sm-foot { flex-wrap: wrap !important; }
.md-pay { flex-basis: 100% !important; order: 9; display: flex; align-items: center; gap: 8px;
  justify-content: center; padding-top: 12px; margin-top: 10px; border-top: 1px solid #eee; }
.md-pay__lbl { font-size: 12px; color: #9a97a4; font-family: Manrope, system-ui, sans-serif; margin-right: 2px; }
.md-pay svg { height: 22px; width: auto; display: block; border-radius: 3px; }

/* Bouton "Meilleures places" retiré partout (choix produit). */
.sm-best { display: none !important; }

/* ─────────────── Section "Autres dates de l'artiste" ───────────────
   Remplace le bloc copyright d'origine, en bas des pages produit. */
.fb-other { background: #0b0b0f; font-family: Manrope, system-ui, sans-serif;
  padding: 40px clamp(16px, 4vw, 40px); border-top: 1px solid rgba(244,241,234,.12); }
.fb-other__in { max-width: 1180px; margin: 0 auto; }
.fb-other h3 { margin: 0 0 20px; font-family: Anton, sans-serif; font-size: clamp(20px, 3vw, 28px);
  letter-spacing: .02em; color: #f4f1ea; font-weight: 400; }
.fb-other__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.fb-date { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,179,71,.10), rgba(224,122,31,.04));
  border: 1px solid rgba(244,241,234,.12); text-decoration: none; transition: border-color .16s, transform .16s; }
.fb-date:hover { border-color: rgba(255,179,71,.5); transform: translateY(-2px); }
.fb-date__d { flex: none; width: 52px; text-align: center; }
.fb-date__day { display: block; font-family: Anton, sans-serif; font-size: 22px; color: #ffb347; line-height: 1; }
.fb-date__mon { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: #9a97a4; margin-top: 3px; }
.fb-date__t { min-width: 0; }
.fb-date__v { display: block; font-size: 14px; font-weight: 600; color: #f4f1ea; }
.fb-date__c { display: block; font-size: 12px; color: #9a97a4; margin-top: 2px; }
.fb-other__empty { color: #9a97a4; font-size: 14px; }