/* ============================================================
   UTG Live — feuille de style
   Charte graphique UTOI : fond clair (crème), header sombre vert
   profond, accents or & émeraude. Titrage serif display,
   libellés en monospace.
   Couleurs reprises de utoi.re et du logo officiel :
     or       #cc8312 / #e89324
     vert     #16594e / #4f7a14
     émeraude #34b5a1
     crème    #f4e7d2
   ============================================================ */

:root {
  /* fond clair */
  --bg:        #FCF2F1;
  --bg-soft:   #fdf7f6;
  --panel:     #ffffff;
  --line:      #e6dfca;
  --line-soft: #efe9d6;

  /* encres */
  --ink:       #20251f;
  --ink-soft:  #4c5247;
  --muted:     #8a8a78;
  --muted-2:   #a6a594;

  /* marque UTOI */
  --green:     #16594e;   /* vert profond — header */
  --green-2:   #1d6f60;
  --green-deep:#0f3f37;
  --green-leaf:#4f7a14;
  --teal:      #34b5a1;
  --gold:      #cc8312;
  --gold-2:    #e89324;
  --gold-ink:  #3a2606;
  --cream:     #f4e7d2;

  --live:      #d83a2c;

  --radius:    6px;
  --maxw:      1180px;
  --shadow-sm: 0 1px 2px rgba(31,34,28,.05), 0 6px 16px -10px rgba(31,34,28,.18);
  --shadow-md: 0 8px 18px -6px rgba(22,89,78,.18), 0 18px 40px -22px rgba(22,89,78,.30);

  /* Police unique : Titillium Web (fallbacks système) */
  --display: "Titillium Web", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --ui:      "Titillium Web", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --serif:   var(--display);
  --mono:    var(--ui);
  --sans:    var(--ui);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-image:
    radial-gradient(120% 55% at 50% 0%, rgba(52,181,161,.10), transparent 60%),
    radial-gradient(80% 40% at 100% 100%, rgba(204,131,18,.07), transparent 60%);
  background-attachment: fixed;
  min-height: 100vh;
}

img, svg, iframe { display: block; max-width: 100%; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }

.visually-hidden, .skip-link:not(:focus) {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 1000;
  background: var(--gold); color: var(--gold-ink);
  padding: 10px 16px; border-radius: var(--radius); font-family: var(--mono); font-weight: 600;
  text-decoration: none;
}

a { color: var(--green-2); }
:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; border-radius: 3px; }

/* ---------------- En-tête (thème sombre) ---------------- */
.site-header {
  background:
    radial-gradient(120% 140% at 85% -20%, rgba(52,181,161,.30), transparent 55%),
    linear-gradient(160deg, #16594e 0%, #124a41 55%, #0f3f37 100%);
  color: var(--cream);
  position: relative;
  border-bottom: 3px solid var(--gold);
}
.site-header::before {
  /* fine grille décorative dans le header */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .25;
  background-image:
    linear-gradient(rgba(244,231,210,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,231,210,.10) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.7), transparent 70%);
}
.header-inner {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 18px 28px;
  padding-block: clamp(20px, 4vw, 30px);
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 16px; text-decoration: none; color: inherit; min-width: 0; }
.brand-logo {
  width: clamp(48px, 7vw, 64px); height: auto; flex: none;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.35));
  animation: logoIn .7s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes logoIn { from { opacity: 0; transform: scale(.8) rotate(-8deg); } to { opacity: 1; transform: none; } }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-name {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(28px, 5.4vw, 46px);
  line-height: 1;
  letter-spacing: .2px;
  text-transform: uppercase;
  color: var(--cream);
  white-space: nowrap;
}
.brand-name em { color: var(--gold-2); font-style: italic; font-weight: 700; }
.brand-sub {
  margin-top: 7px;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: clamp(9px, 1.4vw, 11px);
  color: rgba(244,231,210,.62);
}
.header-meta { text-align: right; }
.meta-label {
  display: block; font-family: var(--mono); text-transform: uppercase; letter-spacing: .2em;
  font-size: 10px; color: rgba(244,231,210,.55); margin-bottom: 2px;
}
.meta-clock {
  font-family: var(--ui); font-weight: 700; font-size: clamp(18px, 2.6vw, 24px);
  color: var(--gold-2); letter-spacing: .04em; font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}

/* ---------------- Intro ---------------- */
main { padding-block: clamp(26px, 5vw, 44px); }

