/* ================================================== */
/*   MBOA TICKETING — Cartes billets v4 (fix layout)  */
/*   Raleway + Lato · fond crème · couleurs matière   */
/* ================================================== */

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;700;800;900&family=Lato:wght@300;400;700;900&display=swap');

/* ── VARIABLES ── */
:root {
  --mboa-bg:          #f4efe5;
  --mboa-green:       #004845;
  --mboa-gold-accent: #f8b808;
  --mboa-text:        #1a1a1a;
  --mboa-text-soft:   #3d3530;
  --mboa-text-muted:  #8a7f74;

  /* DÉCOUVERTE */
  --dec-from:    #eaf6e6; --dec-to:    #c8e8bc;
  --dec-border:  #6aad65; --dec-tier:  #235e20;
  --dec-badge:   #f8b808; --dec-badge-txt: #1a1a1a;
  --dec-icon:    #3d8c38; --dec-box:   rgba(35,94,32,.09);
  --dec-strong:  #235e20;

  /* PREMIUM */
  --pre-from:    #fdf1e2; --pre-to:    #f4d8ac;
  --pre-border:  #c07030; --pre-tier:  #7a3e0e;
  --pre-badge:   #c07030; --pre-badge-txt: #fff;
  --pre-icon:    #b8641e; --pre-box:   rgba(122,62,14,.09);
  --pre-strong:  #7a3e0e;

  /* GOLD */
  --gol-from:    #fefbe8; --gol-to:    #f7e68a;
  --gol-border:  #c9a500; --gol-tier:  #7a6200;
  --gol-badge:   #c9a500; --gol-badge-txt: #fff;
  --gol-icon:    #b89400; --gol-box:   rgba(122,98,0,.09);
  --gol-strong:  #7a6200;

  /* PLATINUM */
  --pla-from:    #f0f3f7; --pla-to:    #d4dce8;
  --pla-border:  #7c96b2; --pla-tier:  #233650;
  --pla-badge:   #4a6580; --pla-badge-txt: #fff;
  --pla-icon:    #5a80a0; --pla-box:   rgba(35,54,80,.08);
  --pla-strong:  #233650;
}

/* ── SECTION ── */
.mboa-tickets-section {
  background: var(--mboa-bg);
  padding: 10px 0 50px;
}

.mboa-tickets-heading {
  text-align: center;
  padding: 40px 20px 28px;
}

.mboa-tickets-heading h2 {
  font-family: 'Raleway', sans-serif;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 900;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--mboa-green);
}

.mboa-gold-line {
  width: 56px; height: 3px;
  background: var(--mboa-gold-accent);
  margin: 12px auto 0;
  border-radius: 2px;
}

.mboa-tickets-heading p {
  margin-top: 10px;
  color: var(--mboa-text-muted);
  font-family: 'Lato', sans-serif;
  font-size: .9rem;
}

/* ── GRILLE ── */
.mboa-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  padding: 0 36px 10px;
  max-width: 1400px;
  margin: 0 auto;
}

@media (max-width: 1100px) { .mboa-cards-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px)  { .mboa-cards-grid { grid-template-columns: 1fr; padding: 0 16px 10px; } }

/* ── CARTE ── */
.mboa-card {
  border-radius: 18px;
  /* PAS de overflow:hidden → le ruban peut déborder librement */
  display: flex;
  flex-direction: column;
  position: relative;
  border-width: 2px;
  border-style: solid;
  box-shadow: 0 4px 18px rgba(0,0,0,.08);
  transition: transform .32s ease, box-shadow .32s ease;
}

.mboa-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 42px rgba(0,0,0,.16);
}

