/* Web TV Coeurs de Foot — présentation calquée sur Africa Top Sports, identité CDF */
:root {
  --bg: #071018;
  --panel: #0d1c2b;
  --line: #1c3d56;
  --red: #ea2e2b;
  --red-dark: #941905;
  --navy: #003756;
  --text: #f4f7fb;
  --accent: #ffd7d4;
  --muted: #8ea4b8;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.45 system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
}
a { color: var(--accent); }
img { max-width: 100%; }

.webtv-topbar {
  background: #050b12;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 3px solid var(--red);
  border-top: 6px solid var(--red-dark);
}
.webtv-logo-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--accent);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}
.webtv-logo-img { display: block; height: 40px; width: auto; max-width: 160px; object-fit: contain; }
.webtv-logo-link span { white-space: nowrap; }
.webtv-topbar-count { margin-left: auto; color: var(--muted); font-size: 13px; }
.webtv-topbar-count b { color: var(--red); }

.webtv-banner-wrap { background: var(--bg); }
.cdf-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 112px;
  padding: 16px;
  text-decoration: none;
  color: #fff;
  background:
    radial-gradient(ellipse at 20% 40%, rgba(234, 46, 43, 0.45), transparent 55%),
    linear-gradient(100deg, var(--navy) 0%, #071018 55%, var(--red-dark) 100%);
}
.cdf-banner img { height: 64px; width: auto; }
.cdf-banner strong { display: block; font-size: 28px; letter-spacing: 0.04em; }
.cdf-banner em { display: block; font-style: normal; color: var(--accent); font-size: 14px; }

#cdf-webtv { background: var(--bg); min-height: 50vh; }

