/* ===== Thème: map couleurs depuis Branding (avec fallbacks sûrs) ===== */
:root{
  /* Primaires (ex. bleu), Accent (ex. jaune), Surfaces et bordures */
  --champ-primary:   var(--bruce-primary,   var(--color-primary,   #26547C));
  --champ-accent:    var(--bruce-accent,    var(--color-accent,    #FFC400));
  --champ-surface:   var(--bruce-light,     var(--color-surface,   #F6F8FB));
  --champ-border:    var(--bruce-light,     var(--color-border,    #E5E1EE));
  --champ-text:      var(--bruce-dark,      var(--color-text,      #061826));
}

/* ===== Bandeau ===== */
.champ__banner{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px;background:var(--champ-surface);border-radius:12px
}
.champ__title{margin:0;color:var(--champ-text);font-weight:800}
.champ__btn{
  border:0;border-radius:999px;padding:10px 16px;
  background:var(--champ-primary);color:#fff;font-weight:700;cursor:pointer
}

/* ===== Modal ===== */
.champ-modal[aria-hidden="true"]{display:none}
.champ-modal{position:fixed;inset:0;z-index:9999;font:inherit;color:var(--champ-text)}
.champ-modal__overlay{position:absolute;inset:0;background:rgba(0,0,0,.4)}
.champ-modal__content{
  position:relative;max-width:900px;margin:8vh auto 0;background:#fff;border-radius:18px;padding:24px;
  box-shadow:0 12px 40px rgba(0,0,0,.2)
}
.champ-modal__close{
  position:absolute;top:10px;right:12px;border:0;background:transparent;font-size:24px;cursor:pointer;color:var(--champ-text)
}

.champ-modal__header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px;border-bottom:2px solid var(--champ-border);padding-bottom:8px
}
.champ-modal__title{margin:0;font-weight:800;color:var(--champ-primary)}
.champ-modal__tabs{display:flex;gap:12px;align-items:center}
.champ-tab{border:0;border-radius:999px;padding:8px 14px;background:var(--champ-surface);font-weight:700;color:var(--champ-text)}
.champ-tab--active{background:var(--champ-accent);color:#000}
.champ__select{
  padding:6px 10px;border:1px solid var(--champ-border);border-radius:8px;height: 40px;
  background:#fff;color:inherit;font:inherit
}

/* ===== Lignes de scores (100% DIVs) ===== */
.champ-rows{display:grid;gap:12px;margin-top:12px}
.champ-row{
  display:grid;
  grid-template-columns: 1fr auto auto auto 1fr; /* teamL | scoreL | / | scoreR | teamR */
  align-items:center;gap:10px;
  background:#fff;padding:12px 14px;border-radius:12px;
  box-shadow:0 4px 14px rgba(0,0,0,.06)
}
.team{font-weight:800;line-height:1.2;color:var(--champ-text)}
.team small{display:block;font-weight:600;opacity:.7}
.team--right{text-align:right}
.sep{opacity:.4;font-weight:900;color:var(--champ-text)}
.score{
  min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;
  padding:6px 10px;border-radius:999px;background:var(--champ-accent);
  font-weight:900;color:#000
}

@media(max-width:640px){
  .champ-row{gap:8px}
  .team{font-size:14px}
  .score{min-width:34px;min-height:34px}
}