/* ============================
   RAVER – Maquette CSS
   ============================ */

:root{
  --raver-bg-0:#0c0a0d; --raver-bg-1:#1a0f12;
  --raver-red:#b3122e; --raver-red-2:#e52e4d;
  --raver-green:#28d17c; --raver-text:#ffffff;
  --raver-muted:rgba(255,255,255,.65);
  --raver-panel:rgba(20,10,12,.72);
  --raver-border:rgba(255,80,100,.14);
  --raver-radius:.75rem;
  --raver-shadow-1:0 10px 28px rgba(0,0,0,.45);
  --raver-shadow-2:0 6px 20px rgba(0,0,0,.35);
}

/* Fond */
body{
  color:var(--raver-text);
  background:
    radial-gradient(1200px 800px at 20% -10%, #2b0f17 0%, transparent 60%),
    radial-gradient(1200px 800px at 120% 10%, #1f0b14 0%, transparent 55%),
    linear-gradient(180deg, var(--raver-bg-1), var(--raver-bg-0));
  background-attachment:fixed;
}
@media (prefers-reduced-motion:no-preference){ body{ background-size:cover; } }

/* Header */
.site-header{
  background:var(--raver-panel);
  border:1px solid var(--raver-border);
  border-radius:var(--raver-radius);
  box-shadow:var(--raver-shadow-1);
  margin-top:.75rem; margin-bottom:20px;
}
.site-header .inner{ display:flex; align-items:center; justify-content:space-between; padding:.85rem 1rem; }
.site-title{ display:flex; align-items:center; gap:.65rem; margin:0; text-decoration:none; color:var(--raver-text); }
.site-title img{ display:block; }
.site-title h1{ line-height:1.1; }

/* Statut */
.status{
  display:inline-block; font-size:.62em; font-weight:600; padding:.25rem .5rem; margin-left:.4rem;
  border-radius:.5rem; letter-spacing:.2px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12); color:var(--raver-muted);
}
.status.online{ color:#0b2; border-color:rgba(40,209,124,.35); background:rgba(40,209,124,.12); box-shadow:inset 0 0 10px rgba(40,209,124,.25); }
.status.offline{ color:#f66; border-color:rgba(229,46,77,.35); background:rgba(229,46,77,.10); box-shadow:inset 0 0 10px rgba(229,46,77,.18); }

/* sociaux */
.social-icons{ display:flex; align-items:center; gap:12px; }
.social-icons a{ display:inline-flex; opacity:.7; transition:opacity .18s, transform .18s, filter .18s; }
.social-icons a:hover{ opacity:1; transform:translateY(-1px); filter:drop-shadow(0 0 6px rgba(229,46,77,.35)); }
.social-icons img{ width:26px; height:26px; }

/* LIVE + Chat */
#live-video-wrapper{
  position:relative; width:100%; aspect-ratio:16/9; background:#000;
  border-radius:.6rem; overflow:hidden; border:1px solid var(--raver-border); box-shadow:var(--raver-shadow-2);
}
#fs-btn{ position:absolute; top:.6rem; right:.6rem; z-index:10; }

#chat-embed{
  width:100%; min-height:320px; display:block; border-radius:.6rem;
  border:1px solid var(--raver-border); background:#000; box-shadow:var(--raver-shadow-2);
}
#chat-toggle{ margin-top:.6rem; }

/* Clips */
.clip-card{
  cursor:pointer; background:var(--raver-panel); border:1px solid var(--raver-border);
  border-radius:.6rem; box-shadow:var(--raver-shadow-2); overflow:hidden;
  transition:transform .12s, box-shadow .12s, border-color .12s;
  display:flex; flex-direction:column;
}
.clip-card:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.45); border-color:rgba(229,46,77,.25); }
.clip-thumb-wrap{ position:relative; width:100%; aspect-ratio:16/9; background:#000; overflow:hidden; }
.clip-thumb{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.01); transition:transform .2s, filter .2s; }
.clip-card:hover .clip-thumb{ transform:scale(1.04); filter:brightness(.95); }

/* Play */
.clip-play{
  position:absolute; inset:0; margin:auto; width:64px; height:64px; border-radius:50%; border:0;
  background:radial-gradient(circle at 40% 40%, rgba(255,255,255,.25), rgba(255,255,255,.1));
  color:#fff; font-size:28px; line-height:64px; cursor:pointer; backdrop-filter:blur(2px);
  transition:transform .15s, box-shadow .15s;
}
.clip-play:hover{ transform:scale(1.06); box-shadow:0 0 18px rgba(229,46,77,.45); }

.card-body small{ color:var(--raver-muted) !important; }

/* Boutons */
.btn-raver{
  --_bg:var(--raver-red); --_bg2:var(--raver-red-2);
  background:linear-gradient(180deg, var(--_bg2), var(--_bg));
  color:#fff; font-weight:700; border:1px solid rgba(229,46,77,.45);
  border-radius:.5rem; box-shadow:0 0 10px rgba(229,46,77,.35);
}
.btn-raver:hover{ filter:brightness(1.06); box-shadow:0 0 16px rgba(229,46,77,.55); }

/* Footer */
.album{ background:transparent !important; }
hr{ border-color:rgba(255,255,255,.1) !important; }
.blog-footer{ background:transparent !important; border-top:1px solid var(--raver-border); }

/* Motion safe */
@media (prefers-reduced-motion:reduce){
  .clip-card, .clip-thumb, .clip-play, .social-icons a { transition:none !important; }
}

/* iframes full-fit */
#twitch-embed, #twitch-embed iframe{ position:absolute; inset:0; width:100%; height:100%; display:block; border:0; }
.clip-iframe-wrap{ position:relative; width:100%; aspect-ratio:16/9; background:#000; overflow:hidden; border-top-left-radius:.6rem; border-top-right-radius:.6rem; }
.clip-iframe-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }

/* Alerts (loader/erreur clips) */
.alert-dark{ background:rgba(0,0,0,.35); border:1px solid var(--raver-border); color:#ddd; }
.alert-warning{ background:rgba(229,46,77,.12); border:1px solid rgba(229,46,77,.35); color:#ffd9df; }