/* ===========================
   Top Pronostics IA - Clean UX, Foresportia palette
   Objectifs:
   - blocs bien empilés (perf + titre + chart)
   - date-selector lisible (1 ligne desktop, wrap propre mobile)
   - bb-chip jamais en overflow dans bb-foot
   - un peu de vert/rouge léger sur statuts
   - ZERO overflow horizontal
   =========================== */

:root{
  --tp-max: 1120px;

  --brand: #1e40af;
  --brand-2: #2563eb;
  --brand-soft: rgba(37,99,235,0.10);

  --text: #0f172a;
  --muted: #475569;

  --bg: #ffffff;
  --bg-soft: #f6f8fc;

  --card: #ffffff;
  --border: rgba(15,23,42,0.10);

  --shadow: 0 12px 28px rgba(2,6,23,0.08);
  --shadow-soft: 0 10px 22px rgba(2,6,23,0.06);

  --radius: 18px;
  --radius-sm: 12px;

  /* Accents (légers) */
  --success: #16a34a;
  --danger: #ef4444;
  --warning: #f59e0b;

  --success-soft: rgba(22,163,74,0.10);
  --danger-soft: rgba(239,68,68,0.10);
  --warning-soft: rgba(245,158,11,0.12);
}

/* ===========================
   Typo system (homogène)
   =========================== */
:root{
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-22: 1.375rem;

  --lh-tight: 1.15;
  --lh: 1.45;
  --lh-loose: 1.6;
}

/* Base */
.tp-main{
  color: var(--text);
  font-size: var(--fs-16);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ===========================
   Global overflow guards
   =========================== */
*,
*::before,
*::after{ box-sizing: border-box; }

html, body{
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

img, svg{
  max-width: 100%;
  height: auto;
}

a, button, strong, span, p, h1, h2, h3, li{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Containers */
.tp-main{ min-width: 0; }

.tp-container{
  max-width: var(--tp-max);
  margin: 0 auto;
  padding: 0 20px;
  min-width: 0;
}

/* ===========================
   HERO
   =========================== */
.tp-hero{
  background:
    radial-gradient(1200px 420px at 50% -10%, rgba(255,255,255,0.35), transparent 60%),
    linear-gradient(to right, var(--brand), var(--brand-2));
  color: #fff;
  padding: 56px 0 34px;
  overflow: hidden;
}

.tp-hero-card{
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--radius);
  padding: 22px;
  backdrop-filter: blur(8px);
  min-width: 0;
  text-align: center;
}

.tp-badge{
  display: inline-flex;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border-radius: 9999px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.22);
  font-weight: 750;
  max-width: 100%;
}

.tp-hero h1{
  margin: 12px 0 10px;
  font-size: clamp(1.65rem, 3.2vw, 2.25rem);
  line-height: 1.12;
}

.tp-subtitle{
  margin: 0;
  max-width: 860px;
  color: rgba(255,255,255,0.92);
  line-height: 1.55;
}

.tp-hero-links{ margin-top: 14px; }

.tp-link{
  display: inline-block;
  color: #fff;
  text-decoration: underline;
  font-weight: 750;
}

/* ===========================
   SECTIONS
   =========================== */
.tp-section{
  padding: 42px 0;
  background: var(--bg);
}

.tp-section--filters{ background: var(--bg-soft); }

.tp-panel{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 18px;
  min-width: 0;
}

/* ===========================
   TOP PANEL (Perf + Type stats)
   FIX: empilement propre (tp-h2 sous perf, plus de côte-à-côte moche)
   =========================== */
.tp-panel-top{
  display: grid;
  grid-template-columns: 1fr; /* <- plus de 2 colonnes */
  gap: 14px;
  align-items: start;
  min-width: 0;
}

.tp-perf,
.tp-type-stats{
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  min-width: 0;
}

/* Le bloc perf peut contenir des éléments injectés: on force l’empilement */
#bb-perf{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  text-align: center;
}

/* Type stats: on force un layout vertical clair */
#bb-type-stats{
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.tp-h2{
  margin: 0;
  color: var(--text);
  font-size: var(--fs-18);
  font-weight: 900;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}

.tp-subtitle,
.tp-muted,
.tp-help{
  font-size: var(--fs-15);
  line-height: var(--lh-loose);
}


.tp-h2--spaced{ margin-top: 18px; }

.tp-muted{ color: var(--muted); }

