/* ==========================================================================
   streamonsport — visual identity carried over from the original theme.

   Palette, typography and component shapes are the ones already in use
   (#070916 ground, Ropa Sans, the .map league sprite, the "Regarder en HD"
   button, the #0a0f27 .compz strip). What changed is the delivery: this file
   replaces Bootstrap 5 + the old stylesheet entirely.

   L'accent a été désaturé depuis : il n'est pas qu'une couleur de lien, c'est
   le fond plein du bouton « Regarder », et un ton vif y devient une surface
   qui éblouit. Chaque valeur est mesurée — encre sur accent et accent sur
   ligne dépassent 4.5:1, le seuil de lisibilité.
   ========================================================================== */

:root {
  --ground:        #070916;
  --panel:         rgba(0, 0, 0, .5);
  --panel-soft:    rgba(0, 0, 0, .3);
  --row:           #02040c;
  --row-border:    #0e163d;
  --row-hover:     rgba(47, 168, 161, .15);
  --strip:         #0a0f27;
  --accent:        #2fa8a1;
  --accent-hot:    #3dbdb5;
  --accent-ink:    #02040c;
  --text:          #ffffff;
  --muted:         #93a0bd;
  --live:          #e2606b;
  --radius:        6px;
  --gap:           10px;
  --max:           1100px;
  --font:          'Ropa Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hot); }

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

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

/* ------------------------------------------------------------------ header */

.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  flex-wrap: wrap;
  background: var(--panel);
  padding: 10px 14px;
  margin-top: 10px;
  border-radius: var(--radius);
}

.brand img { display: block; height: 52px; width: auto; }
.brand-text { font-size: 30px; font-weight: 700; color: var(--text); letter-spacing: .5px; }

/* La recherche vit maintenant au-dessus de la liste, dans .list-toolbar ; le
   bandeau d'en-tête a pris sa place. Les deux règles sont gardées ensemble :
   c'est le même champ, déplacé. */
.encart-head { flex: 0 1 auto; margin-left: auto; line-height: 0; }
.list-search { display: flex; gap: 6px; }
.list-search .filter-input { flex: 1; min-width: 0; }
.list-search button {
  flex: 0 0 auto;
  background: var(--accent);
  border: 0;
  border-radius: var(--radius);
  /* L'encre du thème, pas un blanc en dur : sur un accent de ton moyen le
     blanc tombe sous le seuil de lisibilité, et chaque thème sait quelle
     encre se lit sur le sien. */
  color: var(--accent-ink);
  font-size: 18px;
  line-height: 1;
  padding: 0 14px;
  cursor: pointer;
}

.head-search { display: flex; gap: 6px; flex: 0 1 340px; }
.head-search input {
  flex: 1;
  min-width: 0;
  background: var(--row);
  border: 1px solid var(--row-border);
  color: var(--text);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-family: inherit;
  font-size: 14px;
}
.head-search input::placeholder { color: var(--muted); }
.head-search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.head-search button {
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: var(--radius);
  padding: 0 16px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
}
.head-search button:hover { background: var(--accent-hot); }

/* --------------------------------------------------------------- navigation */