/* clip interne pour que le contenu reste dans la carte */
.mboa-card-inner {
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Couleurs par matière */
.mboa-card-decouverte { background: linear-gradient(160deg, var(--dec-from), var(--dec-to)); border-color: var(--dec-border); }
.mboa-card-premium    { background: linear-gradient(160deg, var(--pre-from), var(--pre-to)); border-color: var(--pre-border); }
.mboa-card-gold       { background: linear-gradient(160deg, var(--gol-from), var(--gol-to)); border-color: var(--gol-border); }
.mboa-card-platinum   { background: linear-gradient(160deg, var(--pla-from), var(--pla-to)); border-color: var(--pla-border); }

/* ── RUBAN (coin haut droit, hors de la carte) ── */
.mboa-ribbon {
  position: absolute;
  top: 14px;
  right: -2px;
  font-family: 'Raleway', sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #fff;
  padding: 5px 14px;
  border-radius: 4px 0 0 4px;
  z-index: 5;
  line-height: 1.3;
}

.mboa-card-premium  .mboa-ribbon { background: var(--pre-badge); }
.mboa-card-platinum .mboa-ribbon { background: var(--pla-badge); }

/* ── EN-TÊTE ── */
.mboa-card-header {
  padding: 20px 20px 14px;
  border-bottom: 1.5px solid rgba(0,0,0,.08);
}

/* Ligne titre + badge prix côte à côte */
.mboa-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.mboa-card-tier {
  font-family: 'Raleway', sans-serif;
  font-weight: 900;
  font-size: 1.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1;
  flex: 1;
  /* pas de float, pas d'overflow */
}

.mboa-card-decouverte .mboa-card-tier { color: var(--dec-tier); }
.mboa-card-premium    .mboa-card-tier { color: var(--pre-tier); }
.mboa-card-gold       .mboa-card-tier { color: var(--gol-tier); }
.mboa-card-platinum   .mboa-card-tier { color: var(--pla-tier); }

/* Badge prix — taille fixe, jamais tronqué */
.mboa-price-badge {
  font-family: 'Lato', sans-serif;
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 1;
  padding: 10px 14px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

.mboa-card-decouverte .mboa-price-badge { background: var(--dec-badge); color: var(--dec-badge-txt); }
.mboa-card-premium    .mboa-price-badge { background: var(--pre-badge); color: var(--pre-badge-txt); }
.mboa-card-gold       .mboa-price-badge { background: var(--gol-badge); color: var(--gol-badge-txt); }
.mboa-card-platinum   .mboa-price-badge { background: var(--pla-badge); color: var(--pla-badge-txt); }

.mboa-card-avail {
  font-family: 'Raleway', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  opacity: .65;
}

.mboa-card-decouverte .mboa-card-avail { color: var(--dec-tier); }
.mboa-card-premium    .mboa-card-avail { color: var(--pre-tier); }
.mboa-card-gold       .mboa-card-avail { color: var(--gol-tier); }
.mboa-card-platinum   .mboa-card-avail { color: var(--pla-tier); }

/* ── LISTE AVANTAGES ── */
.mboa-card-features {
  flex: 1;
  padding: 18px 20px 20px;
}

.mboa-features-box {
  border-radius: 13px;
  padding: 14px 16px;
}

.mboa-card-decouverte .mboa-features-box { background: var(--dec-box); }
.mboa-card-premium    .mboa-features-box { background: var(--pre-box); }
.mboa-card-gold       .mboa-features-box { background: var(--gol-box); }
.mboa-card-platinum   .mboa-features-box { background: var(--pla-box); }

.mboa-card-features ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.mboa-card-features ul li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-family: 'Lato', sans-serif;
  font-size: 13.5px;
  color: var(--mboa-text-soft);
  line-height: 1.45;
  transition: color .2s;
}

.mboa-card-features ul li:hover { color: var(--mboa-text); }

.mboa-card-features ul li i {
  font-size: 7px;
  margin-top: 5px;
  flex-shrink: 0;
}

.mboa-card-decouverte .mboa-card-features ul li i { color: var(--dec-icon); }
.mboa-card-premium    .mboa-card-features ul li i { color: var(--pre-icon); }
.mboa-card-gold       .mboa-card-features ul li i { color: var(--gol-icon); }
.mboa-card-platinum   .mboa-card-features ul li i { color: var(--pla-icon); }

.mboa-card-decouverte .mboa-card-features ul li strong { color: var(--dec-strong); }
.mboa-card-premium    .mboa-card-features ul li strong { color: var(--pre-strong); }
.mboa-card-gold       .mboa-card-features ul li strong { color: var(--gol-strong); }
.mboa-card-platinum   .mboa-card-features ul li strong { color: var(--pla-strong); }

/* ── BANDE TAPTAP ── */
.mboa-taptap-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(90deg, #03691f, #055c1a);
  padding: 12px 18px;
  text-decoration: none;
  transition: background .3s ease;
  border-top: 2px solid rgba(255,255,255,.15);
}

.mboa-taptap-strip:hover {
  background: linear-gradient(90deg, #a50e06, #8a0a05);
}

.mboa-taptap-strip img {
  width: 44px;
  flex-shrink: 0;
  border-radius: 6px;
}

.mboa-taptap-divider {
  width: 1.5px; height: 32px;
  background: rgba(255,255,255,.3);
  flex-shrink: 0;
}

.mboa-taptap-label {
  font-family: 'Raleway', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,.8);
  line-height: 1.4;
}

.mboa-taptap-label strong {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: var(--mboa-gold-accent);
  letter-spacing: .5px;
}