/* ===========================
   Filters header + toggle
   =========================== */
.tp-filters-head{
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  flex-wrap: wrap;
}

.tp-filters-toggle{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 9999px;
  border: 1px solid rgba(30,64,175,0.18);
  background: #fff;
  color: var(--brand);
  font-weight: 900;
  cursor: pointer;
  max-width: 100%;
}

.tp-filters-caret{ opacity: 0.8; }

.tp-filters-panel{ margin-top: 12px; min-width: 0; }
.tp-filters-panel.collapsed{ display: none; }

/* ===========================
   Leagues
   =========================== */
.league-buttons{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 10px 6px 0;
  min-width: 0;
}

.league-button{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: 0 8px 16px rgba(2,6,23,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  flex: 0 0 auto;
}

.league-button img{
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.league-button.selected{
  outline: 2px solid rgba(37,99,235,0.35);
}

/* ===========================
   Filters card
   =========================== */
.tp-filters-card{
  margin-top: 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  min-width: 0;
}

.tp-filters-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  min-width: 0;
}

.tp-field{ min-width: 0; }
.tp-field--full{ grid-column: 1 / -1; }

.tp-label{
  display:block;
  font-weight: 850;
  font-size: var(--fs-14);
  color: var(--text);
  margin-bottom: 6px;
}


.tp-select{
  width: 100%;
  max-width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,0.14);
  background: #fff;
  color: var(--text);
  min-width: 0;
}

.tp-select{
  font-size: var(--fs-15);
  font-weight: 650;
}


/* Buttons */
.tp-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 9999px;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 900;
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

.tp-btn--primary{
  background: var(--brand);
  color: #fff;
  box-shadow: 0 12px 26px rgba(30,64,175,0.22);
}

.tp-btn--ghost{
  background: #fff;
  color: var(--brand);
  border-color: rgba(30,64,175,0.22);
}

/* ===========================
   Advanced
   =========================== */
.tp-advanced{
  margin-top: 10px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  min-width: 0;
}
.tp-advanced.collapsed{ display: none; }

.tp-advanced-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  min-width: 0;
}

.tp-adv-row{
  display: grid;
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.tp-adv-label{
  font-weight: 900;
  color: var(--text);
  min-width: 0;
}

.tp-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  border-radius: 9999px;
  border: 1px solid rgba(15,23,42,0.12);
  background: #fff;
  font-weight: 900;
  min-width: 72px;
  max-width: 100%;
}

.tp-help{
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.tp-adv-actions{
  margin-top: 8px;
  display: flex;
  justify-content: center;
}

/* Suggestions list (si déplacée dans #bb-advanced) */
.bb-type-suggestion-list{
  margin: 6px 0 0;
  padding-left: 18px;
  color: var(--muted);
}

/* ===========================
   Checks
   =========================== */
.tp-checks{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  min-width: 0;
}

.tp-check{
  display: inline-flex;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,0.10);
  background: var(--bg-soft);
  color: var(--text);
  font-weight: 700;
  max-width: 100%;
}

.tp-check input{ flex: 0 0 auto; }
.tp-check--strong{ border-color: rgba(30,64,175,0.22); }

.tp-actions{
  margin-left: auto;
  display: flex;
  gap: 10px;
  min-width: 0;
}
.tp-actions .tp-btn{ max-width: 100%; }

/* ===========================
   DATE SELECTOR (lisibilité)
   - Desktop: “pills” homogènes
   - Mobile: wrap clean, pas de 2 lignes illisibles dans le même bouton
   =========================== */
/* ===========================
   tp-date-row - colonne UNIQUE (hard lock)
   =========================== */

.tp-date-row{
  display: block !important;     /* casse grid / flex / injections */
  width: 100%;
  max-width: 100%;
}

.tp-date-row{
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.tp-date-row *{
  min-width: 0;
}


/* ===========================
   Results grid
   =========================== */
.tp-grid{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  min-width: 0;
}

/* Cards rendered by JS (.bestbet-card, .bb-*) */
.bestbet-card{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 14px;
  min-width: 0;
  max-width: 100%;
}

.bb-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  min-width:0;

  color: var(--muted);
  font-weight: 700;
  font-size: var(--fs-13);
  letter-spacing: 0.01em;
}
.bb-date{
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}


.bb-league{ min-width: 0; }

.bb-match{
  margin-top: 8px;
  font-size: var(--fs-16);
  font-weight: 900;
  color: var(--text);
  line-height: var(--lh-tight);
}


