/* Images kept by our cache (public_media.py, blueprints/thumbs.py) and the
   pages built around them: TikTok covers in every frame where a video shows
   its thumbnail, channel avatars in the channels directory and on a channel's
   page. Loaded last (templates/site/base.html). Same palette as the
   observatory: cards rgba(20,23,32,.9) bordered #353641, red #b82330/#ff8589,
   figures in Big Shoulders Display. */

/* ---- TikTok covers -------------------------------------------------------- */
/* a 16:9 image (the portrait cover on a blurred copy of itself) in the frames
   the YouTube thumbnails use; the vertical cover in the record's player */
.video-card__thumb--tt {background:#16181c}
.rc__thumb img,.bcard__thumb img,.reads__thumb img,.rl-thumb img,.quote__thumb img,.said__thumb img,.thumb-grid__img img {background:#16181c}
.rec-player--tt img {object-fit:cover;object-position:50% 35%;opacity:.9}
/* the video window: site-media.js lays the vertical cover under the play button */
.vmodal-facade--tt {background-color:#16181c;background-size:cover;background-position:50% 35%}

/* ---- Channels directory (/chaines) ---------------------------------------- */
.chdir-tools {display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin:0 0 16px}
.chdir-tools .explore-search-row {margin:0;flex:1 1 340px;max-width:620px}
.chdir-tools .explore-search-wrap {max-width:none}
.chdir-tools__count {margin:0;display:flex;align-items:baseline;gap:6px;font-size:.86rem;color:#9aa1ae;white-space:nowrap}
.chdir-tools__count b {font-family:var(--font-display);font-weight:700;font-size:1.7rem;line-height:1;color:#f3e8eb;letter-spacing:.01em}
.chdir-filters .channel-filters__btn i {display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--o,#64748b);margin-right:7px;vertical-align:1px}

.chdir {list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.chdir > li {min-width:0;display:flex}
.chcard {flex:1;min-width:0;display:flex;flex-direction:column;gap:14px;padding:18px 18px 14px;border:1px solid #353641;border-radius:4px;background:rgba(20,23,32,.9);color:inherit;text-decoration:none;transition:border-color .2s,background-color .2s}
.chcard:hover,.chcard:focus-visible {border-color:#8a4b55;background:rgba(30,25,31,.94);color:inherit}
.chcard:focus-visible {outline:2px solid #ff8589;outline-offset:2px}
.chcard__top {display:grid;grid-template-columns:60px minmax(0,1fr);gap:14px;align-items:center}
.chcard__av {display:block;width:60px;height:60px;border-radius:50%;object-fit:cover;background:#16181c;border:2px solid #3a2a2e;transition:border-color .2s}
.chcard:hover .chcard__av {border-color:#8a4b55}
.chcard--closed .chcard__av {filter:grayscale(1) brightness(.75)}
.chcard__name {display:block;font-family:var(--font-display);font-weight:700;font-size:1.34rem;line-height:1.08;letter-spacing:.01em;color:#f1efe9;overflow-wrap:anywhere}
.chcard:hover .chcard__name {color:#fff}
.chcard__meta {display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-top:6px;font-size:.76rem;color:#aeb2bb}
.chcard__meta i {display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--o,#64748b);margin-right:6px;vertical-align:1px}
.chcard__plat {display:inline-flex;align-items:center;gap:5px}
.chcard__plat .plat {width:13px;height:13px;color:#c9a0a6}
.chcard__figs {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0;padding:12px 0;border-top:1px solid #ffffff12;border-bottom:1px solid #ffffff12}
.chcard__figs div {min-width:0}
.chcard__figs dd {margin:0;font-family:var(--font-display);font-weight:700;font-size:1.36rem;line-height:1;color:#f3e8eb;letter-spacing:.01em;white-space:nowrap}
.chcard__figs dt {margin-top:4px;font-size:.68rem;color:#9aa1ae;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chcard__figs .is-none dd {color:#5d616b}
.chcard__pol {display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;font-size:.74rem;color:#9aa1ae}
.chcard__track {height:5px;border-radius:3px;background:#ffffff12;overflow:hidden}
.chcard__track span {display:block;height:100%;width:var(--w);border-radius:3px;background:var(--o,#64748b)}
.chcard__pol b {font-family:var(--font-display);font-weight:700;font-size:.98rem;color:#e8e6df;letter-spacing:.01em}
.chcard__end {display:flex;flex-direction:column;gap:10px;margin-top:auto}
.chcard__foot {display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;font-size:.76rem;color:#9aa1ae}
.chcard__week {color:#ff8589}
.chcard__closed {color:#e9b4b8}

/* ---- A channel's page: its avatar beside its name ------------------------- */
.chhead {display:flex;align-items:center;gap:22px;min-width:0}
.chhead__av {flex:none;width:96px;height:96px;border-radius:50%;object-fit:cover;background:#16181c;border:2px solid #3a2a2e}
.chhead--closed .chhead__av {filter:grayscale(1) brightness(.75)}
.chhead .hero__title {margin:0;min-width:0}
.drawer-fragment .chhead__av {width:72px;height:72px}

/* tablet */
@media (max-width:1000px) {
  .chdir {grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* phone: one column of compact cards; the share of political sentences in words */
@media (max-width:640px) {
  .chdir-tools {gap:10px 16px}
  .chdir-tools .explore-search-row {flex-basis:100%;max-width:none}
  .chdir {grid-template-columns:minmax(0,1fr);gap:10px;margin-top:14px}
  .chcard {padding:13px 14px 12px;gap:9px}
  .chcard__top {grid-template-columns:48px minmax(0,1fr);gap:12px}
  .chcard__av {width:48px;height:48px}
  .chcard__name {font-size:1.2rem}
  .chcard__meta {gap:3px 10px;margin-top:4px}
  .chcard__figs {gap:4px;padding:9px 0}
  .chcard__figs dd {font-size:1.14rem}
  .chcard__figs dt {font-size:.64rem}
  /* the share and the foot on one line when they fit: « Phrases politiques 55 % · 9 vidéos cette semaine » */
  .chcard__end {flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:3px 14px}
  .chcard__pol {display:inline-flex;gap:6px;align-items:baseline}
  .chcard__track {display:none}
  .chcard__foot {display:contents}
  .chcard__foot > span {order:2}
  .chcard__foot > .chcard__week {order:1}
  .chhead {gap:14px}
  .chhead__av,.drawer-fragment .chhead__av {width:64px;height:64px}
}
@media (max-width:360px) {
  .chcard__figs dd {font-size:1.02rem}
}