/* ════════════════════════════════════════════════════════════════
   IT'S RUGBY — MATCH PAGE CSS
   Template-specific styles for the match page
   ════════════════════════════════════════════════════════════════ */

/* ── Match-specific variables (extend common) ── */
:root { --off-white:#F9F9F7; }

.team-bonus { margin-top:6px; }
.bonus-tag { display:inline-flex; align-items:center; font-size:9px; font-weight:800; letter-spacing:1px; text-transform:uppercase; padding:2px 8px; border:1px solid currentColor; }
.bonus-off  { color:var(--g-bright); border-color:var(--g-bright); background:rgba(142,217,104,.15); }
.bonus-def  { color:var(--sage); border-color:var(--sage); background:var(--sage-lt); }
.bonus-none { color:rgba(242,229,210,.6); border-color:rgba(242,229,210,.15); }

.badge { display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:800; letter-spacing:1px; text-transform:uppercase; padding:3px 8px; border:1px solid currentColor; }
.badge-ended { color:var(--teal); background:var(--sage-lt); border-color:var(--sage); }
.badge-upcoming { color:var(--vanilla); background:var(--blue); border-color:var(--blue); }
.badge-forfeit { color:var(--vanilla); background:var(--red); border-color:var(--red); }
.badge-bonus { color:var(--g-bright); background:var(--teal-dk); border-color:var(--g-bright); }

.match-header { background:var(--teal); color:var(--vanilla); padding:28px 0 0; overflow-x:hidden; }
.match-header a.its-link { color:var(--vanilla); }
.match-header a.its-link:hover { color:var(--vanilla); text-decoration:underline; }
.match-meta-top { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:22px; }
.match-badges { display:flex; gap:8px; }
.match-top-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
.match-comp { font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--sage); }
.match-date-inline { font-size:11px; font-weight:700; letter-spacing:1.5px; color:rgba(242,229,210,.7); }
.match-chip { font-size:9px; font-weight:800; letter-spacing:1px; text-transform:uppercase; padding:2px 7px; border:1px solid rgba(242,229,210,.2); color:rgba(242,229,210,.6); }
.match-chip.chip-fem { color:var(--sage); border-color:rgba(171,200,162,.4); }
.match-chip.chip-masc { color:var(--sage); border-color:rgba(171,200,162,.4); }
.match-chip.chip-level { color:var(--sage); border-color:rgba(171,200,162,.4); }
.match-chip.chip-cat { color:rgba(242,229,210,.5); border-color:rgba(242,229,210,.15); }
.scoreline { display:grid; grid-template-columns:1fr auto 1fr; align-items:flex-start; gap:24px; padding:0 0 28px; }
.team-block { display:flex; flex-direction:column; gap:4px; align-items:flex-start; text-align:left; min-width:0; }
.team-block.away { text-align:right; align-items:flex-end; }
.team-abbr { font-size:10px; font-weight:800; letter-spacing:3px; text-transform:uppercase; color:var(--sage); }
.team-name { font-family:var(--sans); font-size:clamp(24px,3.5vw,40px); font-weight:900; line-height:1; overflow-wrap:break-word; word-break:break-word; }
.team-coach { font-size:11px; color:rgba(242,229,210,.5); margin-top:5px; }
.team-coach .its-link { color:rgba(242,229,210,.5); text-decoration:none; }
.team-coach .its-link:hover { color:var(--vanilla); }
.team-scorers { margin-top:10px; display:flex; flex-direction:column; gap:3px; align-items:flex-start; }
.team-scorers.away { align-items:flex-end; }
.scorer { font-size:11px; color:rgba(242,229,210,.65); font-weight:500; display:flex; align-items:center; gap:5px; }
.scorer .s-ico { font-size:9px; font-weight:900; color:var(--sage); }
.scorer .s-min { color:rgba(242,229,210,.7); }
.score-center { text-align:center; padding-top:6px; }
.score-nums { font-size:clamp(56px,9vw,88px); font-weight:900; line-height:1; letter-spacing:-3px; color:var(--vanilla); font-variant-numeric:tabular-nums; }
.score-sep { color:rgba(242,229,210,.3); margin:0 8px; font-weight:300; }
.score-upcoming { font-size:clamp(32px,5.5vw,48px); font-weight:700; color:rgba(242,229,210,.55); letter-spacing:1px; }
.sc-kickoff-lbl { font-size:9px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--sage); margin-bottom:2px; }
.sc-venue { font-size:10px; font-weight:600; color:rgba(242,229,210,.7); letter-spacing:.5px; margin-bottom:10px; }
.sc-ht { font-size:11px; font-weight:600; color:var(--sage); margin-top:10px; }
.sc-pills { display:flex; justify-content:center; gap:6px; margin-top:6px; }
.sc-pill { font-size:9px; font-weight:800; letter-spacing:.5px; padding:2px 8px; background:rgba(242,229,210,.12); color:var(--vanilla); }
.sc-pill-muted { background:rgba(242,229,210,.06); color:rgba(242,229,210,.7); }
.sc-footer { margin-top:14px; padding-top:10px; border-top:1px solid rgba(242,229,210,.1); font-size:10px; color:rgba(242,229,210,.3); display:flex; align-items:center; justify-content:center; gap:6px; font-weight:500; }

/* ── H2H (confrontations directes dans le hero) ── */
.h2h-block {
  margin-top:10px; padding-top:8px;
  border-top:1px solid rgba(242,229,210,.1);
  text-align:center;
}
.h2h-title {
  font-size:8px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase;
  color:rgba(242,229,210,.4); margin-bottom:6px;
}
.h2h-list { display:flex; justify-content:center; gap:8px; }
.h2h-match {
  display:flex; align-items:center; gap:4px;
}
.h2h-score { font-size:10px; font-weight:700; color:rgba(242,229,210,.7); }
.h2h-date { font-size:8px; color:rgba(242,229,210,.3); }
.sc-dot { opacity:.4; }
.info-item:last-child { border-right:none; }
.info-item strong { color:rgba(242,229,210,.85); font-weight:600; }

.cta-bar { background:var(--vanilla); border-bottom:1px solid var(--border); padding:10px 0; }
.cta-bar .container { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cta-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; font-size:12px; font-weight:700; border:1px solid var(--border); background:var(--white); color:var(--teal); transition:all .15s; }
.cta-btn:hover { border-color:var(--teal); color:var(--teal); background:var(--sage-lt); }
.cta-btn.primary { background:var(--teal); color:var(--vanilla); border-color:var(--teal); }
.cta-btn.primary:hover { background:var(--teal-dk); }

.info-dropdown-wrap { position:relative; }
.info-dropdown-btn { display:flex; align-items:center; gap:6px; padding:10px 16px; font-size:11px; color:rgba(242,229,210,.7); font-weight:500; background:none; border:none; cursor:pointer; font-family:var(--sans); transition:color .15s; }
.info-dropdown-btn:hover { color:var(--vanilla); }
.info-dropdown-btn strong { color:rgba(242,229,210,.9); font-weight:700; }
.info-dropdown-btn #info-arrow { font-size:12px; color:var(--sage); transition:transform .2s; }
.info-dropdown-btn.open #info-arrow { transform:rotate(180deg); }
.info-dropdown { display:none; position:absolute; top:100%; left:0; background:var(--teal-dk); border:1px solid rgba(242,229,210,.1); border-top:none; z-index:200; min-width:320px; padding:4px 0; box-shadow:0 8px 24px rgba(0,0,0,.3); }
.info-dropdown.open { display:block; }
.info-dropdown .info-dropdown .info-item:last-child { border-bottom:none; }
.info-dropdown .info-item strong { color:rgba(242,229,210,.9); font-weight:700; }

.nav-info-wrap { position:relative; display:flex; align-items:stretch; }
.nav-info-btn { cursor:pointer; font-size:11px; font-weight:700; color:var(--muted); letter-spacing:.5px; }
.nav-info-btn:hover { color:var(--teal); background:var(--sage-lt); }
.nav-info-dropdown { display:none; position:absolute; top:100%; left:0; background:var(--teal-dk); min-width:240px; z-index:200; border:1px solid rgba(242,229,210,.1); box-shadow:0 8px 24px rgba(0,0,0,.25); }
.nav-info-dropdown.open { display:block; }
.nid-item { display:flex; justify-content:space-between; gap:16px; padding:9px 16px; border-bottom:1px solid rgba(242,229,210,.07); font-size:12px; color:rgba(242,229,210,.75); }
.nid-item:last-child { border-bottom:none; }
.nid-lbl { font-weight:800; color:var(--sage); font-size:10px; letter-spacing:.5px; text-transform:uppercase; white-space:nowrap; }

/* Dropdown données */
.nav-dd-wrap { position:relative; display:flex; align-items:stretch; }
.nav-dd-btn { height:42px; padding:0 14px; font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); display:inline-flex; align-items:center; gap:5px; white-space:nowrap; transition:all .15s; border-bottom:2px solid transparent; cursor:pointer; }
.nav-dd-btn:hover, .nav-dd-btn.open { color:var(--teal); background:var(--sage-lt); }
.nav-dd-btn.open { border-bottom-color:var(--teal); }
.nav-dd-menu { display:none; position:absolute; top:100%; left:0; background:var(--white); min-width:200px; z-index:200; border:1px solid var(--border); box-shadow:0 8px 24px rgba(0,0,0,.12); }
.nav-dd-menu.open { display:block; }
.nav-dd-group { padding:8px 16px 4px; font-size:9px; font-weight:900; letter-spacing:1.5px; text-transform:uppercase; color:var(--sage); border-top:1px solid rgba(242,229,210,.07); margin-top:2px; }
.nav-dd-group:first-child { border-top:none; margin-top:0; }

.nav-dd-item { display:block; padding:10px 16px; font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); border-bottom:1px solid rgba(196,196,196,.3); transition:all .15s; }
.nav-dd-item:last-child { border-bottom:none; }
.nav-dd-item:hover { color:var(--teal); background:var(--sage-lt); padding-left:20px; }