.bb-vs{
  opacity: 0.55;
  font-weight: 800;
}

.bb-pick{
  margin-top: 8px;
  color: var(--text);
  font-size: var(--fs-15);
  line-height: var(--lh);
}
.bb-pick strong{
  font-weight: 850;
}


.bb-prob{
  margin-top: 10px;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;

  font-size: var(--fs-18);
  font-weight: 900;

  padding: 8px 12px;
  border-radius: 9999px;

  color: hsl(var(--h, 210) 55% 30%);
  background: hsl(var(--h, 210) 55% 92%);
  border: 1px solid hsl(var(--h, 210) 55% 82%);
}


/* FIX: bb-chip overflow -> on autorise le wrap + shrink + clamp */
.bb-foot{
  margin-top: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  flex-wrap: wrap; /* <- clé */
}

.bb-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 7px 10px;
  border-radius: 9999px;
  border: 1px solid rgba(15,23,42,0.10);
  background: var(--bg-soft);
  color: var(--muted);

  max-width: 100%;
  min-width: 0;
  flex: 1 1 auto;
}

.bb-chip__icon{
  flex: 0 0 auto;
  opacity: 0.9;
}

.bb-chip__text{
  min-width: 0;
  line-height: 1.25;
  font-weight: 750;
  white-space: normal;
}
.bb-chip{
  font-size: var(--fs-13);
  font-weight: 650;
}
.bb-chip__text{
  font-weight: 650; /* au lieu de 750 */
}

.bb-perf-main{
  font-weight: 800;          /* avant : probablement 600–700 */
  color: var(--text);
}


/* Pills / niveaux */
.pill{
  padding: 6px 10px;
  border-radius: 9999px;
  border: 1px solid rgba(15,23,42,0.10);
  background: #fff;
  flex: 0 0 auto;
  white-space: nowrap;
}
.pill{
  font-size: var(--fs-12);
  font-weight: 900;
  letter-spacing: 0.02em;
}

