@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;900&family=Inter:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

.hbct-public-matchs{
  --hbct-noir:#1c1917;
  --hbct-jaune:#f4b400;
  --hbct-blanc-casse:#faf7f0;
  --hbct-gris-ardoise:#4a4a48;
  --hbct-gris-bordure:#d8d2c2;
  font-family:'Inter',sans-serif;
  color:var(--hbct-noir);
  max-width:760px;
  margin:0 auto;
}
.hbct-public-matchs, .hbct-public-matchs *{box-sizing:border-box;}

.hbct-public-matchs .hbct-pub-empty{
  text-align:center;color:var(--hbct-gris-ardoise);padding:24px;font-size:14px;
}

.hbct-public-matchs .hbct-pub-team{margin-bottom:26px;}
.hbct-public-matchs .hbct-pub-team-title{
  font-family:'Big Shoulders Display',sans-serif;
  font-weight:900;
  font-size:22px;
  letter-spacing:0.3px;
  margin:0 0 10px 0;
  padding-bottom:6px;
  border-bottom:3px solid var(--hbct-jaune);
  display:inline-block;
}

.hbct-public-matchs .hbct-pub-list{list-style:none;margin:0;padding:0;}
.hbct-public-matchs .hbct-pub-item{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 14px;
  background:#fff;
  border:1px solid var(--hbct-gris-bordure);
  border-radius:9px;
  padding:11px 14px;
  margin-bottom:8px;
  font-size:14px;
}
.hbct-public-matchs .hbct-pub-date{
  font-family:'Space Mono',monospace;
  font-size:12px;
  color:var(--hbct-noir);
  background:var(--hbct-jaune);
  border-radius:5px;
  padding:3px 8px;
  white-space:nowrap;
  font-weight:700;
}
.hbct-public-matchs .hbct-pub-titre{font-weight:700;flex:1 1 180px;}
.hbct-public-matchs .hbct-pub-lieu{font-size:12px;color:var(--hbct-gris-ardoise);white-space:nowrap;}
.hbct-public-matchs .hbct-pub-badge{
  font-size:11px;font-weight:700;color:#fff;background:var(--hbct-gris-ardoise);
  border-radius:5px;padding:2px 7px;text-transform:uppercase;letter-spacing:0.3px;
}
.hbct-public-matchs .hbct-pub-item.hbct-pub-past{opacity:0.55;}
.hbct-public-matchs .hbct-pub-item.hbct-pub-past .hbct-pub-date{background:var(--hbct-gris-bordure);}

@media (max-width:480px){
  .hbct-public-matchs .hbct-pub-item{flex-direction:column;align-items:flex-start;}
}