:root{
  --butler-card: #101820;
  --butler-border: #1e2a33;
  --butler-shadow: 0 10px 28px rgba(0,0,0,.20);
  --lvl-info:   #2d7df6;
  --lvl-start:  #ff8c1a;
  --lvl-live:   #ff3b30;
  --lvl-result: #1dbf73;
  --lvl-podium: #3b82f6;
  --lvl-news:   #9f7aea;
}
@media (prefers-color-scheme: light){
  :root{ --butler-card:#f7f9fc; --butler-border:#dbe3ea; --butler-shadow:0 8px 18px rgba(0,0,0,.08); }
}
body.has-butler-sticky{ padding-top: calc(var(--butler-sticky-spacer, 0px) + env(safe-area-inset-top)); }

.butler-tsv-root { font-size: 16px; }

/* === Bannière === */
.butler-banner{
  display:block; margin:.6rem .6rem 1rem; border-radius:10px;
  color:#fff; background:var(--lvl-info); box-shadow: var(--butler-shadow);
}
.butler-banner__inner{
  display:flex; align-items:center; gap:.75rem; padding:.6rem .9rem;
  max-width: 1200px; margin: 0 auto;
}
.butler-banner.mode-sticky{
  position: fixed; left:0; right:0;
  top: calc(var(--butler-sticky-offset, 64px) + env(safe-area-inset-top));
  z-index: 1000; margin:0; border-radius:0;
}
.butler-banner.level-live{ background: var(--lvl-live); }
.butler-banner.level-startlist{ background: var(--lvl-start); }
.butler-banner.level-result{ background: var(--lvl-result); }
.butler-banner.level-podium{ background: var(--lvl-podium); }
.butler-banner.level-news{ background: var(--lvl-news); }
.butler-banner.level-info{ background: var(--lvl-info); }

.butler-banner__icon{ opacity:.95; display:flex; align-items:center; margin-left:.25rem; }
.butler-banner__content{ display:flex; gap:.35rem; flex-wrap:wrap; align-items:center; }
.butler-banner__title{ font-weight:700; }
.butler-banner__cta{
  margin-left:auto; padding:.4rem .7rem; border-radius:6px;
  text-decoration:none; background:#fff; color:#111;
}
.butler-banner__close{ background:transparent; color:#fff; border:0; font-size:1.2rem; line-height:1; cursor:pointer; margin-left:.25rem; position:relative; z-index:1001; padding:.2rem .4rem; }

/* === Drawer === */
.butler-drawer {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 12040;
  max-width: min(480px, 92vw);
  font-size: .9rem;
}

/* Bouton pill */
.butler-drawer__toggle {
  padding: .45rem .9rem;
  border-radius: 999px;
  border: 0;
  background: #111827;
  color: #e5e7eb;
  box-shadow: 0 8px 20px rgba(0,0,0,.45);
  cursor: pointer;
}

/* Panneau « carte » */
.butler-drawer__panel {
  margin-top: .4rem;
  padding: .6rem .7rem;
  border-radius: .7rem;
  background: rgba(15,23,42,.96);
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
}

.butler-drawer__list{ list-style:none; margin:0; padding:0; display:grid; gap:.4rem; }
.butler-drawer__link{ display:flex; align-items:center; gap:.5rem; text-decoration:none; color:inherit;
  padding:.45rem .55rem; border-radius:8px; transition: background .15s; }
.butler-drawer__link:hover{ background: rgba(255,255,255,.06); }
.butler-drawer__badge{ font-size:.7rem; font-weight:800; padding:.15rem .4rem; border-radius:4px; color:#fff; }
.kind-live .butler-drawer__badge{ background: var(--lvl-live); }
.kind-startlist .butler-drawer__badge{ background: var(--lvl-start); }
.kind-results .butler-drawer__badge,
.kind-result  .butler-drawer__badge{ background: var(--lvl-result); }
.kind-news .butler-drawer__badge{ background: var(--lvl-news); }
.kind-test .butler-drawer__badge{ background:#888; }

/* État visuel du bouton Butler • Hot selon le contenu */
.butler-drawer__toggle {
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* Aucun élément => discret */
.butler-state-empty .butler-drawer__toggle {
  background: rgba(60,60,60,0.8);
  border-color: rgba(120,120,120,0.9);
  color: #eee;
}

/* Uniquement news => bleu doux */
.butler-state-news .butler-drawer__toggle {
  background: rgba(59,130,246,0.95);  /* bleu */
  border-color: rgba(37,99,235,1);
  color: #fff;
}

/* Startlists / résultats => orange/ambre */
.butler-state-alert .butler-drawer__toggle {
  background: rgba(245,158,11,0.95);
  border-color: rgba(217,119,6,1);
  color: #111;
}

/* Live en cours => rouge vif */
.butler-state-live .butler-drawer__toggle {
  background: rgba(239,68,68,0.98);
  border-color: rgba(220,38,38,1);
  color: #fff;
}

/* Texte de la ligne Butler : lisible, peut passer sur 2–3 lignes */
.butler-drawer__label {
  flex: 1 1 auto;
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: .85rem;
  line-height: 1.35;
}
/* pin Butler • Hot */
body .butler-drawer{ position:fixed; left:12px; bottom:12px; z-index:12040; margin:0; }
body .butler-drawer__panel[hidden]{ display:none !important; }