.nav-cta { height:42px; padding:0 14px; font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; border:none; background:transparent; color:var(--muted); display:inline-flex; align-items:center; white-space:nowrap; transition:all .15s; border-bottom:2px solid transparent; }
.nav-cta:hover { color:var(--teal); background:var(--sage-lt); }
.nav-cta.primary { background:var(--teal); color:var(--vanilla); border-bottom:2px solid var(--teal); }
.nav-cta.primary:hover { background:var(--teal-dk); }
.nav-int-sep { width:1px; background:var(--border); margin:8px 4px; flex-shrink:0; }

.hero-cta { display:flex; gap:8px; flex-wrap:wrap; padding-bottom:20px; }
.hero-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; border:1px solid rgba(242,229,210,.3); background:rgba(242,229,210,.08); color:rgba(242,229,210,.85); cursor:pointer; font-family:var(--sans); transition:all .15s; }
.hero-btn:hover { background:rgba(242,229,210,.18); border-color:rgba(242,229,210,.25); color:var(--vanilla); }
.hero-btn.primary { background:var(--g-bright); border-color:var(--g-bright); color:var(--teal-dk); font-weight:800; }
.hero-btn.primary:hover { background:#a0e878; }

.media-strip-scroll::-webkit-scrollbar-track { background:var(--vanilla-d); }

.motm { display:flex; align-items:center; gap:16px; background:var(--teal); color:var(--vanilla); padding:14px 18px; margin-bottom:20px; border-left:4px solid var(--g-bright); }
.motm-ini { width:48px; height:48px; flex-shrink:0; background:var(--sage); display:grid; place-items:center; font-size:13px; font-weight:900; color:var(--teal-dk); }
.motm-label { font-size:9px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--sage); }
.motm-name  { font-size:17px; font-weight:800; margin-top:2px; }
.motm a.its-link { color:var(--vanilla); }
.motm a.its-link:hover { color:var(--vanilla); }
.motm-stats { font-size:11px; color:rgba(242,229,210,.6); margin-top:3px; }
.summary { border-left:3px solid var(--teal); padding:14px 18px; margin-bottom:24px; font-size:14px; line-height:1.7; background:var(--white); border-top:1px solid var(--border); border-right:1px solid var(--border); border-bottom:1px solid var(--border); color:var(--teal); }
.summary strong { color:var(--teal); font-weight:800; }
.summary-links { margin-top:12px; display:flex; gap:16px; flex-wrap:wrap; }
.summary-link { font-size:12px; font-weight:700; color:var(--teal); border-bottom:1px solid var(--sage); }