.intro { margin-bottom: clamp(22px, 3.6vw, 34px); }
.intro-title {
  margin: 0 0 10px;
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(28px, 5.6vw, 50px); line-height: 1; letter-spacing: .2px; color: var(--green);
  animation: introIn .55s cubic-bezier(.22,.61,.36,1) both;
}
.intro-title em { font-style: italic; font-weight: 700; color: var(--gold); }
.intro-text {
  margin: 0; color: var(--ink-soft); font-size: clamp(15px, 1.9vw, 18px); max-width: 64ch;
  animation: introIn .55s cubic-bezier(.22,.61,.36,1) .08s both;
}
@keyframes introIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------------- Stats ---------------- */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); overflow: hidden; box-shadow: var(--shadow-sm);
}
.stat { padding: clamp(15px, 2.6vw, 22px); position: relative; }
.stat + .stat::before {
  content: ""; position: absolute; left: 0; top: 14%; bottom: 14%; width: 1px; background: var(--line);
}
.stat-label {
  display: block; font-family: var(--mono); text-transform: uppercase; letter-spacing: .16em;
  font-size: 10.5px; color: var(--muted); margin-bottom: 8px;
}
.stat-value {
  font-family: var(--display); font-weight: 700; font-size: clamp(26px, 4vw, 38px); line-height: 1; color: var(--green);
}
.stat-value em { font-style: italic; font-weight: 700; color: var(--gold); }

/* ---------------- Titre de section ---------------- */
.section-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: clamp(22px, 3.4vw, 30px) 0 16px;
  font-family: var(--ui); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: 12.5px;
  color: var(--green-deep);
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.muted { color: var(--muted); text-transform: none; letter-spacing: normal; }
.badge {
  font-family: var(--mono); font-weight: 600; color: #fff; background: var(--green);
  border-radius: 999px; padding: 3px 11px; font-size: 11px;
}