.webtv-hero { background: var(--bg); width: 100%; }
.webtv-tv-room-wrap {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 28px 16px 8px;
  background: radial-gradient(ellipse at 40% 20%, #1a2740 0%, var(--bg) 68%);
}
.webtv-tv-room {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: center;
}
.webtv-tv-body { width: 100%; display: flex; flex-direction: column; align-items: center; }
.webtv-tv-body.is-portrait { max-width: 440px; }
.webtv-tv-body.is-wide { max-width: 960px; }
.webtv-tv-bezel {
  width: 100%;
  background: linear-gradient(160deg, #2a2a2a 0%, #111 60%, #1a1a1a 100%);
  border-radius: 16px 16px 8px 8px;
  padding: 18px 18px 14px;
  box-shadow: 0 0 0 3px #333, 0 0 0 6px #111, 0 20px 60px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  position: relative;
}
.webtv-tv-bezel::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--red) 30%, var(--red-dark) 100%);
  box-shadow: 0 0 6px var(--red);
}
.webtv-tv-screen {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.6);
}
.webtv-screen-scanlines {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0px, transparent 2px, rgba(0, 0, 0, 0.12) 2px, rgba(0, 0, 0, 0.12) 4px);
}
.webtv-main-video {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  height: auto;
  background: #000;
  object-fit: contain;
}
.tiktok-frame {
  display: block;
  width: 100%;
  height: 74vh;
  min-height: 520px;
  max-height: 760px;
  border: 0;
  background: #000;
}
.webtv-tv-stand { display: flex; flex-direction: column; align-items: center; }
.webtv-tv-neck {
  width: 80px;
  height: 28px;
  background: linear-gradient(to bottom, #1a1a1a, #2a2a2a);
  clip-path: polygon(20% 0%, 80% 0%, 95% 100%, 5% 100%);
}
.webtv-tv-base {
  width: 200px;
  height: 14px;
  background: linear-gradient(to bottom, #222, #111);
  border-radius: 0 0 50px 50px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  margin-bottom: 12px;
}

.webtv-credits-panel { width: 240px; flex-shrink: 0; padding-top: 18px; }
.webtv-credits-inner {
  background: var(--panel);
  border-radius: 12px;
  border: 1px solid var(--line);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.webtv-credits-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}
.webtv-credits-account { display: flex; align-items: flex-start; gap: 10px; }
.webtv-credits-net {
  font-size: 10px;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.webtv-credits-handle {
  display: inline-block;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
}
.webtv-credits-handle:hover { color: var(--accent); }
.webtv-credits-meta { margin: 0; color: var(--muted); font-size: 13px; }
.webtv-credits-stats { font-size: 13px; color: var(--accent); font-weight: 700; }
.webtv-credits-note {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.webtv-share-wrap { max-width: 1200px; margin: 18px auto 4px; padding: 0 16px; }
.webtv-share-preview {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: rgba(0, 0, 0, 0.28);
  border-radius: 12px;
  border: 1px solid rgba(234, 46, 43, 0.35);
}
.webtv-share-preview img {
  width: 240px;
  max-width: 42vw;
  aspect-ratio: 1200/630;
  object-fit: cover;
  object-position: center top;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #111;
  flex-shrink: 0;
}
.webtv-share-preview-copy { min-width: 0; flex: 1; }
.webtv-share-preview-copy h1 {
  margin: 0 0 6px;
  color: #fff;
  font-size: 1.15rem;
  line-height: 1.3;
}
.webtv-share-preview-copy p { margin: 0 0 8px; color: #d5dde6; font-size: 0.9rem; }
.webtv-share-preview-url {
  display: block;
  font-size: 0.78rem;
  color: var(--accent);
  word-break: break-all;
  margin-bottom: 6px;
}
.webtv-share-preview-hint { display: block; font-size: 0.74rem; color: var(--muted); }
.webtv-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.22);
  border-radius: 12px;
  border: 1px solid var(--line);
}
.webtv-share-label { color: var(--accent); font-weight: 700; font-size: 0.95em; }
.webtv-share-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.wtvs-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 0.88em;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
}
.wtvs-btn:hover { background: rgba(255, 255, 255, 0.12); }
.wtvs-btn svg { flex-shrink: 0; display: block; }
.wtvs-whatsapp:hover { background: #25D366; border-color: #25D366; }
.wtvs-twitter:hover { background: #000; border-color: #fff; }
.wtvs-facebook:hover { background: #1877F2; border-color: #1877F2; }
.wtvs-telegram:hover { background: #229ED9; border-color: #229ED9; }
.wtvs-pinterest:hover { background: #E60023; border-color: #E60023; }
.wtvs-linkedin:hover { background: #0A66C2; border-color: #0A66C2; }
.wtvs-copy.is-copied { background: var(--accent); color: var(--navy); border-color: var(--accent); }

.webtv-lang-bar {
  max-width: 1200px;
  margin: 14px auto 0;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.webtv-lang-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.webtv-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--red);
  background: var(--navy);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.webtv-grid-section { max-width: 1200px; margin: 0 auto; padding: 18px 16px 48px; }
.webtv-grid-header { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.webtv-section-title {
  margin: 0;
  font-size: 17px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.webtv-section-title small { font-weight: 400; color: var(--muted); font-size: 13px; }
.webtv-dot {
  width: 10px;
  height: 10px;
  background: var(--red);
  border-radius: 50%;
  display: inline-block;
}
.webtv-search { display: flex; gap: 8px; margin-left: auto; min-width: min(100%, 320px); }
.webtv-search input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #0b1520;
  color: #fff;
  font: inherit;
}
.webtv-search button {
  background: var(--red);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.webtv-filters, .webtv-tags-bar { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.webtv-tags-bar {
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  max-height: 92px;
  overflow-y: auto;
}
.webtv-filter-btn, .webtv-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  border-radius: 999px;
  font-weight: 600;
}
.webtv-filter-btn {
  background: #13283c;
  color: var(--accent);
  border: 1px solid var(--line);
  padding: 5px 13px;
  font-size: 12px;
}
.webtv-filter-btn:hover, .webtv-filter-btn.active {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.webtv-tag-chip {
  padding: 4px 10px;
  background: rgba(234, 46, 43, 0.12);
  border: 1px solid rgba(234, 46, 43, 0.35);
  color: var(--accent);
  font-size: 12px;
}
.webtv-tag-chip:hover, .webtv-tag-chip.active {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.webtv-tag-chip span { font-size: 10px; opacity: 0.8; }

.webtv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.webtv-card {
  position: relative;
  background: var(--panel);
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
}
.webtv-card--active { border-color: var(--red); box-shadow: 0 0 0 2px var(--red); }
.webtv-card-hit { display: block; color: inherit; text-decoration: none; }
.webtv-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0, 20, 40, 0.45); }
.webtv-thumb { position: relative; height: 180px; overflow: hidden; background: #081018; }
.webtv-thumb-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.webtv-card:hover .webtv-thumb-img { transform: scale(1.06); }
.webtv-thumb-img, .webtv-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.webtv-thumb-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.15);
}
.webtv-play-icon { width: 44px; height: 44px; }
.webtv-card-lang, .webtv-card-cat {
  position: absolute;
  z-index: 2;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.webtv-card-lang {
  top: 6px;
  left: 6px;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  border: 1px solid rgba(255, 215, 212, 0.35);
}
.webtv-card-cat {
  top: 6px;
  right: 6px;
  padding: 2px 7px;
  border-radius: 3px;
  background: var(--navy);
  color: #fff;
}
.webtv-card-info { padding: 10px 12px 8px; }
.webtv-card-title {
  margin: 0 0 5px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.webtv-card-date, .webtv-card-views, .webtv-card-source {
  display: block;
  font-size: 12px;
  color: var(--muted);
}
.webtv-card-views { color: var(--accent); font-weight: 700; margin-top: 3px; }
.webtv-card-tags { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 12px 12px; }
.webtv-card-tags .webtv-tag-chip { padding: 2px 7px; font-size: 10px; }

.webtv-pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 24px 0 8px; }
.webtv-page-btn {
  padding: 8px 14px;
  border-radius: 6px;
  background: var(--panel);
  color: var(--accent);
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.webtv-page-btn.active, .webtv-page-btn:hover { background: var(--navy); border-color: var(--red); color: #fff; }
.empty {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px;
}

@media (max-width: 900px) {
  .webtv-tv-room-wrap { flex-direction: column; padding: 16px 12px 0; }
  .webtv-credits-panel { width: 100%; padding-top: 0; }
  .cdf-banner { min-height: 88px; }
  .cdf-banner strong { font-size: 22px; }
  .cdf-banner img { height: 48px; }
}
@media (max-width: 640px) {
  .webtv-topbar { flex-wrap: nowrap; gap: 8px; padding: 8px 10px; }
  .webtv-logo-link { min-width: 0; flex: 0 1 auto; }
  .webtv-logo-link span { display: none; }
  .webtv-topbar-count { margin-left: auto; flex: 0 0 auto; font-size: 12px; white-space: nowrap; }
  .webtv-logo-img { height: 28px; max-width: 108px; }
  .count-prefix { display: none; }
  .cdf-banner { flex-direction: column; text-align: center; gap: 6px; min-height: 0; padding: 12px 14px 14px; }
  .cdf-banner img { height: 42px; }
  .cdf-banner strong { font-size: 22px; }
  .cdf-banner em { font-size: 13px; }
  .webtv-share-preview { flex-direction: column; }
  .webtv-share-preview img { width: 100%; max-width: none; }
  .webtv-thumb { height: 140px; }
  .tiktok-frame { min-height: 460px; height: 70vh; }
  .wtvs-btn span { display: none; }
  .wtvs-copy span { display: inline; }
  .webtv-search { margin-left: 0; width: 100%; }
}

/* ATS parity: broad television, green-black palette, photographic banner. */
:root{--bg:#0a0f0d;--panel:#111a14;--line:#1e3526;--text:#e8f5ee;--accent:#7fffb0;--muted:#91b69e;--red:#d10019}
.webtv-topbar{background:#060e09;border-top:0;border-bottom:1px solid var(--line)}
.webtv-topbar-count b{color:var(--accent)}
.cdf-banner{height:200px;justify-content:flex-start;padding-left:max(20px,calc((100% - 1168px)/2));background:linear-gradient(100deg,#003919,#0a0f0d);position:relative;overflow:hidden}
.cdf-banner>img,.cdf-banner>span:not(.cdf-banner-photos){position:relative;z-index:1;text-shadow:0 2px 10px #000}
.cdf-banner .cdf-banner-photos{position:absolute;inset:0 0 0 32%;display:flex;opacity:.72;mask-image:linear-gradient(90deg,transparent,#000 25%)}
.cdf-banner .cdf-banner-photos img{width:25%;min-width:0;height:100%;object-fit:cover;object-position:center 30%;flex:1}
.webtv-tv-room-wrap{background:var(--bg)}
.webtv-tv-body.is-portrait,.webtv-tv-body.is-wide{max-width:960px}
.webtv-tv-screen{aspect-ratio:16/9}
.webtv-tv-screen .tiktok-frame,.webtv-tv-screen .webtv-main-video{width:100%;height:100%;min-height:0;aspect-ratio:16/9;border:0;display:block;object-fit:contain}
.webtv-credits-panel{width:220px}.webtv-credits-inner{background:var(--panel)}
.webtv-source-link{display:block;padding:10px;border:1px solid #2a5a40;background:#003919;color:var(--accent);font-size:12px;border-radius:8px;text-decoration:none;font-weight:700}
.webtv-card,.webtv-share-preview,.webtv-lang-bar{background:var(--panel)}
.webtv-thumb{background:#0d1710}.webtv-filter-btn.active,.webtv-filter-btn.on{background:#00a83c;border-color:#00a83c;color:#fff}
.webtv-tag-chip{background:#7fffb012;border-color:#7fffb033;color:var(--accent)}
@media(max-width:900px){.cdf-banner{height:140px}.webtv-credits-panel{width:100%}}
@media(max-width:640px){.cdf-banner{height:90px;min-height:90px;gap:12px}.cdf-banner>img{height:40px}.cdf-banner strong{font-size:24px}.cdf-banner em{font-size:11px}.webtv-tv-screen .tiktok-frame{min-height:0;height:100%}.webtv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}