.period-table { width:100%; border-collapse:collapse; font-size:13px; border:1px solid var(--border); background:var(--white); }
.period-table th { background:var(--teal); color:var(--vanilla); font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:10px 14px; text-align:left; }
.period-table td { padding:10px 14px; border-bottom:1px solid var(--border); }
.period-table tr:last-child td { border-bottom:none; }
.period-table tr:hover td { background:var(--sage-lt); }
.period-table .total td { background:#f0f0f0; font-weight:800; }
.p-fr { color:var(--teal); font-weight:900; font-size:15px; }
.p-sc { color:var(--g-bright);  font-weight:900; font-size:15px; }

.fc-tabs { display:flex; border:1px solid var(--border); background:var(--white); margin-bottom:0; overflow-x:auto; }
.fc-tab { padding:9px 22px; font-size:12px; font-weight:700; color:var(--muted); background:var(--white); border:none; border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; flex-shrink:0; cursor:pointer; transition:all .15s; display:flex; align-items:center; gap:8px; }
.fc-tab.on { color:var(--teal); border-bottom:2px solid var(--g-bright); font-weight:800; }
.fc-tab:hover:not(.on) { color:var(--teal); }
.live-pip { width:7px; height:7px; background:var(--red); display:inline-block; animation:blink 1.2s infinite; }
.fc-panel { display:none; }
.fc-panel.on { display:block; background:var(--white); border:1px solid var(--border); border-top:none; padding:16px; }

.tl-top { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
.tl-filters { display:flex; gap:5px; flex-wrap:wrap; }
.tl-filter { padding:5px 12px; border:1px solid var(--border); background:var(--white); font-size:11px; font-weight:700; color:var(--muted); transition:all .15s; }
.tl-filter:hover { border-color:var(--teal); color:var(--teal); }
.tl-filter.on { background:var(--teal); color:var(--vanilla); border-color:var(--teal); }
.tl-legend { display:flex; gap:14px; flex-wrap:wrap; padding:10px 12px; background:var(--white); border:1px solid var(--border); font-size:11px; color:var(--muted); font-weight:600; }
.tl-leg { display:inline-flex; align-items:center; gap:6px; line-height:1; }
.tl-leg-ico { flex-shrink:0; width:18px; height:18px; display:inline-grid; place-items:center; font-size:9px; font-weight:900; border:1px solid var(--border); background:var(--white); color:var(--teal); line-height:1; }
.tl-leg-ico.try    { background:var(--teal);    color:var(--vanilla); border-color:var(--teal); }
.tl-leg-ico.kick   { background:var(--teal);    color:var(--vanilla); border-color:var(--teal); }
.tl-leg-ico.card-y { background:var(--yellow);  color:var(--vanilla); border-color:var(--yellow); }
.tl-leg-ico.card-o { background:#e07b00;        color:var(--vanilla); border-color:#e07b00; }
.tl-leg-ico.card-r { background:var(--red);     color:var(--vanilla); border-color:var(--red); }
.tl-leg-ico.sub    { background:var(--sage-lt); color:var(--teal);    border-color:var(--sage); }
.tl-leg-ico.inj    { background:var(--red-lt);  color:var(--red);     border-color:var(--red); }
.tl-leg-ico.misc   { background:var(--white);   color:var(--muted);   border-color:var(--border); }
.tl-header { display:grid; grid-template-columns:1fr 56px 1fr; font-size:10px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; padding:8px 12px; background:var(--white); border:1px solid var(--border); border-bottom:2px solid var(--teal); }
.h-fr { color:var(--teal); }
.h-sc { color:var(--teal); text-align:right; }
.h-min { text-align:center; color:var(--muted); }
.tl-list { display:flex; flex-direction:column; }
.tl-row { display:grid; grid-template-columns:1fr 56px 1fr; align-items:stretch; min-height:52px; border-bottom:1px solid rgba(196,196,196,.35); transition:background .1s; background:var(--white); }
.tl-row:hover { background:var(--sage-lt); }
.tl-row.hl { background:var(--white); box-shadow:inset 3px 0 0 var(--g-bright); }
.tl-period { border-bottom:1px solid var(--border); }
.tl-halftime { display:flex; align-items:center; justify-content:center; gap:8px; background:#f0f0f0; border-bottom:1px solid var(--border); font-size:10px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--muted); padding:7px; cursor:pointer; user-select:none; list-style:none; }
.tl-halftime::-webkit-details-marker { display:none; }
.tl-halftime::before { content:'▸'; font-size:10px; transition:transform .2s; }
.tl-period[open] > .tl-halftime::before { transform:rotate(90deg); }
.tl-ht-score { color:var(--teal); font-weight:900; letter-spacing:0; }
.tl-collapse { display:block; width:100%; padding:7px; font-size:10px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--muted); background:#f0f0f0; border:none; border-top:1px solid var(--border); cursor:pointer; font-family:var(--sans); transition:color .15s; }
.tl-collapse:hover { color:var(--teal); }
.tl-cell { padding:10px 8px; display:flex; align-items:center; }
.tl-cell.left { justify-content:flex-end; }
.tl-min-col { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:6px 4px; gap:4px; border-left:1px solid var(--border); border-right:1px solid var(--border); font-size:12px; font-weight:800; color:var(--muted); }
.tl-score { font-size:9px; font-weight:800; background:var(--ink); color:var(--vanilla); padding:2px 5px; display:block; text-align:center; }
.ev { display:inline-flex; align-items:center; gap:8px; max-width:100%; }
.ev.left { flex-direction:row-reverse; text-align:right; }
.ev-ico { flex-shrink:0; width:28px; height:28px; display:grid; place-items:center; font-size:11px; font-weight:900; border:1px solid var(--border); background:var(--white); color:var(--teal); }
.ev-ico.try    { background:var(--teal);    color:var(--vanilla); border-color:var(--teal); }
.ev-ico.kick   { background:var(--teal);    color:var(--vanilla); border-color:var(--teal); }
.ev-ico.card-y { background:var(--yellow);  color:var(--vanilla); border-color:var(--yellow); }
.ev-ico.card-o { background:#e07b00;       color:var(--vanilla); border-color:#e07b00; }
.ev-ico.card-r { background:var(--red);     color:var(--vanilla); border-color:var(--red); }
.ev-ico.sub    { background:var(--sage-lt); color:var(--teal); border-color:var(--sage); }
.ev-ico.inj    { background:var(--red-lt);  color:var(--red);  border-color:var(--red); }
.ev-ico.misc   { background:var(--white);   color:var(--muted); border-color:var(--border); }
.ev-body { display:flex; flex-direction:column; }
.ev-who  { font-weight:700; font-size:13px; line-height:1.2; }
.ev-sub-sep { font-weight:400; color:var(--muted); }
.ev-sub-out { font-weight:400; color:var(--muted); }
.ev-type { font-size:10px; font-weight:700; color:var(--muted); letter-spacing:.3px; text-transform:uppercase; }
.ev-note { font-size:11px; color:var(--muted); font-style:italic; margin-top:1px; }

/* msg-actions (commun — utilisé par tl-msg) */
/* ── Ban buttons ── */
.tl-ban-btns { display:flex; gap:3px; margin-left:auto; flex-shrink:0; }
.tl-ban {
  padding:1px 5px; font-size:8px; font-weight:800; letter-spacing:.5px;
  border:1px solid var(--border); background:var(--white); cursor:pointer;
  font-family:var(--sans); transition:all .12s;
}
.tl-ban-cj { color:#f0a500; border-color:#f0a500; }
.tl-ban-cj:hover { background:#f0a500; color:#fff; }
.tl-ban-cr { color:var(--red); border-color:var(--red); }
.tl-ban-cr:hover { background:var(--red); color:#fff; }
.tl-ban-def { color:#fff; background:var(--ink); border-color:var(--teal); }
.tl-ban-def:hover { background:#000; }

/* ── Ban button in banner ── */
.tl-bans-btn {
  background:none; border:1px solid rgba(242,229,210,.2); color:rgba(242,229,210,.6);
  font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  padding:4px 10px; cursor:pointer; transition:all .15s; flex-shrink:0;
  font-family:var(--sans);
}
.tl-bans-btn:hover { border-color:var(--red); color:var(--red); }
.tl-bans-btn.has-bans { border-color:var(--red); color:var(--red); }

/* ── Ban drawer (under banner) ── */
.tl-bans-drawer {
  background:var(--ink); border-bottom:1px solid rgba(242,229,210,.1);
  padding:8px 16px; max-height:180px; overflow-y:auto;
}
.tl-ban-list { }

.ban-row {
  display:flex; align-items:center; gap:8px; padding:5px 10px; font-size:10px;
  border-bottom:1px solid rgba(242,229,210,.1);
}
.ban-row:last-child { border-bottom:none; }
.ban-type-badge {
  font-size:8px; font-weight:900; padding:1px 5px; color:#fff; flex-shrink:0;
}
.ban-cj .ban-type-badge { background:#f0a500; }
.ban-cr .ban-type-badge { background:var(--red); }
.ban-def .ban-type-badge { background:var(--ink); }
.ban-name { font-weight:700; color:rgba(242,229,210,.8); }
.ban-salon { font-size:9px; color:rgba(242,229,210,.4); font-style:italic; }
.ban-exp { color:rgba(242,229,210,.4); margin-left:auto; }
.ban-by { color:rgba(242,229,210,.3); font-size:9px; }
.ban-empty { padding:10px; font-size:10px; color:rgba(242,229,210,.4); font-style:italic; text-align:center; }

.tl-del {
  margin-left:auto; flex-shrink:0; padding:0 5px;
  font-size:16px; font-weight:700; line-height:1;
  background:none; border:none; cursor:pointer;
  color:var(--red); opacity:.6; transition:opacity .12s;
}
.tl-del:hover { opacity:1; }

.leg-dot { width:12px; height:12px; }
.leg-dot.fr { background:var(--teal); }
.leg-dot.sc { background:var(--yellow); }
.stat-list { display:flex; flex-direction:column; background:var(--white); border:1px solid var(--border); border-top:none; padding:0 16px; }
.stat-item { display:grid; grid-template-columns:72px 1fr 72px; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid rgba(196,196,196,.35); }
.stat-item:last-child { border-bottom:none; }
.stat-item--empty .stat-vfr,
.stat-item--empty .stat-vsc { color:var(--muted); font-weight:600; }
.stat-item--empty .bar-f { background:#dcdcdc; }
.stat-item--zero .stat-vfr,
.stat-item--zero .stat-vsc { color:var(--muted); font-weight:700; }
.stat-lbl-none { font-size:10px; font-weight:500; color:var(--muted); font-style:italic; margin-left:4px; }
.stat-vfr { font-weight:700; font-size:14px; color:var(--teal); text-align:right; display:flex; align-items:center; justify-content:flex-end; gap:6px; }
.stat-vsc { font-weight:700; font-size:14px; color:var(--g-bright); display:flex; align-items:center; gap:6px; }
.stat-mid { display:flex; flex-direction:column; align-items:center; gap:6px; }
.stat-lbl { font-size:11px; font-weight:600; color:var(--muted); text-align:center; }
.dual-bar { display:grid; grid-template-columns:1fr 1fr; gap:3px; width:100%; }
.bar-t { height:5px; background:#ececec; overflow:hidden; border:1px solid var(--border); }
.bar-f { height:100%; transition:width .5s ease; }
.bar-f.fr { background:var(--teal); }
.bar-f.sc { background:var(--g-bright); }
.btn-expand { padding:9px 24px; border:1px solid var(--teal); background:transparent; color:var(--teal); font-size:12px; font-weight:700; transition:all .15s; }
.btn-expand:hover { background:var(--teal); color:var(--vanilla); }
.extra-stats { display:none; }
.extra-stats.open { display:block; }

.inner-card { background:var(--white); border:1px solid var(--border); padding:16px; }
.inner-title { font-size:10px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.d-row { display:flex; align-items:center; justify-content:space-between; padding:7px 0; border-bottom:1px solid rgba(196,196,196,.3); font-size:13px; }
.d-row:last-child { border-bottom:none; }
.d-lbl { color:var(--muted); font-size:12px; }
.d-vals { display:flex; gap:20px; }
.d-v { font-weight:800; min-width:28px; text-align:center; }
.d-v.fr { color:var(--teal); }
.d-v.sc { color:var(--yellow); }
.conquest-card { background:var(--white); border:1px solid var(--border); overflow:hidden; }
.conquest-head { background:var(--teal); color:var(--vanilla); padding:10px 16px; font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase; }
.conquest-body { padding:14px 16px; }
.c-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid rgba(196,196,196,.3); font-size:13px; }
.c-row:last-child { border-bottom:none; }
.c-lbl { color:var(--muted); font-size:12px; }
.c-vals { display:flex; gap:24px; }
.cv { font-weight:800; font-size:14px; min-width:36px; text-align:center; }
.cv.fr { color:var(--teal); }
.cv.sc { color:var(--yellow); }
.pct-section { padding-top:12px; margin-top:4px; border-top:1px solid var(--border); }
.pct-lbl { font-size:10px; font-weight:700; color:var(--muted); margin-bottom:6px; letter-spacing:1px; text-transform:uppercase; }
.pct-bar { display:flex; height:8px; overflow:hidden; border:1px solid var(--border); }
.pct-fr { background:var(--teal); }
.pct-sc { background:var(--yellow); }
.pct-nums { display:flex; justify-content:space-between; margin-top:5px; font-size:11px; font-weight:800; }
.pct-nums .fr { color:var(--blue); }
.pct-nums .sc { color:var(--red); }

/* Top performer intégré comme première ligne du lineup */
.lineup-perf { background:#f5f9f7; border-bottom:1px solid var(--border); }
.lineup--sc .lineup-perf { background:#fdfaef; }
.lineup-perf-cat { font-size:9px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--muted); padding:8px 14px 0; }
.lineup-perf-body { display:grid; grid-template-columns:40px 1fr auto; align-items:center; gap:12px; padding:8px 14px 12px; min-width:0; }
.perf-cat  { font-size:9px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:6px; margin-bottom:2px; }
.perf-dot  { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--teal); }
.perf-dot.sc { background:var(--g-bright); }
.perf-main { display:flex; flex-direction:column; align-items:center; line-height:1; flex-shrink:0; }
.perf-ini  { width:40px; height:40px; flex-shrink:0; background:var(--teal); display:grid; place-items:center; font-size:13px; font-weight:900; color:var(--vanilla); letter-spacing:1px; border-radius:50%; }
.lineup--sc .perf-ini { background:var(--g-bright); color:var(--teal); }
.perf-body { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; overflow:hidden; }
.perf-name { font-weight:800; font-size:15px; line-height:1.2; color:var(--teal); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.perf-name .its-link { color:var(--teal); text-decoration:none; }
.perf-name .its-link:hover { text-decoration:underline; }
.perf-stat { font-size:11px; font-weight:600; color:var(--muted); }
.perf-team { font-size:11px; color:var(--muted); margin-top:2px; }
.perf-val  { font-size:34px; font-weight:900; color:var(--teal); letter-spacing:-1px; line-height:1; }
.lineup--sc .perf-val { color:var(--g-bright); }
.perf-unit { font-size:11px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-top:2px; }
.perf-link { font-size:11px; font-weight:700; color:var(--teal); border-bottom:1px solid var(--sage); align-self:flex-start; }

.lineups-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:100%; }
@media (max-width:680px) { .lineups-grid { grid-template-columns:1fr; } }
.lineup { background:var(--white); border:1px solid var(--border); }
.lineup-head { background:var(--teal); padding:12px 16px; color:var(--vanilla); display:flex; align-items:center; justify-content:space-between; }
.lineup--sc .lineup-head { background:var(--g-bright); color:var(--teal); }
.lineup-name  { font-size:15px; font-weight:800; }
.lineup-coach { font-size:10px; color:var(--sage); margin-top:2px; }
.lineup-abbr  { font-size:11px; font-weight:800; letter-spacing:2px; color:var(--sage); text-transform:uppercase; }
.p-row { display:grid; grid-template-columns:28px 84px 1fr auto; align-items:center; gap:8px; padding:8px 14px; border-bottom:1px solid rgba(196,196,196,.3); font-size:13px; transition:background .1s; }
.p-row:last-child { border-bottom:none; }
.p-row:hover { background:var(--sage-lt); }
.p-row.bench-sep { background:#f0f0f0; border-bottom:1px solid var(--border); font-size:9px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--muted); padding:5px 14px; grid-template-columns:1fr; }
.p-num  { font-size:11px; font-weight:800; color:var(--muted); text-align:center; }
.p-pos  { font-size:11px; color:var(--muted); }
.p-name { font-weight:700; }
.p-ev   { display:flex; gap:4px; justify-content:flex-end; flex-wrap:wrap; }
.p-ev span { font-size:10px; font-weight:700; padding:1px 5px; border:1px solid var(--border); background:#f0f0f0; color:var(--muted); white-space:nowrap; }
.p-ev span.try  { border-color:var(--teal);   color:var(--teal);   background:var(--sage-lt); }
.p-ev span.kick { border-color:var(--blue);   color:var(--blue); }
.p-ev span.yel  { border-color:var(--yellow); color:var(--yellow); }
.p-ev span.inj  { border-color:var(--red);    color:var(--red); }
.p-ev span.sub  { border-color:var(--sage);   color:var(--muted); }

.ps-team-label { background:var(--teal); color:var(--vanilla); font-size:10px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; padding:8px 14px; margin-top:16px; }
.ps-panel { overflow-x:auto; display:none; }
.ps-panel.on { display:block; }
.ps-table { width:100%; border-collapse:collapse; font-size:12px; background:var(--white); border:1px solid var(--border); border-top:none; }
.ps-table th { background:#f0f0f0; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:1px; text-transform:uppercase; padding:9px 12px; text-align:center; white-space:nowrap; border-bottom:1px solid var(--border); }
.ps-table th:first-child, .ps-table th:nth-child(2) { text-align:left; }
.ps-table td { padding:9px 12px; border-bottom:1px solid rgba(196,196,196,.3); text-align:center; white-space:nowrap; }
.ps-table td:first-child, .ps-table td:nth-child(2) { text-align:left; }
.ps-table tr:hover td { background:var(--sage-lt); }
.ps-table .team-sep td { background:var(--teal); color:var(--vanilla); font-size:9px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; padding:6px 12px; text-align:left; }
.ps-num  { font-weight:800; color:var(--muted); font-size:11px; }
.ps-name { font-weight:700; }

.match-nav { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:32px; }
.mnav { display:flex; align-items:center; gap:14px; padding:14px 18px; border:1px solid var(--border); background:var(--white); transition:all .15s; }
.mnav:hover { border-color:var(--teal); background:var(--sage-lt); }
.mnav.next { flex-direction:row-reverse; text-align:right; }
.mnav-arr  { font-size:18px; color:var(--teal); font-weight:900; }
.mnav-lbl  { font-size:9px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); }
.mnav-match { font-size:13px; font-weight:700; margin-top:3px; }
.rk-table { width:100%; border-collapse:collapse; font-size:13px; background:var(--white); border:1px solid var(--border); }
.rk-table th { background:var(--teal); color:var(--vanilla); padding:9px 12px; font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; }
.rk-table td { padding:9px 12px; border-bottom:1px solid rgba(196,196,196,.3); }
.rk-table tr:last-child td { border-bottom:none; }
.rk-table tr:hover td { background:var(--sage-lt); }
.rk-table .hl td { background:var(--sage-lt); font-weight:700; }
.rk-pos  { font-weight:800; color:var(--muted); text-align:center; width:28px; }
.rk-team { font-weight:700; }
.rk-pts  { font-weight:900; color:var(--teal); text-align:right; }

/* ══ LIVE MATCH — DESIGN UNIFIÉ (partagé avec page équipe) ══ */
/* ── Banner live ── */
.team-live-banner { display:flex; align-items:center; gap:12px; padding:14px 18px; background:var(--teal); border:1px solid rgba(142,217,104,.3); margin-bottom:0; }
.team-live-dot { width:10px; height:10px; background:#e53535; animation:blink 1.2s infinite; flex-shrink:0; }
.team-live-info { flex:1; }
.team-live-label { font-size:10px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--g-bright); }
.team-live-match { font-size:15px; font-weight:900; color:var(--vanilla); margin-top:2px; }
.team-live-meta { font-size:11px; color:rgba(242,229,210,.5); margin-top:2px; }
/* ── Broadcast sources dans le banner (remplace score-pill) ── */
.team-live-sources { display:flex; gap:4px; flex-shrink:0; flex-wrap:wrap; }
.team-live-sources .broadcast-src { padding:6px 12px; border:1px solid rgba(242,229,210,.2); background:rgba(0,0,0,.25); font-size:11px; font-weight:700; color:rgba(242,229,210,.7); cursor:pointer; transition:all .15s; display:flex; align-items:center; gap:5px; }
.team-live-sources .broadcast-src:hover { border-color:var(--g-bright); color:var(--vanilla); }
.team-live-sources .broadcast-src.active { background:rgba(142,217,104,.2); color:var(--vanilla); border-color:var(--g-bright); }
.team-live-sources .broadcast-src .bc-platform { font-size:8px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; padding:1px 5px; background:rgba(242,229,210,.1); }
.team-live-sources .broadcast-src.active .bc-platform { background:rgba(242,229,210,.2); }
/* ── Layout 2 colonnes ── */
/* ── Fullscreen mode ── */
.tl-fullscreen-btn {
  background:none; border:1px solid rgba(242,229,210,.2); color:rgba(242,229,210,.6);
  font-size:16px; padding:4px 8px; cursor:pointer; transition:all .15s; margin-left:auto; flex-shrink:0;
}
.tl-fullscreen-btn:hover { border-color:var(--g-bright); color:var(--vanilla); }
body.tl-fs-open { overflow:hidden; }
#fc-diff-live.tl-fs {
  position:fixed; inset:0; z-index:99998; background:var(--ink);
  display:flex; flex-direction:column; overflow:hidden;
}
#fc-diff-live.tl-fs .team-live-banner {
  flex-shrink:0;
}
#fc-diff-live.tl-fs .team-live-2col {
  flex:1; min-height:0;
}
#fc-diff-live.tl-fs .team-live-vid-embed {
  aspect-ratio:auto; height:100%;
}
#fc-diff-live.tl-fs .team-live-col-chat-inner {
  position:absolute; inset:0;
}
#fc-diff-live.tl-fs .tl-fullscreen-btn::after { content:' Quitter'; font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; }

.team-live-2col { display:grid; grid-template-columns:3fr 2fr; gap:0; background:var(--white); }
.team-live-col-video { min-width:0; }
.team-live-col-chat { position:relative; border-left:1px solid var(--border); background:var(--white); }
.team-live-col-chat-inner { position:absolute; inset:0; display:flex; flex-direction:column; overflow:hidden; }
/* Match terminé sans diffusion : la colonne vidéo est masquée par JS.
   Sans video sibling, .team-live-col-chat n'a plus de hauteur (le chat-inner
   est position:absolute). On bascule en flow normal : 1 col + chat relative. */
.team-live-2col.tl-no-video { grid-template-columns:1fr; }
.team-live-2col.tl-no-video .team-live-col-chat { border-left:none; }
.team-live-2col.tl-no-video .team-live-col-chat-inner {
  position:relative; inset:auto;
  min-height:320px; max-height:none;
}
.team-live-col-chat-inner .tl-messages { flex:1; min-height:0; overflow-y:auto; scroll-behavior:smooth; padding:0; background:var(--white); }
/* ── Vidéo ── */
.team-live-vid-embed { background:var(--ink); aspect-ratio:16/9; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.team-live-vid-embed iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:none; }
.team-live-vid-placeholder { text-align:center; color:rgba(242,229,210,.3); }
.team-live-vid-placeholder .ico { font-size:56px; display:block; margin-bottom:10px; }
.team-live-vid-placeholder p { font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; }
.team-live-vid-attr { display:flex; align-items:center; gap:8px; padding:8px 14px; background:var(--teal-dk); color:rgba(242,229,210,.7); font-size:11px; font-weight:600; }
.team-live-vid-attr .attr-name { color:var(--vanilla); font-weight:700; }
.team-live-vid-attr .attr-platform { font-size:9px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; padding:2px 7px; border:1px solid rgba(242,229,210,.2); color:rgba(242,229,210,.5); }
/* ── Badge + overlay vidéo (score incrusté) ── */
.live-vid-badge { position:absolute; top:12px; left:12px; font-size:9px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; padding:4px 10px; z-index:2; }
.live-vid-badge.live { background:#e53535; color:var(--vanilla); animation:blink 1.2s infinite; }
.live-vid-badge.ended { background:rgba(0,0,0,.6); color:rgba(242,229,210,.6); border:1px solid rgba(242,229,210,.15); }
.live-vid-badge.replay { background:var(--teal); color:var(--vanilla); border:1px solid rgba(142,217,104,.4); }
.team-live-banner.is-replay { background:var(--ink); border-color:rgba(242,229,210,.1); }
.team-live-banner.is-replay .team-live-dot { background:var(--muted); animation:none; }
.team-live-banner.is-replay .team-live-label { color:rgba(242,229,210,.5); }
.tl-end-notice { text-align:center; padding:16px 12px; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--muted); border-top:1px solid var(--border); background:var(--off-white); }
.live-vid-overlay { position:absolute; top:12px; right:12px; background:rgba(0,0,0,.75); backdrop-filter:blur(6px); padding:8px 14px; z-index:2; display:flex; align-items:center; gap:10px; }
.live-vid-ov-team { display:flex; flex-direction:column; align-items:center; gap:2px; }
.live-vid-ov-abbr { font-size:9px; font-weight:800; letter-spacing:1px; color:rgba(242,229,210,.6); text-transform:uppercase; }
.live-vid-ov-score { font-size:28px; font-weight:900; color:var(--vanilla); line-height:1; }
.live-vid-ov-sep { font-size:20px; color:rgba(242,229,210,.3); font-weight:300; }
/* ── Chat tabs (Club / Public) ── */
/* ── CM vs Fan comment styles ── */
.tl-msg--cm { background:var(--sage-lt); border-left:3px solid var(--teal); }
.tl-msg--cm.highlight { border-left-color:var(--g-bright); }
.tl-msg--fan .tl-author { font-size:10px; color:var(--muted); }
.tl-fan-name { font-weight:700; color:var(--muted); }
.tl-clock { font-size:9px; font-weight:500; color:var(--muted); opacity:.6; }
.tl-badge-cm {
  display:inline-block; font-size:8px; font-weight:800; letter-spacing:.5px;
  padding:1px 5px; background:var(--teal); color:var(--vanilla); vertical-align:middle;
  margin-right:4px;
}
/* ── Messages ── */
.tl-msg { display:flex; gap:8px; padding:8px 12px; background:var(--white); border-bottom:1px solid rgba(196,196,196,.2); font-size:12px; }
.tl-msg.highlight { background:#f3f9ee; }
.tl-msg .tl-min { font-size:10px; font-weight:900; color:var(--teal); min-width:24px; flex-shrink:0; padding-top:2px; }
.tl-msg .tl-ico { font-size:9px; font-weight:900; padding:2px 5px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; }
.tl-ico.try    { background:var(--teal);   color:var(--vanilla); }
.tl-ico.kick   { background:var(--teal);   color:var(--vanilla); }
.tl-ico.card-y { background:#f1c40f; color:var(--vanilla); }
.tl-ico.card-o { background:#e07b00; color:var(--vanilla); }
.tl-ico.card-r { background:#e74c3c; color:var(--vanilla); }
.tl-ico.sub    { background:var(--muted); color:var(--vanilla); }
.tl-ico.inj    { background:var(--muted); color:var(--vanilla); }
.tl-msg .tl-body { flex:1; min-width:0; }
.tl-msg .tl-author { font-size:10px; color:var(--muted); margin-bottom:2px; display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.tl-msg .tl-author .tl-source { font-size:9px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; padding:1px 6px; }
.tl-source.src-home { background:rgba(26,58,143,.12); color:var(--blue); border:1px solid rgba(26,58,143,.2); }
.tl-source.src-away { background:rgba(192,57,43,.08); color:var(--red); border:1px solid rgba(192,57,43,.15); }
.tl-msg .tl-time { font-size:9px; color:rgba(0,0,0,.3); }
.tl-msg .tl-text { line-height:1.45; }
.tl-team-tag { font-size:9px; font-weight:800; letter-spacing:.5px; padding:1px 5px; display:inline-block; }
.tl-team-tag.home { background:rgba(26,58,143,.1); color:var(--blue); border:1px solid rgba(26,58,143,.15); }
.tl-team-tag.away { background:rgba(192,57,43,.08); color:var(--red); border:1px solid rgba(192,57,43,.12); }
/* ── Commentator bar (gérant — unifié) ── */
.tl-commentator-bar { display:flex; flex-direction:column; gap:6px; padding:10px; background:var(--sage-lt); border-top:1px solid var(--border); flex-shrink:0; }
.tl-commentator-bar .tcb-row { display:flex; gap:6px; align-items:center; }
.tl-commentator-bar .tcb-min { width:42px; text-align:center; padding:5px 4px; font-size:11px; font-weight:900; font-family:var(--sans); border:1px solid var(--border); background:var(--white); color:var(--teal); flex-shrink:0; }
.tl-commentator-bar .tcb-min:focus { outline:none; border-color:var(--teal); }
.tl-commentator-bar select { padding:5px 6px; font-size:10px; font-weight:700; font-family:var(--sans); border:1px solid var(--border); background:var(--white); color:var(--teal); flex-shrink:0; min-width:0; }
.tl-commentator-bar textarea { width:100%; min-height:54px; padding:8px 10px; font-size:13px; font-family:var(--sans); border:1px solid var(--border); background:var(--white); color:var(--teal); resize:vertical; line-height:1.4; }
.tl-commentator-bar textarea:focus, .tl-commentator-bar select:focus { outline:none; border-color:var(--teal); }
.tl-commentator-bar .tcb-send { padding:7px 14px; font-size:10px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; background:var(--teal); color:var(--vanilla); border:1px solid var(--teal); cursor:pointer; flex-shrink:0; margin-left:auto; }
.tl-commentator-bar .tcb-send:hover { background:var(--teal-dk); }
/* ── Score editor (gérant — unifié) ── */
.tl-score-editor { display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--sage-lt); border-bottom:1px solid var(--border); flex-wrap:wrap; flex-shrink:0; }
.tl-score-editor .tse-label { font-size:9px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--muted); }
.tl-score-editor .tse-teams { display:flex; align-items:center; gap:6px; }
.tl-score-editor .tse-team { display:flex; align-items:center; gap:4px; }
.tl-score-editor .tse-abbr { font-size:10px; font-weight:800; color:var(--teal); letter-spacing:.5px; }
.tl-score-editor input[type="number"] { width:52px; padding:6px 4px; text-align:center; font-size:20px; font-weight:900; font-family:var(--sans); border:1px solid var(--border); background:var(--white); color:var(--teal); }
.tl-score-editor input[type="number"]:focus { outline:none; border-color:var(--teal); }
.tl-score-editor .tse-sep { font-size:14px; font-weight:300; color:var(--muted); }
.tl-score-editor .tse-status { margin-left:auto; }
.tl-score-editor select { padding:4px 8px; font-size:10px; font-weight:700; font-family:var(--sans); border:1px solid var(--border); background:var(--white); color:var(--teal); text-transform:uppercase; letter-spacing:.5px; }
.tl-score-editor select:focus { outline:none; border-color:var(--teal); }
/* (broadcast sources CSS est dans .team-live-sources au-dessus) */
/* ── Panneau gérant de club (admin tab) ── */
.club-manager-panel { border:2px dashed var(--sage); background:var(--white); }
.cm-source-panel + .cm-source-panel { margin-top:8px; }
.club-manager-header { display:flex; align-items:center; gap:10px; padding:12px 16px; background:var(--sage-lt); border-bottom:2px dashed var(--sage); cursor:pointer; }
.club-manager-header .cm-ico { font-size:18px; }
.club-manager-header .cm-title { font-size:11px; font-weight:800; color:var(--teal); letter-spacing:.5px; text-transform:uppercase; }
.cm-badge {
  display:none;
}
.ps-tab[data-cm]::after {
  content:''; display:inline-block; width:8px; height:8px;
  border-radius:50%; background:var(--border); margin-left:6px; vertical-align:middle;
}
.ps-tab[data-cm].cm-on::after {
  background:var(--g-bright); box-shadow:0 0 4px rgba(142,217,104,.5);
}
.club-manager-body { padding:14px 16px; display:flex; flex-direction:column; gap:12px; }
.cm-tabs { margin-top:12px; }
.cm-panel { display:none; background:var(--white); border:1px solid var(--border); border-top:none; padding:16px; display:none; flex-direction:column; gap:12px; }
.cm-panel.on { display:flex; }
.cm-field { display:flex; flex-direction:column; gap:4px; }
.cm-field label { font-size:9px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--muted); }
.cm-field input, .cm-field select, .cm-field textarea { padding:8px 10px; font-size:12px; font-family:var(--sans); border:1px solid var(--border); background:var(--white); color:var(--teal); }
.cm-field textarea { width:100%; min-height:72px; resize:vertical; line-height:1.45; }
.cm-field input:focus, .cm-field select:focus, .cm-field textarea:focus { outline:none; border-color:var(--teal); }
.cm-field .cm-help { font-size:10px; color:var(--muted); line-height:1.4; }
.cm-actions { display:flex; gap:8px; }
.cm-btn { padding:8px 14px; font-size:10px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; border:1px solid var(--teal); cursor:pointer; transition:all .15s; font-family:var(--sans); }
.cm-btn.primary { background:var(--teal); color:var(--vanilla); }
.cm-btn.primary:hover { background:var(--teal-dk); }
.cm-btn.secondary { background:var(--white); color:var(--teal); }
.cm-btn.secondary:hover { background:var(--sage-lt); }
/* ── Commentaire read-only (quand on regarde un autre club) ── */
.tl-commentator-readonly { display:flex; align-items:center; gap:8px; padding:10px 12px; background:var(--sage-lt); border-top:1px solid var(--border); flex-shrink:0; font-size:11px; color:var(--muted); }
.tl-commentator-readonly .cr-ico { font-size:16px; flex-shrink:0; }
.tl-commentator-readonly .cr-author { font-weight:800; color:var(--teal); }
/* ── No-live state ── */
.tl-no-live { padding:40px 24px; text-align:center; background:var(--white); border:1px solid var(--border); }
.tl-no-live .tl-nl-ico { font-size:40px; margin-bottom:12px; display:block; }
.tl-no-live .tl-nl-title { font-size:14px; font-weight:800; color:var(--teal); margin-bottom:4px; }
.tl-no-live .tl-nl-desc { font-size:12px; color:var(--muted); line-height:1.6; }
/* ── Réactions publiques (tab dans le chat) ── */
/* ── Fan bar (replaces public-footer) ── */
.tl-fan-bar { display:flex; flex-direction:column; gap:6px; padding:8px 10px; border-top:1px solid var(--border); background:var(--white); flex-shrink:0; }
.tl-fan-bar .pf-pseudo { padding:6px 8px; font-size:11px; font-family:var(--sans); border:1px solid var(--border); background:var(--sage-lt); color:var(--teal); width:100%; box-sizing:border-box; }
.tl-fan-bar .pf-pseudo:focus { outline:none; border-color:var(--teal); background:var(--white); }
.tl-fan-bar .pf-row { display:flex; align-items:center; gap:6px; width:100%; }
.tl-fan-bar input { flex:1; padding:6px 8px; font-size:11px; font-family:var(--sans); border:1px solid var(--border); background:var(--white); color:var(--teal); min-width:0; }
.tl-fan-bar input:focus { outline:none; border-color:var(--teal); }
.tl-fan-bar .pf-send { padding:5px 8px; font-size:9px; font-weight:800; background:var(--ink); color:var(--vanilla); border:1px solid var(--ink); cursor:pointer; flex-shrink:0; }
.tl-fan-bar .pf-send:hover { background:var(--teal); border-color:var(--teal); }

/* Public comment row */
.pub-msg { display:flex; align-items:baseline; gap:6px; padding:4px 12px; font-size:12px; font-family:var(--sans); border-bottom:1px solid rgba(0,0,0,.04); }
.pub-msg:hover { background:var(--sage-lt); }
.pub-time { flex-shrink:0; font-size:10px; color:var(--muted); min-width:36px; }
.pub-author { flex-shrink:0; font-size:11px; font-weight:700; color:var(--teal); }
.pub-author::after { content:'\00a0\2014\00a0'; font-weight:400; color:var(--muted); }
.pub-text { flex:1; min-width:0; color:var(--teal); word-break:break-word; }
.pub-del { flex-shrink:0; background:none; border:none; color:var(--muted); font-size:14px; cursor:pointer; padding:0 4px; line-height:1; }
.pub-del:hover { color:var(--red); }
.pub-empty { padding:20px 12px; font-size:12px; font-style:italic; color:var(--muted); text-align:center; }

/* Public footer */
.public-footer { display:flex; flex-direction:column; gap:6px; padding:8px 10px; border-top:1px solid var(--border); background:var(--white); flex-shrink:0; }
.public-footer .pf-pseudo { padding:6px 8px; font-size:11px; font-family:var(--sans); border:1px solid var(--border); background:var(--sage-lt); color:var(--teal); width:100%; box-sizing:border-box; }
.public-footer .pf-pseudo:focus { outline:none; border-color:var(--teal); background:var(--white); }
.public-footer .pf-row { display:flex; align-items:center; gap:6px; width:100%; }
.public-footer input { flex:1; padding:6px 8px; font-size:11px; font-family:var(--sans); border:1px solid var(--border); background:var(--white); color:var(--teal); min-width:0; }
.public-footer input:focus { outline:none; border-color:var(--teal); }
.public-footer .pf-send { padding:5px 8px; font-size:9px; font-weight:800; background:var(--ink); color:var(--vanilla); border:1px solid var(--ink); cursor:pointer; flex-shrink:0; }
.public-footer .pf-send:hover { background:var(--teal); border-color:var(--teal); }

/* ══ ARBITRES ══ */
.ref-panel { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; }
.ref-card { background:var(--white); border:1px solid var(--border); padding:12px 16px; }
/* Arbitre principal — teal design */
/* Assistants — vanilla/sage */

/* Arbitre vidéo (TMO) — bleu nuit harmonisé */
/* 4e arbitre — sage moyen */
.ref-info {}
.ref-role { font-size:9px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); margin-bottom:3px; }
.ref-name { font-size:13px; font-weight:800; color:var(--teal); line-height:1.2; }
.ref-country { font-size:11px; color:var(--muted); margin-top:2px; }


@media(max-width:900px){
  .team-live-2col { grid-template-columns:1fr; }
  .team-live-col-chat { border-left:none; border-top:1px solid var(--border); }
  .team-live-col-chat-inner { position:relative; inset:auto; max-height:400px; }
  .team-live-banner { flex-wrap:wrap; }
  .team-live-sources { width:100%; justify-content:center; }
  .ref-panel { grid-template-columns:repeat(2,1fr); }
}

/* ── Diffusion mobile : compacter banner + placeholder ── */
@media(max-width:680px){
  /* Banner : padding plus serré, fullscreen icône discret */
  .team-live-banner { padding:12px 14px; gap:10px; }
  .team-live-match { font-size:13px; }
  .team-live-meta { font-size:10px; }
  .team-live-label { font-size:9px; }
  .tl-fullscreen-btn { font-size:13px; padding:3px 6px; }
  /* Sources : message "Aucune diffusion" centré sur sa propre ligne, ok */
  .team-live-sources { font-size:9px; }
  /* Score overlay sur la vidéo : trop encombrant sur mobile vs play button.
     Le score est déjà dans le hero juste au-dessus, donc on le masque ici. */
  .live-vid-overlay { display:none; }
  /* Badge live/replay : plus discret */
  .live-vid-badge { font-size:8px; padding:3px 7px; top:8px; left:8px; }
  /* Placeholder : ico plus petit, texte plus serré */
  .team-live-vid-placeholder .ico { font-size:42px; margin-bottom:6px; }
  .team-live-vid-placeholder p { font-size:10px; }
  /* Vidéo attribution barre */
  .team-live-vid-attr { padding:6px 12px; font-size:10px; }
}

/* ── Play icon : forcer rendu monochrome (sinon iOS substitue par color emoji ▶️) ── */
.team-live-vid-placeholder .ico {
  font-variant-emoji:text;
  -webkit-text-fill-color:currentColor;
  color:rgba(242,229,210,.35);
}

@media(max-width:600px){
  .ref-panel { grid-template-columns:1fr; }
}

/* ══ STAT LEGEND ══ */
.stat-legend-row { display:flex; justify-content:flex-end; padding:8px 16px 4px; }
.stat-legend { display:flex; gap:12px; font-size:11px; font-weight:600; color:var(--muted); }
.legend-dot { display:inline-block; width:10px; height:10px; margin-right:4px; vertical-align:middle; }
.legend-dot.fr { background:var(--teal); }
.legend-dot.sc { background:var(--g-bright); }

/* Météo dans le hero */
.wx-block { display:inline-flex; align-items:center; gap:6px; }
.wx-icon { font-size:14px; line-height:1; filter:saturate(1.2); }
.wx-precip { font-size:11px; color:var(--muted); margin-left:2px; }
/* À retenir avant le match — design éditorial épuré sur fond blanc */
.pre-wrap { background:var(--white); border:1px solid var(--border); padding:20px 22px; }
.pre-h3 { font-size:12px; font-weight:900; color:var(--teal); text-transform:uppercase; letter-spacing:1.5px; margin:0 0 10px; padding-bottom:8px; border-bottom:1px solid rgba(28,61,52,.12); display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.pre-wrap > .pre-h3:not(:first-child) { margin-top:24px; }
.pre-h3-meta { font-size:13px; font-weight:700; color:var(--muted); text-transform:none; letter-spacing:0; }

/* Forme : 2 équipes côte à côte */
.pre-forme { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media(max-width:680px){ .pre-forme { grid-template-columns:1fr; gap:14px; } }
.pre-forme-team { padding:4px 0 4px 14px; border-left:3px solid var(--sage); min-width:0; }
.pre-forme-team--fr { border-left-color:var(--teal); }
.pre-forme-team--sc { border-left-color:var(--g-bright); }
.pre-forme-team-line { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.pre-forme-dots { display:flex; gap:4px; margin-bottom:8px; }
.pre-forme-dot { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; font-size:10px; font-weight:900; letter-spacing:.3px; }
.pre-forme-dot--win { background:rgba(28,109,74,.15); color:#1c6d4a; border:1px solid rgba(28,109,74,.25); }
.pre-forme-dot--draw { background:rgba(0,0,0,.06); color:var(--muted); border:1px solid rgba(0,0,0,.12); }
.pre-forme-dot--loss { background:rgba(177,58,58,.13); color:#b13a3a; border:1px solid rgba(177,58,58,.25); }
.pre-forme-name { font-size:15px; font-weight:900; color:var(--teal); }
.pre-streak { display:inline-flex; align-items:center; font-size:11px; font-weight:700; }
.pre-streak--win { color:#1c6d4a; }
.pre-streak--draw { color:var(--muted); }
.pre-streak--loss { color:#b13a3a; }
.pre-forme-figures { display:flex; flex-wrap:nowrap; align-items:baseline; gap:6px; font-size:13px; color:var(--teal); line-height:1.4; overflow-x:auto; white-space:nowrap; }
.pre-forme-pct { font-size:18px; font-weight:900; flex-shrink:0; }
.pre-forme-pct-lbl, .pre-forme-pts-lbl { font-size:11px; font-weight:600; color:var(--muted); flex-shrink:0; }
.pre-forme-pts { font-size:15px; font-weight:800; flex-shrink:0; }
.pre-forme-sep { color:rgba(28,61,52,.3); flex-shrink:0; }
.pre-forme-records { display:flex; flex-direction:column; gap:3px; margin-top:6px; font-size:12px; color:var(--muted); }
.pre-record-line strong { color:var(--teal); font-weight:800; }
.pre-record-line em { font-style:italic; }

/* H2H bullets — petite liste éditoriale */
.pre-h2h-bullets { list-style:none; padding:0; margin:14px 0 0; display:flex; flex-direction:column; gap:6px; }
.pre-h2h-bullets li { font-size:13px; color:var(--teal); line-height:1.5; padding-left:14px; position:relative; }
.pre-h2h-bullets li::before { content:""; position:absolute; left:0; top:9px; width:6px; height:6px; background:var(--sage); border-radius:50%; }
.pre-h2h-bullets li strong { font-weight:800; }
.pre-h2h-bullets li em { color:var(--muted); font-style:normal; font-size:12px; }
.pre-bullet-hi { padding:8px 10px 8px 24px !important; background:rgba(28,61,52,.05); border-left:3px solid var(--teal); border-radius:0; margin-top:4px; }
.pre-bullet-hi::before { left:10px !important; top:14px !important; background:var(--teal) !important; }

@media(max-width:680px){
  .pre-forme-figures { font-size:11px; gap:4px; }
  .pre-forme-pct { font-size:14px; }
  .pre-forme-pts { font-size:13px; }
  .pre-forme-pct-lbl, .pre-forme-pts-lbl { font-size:10px; }
}

@media(max-width:680px){
  .pre-stat-grid { grid-template-columns:repeat(2,1fr); }
  .pre-h2h-facts { grid-template-columns:1fr; }
  .pre-team-name { font-size:13px; }
  .pre-streak { margin-left:0; }
}
/* Duel H2H : team1 [vs] team2 — gros chiffres opposés */
.pre-h2h-duel { display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; margin:14px; border:1px solid var(--border); background:var(--white); overflow:hidden; }
.pre-h2h-side { padding:18px 12px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:4px; position:relative; }
.pre-h2h-side--fr { background:rgba(28,61,52,.06); border-right:1px solid rgba(28,61,52,.1); }
.pre-h2h-side--sc { background:rgba(142,217,104,.1); border-left:1px solid rgba(28,61,52,.1); }
.pre-h2h-side--fr::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--teal); }
.pre-h2h-side--sc::after { content:""; position:absolute; right:0; top:0; bottom:0; width:4px; background:var(--g-bright); }
.pre-h2h-side-name { font-size:11px; font-weight:900; color:var(--teal); letter-spacing:1px; text-transform:uppercase; opacity:.85; }
.pre-h2h-side-val { font-size:42px; font-weight:900; color:var(--teal); line-height:1; letter-spacing:-2px; margin:2px 0; }
.pre-h2h-side--sc .pre-h2h-side-val { color:#5ba848; }
.pre-h2h-side-lbl { font-size:10px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; }
.pre-h2h-side-avg { font-size:13px; font-weight:700; color:var(--teal); margin-top:8px; padding-top:8px; border-top:1px dashed rgba(28,61,52,.15); width:100%; }
.pre-h2h-side-avg span { display:block; font-size:9px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-top:2px; }
.pre-h2h-vs { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:12px; min-width:54px; background:transparent; }
.pre-h2h-vs-text { font-size:14px; font-weight:900; color:var(--teal); letter-spacing:1px; text-transform:uppercase; }
.pre-h2h-vs-draws { font-size:9px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-top:6px; padding:3px 8px; background:rgba(28,61,52,.08); border-radius:10px; }
@media(max-width:680px){
  .pre-h2h-side-val { font-size:34px; }
  .pre-h2h-side-name { font-size:10px; }
  .pre-h2h-vs { min-width:44px; padding:8px; }
}
/* Anciennes classes (cachées) */
.pre-h2h-bar, .pre-h2h-kpi { display:none; }
/* Largeurs h2h par tranches de 5% */
.pre-h2h-w-0 { flex:0 0 0; }
.pre-h2h-w-5 { flex:0 0 5%; }
.pre-h2h-w-10 { flex:0 0 10%; }
.pre-h2h-w-15 { flex:0 0 15%; }
.pre-h2h-w-20 { flex:0 0 20%; }
.pre-h2h-w-25 { flex:0 0 25%; }
.pre-h2h-w-30 { flex:0 0 30%; }
.pre-h2h-w-35 { flex:0 0 35%; }
.pre-h2h-w-40 { flex:0 0 40%; }
.pre-h2h-w-45 { flex:0 0 45%; }
.pre-h2h-w-50 { flex:0 0 50%; }
.pre-h2h-w-55 { flex:0 0 55%; }
.pre-h2h-w-60 { flex:0 0 60%; }
.pre-h2h-w-65 { flex:0 0 65%; }
.pre-h2h-w-70 { flex:0 0 70%; }
.pre-h2h-w-75 { flex:0 0 75%; }
.pre-h2h-w-80 { flex:0 0 80%; }
.pre-h2h-w-85 { flex:0 0 85%; }
.pre-h2h-w-90 { flex:0 0 90%; }
.pre-h2h-w-95 { flex:0 0 95%; }
.pre-h2h-w-100 { flex:0 0 100%; }
.pre-h2h-legend { display:flex; justify-content:space-between; gap:12px; padding:0 14px 14px; font-size:10px; font-weight:600; color:var(--muted); flex-wrap:wrap; }
.pre-h2h-legend span { display:inline-flex; align-items:center; gap:6px; }
/* Forme récente — 5 derniers matchs des 2 équipes (matchs upcoming) */
.forme-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media(max-width:680px){ .forme-grid { grid-template-columns:1fr; } }
.forme-team { background:var(--white); border:1px solid var(--border); padding:0; overflow:hidden; }
.forme-team-head { padding:10px 14px; background:var(--teal); color:var(--vanilla); display:flex; justify-content:space-between; align-items:center; gap:8px; }
.forme-team--sc .forme-team-head { background:var(--g-bright); color:var(--teal); }
.forme-team-name { font-size:13px; font-weight:900; letter-spacing:.3px; text-transform:uppercase; }
.forme-team-count { font-size:9px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; opacity:.75; }
.forme-list { display:flex; gap:6px; padding:14px; align-items:center; }
.forme-dot { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; font-size:13px; font-weight:900; letter-spacing:.5px; cursor:default; }
.forme-dot--win { background:rgba(28,109,74,.15); color:#1c6d4a; border:1px solid rgba(28,109,74,.3); }
.forme-dot--draw { background:rgba(0,0,0,.06); color:var(--muted); border:1px solid rgba(0,0,0,.15); }
.forme-dot--loss { background:rgba(177,58,58,.13); color:#b13a3a; border:1px solid rgba(177,58,58,.3); }
.forme-empty { padding:14px; background:var(--white); color:var(--muted); font-size:11px; text-align:center; font-style:italic; }
/* CTA Classement → page compétition */
.cls-cta { display:flex; align-items:center; gap:16px; padding:18px 22px; background:var(--white); border:1px solid var(--border); border-left:4px solid var(--teal); text-decoration:none; color:var(--teal); transition:box-shadow .15s, border-color .15s, transform .15s; }
.cls-cta:hover { box-shadow:0 4px 16px rgba(28,61,52,.12); border-color:var(--sage); border-left-color:var(--g-bright); }
.cls-cta-body { flex:1 1 auto; min-width:0; }
.cls-cta-title { font-size:14px; font-weight:800; color:var(--teal); letter-spacing:.2px; }
.cls-cta-sub { font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-top:3px; }
.cls-cta-arrow { font-size:22px; font-weight:900; color:var(--teal); flex-shrink:0; transition:transform .15s; }
.cls-cta:hover .cls-cta-arrow { transform:translateX(4px); }
.section-title-sm--row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.ps-toggle--all { display:flex; align-items:center; gap:4px; width:100%; justify-content:center; padding:10px 14px; background:var(--white); border:1px solid var(--border); border-top:none; font-size:11px; font-weight:700; color:var(--teal); cursor:pointer; }
.ps-toggle--all:hover { background:var(--sage-lt); }

/* TEAM FORM DOTS */
.team-form { display:flex; align-items:center; gap:3px; justify-content:flex-start; margin-top:6px; }
.team-form.away { justify-content:flex-end; }
.form-lbl { font-size:7px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:rgba(242,229,210,.7); margin-right:3px; }
.form-dot { width:13px; height:13px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:7px; font-weight:900; color:var(--vanilla); cursor:default; }
.form-dot-win { background:#8ED968; box-shadow:0 0 5px rgba(142,217,104,.4); }
.form-dot-draw { background:#f0a500; box-shadow:0 0 5px rgba(240,165,0,.4); }
.form-dot-loss { background:#C0392B; box-shadow:0 0 5px rgba(192,57,43,.4); }

/* ── HERO RESPONSIVE ───────────────────────────────────
   Sur mobile, on ré-architecture .scoreline pour éviter que le contenu central
   (nom de stade long, h2h, footer) n'écrase les .team-block via `1fr auto 1fr`.
   Astuce : `display:contents` sur .score-center → ses enfants deviennent
   directement grid-items de .scoreline et on les place explicitement :
     row 1 : team1 | score-nums | team2
     row 2 : sc-ht (col 2)
     row 3 : sc-pills (col 2)
     row 4 : sc-venue pleine largeur
     row 5 : h2h-block pleine largeur
     row 6 : sc-footer pleine largeur
   `minmax(0,1fr)` autorise les team-blocks à passer sous leur min-content. */
@media(max-width:680px){
  .scoreline {
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    column-gap:12px; row-gap:8px;
  }
  .team-name { font-size:clamp(16px,4vw,24px); }
  .score-nums { font-size:clamp(36px,10vw,56px); }
  .score-center { padding-top:0; }
  .team-scorers, .team-scorers.away { display:none; }
  .team-coach { font-size:10px; }
  .team-form { gap:2px; }
  .form-dot { width:11px; height:11px; font-size:6px; }
  .match-top-row { flex-wrap:wrap; gap:6px; margin-bottom:12px; }
  .match-chip { font-size:8px; }
  .sc-footer { flex-wrap:wrap; font-size:9px; }

  /* Re-layout grid : flatten .score-center et placer chaque enfant.
     Lignes 1-2 = label "Coup d'envoi" + score-nums (col 2), team-blocks
     spannent les 2 lignes (centrés verticalement). */
  .scoreline > .team-block { grid-column:1; grid-row:1 / 3; align-self:center; }
  .scoreline > .team-block.away { grid-column:3; grid-row:1 / 3; align-self:center; }
  .scoreline > .score-center { display:contents; }
  .scoreline .sc-kickoff-lbl { grid-column:2; grid-row:1; text-align:center; margin-bottom:0; align-self:end; }
  .scoreline .score-nums { grid-column:2; grid-row:2; align-self:start; }
  .scoreline .sc-ht { grid-column:2; grid-row:3; text-align:center; margin-top:0; }
  .scoreline .sc-pills { grid-column:2; grid-row:4; justify-content:center; margin-top:0; }
  .scoreline .sc-venue { grid-column:1 / -1; grid-row:5; text-align:center; margin:0; }
  .scoreline .h2h-block { grid-column:1 / -1; grid-row:6; margin-top:0; }
  .scoreline .sc-footer { grid-column:1 / -1; grid-row:7; margin-top:0; }

  /* H2H : stack score (+ dot) sur ligne 1, date sur ligne 2 → chaque item plus
     étroit, les 5 confrontations rentrent sans déborder ni casser "33-19" en deux. */
  .h2h-list { gap:8px; padding:0 4px; }
  .h2h-match {
    display:grid;
    grid-template-columns:auto auto;
    column-gap:4px; row-gap:1px;
    align-items:center; justify-items:center;
  }
  .h2h-match .form-dot { grid-column:1; grid-row:1; }
  .h2h-score { grid-column:2; grid-row:1; white-space:nowrap; }
  .h2h-date { grid-column:1 / -1; grid-row:2; white-space:nowrap; }
}

/* ══ INSIGHTS — bloc comparatif (Dijon · Dax · Compétition) ══ */
.ins-title { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-top:24px; margin-bottom:10px; }
.ins-title-sub { font-size:11px; font-weight:600; color:rgba(28,61,52,.75); text-transform:none; letter-spacing:.2px; }
.ins-block {
  background:var(--white); border:1px solid var(--border);
  margin-top:0; overflow:hidden;
  font-family:var(--sans);
}
/* Header : 1 col label + 2 équipes + 1 col compet */
.ins-head, .ins-row {
  display:grid;
  grid-template-columns:minmax(120px,1.4fr) 1fr 1fr 1fr;
  align-items:stretch;
}
.ins-head { background:var(--white); border-bottom:1px solid rgba(28,61,52,.1); }
.ins-head-lbl,
.ins-head-team,
.ins-head-comp {
  padding:12px 14px;
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  justify-content:center;
  border-left:1px solid rgba(28,61,52,.08);
}
.ins-head-lbl { border-left:none; }
.ins-head-lbl {
  text-align:left; align-items:flex-start;
  font-size:9px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  color:rgba(28,61,52,.55);
}
.ins-head-team-name {
  font-size:13px; font-weight:900; letter-spacing:.4px;
  text-transform:uppercase;
  color:var(--teal);
  display:inline-flex; align-items:center; gap:8px;
}
.ins-head-team-name::before {
  content:""; width:10px; height:10px; border-radius:50%; flex-shrink:0;
}
.ins-head-team--fr .ins-head-team-name::before { background:var(--teal); }
.ins-head-team--sc .ins-head-team-name::before { background:var(--g-bright); }
.ins-head-comp .ins-head-team-name::before { display:none; }
.ins-head-team-meta {
  font-size:9px; font-weight:600; color:rgba(28,61,52,.55);
  letter-spacing:.6px; text-transform:uppercase;
}

/* Lignes stat — pas d'alternance, juste séparateurs propres */
.ins-row { border-bottom:1px solid rgba(28,61,52,.08); transition:background .1s; }
.ins-row:last-child { border-bottom:none; }
.ins-row:hover { background:var(--sage-lt); }
.ins-row-lbl {
  padding:14px 16px;
  font-size:12px; font-weight:700; color:var(--teal);
  display:flex; align-items:center;
}
.ins-row-cell {
  padding:12px 12px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px;
  border-left:1px solid rgba(28,61,52,.08);
}
.ins-row-cell--cp { background:transparent; }
.ins-row:hover .ins-row-cell--cp { background:transparent; }
.ins-cell-top {
  display:flex; align-items:baseline; gap:6px; line-height:1;
}
.ins-cell-val {
  font-size:15px; font-weight:900; line-height:1; letter-spacing:-.2px;
  color:var(--teal);
}
.ins-row-cell--fr .ins-cell-val { color:var(--teal); }
.ins-row-cell--sc .ins-cell-val { color:var(--g-bright); }
.ins-cell-val--cp { font-size:13px; color:var(--muted); font-weight:800; }
.ins-cell-avg {
  font-size:10px; font-weight:600; color:var(--muted);
  letter-spacing:.3px;
}
/* Indicateur delta — match vs moyenne */
.ins-delta {
  font-size:11px; font-weight:800; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%;
}
.ins-delta--up { color:#1c6d4a; background:rgba(28,109,74,.13); }
.ins-delta--down { color:#b13a3a; background:rgba(177,58,58,.13); }
.ins-delta--eq { color:var(--muted); background:rgba(0,0,0,.06); font-size:10px; }

@media(max-width:680px){
  .ins-head, .ins-row { grid-template-columns:minmax(90px,1fr) 1fr 1fr 1fr; }
  .ins-head-lbl { padding:10px 8px; }
  .ins-head-team, .ins-head-comp { padding:10px 6px; }
  .ins-head-team-name { font-size:10px; }
  .ins-head-team-meta { font-size:8px; }
  .ins-row-lbl { padding:10px 8px; font-size:10px; }
  .ins-row-cell { padding:8px 4px; }
  .ins-cell-val { font-size:13px; }
  .ins-cell-val--cp { font-size:12px; }
  .ins-cell-avg { font-size:9px; }
}

/* ── Résumé vidéo (highlights) — dans « Résumé express », design player replay ── */
/* 2 colonnes : recap texte à gauche, vidéo à droite. Sans vidéo, le texte
   garde la pleine largeur (pas de .resume-2col). Plein écran natif en JS. */
.its-resume-vid { margin:0; }
.resume-2col { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:24px; align-items:stretch; margin-bottom:8px; }
.resume-2col .summary { margin-top:0; }
.resume-2col-text { display:flex; flex-direction:column; }
.resume-2col-video { align-self:start; }
/* Égalise la hauteur des 2 colonnes : le bloc « chiffres clés » s'étire pour
   remplir la hauteur de la vidéo. */
.resume-2col-text .rkey { flex:1 1 auto; display:flex; flex-direction:column; }
.resume-2col-text .rkey-row { flex:1 1 auto; }
@media (max-width:880px) {
  .resume-2col { grid-template-columns:1fr; gap:18px; align-items:start; }
  .resume-2col-text { display:block; }
  .resume-2col-text .rkey, .resume-2col-text .rkey-row { flex:none; }
}

/* Chiffres clés (colonne texte) — thème teal comme le bloc meilleur marqueur */
.rkey { margin-top:16px; background:var(--teal); color:var(--vanilla); border-left:4px solid var(--g-bright); }
.rkey-title { font-size:10px; font-weight:900; letter-spacing:1.5px; text-transform:uppercase; color:var(--sage); padding:9px 14px; border-bottom:1px solid rgba(242,229,210,.15); }
.rkey-row { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:8px 14px; border-bottom:1px solid rgba(242,229,210,.12); }
.rkey-row:last-child { border-bottom:none; }
.rkey-val { font-size:18px; font-weight:900; color:var(--vanilla); font-variant-numeric:tabular-nums; }
.rkey-row .rkey-val:first-child { text-align:left; }
.rkey-row .rkey-val:last-child { text-align:right; }
.rkey-lbl { font-size:10px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:rgba(242,229,210,.6); padding:0 12px; white-space:nowrap; }

/* ── « Vu sur le web » — galerie vidéo style Netflix ── */
.its-influencers { margin:0; }
.infl-title { font-size:11px; font-weight:900; letter-spacing:1.5px; text-transform:uppercase; color:var(--sage); margin:0 0 12px; }
/* Rangée horizontale façon Netflix « Continue Watching » (défilement latéral). */
/* Rangée des vidéos restantes (hors vedette) : N colonnes égales qui remplissent
   la largeur, plafonnées à 4 par ligne (au-delà, ça wrappe). */
.infl-grid { display:grid; gap:22px; padding:2px 0 4px; }
.infl-grid--cols2 { grid-template-columns:repeat(2,1fr); }
.infl-grid--cols3 { grid-template-columns:repeat(3,1fr); }
.infl-grid--cols4 { grid-template-columns:repeat(4,1fr); }
.infl-card { min-width:0; }
/* La vidéo affichée en vedette n'est PAS répétée dans la rangée. */
.infl-grid .infl-card--active { display:none; }
/* 2 vidéos = 2 colonnes égales (pas de grande vedette). */
.infl-duo { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.infl-duo-info { margin-top:10px; }
.infl-duo-name { font-size:15px; font-weight:800; color:var(--teal); }
.infl-duo-desc { margin-top:4px; font-size:13px; color:var(--muted); line-height:1.45; }
@media (max-width:680px) {
  .infl-grid--cols3, .infl-grid--cols4 { grid-template-columns:repeat(2,1fr); }
  .infl-duo { grid-template-columns:1fr; }
}
.infl-media {
  position:relative; aspect-ratio:16/9; background:var(--ink); overflow:hidden;
  border-radius:10px; box-shadow:0 4px 14px rgba(0,0,0,.18);
  transition:transform .2s ease, box-shadow .2s ease;
}
.infl-card:hover .infl-media { transform:translateY(-4px) scale(1.02); box-shadow:0 14px 32px rgba(0,0,0,.34); }
.infl-facade { position:absolute; inset:0; width:100%; height:100%; padding:0; border:none; cursor:pointer; background:var(--ink); display:block; }
.infl-thumb { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease, filter .2s ease; }
.infl-card:hover .infl-thumb { transform:scale(1.08); filter:brightness(.9); }
.infl-facade::after { content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.5), transparent 48%); opacity:.65; transition:opacity .2s; pointer-events:none; }
.infl-card:hover .infl-facade::after { opacity:1; }
/* Bouton play = glyphe triangle (pas de cercle → compatible reset border-radius:0). */
.infl-play {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  color:#fff; font-size:44px; line-height:1; padding-left:4px;
  text-shadow:0 2px 10px rgba(0,0,0,.65);
  transition:color .15s, transform .15s; pointer-events:none;
}
.infl-card:hover .infl-play { color:var(--teal); transform:translate(-50%,-50%) scale(1.15); }
.infl-iframe { position:absolute; inset:0; width:100%; height:100%; border:none; }
.infl-name {
  margin-top:9px; font-size:13px; font-weight:800; color:var(--teal);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Admin : gestion des influenceurs */
.cm-influencers { margin-top:18px; padding-top:14px; border-top:1px solid var(--border); }
.cm-infl-head { font-size:11px; font-weight:900; letter-spacing:1px; text-transform:uppercase; color:var(--teal); margin-bottom:10px; }
.cm-infl-list { margin-bottom:12px; }
.cm-infl-empty { font-size:12px; color:var(--muted); padding:6px 0; }
.cm-infl-item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 10px; border:1px solid var(--border); margin-bottom:6px; background:var(--white); }
.cm-infl-item-name { font-size:13px; font-weight:700; color:var(--teal); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cm-infl-item-actions { display:flex; gap:6px; flex:0 0 auto; }

/* « Vu sur le web » : bandeau vedette (vidéo + infos à côté) + rangée en dessous */
.infl-hero { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:22px; align-items:center; margin:0 0 24px; }
.infl-hero-media { min-width:0; }
.infl-hero .infl-play { font-size:62px; }
.infl-hero-info { min-width:0; }
.infl-hero-badge { display:inline-block; font-size:9px; font-weight:900; letter-spacing:1.2px; text-transform:uppercase; color:var(--vanilla); background:var(--teal); padding:3px 9px; margin-bottom:11px; }
.infl-hero-creator { font-size:21px; font-weight:900; color:var(--teal); line-height:1.12; }
.infl-hero-title { margin-top:11px; font-size:14px; color:var(--muted); line-height:1.45; }
.infl-hero-cta { margin-top:16px; display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:800; color:var(--teal); background:none; border:none; padding:0; cursor:pointer; font-family:inherit; transition:color .15s; }
.infl-hero-cta:hover { color:var(--g-bright); }
@media (max-width:760px) { .infl-hero { grid-template-columns:1fr; gap:14px; } }

/* Bouton plein écran sur les vidéos « Vu sur le web » (visible sur miniature) */
.infl-media .infl-fs {
  position:absolute; top:10px; right:10px; z-index:3; margin:0;
  background:rgba(0,0,0,.55); border-color:rgba(255,255,255,.65); color:#fff;
  line-height:1;
}
.infl-media .infl-fs:hover { background:var(--teal); border-color:var(--vanilla); color:var(--vanilla); }

/* Playlist « Vu sur le web » : la carte active = celle jouée dans la vedette */
.infl-grid .infl-card { cursor:pointer; }
.infl-card--active .infl-media { outline:3px solid var(--teal); outline-offset:-3px; }
.infl-card--active .infl-name { color:var(--teal); }