/* ---------------- Grille de cartes ---------------- */
.grid {
  display: grid; gap: clamp(16px, 2.4vw, 22px);
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
@media (max-width: 380px) { .grid { grid-template-columns: 1fr; } }

.card {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s ease, transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s ease;
  opacity: 0; transform: translateY(14px);
  animation: cardIn .5s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay: var(--d, 0ms);
  will-change: transform, opacity;
}
@keyframes cardIn { to { opacity: 1; transform: translateY(0); } }
.card:hover { border-color: var(--teal); transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* Player : conteneur 16/9 qui accueille directement l'iframe YouTube
   (lazy-load via IntersectionObserver pour les lives, clic-pour-charger
   pour les replays). Les badges flottent en overlay sans bloquer le clic. */
.player {
  position: relative; aspect-ratio: 16 / 9; background: #0c1311;
  overflow: hidden; isolation: isolate;
}
.player iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Placeholder visible tant que l'iframe n'est pas chargée (live) */
.player:not(.is-loaded):not(.player-replay) {
  background:
    radial-gradient(85% 75% at 50% 32%, rgba(52,181,161,.32), transparent 70%),
    repeating-linear-gradient(118deg, rgba(255,255,255,.05) 0 2px, transparent 2px 10px),
    linear-gradient(155deg, #1d6f60 0%, #16594e 50%, #0f3f37 100%);
}
.player:not(.is-loaded):not(.player-replay)::after {
  content: "Chargement du direct…";
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: rgba(244,231,210,.65); font-family: var(--mono); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase;
  animation: pulseFade 1.6s ease-in-out infinite;
}
@keyframes pulseFade { 0%,100% { opacity: .85; } 50% { opacity: .4; } }

/* Façade des replays : un bouton qui contient la vraie miniature YouTube */
.player-replay {
  appearance: none; border: 0; padding: 0; cursor: pointer; color: inherit; background: #0c1311;
  width: 100%; height: 100%; display: block; position: relative;
}
.replay-thumb {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .45s cubic-bezier(.22,.61,.36,1), filter .3s ease;
}
.player-replay:hover .replay-thumb { transform: scale(1.05); filter: brightness(1.05); }

/* Badges en overlay (non-cliquables pour laisser le clic atteindre l'iframe/le bouton) */
.overlay {
  position: absolute; top: 10px; z-index: 2; pointer-events: none;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px; border-radius: 4px;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.live-tag { left: 10px; background: var(--live); color: #fff; }
.live-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.65); } }

.plat-tag { right: 10px; background: rgba(15,63,55,.78); color: var(--cream); border: 1px solid rgba(244,231,210,.18); }
.yt-ic { width: 14px; height: 10px; border-radius: 3px; background: var(--live); position: relative; }
.yt-ic::after { content: ""; position: absolute; left: 5px; top: 2px; border: 3px solid transparent; border-left-color: #fff; }

.tag-replay { left: 10px; background: var(--green-deep); color: var(--cream); border: 1px solid rgba(244,231,210,.18); }

.replay-duration {
  top: auto; bottom: 10px; right: 10px; left: auto;
  background: rgba(15,63,55,.88); color: #fff;
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
  text-transform: none; font-size: 11px; padding: 4px 8px;
}

/* Gros bouton play centré sur les vignettes replays */
.play-btn {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 1; pointer-events: none;
  transition: transform .25s cubic-bezier(.22,.61,.36,1);
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.45));
}
.play-btn .pb-shell { fill: rgba(15,63,55,.85); transition: fill .2s ease; }
.play-btn .pb-tri { fill: #fff; }
.player-replay:hover .play-btn { transform: translate(-50%, -50%) scale(1.12); }
.player-replay:hover .play-btn .pb-shell { fill: var(--live); }
.player-replay:active .play-btn { transform: translate(-50%, -50%) scale(.96); }

/* Corps de carte — volontairement minimal : juste « Channel N » */
.card-body {
  padding: 14px clamp(14px, 2vw, 18px);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.card-name {
  font-family: var(--display); font-weight: 700; font-size: clamp(18px, 2.4vw, 22px); line-height: 1.1; color: var(--green);
  letter-spacing: .2px; text-transform: uppercase;
}
.card-link {
  flex: none; font-family: var(--ui); font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: .08em; text-decoration: none; color: var(--gold);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.card-link:hover { border-color: var(--gold); color: #fff; background: var(--gold); }

/* ---------------- Replays ---------------- */
.replays { margin-top: clamp(28px, 4vw, 44px); }
.badge-replay { background: var(--green-deep); }

.card-body-replay {
  flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 14px clamp(14px, 2vw, 18px) 16px;
}
.replay-title {
  margin: 0; font-family: var(--display); font-weight: 700;
  font-size: clamp(15px, 1.8vw, 17px); line-height: 1.25; color: var(--green);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.5em;
}
.replay-meta {
  margin: 2px 0 8px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .06em; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 4px 10px;
}
.replay-channel { color: var(--green-2); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; }
.replay-date::before { content: "·"; margin-right: 8px; color: var(--muted-2); }

.card-replay .card-link { align-self: flex-start; }

/* Squelettes de chargement */
.is-skeleton { pointer-events: none; }
.skel-thumb {
  background:
    linear-gradient(110deg, var(--line-soft) 0%, var(--line) 40%, var(--line-soft) 80%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
.skel-line {
  display: block; height: 12px; border-radius: 4px;
  background: var(--line-soft);
  background-image: linear-gradient(110deg, var(--line-soft) 0%, var(--line) 40%, var(--line-soft) 80%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
.skel-line-1 { width: 85%; height: 16px; margin-bottom: 6px; }
.skel-line-2 { width: 55%; height: 11px; margin-bottom: 14px; }
.skel-line-3 { width: 38%; height: 22px; border-radius: 999px; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.empty {
  text-align: center; padding: 48px 16px; color: var(--muted);
  font-family: var(--mono); letter-spacing: .1em; text-transform: uppercase; font-size: 13px;
  border: 1px dashed var(--line); border-radius: var(--radius); margin-top: 8px; background: var(--panel);
}
.empty-error { color: var(--live); border-color: rgba(216,58,44,.3); background: rgba(216,58,44,.04); }
.empty-info {
  color: var(--green-deep); border-color: rgba(22,89,78,.25); background: rgba(52,181,161,.06);
  letter-spacing: .02em; text-transform: none; font-size: 14px; line-height: 1.55;
  max-width: 70ch; margin-inline: auto;
}
.empty-info code {
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace;
  font-size: .92em; background: rgba(22,89,78,.10); padding: 1px 6px; border-radius: 4px;
  color: var(--green);
}
.empty-info em { color: var(--gold); font-style: normal; font-weight: 600; }

/* ---------------- Pied de page ---------------- */
.site-footer {
  margin-top: clamp(40px, 6vw, 64px);
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
  padding-block: clamp(22px, 4vw, 34px);
}
.site-footer p { margin: 0 0 8px; color: var(--ink-soft); font-size: 13.5px; max-width: 72ch; }
.site-footer .muted { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; }

/* ---------------- Responsive ---------------- */
@media (max-width: 860px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3), .stat:nth-child(4) { border-top: 1px solid var(--line); }
  .stat:nth-child(3)::before { display: none; }
}
@media (max-width: 620px) {
  .header-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .header-meta { text-align: left; }
  .brand-name { white-space: normal; }
}
@media (max-width: 480px) {
  .stats { grid-template-columns: 1fr; }
  .stat + .stat::before { left: 14%; right: 14%; top: 0; bottom: auto; width: auto; height: 1px; }
  .stat:nth-child(n+2) { border-top: 1px solid var(--line); }
  .card-body { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ---------------- Préférences ---------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .card { opacity: 1; transform: none; }
}
@media print {
  body { background: #fff; }
  .site-header { background: #fff; color: #000; border-bottom: 2px solid #000; }
  .play-btn, .skip-link { display: none; }
}