/* Page match : affiche, informations, plan du stade.
   Complète product-layout.css (modale, grille de sièges) et la feuille du
   moteur. Volontairement courte : le gros de la mise en page est au moteur. */

.match {
  margin: 0;
  background: #f4f1ea;
  color: #14121a;
  font-family: Manrope, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.mhero {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 44px) clamp(16px, 4vw, 40px) clamp(18px, 3vw, 30px);
}

  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(20, 18, 26, .16);
}

.mhero__competition {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #c8102e;
}

.mhero__titre {
  margin: 0;
  font-size: clamp(30px, 5.2vw, 54px);
  line-height: 1.03;
  font-weight: 800;
  letter-spacing: -.02em;
}

.mhero__date {
  margin: 14px 0 4px;
  font-size: clamp(15px, 2vw, 19px);
  font-weight: 600;
}

.mhero__lieu {
  margin: 0;
  color: #6b6875;
  font-size: 15px;
}

.mhero__prix {
  margin: 18px 0 0;
  font-size: 15px;
  color: #6b6875;
}
.mhero__prix b { color: #14121a; font-size: 22px; }
.mhero__prix span { font-size: 13px; }

.mbandeau {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 16px;
  background: #e8f5ec;
  color: #1d6b3f;
  font-size: 14px;
  font-weight: 600;
}

.mplan {
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(16px, 3vw, 30px) clamp(8px, 2vw, 24px) 60px;
}

.mplan__noscript {
  padding: 24px;
  background: #fff;
  border-radius: 14px;
  text-align: center;
  color: #6b6875;
}

@media (max-width: 760px) {
  .mhero { padding-top: 20px; }
}

/* ─────────────────────────────────────────────────────────────────────
   CHARTE FOOTNATION — surcharge du moteur de plan.

   Le moteur a été conçu pour un thème sombre et pour des cartes illustrées.
   Ici : fond blanc, encre bleue, rouge pour les actions, et aucune image de
   vue — les emplacements réservés aux photos sont donc supprimés plutôt que
   laissés vides.
   ───────────────────────────────────────────────────────────────────── */

.match {
  background: #fff;
  color: #14265C;
}

.mhero { background: #fff; }
.mhero__competition { color: #E1000F; }
.mhero__titre { color: #14265C; font-family: Anton, "Arial Narrow", sans-serif; text-transform: uppercase; letter-spacing: .01em; }
.mhero__date { color: #14265C; }
.mhero__lieu, .mhero__prix { color: #5A6180; }
.mhero__prix b { color: #14265C; }

.mbandeau { background: #EEF2FB; color: #14265C; border-bottom: 1px solid #E2E7F2; }

/* ── Cartes de zone sans visuel ────────────────────────────────────── */
.sm-pop__imgwrap,
.sm-listing__thumb,
.sm-view { display: none !important; }

/* Le score reprenait sa place sur l'image : on le remet dans le corps. */
.sm-pop__body { padding-top: 14px; }
.sm-pop__card, .sm-listing {
  background: #fff;
  border: 1px solid #E2E7F2;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(20, 38, 92, .05);
}
.sm-pop__card:hover, .sm-listing:hover { border-color: #1B3FA0; }
.sm-pop__title, .sm-listing__title { color: #14265C; font-weight: 800; }
.sm-pop__sub, .sm-listing__cat, .sm-pop__line, .sm-listing__line { color: #5A6180; }
.sm-pop__price, .sm-listing__price { color: #14265C; font-weight: 800; }

/* ── Barre de tri des zones ────────────────────────────────────────── */
.zf-btn { border-color: #E2E7F2 !important; }
.zf-btn--on { background: #E1000F !important; color: #fff !important; }

/* ── Modale de bloc ────────────────────────────────────────────────── */
.sm-screen-mini { color: #5A6180; letter-spacing: .16em; text-transform: uppercase; font-size: 11px; }
.sm-screen-bar { background: linear-gradient(90deg, transparent, #3f7d4e, transparent); height: 4px; border-radius: 2px; }
.sm-cta { background: #E1000F; color: #fff; }
.sm-cta.is-empty { background: #fff; color: #14265C; border: 1px solid #E2E7F2; }

/* ── Autres rencontres ─────────────────────────────────────────────── */
.fb-other { background: #F5F7FB; border-top: 1px solid #E2E7F2; }
.fb-other h3 { color: #14265C; }
.fb-date { background: #fff; border: 1px solid #E2E7F2; color: #14265C; }
.fb-date:hover { border-color: #1B3FA0; }
.fb-date__day { color: #14265C; }
.fb-date__mon { color: #E1000F; }
.fb-date__v { color: #14265C; font-weight: 700; }
.fb-date__c { color: #5A6180; }

/* ── Légende des tarifs ────────────────────────────────────────────────
   Le plan colore chaque bloc selon sa catégorie ; encore faut-il pouvoir
   lire cette couleur. Les bulles de prix ne couvrent qu'une poignée de
   blocs et deviennent illisibles dès que le plan est réduit — sur mobile
   surtout. La légende, elle, reste lisible à toutes les tailles. */
.mlegende {
  max-width: 1400px;
  margin: 0 auto;
  padding: 18px clamp(12px, 3vw, 30px) 0;
}

.mlegende__liste {
  list-style: none;
  margin: 0;
  padding: 14px 16px;
  background: #F5F7FB;
  border: 1px solid #E2E7F2;
  border-radius: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: center;
}

.mlegende__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #14265C;
}

.mlegende__pastille {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(20, 38, 92, .12);
}

.mlegende__nom { font-weight: 600; }
.mlegende__prix { font-weight: 800; }
.mlegende__item--complet { color: #5A6180; }
.mlegende__item--complet .mlegende__nom { font-weight: 500; }

/* Sur mobile la légende occupait un écran entier avant même le plan. Les
   prix restent lisibles : bulles sur les blocs qui se vident, et la liste
   des zones sous le plan donne catégorie et prix pour chacune. */
@media (max-width: 760px) {
  .mlegende { display: none; }
}

@media (max-width: 640px) {
  .mlegende__liste {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
    padding: 13px 14px;
  }
  .mlegende__item { font-size: 13px; gap: 7px; }
  .mlegende__prix { margin-left: auto; }
}

/* Bulles de prix : plus contrastées, et jamais sous la taille lisible. */
.sm-pricepill { stroke: #14265C !important; stroke-width: 3 !important; }
.sm-pricetxt { fill: #14265C !important; }

/* ── Le plan tient en entier, sur tous les écrans ──────────────────────
   Le plan est une image fixe : ni zoom, ni déplacement, ni défilement
   latéral. On voit l'enceinte complète du premier coup d'œil et on clique
   le bloc voulu.

   Le compromis est assumé : à la largeur d'un téléphone, le numéro d'un bloc
   tombe autour de 7 px. Il n'est pas là pour être lu de loin — la couleur
   dit la catégorie, les bulles disent le prix des blocs qui se vident, et la
   liste sous le plan reprend chaque zone en toutes lettres, avec son prix et
   ses places restantes. C'est elle le chemin de secours, pas le zoom. */
.mplan .sm-svg { width: 100%; height: auto; }

@media (max-width: 760px) {
  /* `!important` : la feuille du moteur impose `overflow: visible` sur ces
     conteneurs. Sans le forcer, un plan plus large que l'écran déborderait
     de la PAGE — c'était le défilement horizontal parasite. */
  .mplan .sm-planwrap,
  .mplan .sm-stage {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    max-width: 100%;
  }

  /* Filet de sécurité : la page elle-même ne défile jamais latéralement. */
  html, body { overflow-x: clip; }
  .mplan, .mplan > * { max-width: 100%; }
}