/* Un peu de couleur (soft) */
.pill-safe{ color: var(--brand); background: var(--brand-soft); border-color: rgba(37,99,235,0.20); }
.pill-tot{ color: #7c2d12; background: var(--warning-soft); border-color: rgba(245,158,11,0.24); }
.pill-solid{ color: #0f172a; background: rgba(15,23,42,0.06); }

/* Outcomes (vert/rouge léger) */
.bb-outcome-line{ margin-top: 10px; font-weight: 900; }
.bb-outcome.win{ color: var(--success); }
.bb-outcome.lose{ color: var(--danger); }
.bb-outcome.void{ color: var(--warning); }

/* ===========================
   Perf type chart
   =========================== */
.tp-type-chart{
  margin-top: 8px;
  display: grid;
  gap: 8px;
  min-width: 0;
}

.bb-type-row{
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.bb-type-label{
  font-weight: 900;
  color: var(--text);
  min-width: 0;
}

.bb-type-bar-wrap{
  width: 100%;
  max-width: 100%;
  height: 10px;
  border-radius: 9999px;
  background: rgba(15,23,42,0.08);
  overflow: hidden;
}

.bb-type-bar{
  height: 100%;
  border-radius: 9999px;

  /* Teinte dynamique via --h posé en JS */
  background: hsl(var(--h, 210) 55% 38%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}

.bb-type-value{
  font-weight: 950;
  color: var(--text);
  white-space: nowrap;
}

.bb-type-volume{
  display: inline-block;
  margin-left: 8px;
  color: var(--muted);
  font-weight: 750;
}

/* ===========================
   Loading overlay
   =========================== */
.tp-loading{
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.76);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 9999;
  padding: 20px;
  text-align: center;
}

.tp-spinner{
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 4px solid rgba(15,23,42,0.12);
  border-top-color: rgba(37,99,235,0.85);
  animation: tp-spin 0.9s linear infinite;
}

@keyframes tp-spin{
  to { transform: rotate(360deg); }
}

/* ===========================
   Responsive
   =========================== */
@media (max-width: 980px){
  .tp-panel-top{
    grid-template-columns: 1fr;
  }
  .tp-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .bb-type-row{
    grid-template-columns: minmax(0, 180px) minmax(0, 1fr) auto;
  }
}

@media (max-width: 640px){
  .tp-filters-grid{
    grid-template-columns: 1fr;
  }
  .tp-actions{
    margin-left: 0;
    width: 100%;
  }
  .tp-actions .tp-btn{
    width: 100%;
  }
  .tp-grid{
    grid-template-columns: 1fr;
  }
  .bb-type-row{
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .bb-type-value{
    white-space: normal;
  }
  .tp-adv-row{
    grid-template-columns: 1fr;
  }
  .tp-pill{
    justify-self: start;
  }

  /* Date buttons restent clairs */
  .date-button{
    flex: 0 1 170px;     /* largeur homogène -> joli wrap */
    max-width: 220px;
  }
}

/* ===========================
   Day summary (bilan journée)
   =========================== */
.tp-day-summary{
  margin: 14px auto 6px;
  max-width: 980px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 14px;
  min-width: 0;
}

.tp-day-summary__title{
  font-weight: 950;
  color: var(--text);
  margin-bottom: 10px;
  text-align: center;
}

.tp-day-summary__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
  min-width: 0;
}

.tp-day-metric{
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  padding: 12px;
  min-width: 0;
  text-align: center;
}

.tp-day-metric--soft{
  background: #fff;
}

.tp-day-metric__label{
  font-weight: 850;
  color: var(--muted);
  font-size: 0.92rem;
}

.tp-day-metric__hint{
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.25;
}

.tp-day-metric__value .ok{ color: var(--success); }
.tp-day-metric__value .ko{ color: var(--danger); }
.tp-day-metric__value{
  margin-top: 6px;
  font-size: var(--fs-22);
  font-weight: 950;
  line-height: var(--lh-tight);
}
.tp-day-metric__hint{
  font-size: var(--fs-14);
}


@media (max-width: 820px){
  .tp-day-summary__grid{
    grid-template-columns: 1fr;
  }
}

/* ===========================
   Date picker - copie results_by_date (filter-container + pills)
   =========================== */

.tp-date-row .filter-container{
  background: var(--background-light);
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

/* Dark mode si tu en as */
[data-theme="dark"] .tp-date-row .filter-container{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 10px 26px rgba(0,0,0,0.35);
}

/* Le bloc pills */
.tp-date-row .date-selector{
  display:flex;
  justify-content:center;
  gap: .625rem;
  padding: .25rem 0;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling: touch;
}

/* Carte */
.tp-date-row .date-button{
  background: var(--background-light);
  border: 1px solid var(--primary-color);
  border-radius: .75rem;
  padding: .55rem .7rem;
  min-width: 120px;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0,0,0,0.10);
  scroll-snap-align: center;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s;
  cursor: pointer;
  user-select: none;
}

.tp-date-row .date-button:hover{
  transform: translateY(-1px);
}

.tp-date-row .date-button.selected{
  background-color: var(--highlight-color, #2a4ba7);
  border-color: var(--highlight-color, #2a4ba7);
  color: #fff;
  box-shadow: 0 6px 10px rgba(0,0,0,0.25);
}

/* Texte date */
.tp-date-row .date-text{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.25rem;
  font-weight: 800;
  white-space: nowrap;
}

.tp-date-row .date-text::before{
  content: '';
  font-size: 1rem;
}

/* Badge count */
.tp-date-row .match-count{
  display:inline-block;
  margin-top: .25rem;
  padding: .25rem .5rem;
  font-size: .75rem;
  font-weight: 800;
  border-radius: .5rem;
  background: var(--highlight-color, #2a4ba7);
  border: 1px solid rgba(0,0,0,0.10);
  color: #fff;
}

.tp-date-row .date-button.selected .match-count{
  background: rgba(0,0,0,0.25);
  border-color: transparent;
}

/* Scrollbar légère */
.tp-date-row .date-selector::-webkit-scrollbar{ height: 8px; }
.tp-date-row .date-selector::-webkit-scrollbar-thumb{ background: rgba(0,0,0,0.15); border-radius: 99px; }
[data-theme="dark"] .tp-date-row .date-selector::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.18); }

.pct { opacity: .85; font-weight: 600; margin-left: .25rem; }
.tp-hero-actions{
  display: flex;
  gap: 12px;
  justify-content: center; /* centrage desktop */
}

/* Mobile */
@media (max-width: 640px){
  .tp-hero-actions{
    flex-direction: column;
    align-items: stretch; /* boutons pleine largeur */
  }

  .tp-hero-actions .cta-button{
    width: 100%;
    text-align: center;
  }
}

/* =========================================================
   TOP PRONOSTICS IA — rendu "match-card" (inspiré resultats.css)
   À AJOUTER EN FIN DE FICHIER
   ========================================================= */

/* Le grid devient une pile de cartes (comme resultats) */
#bb-grid.tp-grid{
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 8px 0 18px;
}

/* Group headers (si regroupement par tranches) */
.tp-group{
  max-width: 980px;
  margin: 0 auto;
  width: 100%;
}
.tp-group__title{
  font-weight: 950;
  color: var(--text);
  margin: 14px 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}
.tp-group__title small{
  font-weight: 800;
  color: var(--muted);
}

/* Carte match */
.tp-match-card{
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.06);
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}
.tp-match-card:hover{
  transform: translateY(-3px);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 10px 26px rgba(0,0,0,0.08);
}

/* Meta top line */
.tp-match-meta{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.tp-league-badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-weight: 900;
  color: var(--primary-color);
}
.tp-league-badge img{
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.tp-kickoff{
  font-weight: 800;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Confrontation (copie esprit resultats.css, scope local) */
.tp-team-confrontation{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.tp-team{
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 8px;
  text-align:center;
}
.tp-team-logo{
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  overflow: hidden;
  background: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
}
.tp-team-logo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.tp-team-name{
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--primary-color);
  max-width: 320px;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tp-vs{
  font-weight: 900;
  color: var(--muted);
}

/* Liste des picks dans une carte match */
.tp-picks{
  display:flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
.tp-pick-row{
  display:grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items:center;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(0,0,0,0.02);
}
.tp-pick-left{
  min-width: 0;
}
.tp-pick-label{
  font-weight: 950;
  color: var(--text);
  line-height: 1.1;
}
.tp-pick-sub{
  margin-top: 4px;
  font-weight: 700;
  color: var(--muted);
  font-size: 0.9rem;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

/* Chips proba/conf */
.tp-pick-metrics{
  display:flex;
  gap: 8px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap: wrap;
}
.tp-chip{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
  font-weight: 900;
  font-size: 0.9rem;
}
.tp-chip--prob{
  border-color: rgba(30,64,175,0.22);
  background: rgba(30,64,175,0.06);
}
.tp-chip--conf{
  border-color: rgba(16,185,129,0.22);
  background: rgba(16,185,129,0.06);
}
.tp-chip--type{
  border-color: rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.04);
}

/* Responsive */
@media (max-width: 768px){
  .tp-team-confrontation{
    grid-template-columns: 1fr;
  }
  .tp-vs{ display:none; }
  .tp-pick-row{
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .tp-pick-metrics{
    justify-content:flex-start;
  }
}

/* Dark mode */
[data-theme="dark"] .tp-match-card{
  background: #1f2937;
  border-color: #374151;
}
[data-theme="dark"] .tp-pick-row{
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.10);
}
[data-theme="dark"] .tp-chip{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
}

/* =========================================================
   Outcome coloring (win/lose/void/pending)
   ========================================================= */

/* base: on prépare une "barre" à gauche pour renforcer la lecture */
.tp-pick-row{
  position: relative;
  overflow: hidden;
}

.tp-pick-row::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:6px;
  background: rgba(0,0,0,0.10);
}

/* WIN */
.tp-pick-row--win{
  background: rgba(16, 185, 129, 0.10);
  border-color: rgba(16, 185, 129, 0.28);
}
.tp-pick-row--win::before{
  background: rgba(16, 185, 129, 0.95);
}

/* LOSE */
.tp-pick-row--lose{
  background: rgba(239, 68, 68, 0.10);
  border-color: rgba(239, 68, 68, 0.28);
}
.tp-pick-row--lose::before{
  background: rgba(239, 68, 68, 0.95);
}

/* VOID (DNB nul) */
.tp-pick-row--void{
  background: rgba(59, 130, 246, 0.10);
  border-color: rgba(59, 130, 246, 0.28);
}
.tp-pick-row--void::before{
  background: rgba(59, 130, 246, 0.95);
}

/* PENDING (pas encore de score) */
.tp-pick-row--pending{
  background: rgba(0,0,0,0.02);
  border-color: rgba(0,0,0,0.08);
}
[data-theme="dark"] .tp-pick-row--pending{
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
}

/* =========================================================
   Séparation entre matchs (lisibilité)
   ========================================================= */

#bb-grid.tp-grid{
  gap: 22px; /* un poil plus */
}

/* carte match: repère visuel + séparation */
.tp-match-card{
  position: relative;
  border: 1px solid rgba(0,0,0,0.08);
}

.tp-match-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  right:0;
  height:6px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  background: rgba(30, 64, 175, 0.85); /* bleu "primary-ish" */
}

/* petit séparateur interne entre header et confrontation */
.tp-match-meta{
  padding-top: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

[data-theme="dark"] .tp-match-meta{
  border-bottom-color: rgba(255,255,255,0.10);
}

/* dark: bordures plus visibles */
[data-theme="dark"] .tp-match-card{
  border-color: rgba(255,255,255,0.10);
}

/* =========================================================
   Outcome chip (résultat explicite)
   ========================================================= */

.tp-chip--outcome{
  font-weight: 900;
  border-width: 2px;
}

.tp-chip--outcome small{
  font-weight: 800;
  opacity: 0.75;
  margin-left: 4px;
}

/* WIN */
.tp-outcome-win{
  background: rgba(16,185,129,0.15);
  border-color: rgba(16,185,129,0.6);
  color: rgb(16,185,129);
}

/* LOSE */
.tp-outcome-lose{
  background: rgba(239,68,68,0.15);
  border-color: rgba(239,68,68,0.6);
  color: rgb(239,68,68);
}

/* VOID */
.tp-outcome-void{
  background: rgba(59,130,246,0.15);
  border-color: rgba(59,130,246,0.6);
  color: rgb(59,130,246);
}

/* PENDING */
.tp-outcome-pending{
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.15);
  color: var(--muted);
}

[data-theme="dark"] .tp-outcome-pending{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
}

/* =========================================================
   H2 row + inline toggle
   ========================================================= */

.tp-h2-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.tp-inline-toggle{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: var(--muted);
  user-select: none;
  cursor: pointer;
}

.tp-inline-toggle input{
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.tp-inline-toggle__text{
  font-size: 0.95rem;
}

/* mobile : toggle passe dessous */
@media (max-width: 640px){
  .tp-h2-row{
    align-items: flex-start;
  }
}

/* =========================================================
   Date picker — aligné sur results_by_date (scopé TP)
   ========================================================= */

.tp-date-row{
  width: 100%;
  max-width: 100%;
}

/* le container centré, comme results_by_date */
.tp-date-row .filter-container{
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;

  padding: 12px;                    /* important pour mobile */
  border-radius: 14px;
  background: var(--bg);            /* ✅ tes vars */
  border: 1px solid var(--border);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

/* carrousel horizontal comme results_by_date */
.tp-date-row .date-selector{
  display: flex;
  justify-content: center;
  gap: .625rem;
  padding: .625rem 0;

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* pills idem results_by_date, mais harmonisées */
.tp-date-row .date-button{
  background: var(--bg);
  border: 1px solid rgba(30,64,175,0.25);  /* ou var(--border) */
  border-radius: .75rem;
  padding: .5rem;
  min-width: 100px;
  text-align: center;

  box-shadow: 0 4px 6px rgba(0,0,0,.10);
  scroll-snap-align: center;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s;
  cursor: pointer;

  color: var(--text);
}

.tp-date-row .date-button:hover:not(.selected){
  background: rgba(41,75,167,.08);
  border-color: var(--brand);
}

.tp-date-row .date-button.selected{
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
  box-shadow: 0 6px 10px rgba(0,0,0,.25);
}

/* texte */
.tp-date-row .date-button .date-text{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .25rem;
  font-weight: 800;
  color: inherit;
}
.tp-date-row .date-button .date-text::before{
  content: "📅";
  font-size: 1rem;
}

/* badge */
.tp-date-row .date-button .match-count{
  display: inline-block;
  margin-top: .25rem;
  padding: .25rem .5rem;
  font-size: .75rem;
  font-weight: 800;
  border-radius: .5rem;

  background: var(--brand);
  border: 1px solid rgba(0,0,0,.10);
  color: #fff;
}
.tp-date-row .date-button.selected .match-count{
  background: rgba(0,0,0,.25) !important;
  border-color: transparent !important;
}

/* =========================================================
   TP date pills — plus compact + ZERO overlap text
   ========================================================= */

/* 1) Ligne globale un peu plus "haute" (moins d'épaisseur visuelle) */
.tp-date-row .date-selector{
  padding: .35rem 0;          /* au lieu de .625rem */
  gap: .5rem;                 /* un peu plus serré */
}

/* 2) Bouton plus compact + layout stable */
.tp-date-row .date-button{
  padding: .42rem .55rem;     /* ↓ hauteur */
  min-width: 96px;            /* un poil plus petit */
  line-height: 1.15;          /* IMPORTANT: évite chevauchement */
  display: flex;              /* on force colonne propre */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .18rem;                /* espace entre date-text et badge */
  overflow: hidden;           /* sécurité anti débordement */
}

/* 3) Date-text: empêcher toute superposition */
.tp-date-row .date-button .date-text{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;

  font-weight: 850;
  line-height: 1.15;          /* doit matcher le bouton */
  white-space: nowrap;        /* 1 ligne = jamais d'overlap */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;    /* si vraiment long */
}

/* Icône: éviter qu'elle “pousse” verticalement */
.tp-date-row .date-button .date-text::before{
  line-height: 1;             /* clé */
  transform: translateY(-.5px); /* micro align */
}

/* 4) Badge compact */
.tp-date-row .date-button .match-count{
  margin-top: 0;              /* évite double spacing */
  padding: .20rem .45rem;
  font-size: .72rem;
  line-height: 1.05;
}

/* 5) Sécurité: selected ne doit pas changer la géométrie */
.tp-date-row .date-button.selected{
  transform: none;            /* évite shift vertical */
}

/* =========================================================
   FIX: la scrollbar "overflow" ne doit PAS être sur filter-container
   -> elle doit être sur .date-selector uniquement
   ========================================================= */

/* 1) Le parent ne scroll jamais (supprime la barre que tu vois) */
.tp-date-row .filter-container{
  overflow: hidden !important;    /* stop scroll horizontal du container */
}

/* 2) Le scroll horizontal est porté par la ligne de dates */
.tp-date-row .date-selector{
  overflow-x: auto !important;
  overflow-y: hidden !important;

  /* réserve de la place pour la barre (évite overlay / bug resize) */
  padding-bottom: .6rem;
  scrollbar-gutter: stable;

  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}

/* 3) Scrollbar fine (WebKit) */
.tp-date-row .date-selector::-webkit-scrollbar{ height: 6px; }
.tp-date-row .date-selector::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,0.18);
  border-radius: 999px;
}
[data-theme="dark"] .tp-date-row .date-selector::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.22);
}

/* 4) Mobile: encore plus fin + Firefox */
@media (max-width: 640px){
  .tp-date-row .date-selector::-webkit-scrollbar{ height: 4px; }

  .tp-date-row .date-selector{
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.22) transparent;
  }
  [data-theme="dark"] .tp-date-row .date-selector{
    scrollbar-color: rgba(255,255,255,0.25) transparent;
  }
}
/* =========================================================
   TOP PRONOSTICS IA — Mobile-first clean overrides
   Scope: .tp-main (does not fight global/layout/components/noads)
   Goals:
   - No horizontal overflow
   - Date pills scroll bar visible + taller on small screens (<500px)
   - No overlap in .date-button (.date-text + .match-count)
   - Cards readable on mobile (<=500px)
   ========================================================= */

/* ---------- Local tokens (scoped, with safe fallbacks) ---------- */
.tp-main{
  --tp-max: 1120px;

  /* prefer global.css vars */
  --tp-primary: var(--primary-color, #1e40af);
  --tp-bg: var(--background-light, var(--light-bg, #ffffff));
  --tp-text: var(--text-color-light, var(--light-text, #0f172a));
  --tp-muted: var(--muted, #64748b);

  --tp-card: #ffffff;
  --tp-border: rgba(15,23,42,.10);

  --tp-radius: 18px;
  --tp-radius-sm: 12px;

  --tp-shadow: 0 10px 22px rgba(2,6,23,.06);

  color: var(--tp-text);
  max-width: 100%;
  overflow-x: clip;
}

/* hard guard against horizontal scroll coming from injected content */
.tp-main, .tp-main *{ box-sizing: border-box; }
.tp-main img, .tp-main svg{ max-width: 100%; height: auto; }
.tp-main .tp-container{ min-width: 0; }

/* ---------- Container ---------- */
.tp-container{
  max-width: var(--tp-max);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Panels/cards ---------- */
.tp-panel,
.tp-day-summary,
.tp-match-card,
.bestbet-card{
  background: var(--tp-card);
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius);
  box-shadow: var(--tp-shadow);
  min-width: 0;
  max-width: 100%;
}

.tp-panel{ padding: 18px; }
.tp-day-summary{ padding: 14px; }
.tp-match-card{ border-radius: 12px; padding: 16px; }
.bestbet-card{ padding: 14px; }

/* ---------- DATE ROW (results_by_date-like, but scoped) ---------- */
.tp-date-row{ width: 100%; min-width: 0; }

/* Make sure the container grows with its content */
.tp-date-row .filter-container{
  background: var(--tp-bg);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  padding: 12px 12px 10px; /* bottom kept, scrollbar handled on .date-selector */
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  max-width: 100%;
  min-width: 0;
}

/* The scroller: add vertical room so the scrollbar never overlaps the pills */
.tp-date-row .date-selector{
  display: flex;
  justify-content: center;
  gap: 10px;

  padding: 8px 6px 14px;   /* ✅ bottom space for scrollbar */
  overflow-x: auto;
  overflow-y: hidden;

  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;

  scrollbar-gutter: stable;           /* keeps height stable when possible */
}

/* Scrollbar (mostly desktop/Android Chromium) */
.tp-date-row .date-selector::-webkit-scrollbar{ height: 10px; }
.tp-date-row .date-selector::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.18);
  border-radius: 999px;
}
[data-theme="dark"] .tp-date-row .date-selector::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.22);
}

/* Pill */
.tp-date-row .date-button{
  background: var(--tp-bg);
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 12px;

  /* ✅ prevent overlap: explicit vertical layout */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;

  padding: 10px 12px;
  min-width: 120px;

  text-align: center;
  box-shadow: 0 4px 6px rgba(0,0,0,.10);
  scroll-snap-align: center;

  cursor: pointer;
  user-select: none;
  line-height: 1.1;
}

.tp-date-row .date-button:hover{ transform: translateY(-1px); }

.tp-date-row .date-button.selected{
  background: var(--highlight-color, var(--tp-primary));
  border-color: var(--highlight-color, var(--tp-primary));
  color: #fff;
  box-shadow: 0 6px 10px rgba(0,0,0,.25);
}

/* Date text */
.tp-date-row .date-text{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  font-weight: 850;
  white-space: nowrap;     /* keeps one clean line */
  max-width: 100%;
}

.tp-date-row .date-text::before{ content: "📅"; font-size: 1rem; }

/* Badge count */
.tp-date-row .match-count{
  display: inline-block;
  padding: 4px 10px;
  font-size: .78rem;
  font-weight: 850;
  border-radius: 10px;
  background: var(--highlight-color, var(--tp-primary));
  color: #fff;
  border: 1px solid rgba(0,0,0,.10);
}

.tp-date-row .date-button.selected .match-count{
  background: rgba(0,0,0,.25);
  border-color: transparent;
}

/* ---------- Match cards (tighten on mobile, keep zero overflow) ---------- */
.tp-team-name{
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tp-pick-sub{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Responsive (<= 500px) ---------- */
@media (max-width: 500px){
  .tp-container{ padding: 0 12px; }

  .tp-panel{ padding: 14px; }
  .tp-day-summary{ padding: 12px; }
  .tp-match-card{ padding: 14px; }

  /* Date area: a bit more compact but still scrollable */
  .tp-date-row .filter-container{
    padding: 10px 10px 8px;
    border-radius: 12px;
  }

  .tp-date-row .date-selector{
    justify-content: flex-start;       /* more natural on phones */
    gap: 8px;
    padding: 6px 4px 14px;             /* keep room for scrollbar */
  }

  .tp-date-row .date-button{
    min-width: 108px;
    padding: 10px 10px;
    border-radius: 12px;
  }

  .tp-date-row .date-text{
    font-size: .92rem;
  }

  .tp-date-row .match-count{
    font-size: .75rem;
    padding: 4px 9px;
  }

  /* Team block: smaller logos */
  .tp-team-logo{ width: 42px; height: 42px; border-radius: 10px; }
  .tp-kickoff{ font-size: .9rem; }

  /* Pick rows: remove 3-col grid earlier than 768 */
  .tp-pick-row{
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .tp-pick-metrics{ justify-content: flex-start; }
}

/* Dark mode tweaks */
[data-theme="dark"] .tp-date-row .filter-container{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}
[data-theme="dark"] .tp-date-row .date-button{
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
}