.primary-navigation {
  background: rgba(150, 150, 150, .31);
  margin-top: 10px;
  border-radius: var(--radius);
  padding: 4px;
}
.primary-navigation ul {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.primary-navigation .nav-link {
  display: block;
  color: #fff;
  background: rgba(0, 0, 0, .7);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 15px;
  white-space: nowrap;
}
.primary-navigation .nav-link:hover { background: #000; color: var(--accent); }
.primary-navigation .nav-link.is-active { background: var(--accent); color: var(--accent-ink); font-weight: 700; }

/* --------------------------------------------------------------------- grid */

.grid {
  display: grid;
  grid-template-columns: minmax(0, 2.05fr) minmax(0, 1fr);
  gap: var(--gap);
  margin-top: 10px;
  align-items: start;
}
.main-content { min-width: 0; }
.layer { background: var(--panel-soft); border-radius: var(--radius); padding: 6px; }
.box {
  background: var(--panel);
  color: var(--text);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: var(--gap);
}
.box:last-child { margin-bottom: 0; }

.sidebar { position: sticky; top: 10px; }
.chat-box { padding: 8px; }
/* Held back until app.js decides the viewport is wide enough — see initChat. */
.chat-box[hidden] { display: none; }
.chat-inner, .chat-inner iframe { width: 100%; min-height: 640px; border: 0; }

/* « encart » et non « ad » : une classe qui se nomme reste masquée par le
   moindre bloqueur, avant même que la régie ne réponde. */
.encart { text-align: center; margin: 0 0 var(--gap); overflow: hidden; }
.encart-leaderboard { padding: 4px 0; }

/* Les deux encarts du lecteur, sur une page de match ou de chaîne. Celui du
   haut se serre contre le lecteur pour ne pas éloigner de l'écran ce qu'on est
   venu voir ; celui du bas garde la gouttière commune. */
.encart-player-top { margin-bottom: 10px; }

/* ----------------------------------------------------------------- headings */

.page-h1 {
  font-size: 22px;
  line-height: 1.25;
  margin: 0 0 10px;
  font-weight: 700;
}

.breadcrumb {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.breadcrumb .crumb-sep { color: #3a4568; }
.crumb-current { color: var(--text); }

.compz {
  font-weight: 600;
  text-align: center;
  background: var(--strip);
  font-size: 18px;
  padding: 7px 10px;
  border-radius: 4px;
  margin: 10px 0 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.compz .counts { font-size: 13px; font-weight: 400; color: var(--muted); }

.day-heading {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--muted);
  margin: 14px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--row-border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.day-heading:first-child { margin-top: 4px; }
.day-count {
  background: var(--row-border);
  color: var(--text);
  border-radius: 10px;
  padding: 0 8px;
  font-size: 12px;
}

/* -------------------------------------------------------------- quick links */

.quick-leagues { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--row);
  border: 1px solid var(--row-border);
  color: var(--text);
  padding: 5px 12px;
  border-radius: 32px;
  font-size: 14px;
}
.pill:hover { border-color: var(--accent); color: var(--accent); }
.pill-count { color: var(--muted); font-size: 12px; }

.list-toolbar { margin-bottom: 4px; }
.filter-input {
  width: 100%;
  padding: 9px 12px;
  background: var(--row);
  border: 1px solid var(--row-border);
  border-radius: 4px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
}
.filter-input::placeholder { color: var(--muted); }
.filter-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ------------------------------------------------------------- event rows */

.events { display: block; }

/* ------------------------------------------------------------------ la porte
   Le lecteur inerte d'un site-porte : même cadre, même bouton, mais rien à
   lire — le lien vers le site qui diffuse apparaît une fois l'annonce ouverte. */
.gate-hint { text-align: center; }

/* Le lien prend la place exacte du bouton de lecture — même centre, même
   lecteur — parce que c'est le même geste, poursuivi.

   Ses couleurs sont à lui et ne suivent pas l'accent du thème : c'est la seule
   chose à faire sur cette page, elle arrive après une annonce qui vient de
   couper l'attention, et elle doit se voir sur une affiche de match dont on ne
   sait rien. Rouge plein, texte blanc ; gris au survol, pour que le pointeur
   dise « oui, celui-là ». Les trois valeurs restent des variables : un thème
   qui veut les siennes redéfinit trois lignes, pas la règle entière. */
.gate-go {
  --gate-bg:       #d61f2b;
  --gate-bg-hover: #6b7280;
  --gate-ink:      #fff;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 86%;
  padding: 13px 28px;
  border-radius: 999px;
  background: var(--gate-bg);
  color: var(--gate-ink);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
  transition: background-color .15s ease;
}

/* Le focus prend le même gris : au clavier, l'élément visé doit se distinguer
   autant qu'au survol, et deux apparences pour un seul état n'apprennent rien. */
.gate-go:hover,
.gate-go:focus-visible {
  background: var(--gate-bg-hover);
  color: var(--gate-ink);
}
.gate-go[hidden] { display: none; }

/* Le bouton de lecture s'efface dès que l'annonce est ouverte, et le lien
   prend sa place au même centre : c'est ce que fait armGate() dans app.js.
   Écrit ici aussi pour que l'échange tienne même si une règle de thème
   redonnait un « display » au bouton caché. */
.gate-player [data-gate-play][hidden] { display: none; }

/* La ligne n'est plus un <a> : elle en contient un, étiré sur toute sa surface,
   pour que le bouton « Regarder » puisse être un lien à son tour — deux <a>
   imbriqués n'existent pas. Le lien étiré reste le seul que suit un robot. */
.event { position: relative; }
.event-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.event .button-regarder { position: relative; z-index: 2; }

/* Visible pour un lecteur d'écran, invisible à l'œil : le lien étiré est vide
   et a besoin d'un nom. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.event {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 120px;
  align-items: center;
  gap: 8px;
  background: var(--row);
  border: 1px solid var(--row-border);
  border-radius: 4px;
  padding: 6px 8px;
  margin-bottom: 3px;
  color: var(--text);
  transition: background .15s ease, border-color .15s ease;
}
.event:hover { background: var(--row-hover); border-color: var(--accent); color: var(--text); }
.event[hidden] { display: none; }

.event-logo { display: flex; justify-content: center; align-items: center; min-height: 44px; }

.event-details { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; min-width: 0; }

.game-name {
  font-weight: 600;
  font-size: 17px;
  text-transform: uppercase;
  line-height: 1.2;
  word-break: break-word;
}

.houre { font-size: 13px; color: var(--muted); margin: 0; display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.houre .sep { opacity: .6; margin: 0 3px; }
.league-name { color: var(--muted); }
.event:hover .league-name { color: var(--accent); }

/* The competition sits on the kickoff line, straight from the code map. */
.meta-cat {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .4px;
  font-weight: 600;
}
.meta-country { color: var(--muted); }
.meta-league { color: #cdd6ea; font-weight: 600; }
.meta-sep { color: #39456b; }

.event-langs { display: inline-flex; gap: 3px; align-items: center; }
.lang-flag { width: 16px; height: 12px; border-radius: 2px; display: block; }

/* --- Channel directory ------------------------------------------------- */

.channels { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; }

.channel-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  background: var(--row);
  border: 1px solid var(--row-border);
  border-radius: 4px;
  padding: 8px 10px;
  color: var(--text);
  transition: background .15s ease, border-color .15s ease;
}
.channel-card:hover { background: var(--row-hover); border-color: var(--accent); color: var(--text); }
.channel-card[hidden] { display: none; }

.channel-flag { display: flex; align-items: center; justify-content: center; }
.channel-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.channel-name { font-weight: 600; font-size: 15px; line-height: 1.2; word-break: break-word; }
.channel-meta { font-size: 12px; color: var(--muted); display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.channel-lang { color: var(--accent); font-weight: 700; letter-spacing: .4px; }
.channel-card .button-regarder { grid-column: 1 / -1; min-width: 0; width: 100%; }

.button-regarder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-transform: uppercase;
  min-width: 160px;
  height: 20px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 700;
  border-radius: 4px;
  padding: 0 10px;
  margin-top: 3px;
}
.button-regarder::before { content: '\25BA'; font-size: 12px; }
.event:hover .button-regarder { background: var(--accent-hot); }

.clock-container {
  text-align: center;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  min-height: 26px;
}
.event.is-live .scdw, .scdw.is-live { color: var(--live); font-weight: 700; text-transform: uppercase; }
.event.is-live { border-color: rgba(226, 96, 107, .45); }

.empty, .no-results { color: var(--muted); padding: 18px 4px; text-align: center; }

/* ------------------------------------------------------------ league header */

.league-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.league-sub { color: var(--muted); font-size: 14px; margin: 2px 0 0; }

/* -------------------------------------------------------------- match page */

.match-head {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 120px;
  align-items: center;
  gap: 8px;
  background: var(--row);
  border: 1px solid var(--row-border);
  border-radius: 4px;
  padding: 10px 8px;
  margin-bottom: 10px;
}
.match-title { text-align: center; }
.match-title .game-name { font-size: 20px; display: block; }

#kakarotvideo {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 2px 6px -1px rgba(7, 10, 25, .5), 0 6px 12px -6px rgba(7, 10, 25, .6);
}

/* Status bar above the server row: which mirror is playing, plus tools. */
.player-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  background: #12182f;
  border-bottom: 1px solid var(--row-border);
  padding: 7px 10px;
  font-size: 13px;
}
.player-now { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.player-now b { color: var(--text); }
.player-now .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 0 rgba(255, 59, 59, .6);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 7px rgba(255, 59, 59, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 59, 59, 0); }
}
.player-tools { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.server-count { color: var(--muted); font-size: 12px; }
.ptool {
  background: var(--row);
  border: 1px solid var(--row-border);
  color: var(--text);
  border-radius: 4px;
  padding: 4px 10px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}
.ptool:hover { border-color: var(--accent); color: var(--accent); }

.lang-filter {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px 8px 0;
  background: #1a1a1a;
}
.lang-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #222;
  border: 1px solid transparent;
  color: #cfd6e6;
  border-radius: 20px;
  padding: 3px 11px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}
.lang-chip:hover { border-color: var(--accent); }
.lang-chip.is-on { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.chip-n { opacity: .7; font-size: 11px; }

.player-help {
  margin: 0;
  padding: 8px 10px;
  background: #12182f;
  border-top: 1px solid var(--row-border);
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

/* La rangée des serveurs.
 *
 * Elle porte deux boutons comme trente : elle ne se comprime jamais, elle
 * défile. C'est tout l'écart avec ce qu'elle faisait — des éléments flex se
 * rétrécissent par défaut, si bien qu'au-delà d'une poignée de flux chaque
 * bouton perdait la moitié de sa largeur et la rangée devenait un tas serré de
 * noms coupés, alors même qu'une barre de défilement était déjà prévue.
 */
.servideo {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 8px 10px 6px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;

  /* Le bouton relâché se cale sur un bord : on ne s'arrête jamais au milieu
     d'un nom. « proximity » et non « mandatory » — le geste reste libre. */
  scroll-snap-type: x proximity;
  scroll-padding: 0 10px;

  background-color: #1a1a1a;

  /* Les ombres de bord disent « ça continue par ici », sans JavaScript : les
     deux premiers voiles sont accrochés au contenu (local) et couvrent l'ombre
     tant qu'on est au bout de la course ; les deux suivants sont fixes, et ne
     se découvrent donc que lorsque le contenu a glissé sous eux. */
  background-image:
    linear-gradient(to right, #1a1a1a 45%, rgba(26, 26, 26, 0)),
    linear-gradient(to left,  #1a1a1a 45%, rgba(26, 26, 26, 0)),
    linear-gradient(to right, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)),
    linear-gradient(to left,  rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
  background-position: left center, right center, left center, right center;
  background-size: 32px 100%, 32px 100%, 18px 100%, 18px 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;

  scrollbar-width: thin;
  scrollbar-color: #3a4568 #101010;
}
.change-video[hidden] { display: none; }

/* Une barre visible, et non le filet de deux pixels que dessine le navigateur :
   c'est elle qui annonce qu'il reste des serveurs à droite. */
.servideo::-webkit-scrollbar { height: 10px; }
.servideo::-webkit-scrollbar-track {
  background: #101010;
  border-radius: 999px;
}
.servideo::-webkit-scrollbar-thumb {
  background: #3a4568;
  border: 2px solid #101010;
  border-radius: 999px;
}
.servideo:hover::-webkit-scrollbar-thumb,
.servideo::-webkit-scrollbar-thumb:hover { background: var(--accent); }

.change-video {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;              /* jamais comprimé : c'est la rangée qui défile */
  max-width: 15em;             /* un nom à rallonge ne pousse pas les autres   */
  scroll-snap-align: start;
  background: #222;
  color: #eee;
  border: 0;
  border-radius: 4px;
  padding: 5px 8px;
  font-family: inherit;
  font-size: 15px;
  white-space: nowrap;
  cursor: pointer;
  transition: background .25s;
}
.change-video img { width: 16px; height: 12px; border-radius: 2px; display: block; flex: 0 0 auto; }

/* Le nom porte lui-même sa coupure : un libellé trop long finit en « … » au
   lieu d'étirer le bouton hors de la rangée. */
.cv-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.change-video:hover, .change-video.bactive { background: var(--accent); color: #222; }
.change-video.bactive::before {
  content: '';
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.vi-on {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  cursor: pointer;
  overflow: hidden;
}
.vi-on img, .vi-on iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.vi-on img { object-fit: cover; opacity: .55; }

.player-caption {
  position: absolute;
  top: 12%;
  width: 100%;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: #ffe100;
  text-shadow: 2px 2px 4px #000;
  z-index: 2;
  padding: 0 10px;
}

.play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  background: rgba(0, 0, 0, .7);
  border: 2px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3;
  cursor: pointer;
  transition: transform .4s cubic-bezier(.25, 1, .3, 1), background .3s;
}
.play:hover { transform: translate(-50%, -50%) scale(1.12); background: var(--accent); }
.play span { border: 14px solid transparent; border-left-color: #fff; margin-left: 16px; }
.play:hover span { border-left-color: var(--accent-ink); }

.player-empty {
  background: var(--row);
  border: 1px dashed var(--row-border);
  border-radius: 8px;
  padding: 40px 20px;
  text-align: center;
}
.player-empty .muted { color: var(--muted); font-size: 14px; }

.share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; justify-content: center; }
.share-label { color: var(--muted); font-size: 14px; }
.share a {
  background: var(--row);
  border: 1px solid var(--row-border);
  border-radius: 4px;
  padding: 4px 12px;
  font-size: 14px;
}
.share a:hover { border-color: var(--accent); }

.see-all { text-align: center; margin: 10px 0 0; }

/* ------------------------------------------------------------------- prose */

.prose { font-size: 15px; line-height: 1.6; }
.prose h1 { font-size: 20px; margin: 0 0 8px; }
.prose h2 { font-size: 17px; margin: 16px 0 6px; color: var(--accent); }
.prose p { margin: 0 0 10px; }
.prose ul { margin: 0 0 10px; padding-left: 20px; }
.prose li { margin-bottom: 4px; }
.prose strong { color: #fff; }

/* ------------------------------------------------------------------ footer */

.site-foot { margin: var(--gap) 0; }
.site-foot .box { text-align: center; }
.disclaimer { color: var(--muted); font-size: 13px; margin: 0 0 8px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-bottom: 8px; }
.copy { color: var(--muted); font-size: 12px; margin: 0; }

/* --------------------------------------------------------------- responsive */

@media (max-width: 992px) {
  .grid { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .chat-inner, .chat-inner iframe { min-height: 420px; }
}

@media (max-width: 640px) {
  /* One column on a phone, for a row of the programme and for the header of a
     match or a channel alike — they are the same three-cell grid. Dropping to
     a single track stacks the cells in source order (badge, then the match,
     then the countdown) instead of squeezing them into 360px side by side.
     The cells keep stretching to the full width: all three already centre
     their own content, and "Regarder en HD" is sized as a share of the cell. */
  .event,
  .match-head {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 10px 8px;
  }
  .event-logo,
  .clock-container { min-height: 0; }

  .game-name { font-size: 15px; }
  .match-title .game-name { font-size: 17px; }
  .clock-container { font-size: 15px; }
  .button-regarder { min-width: 0; width: 100%; max-width: 200px; }
  .page-h1 { font-size: 19px; }
  .player-caption { font-size: 15px; }
  .head-search { flex: 1 1 100%; }
  .site-head { padding: 8px 10px; }

  /* Sur un téléphone la rangée des serveurs se fait plus compacte, mais garde
     sa règle : elle défile, elle ne se comprime pas. Un bouton ne prend jamais
     plus des deux tiers de l'écran, pour que le suivant se laisse voir et dise
     qu'il y a une suite. */
  .servideo { padding: 6px 8px 4px; gap: 5px; }
  .change-video { max-width: 66vw; font-size: 14px; }
  .servideo::-webkit-scrollbar { height: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}