:root{
  --bg:#0f0b17;
  --panel:#171228;
  --primary:#b084f5;
  --secondary:#89b3ff;
  --accent:#ff9bd0;
  --muted:#9aa0b3;
  --ring:rgba(176,132,245,.35);
  --radius:18px;
}
*{box-sizing:border-box}
html,body{
  margin:40px 0 0 0;height:100%;
  background:
    radial-gradient(1200px 800px at 10% 0%, rgba(255,155,208,.12), transparent),
    radial-gradient(1200px 800px at 100% 20%, rgba(137,179,255,.12), transparent),
    var(--bg);
  color:#faf8ff;
  font-family:Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif
}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin-inline:auto;padding:24px}
header{
  position:fixed;top:0;z-index:40;
  backdrop-filter:saturate(140%) blur(10px);
  background:linear-gradient(180deg, rgba(15,11,23,.85), rgba(15,11,23,.5));
  border-bottom:1px solid rgba(255,255,255,.06);
  width: 100%;
}

/* =============== NAV responsive =============== */
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg, var(--primary), var(--accent));box-shadow:0 6px 20px rgba(176,132,245,.45)}
.brand h1{font-size:18px;margin:0;font-weight:700;letter-spacing:.4px}

/* rangée de boutons scrollable sur petits écrans (aucun changement HTML) */
.navlinks{
  display:flex;gap:14px;font-weight:500;
  overflow-x:auto;overflow-y:hidden;           /* scroll horizontal mobile */
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  max-width:100%;
  /* masque doux sur les bords pour indiquer le scroll */
  /*mask-image:linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);*/
}
.navlinks::-webkit-scrollbar{display:none}      /* cache la scrollbar mobile */
.navlinks .btn{flex:0 0 auto;scroll-snap-align:start}

/* ======= fin nav ======= */

.btn{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;background:linear-gradient(135deg, rgba(176,132,245,.18), rgba(137,179,255,.18));border:1px solid rgba(255,255,255,.08)}
.btn:hover{border-color:rgba(255,255,255,.22)}

section{padding:28px 0}
.grid{display:grid;gap:22px}

.hero{display:grid;gap:18px}
.hero .title{font-size:28px;margin:6px 0 0}
.hero .subtitle{color:var(--muted);margin:0}
.card{background:linear-gradient(180deg, rgba(23,18,40,.9), rgba(23,18,40,.7));border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);box-shadow:0 10px 30px rgba(0,0,0,.35);overflow:hidden}
.card.pad{padding:16px}

.ratio{position:relative;width:100%;padding-bottom:56.25%;border-radius: calc(var(--radius) - 2px);overflow:hidden}
.ratio iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.live-bar{display:flex;align-items:center;gap:10px;font-weight:600}
.dot{width:10px;height:10px;border-radius:999px;background:#ff4d6d;box-shadow:0 0 0 6px rgba(255,77,109,.18)}
.dot.off{background:#5a5a6e;box-shadow:none}
.pill{padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);font-size:12px;color:var(--muted)}

.carousel{position:relative}
.track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
.track::-webkit-scrollbar{height:10px}
.track::-webkit-scrollbar-thumb{background:linear-gradient(90deg, var(--primary), var(--accent));border-radius:999px}
.slide{min-width:72%;max-width:72%;scroll-snap-align:center}
@media(min-width:900px){.slide{min-width:33%;max-width:33%}}
.art{border-radius:16px;overflow:hidden;aspect-ratio:4/3;background:#0b0912;border:1px solid rgba(255,255,255,.08)}
.art img{width:100%;height:100%;object-fit:cover;display:block}
.car-ctrl{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.car-btn{pointer-events:auto;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(15,11,23,.6);border:1px solid rgba(255,255,255,.1)}

.socials{display:flex;flex-wrap:wrap;gap:12px}
.social{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:linear-gradient(135deg, rgba(137,179,255,.14), rgba(255,155,208,.14));border:1px solid rgba(255,255,255,.08)}

footer{padding:40px 0;color:var(--muted);text-align:center}
.h2{font-size:22px;margin:0 0 12px}

/* Placeholder Twitch (local) */
.twitch-placeholder{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:20px;text-align:center;
  color:var(--muted);font-style:italic
}

/* Carrousel playlist (même mécanique que la galerie images) */
.covers-carousel { position: relative; }
.covers-carousel .track{
  display:flex;
  gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:8px;
}
.covers-carousel .track::-webkit-scrollbar{height:10px}
.covers-carousel .track::-webkit-scrollbar-thumb{
  background:linear-gradient(90deg, var(--primary), var(--accent));
  border-radius:999px;
}

/* Chaque slide (carte vidéo) */
.cover-slide{
  min-width:72%;
  max-width:72%;
  scroll-snap-align:center;
}
@media(min-width:900px){
  .cover-slide{min-width:33%;max-width:33%}
}

/* Carte vidéo réutilisable */
.video-card {
  display: grid;
  grid-template-rows: auto auto;
  gap: 8px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 8px;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease;
  text-align: left;
}
.video-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.16); }
.video-thumb {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 16/9;
  background:#0b0912;
}
.video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-title { font-size: 14px; line-height: 1.3; }
.video-card.active {
  outline: 2px solid var(--primary);
  box-shadow: 0 0 0 6px rgba(176,132,245,.15);
}

/* Lightbox */
.lightbox.hidden { display: none; }
.lightbox {
  position: fixed; inset: 0;
  background: rgba(10, 8, 15, .85);
  backdrop-filter: blur(6px) saturate(120%);
  display: flex; align-items: center; justify-content: center;
  z-index: 999;
  padding: 24px;
}
.lb-figure {
  margin: 0; max-width: 90vw; max-height: 85vh;
  display: grid; gap: 10px; place-items: center;
}
.lb-figure img {
  max-width: 90vw; max-height: 80vh; width: auto; height: auto;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  background: #0b0912;
  border: 1px solid rgba(255,255,255,.08);
}
.lb-figure figcaption { color: var(--muted); font-size: 14px; text-align: center; }

.lb-btn {
  position: absolute;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 12px; border: 1px solid rgba(255,255,255,.2);
  background: rgba(23,18,40,.6);
  color: #fff; font-size: 28px; cursor: pointer;
  transition: transform .15s ease, background .15s ease;
  user-select: none;
}
.lb-btn:hover { transform: scale(1.04); background: rgba(23,18,40,.75); }
.lb-close { top: 18px; right: 18px; font-size: 24px; }
.lb-prev  { left: 18px; top: 50%; transform: translateY(-50%); }
.lb-next  { right: 18px; top: 50%; transform: translateY(-50%); }

@media (max-width: 520px){
  .lb-btn { width: 40px; height: 40px; }
  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }

  /* petits ajustements mobiles */
  .container{padding:16px}
  .brand h1{font-size:16px}
  .btn{padding:8px 12px;border-radius:10px}
}