:root {
  --bg: #f6f5f2; --card: #fff; --ink: #26221d; --muted: #8a8378;
  --accent: #c0392b; --accent2: #2e7d32; --line: #e6e2da; --joker: #f39c12;
}
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 system-ui, sans-serif; background: var(--bg); color: var(--ink); }
main { max-width: 1050px; margin: 0 auto; padding: 16px; }
a { color: var(--accent); }

.top { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  padding: 10px 20px; background: var(--card); border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; text-decoration: none; color: var(--ink); }
.top nav { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.top nav a { text-decoration: none; color: var(--ink); }
.top nav a.on { font-weight: 700; border-bottom: 2px solid var(--accent); }
.me { color: var(--muted); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; margin: 14px 0; }
.card.narrow { max-width: 380px; margin: 60px auto; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.1rem; margin-top: 0; }
.hint { color: var(--muted); font-size: .9rem; }
.req { color: var(--accent); font-size: .8rem; } .opt { color: var(--muted); font-size: .8rem; }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.yearpick select { margin-left: 6px; }

label { display: block; margin: 8px 0; font-size: .92rem; }
input, select { width: 100%; padding: 8px; margin-top: 3px; border: 1px solid var(--line); border-radius: 6px; font: inherit; background: #fff; }
button { padding: 9px 16px; margin-top: 8px; border: 0; border-radius: 6px; background: var(--accent); color: #fff; font: inherit; cursor: pointer; }
button:hover { filter: brightness(1.1); }
button.mini { padding: 3px 8px; font-size: .8rem; margin: 0; background: #eee; color: var(--ink); }
button.danger { background: #922; color: #fff; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; align-items: end; }
.grid2 .span2 { grid-column: span 2; }
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } }
.inline { display: inline-flex; gap: 6px; align-items: center; }
.inline input { width: auto; margin: 0; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.flash { padding: 10px 14px; border-radius: 8px; margin: 10px 0; background: #e6f4e6; border: 1px solid var(--accent2); }
.flash.err { background: #fdecea; border-color: var(--accent); }

table.weeks { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.weeks th, table.weeks td { padding: 7px 9px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.weeks .wk { white-space: nowrap; color: var(--muted); }
tr.current { background: #fffbe8; }

/* Grille des semaines : scroll horizontal + colonne semaine figée */
.table-scroll { overflow-x: auto; }
table.grid th, table.grid td { min-width: 150px; }
table.grid th:first-child, table.grid td:first-child {
  position: sticky; left: 0; z-index: 2; min-width: 0;
  background: var(--card);
  box-shadow: 2px 0 0 var(--line);
}
table.grid tr.current td:first-child { background: #fffbe8; }

/* Mobile : par défaut, seulement la colonne semaine + la mienne (pur CSS,
   le bouton JS ajoute .show-all pour révéler tout le monde) */
.only-mobile { display: none; }
@media (max-width: 640px) {
  .only-mobile { display: inline-block; margin-bottom: 8px; }
  table.grid:not(.show-all) th:nth-child(n+3),
  table.grid:not(.show-all) td:nth-child(n+3) { display: none; }
  table.grid:not(.show-all) th, table.grid:not(.show-all) td { min-width: 0; }
  table.grid:not(.show-all) th:first-child, table.grid:not(.show-all) td:first-child { position: static; box-shadow: none; }
  .yt-frame, .yt-lazy { width: 100%; max-width: 320px; }
  main { padding: 10px; }
  .hero { padding: 24px 20px; }
  .hero h1 { font-size: 1.7rem; }
  .disc { width: 130px; height: 130px; }
}
.me-col { background: rgba(46,125,50,.05); }
.song { color: var(--ink); }
.missed { color: #ccc; }
.addlink { text-decoration: none; font-size: .85rem; }
.sp { text-decoration: none; color: #1db954; font-weight: bold; margin-left: 4px; }

.badge { font-size: .72rem; padding: 1px 7px; border-radius: 10px; background: #eee; color: var(--muted); white-space: nowrap; }
.badge.now { background: var(--accent2); color: #fff; display: block; width: fit-content; margin-top: 3px; }
.badge.joker { background: var(--joker); color: #fff; }
.badge.wk { background: var(--ink); color: #fff; }

.playlinks { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Chips de sélection des participants — une couleur par personne */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }
.chip { --h: 20; display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 15px; border-radius: 20px; text-decoration: none;
  font-size: .92rem; font-weight: 600; transition: all .15s ease;
  border: 2px solid hsl(var(--h), 55%, 62%);
  background: hsl(var(--h), 60%, 96%);
  color: hsl(var(--h), 60%, 30%); }
.chip .dot { width: 9px; height: 9px; border-radius: 50%; background: hsl(var(--h), 60%, 50%); }
.chip:hover { transform: translateY(-1px); box-shadow: 0 3px 8px hsla(var(--h), 60%, 40%, .3); }
.chip.on { background: hsl(var(--h), 55%, 42%); border-color: hsl(var(--h), 55%, 42%); color: #fff; }
.chip.on .dot { background: #fff; }
.chip.all { --h: 0; border-color: var(--ink); background: var(--card); color: var(--ink); }
.chip.all.on { background: var(--ink); color: #fff; }
.chip.all:hover { box-shadow: 0 3px 8px rgba(0,0,0,.25); }
.btn { display: inline-block; padding: 8px 14px; background: var(--accent); color: #fff; border-radius: 6px; text-decoration: none; }

.track-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.who { color: var(--muted); font-size: .88rem; }
.players { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.yt-lazy { position: relative; width: 280px; aspect-ratio: 16/9; cursor: pointer; border-radius: 8px; overflow: hidden; background: #000; }
.yt-lazy img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.yt-lazy .play { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.4rem; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.7); }
.yt-frame { width: 280px; aspect-ratio: 16/9; border: 0; border-radius: 8px; }
.sp-frame { width: 300px; height: 80px; border: 0; border-radius: 8px; }

dialog { border: 1px solid var(--line); border-radius: 10px; padding: 20px; max-width: 420px; width: 90%; }
dialog::backdrop { background: rgba(0,0,0,.4); }

.pwd summary { cursor: pointer; color: var(--muted); }

/* Demandes d'accès */
textarea { width: 100%; padding: 8px; margin-top: 3px; border: 1px solid var(--line); border-radius: 6px; font: inherit; resize: vertical; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.duo { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.duo .card.narrow { flex: 1 1 320px; margin: 14px 0; max-width: none; }
.requests { border-left: 4px solid var(--accent2); }
.request-row { display: flex; gap: 12px; justify-content: space-between; align-items: center;
  flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line); }
.request-row:last-child { border-bottom: 0; }
.request-msg { margin: 4px 0 0; color: var(--muted); font-style: italic; }

/* ---------- Lecteur Spotify enchaîné ---------- */
#sp-start { background: #1db954; }
#sp-player-wrap { margin-top: 12px; }
#sp-player iframe { border: 0; border-radius: 12px; }
.sp-controls { margin: 10px 0; }
#sp-queue-list { margin: 8px 0 0; padding-left: 22px; font-size: .92rem; }
#sp-queue-list li { cursor: pointer; padding: 3px 6px; border-radius: 6px; }
#sp-queue-list li:hover { background: var(--bg); }
#sp-queue-list li.current { font-weight: 700; color: #1db954; }

/* ---------- Jokers ---------- */
.joker-row { display: flex; gap: 12px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line); }
.joker-row:last-child { border-bottom: 0; }
button.mini.use { background: var(--joker); color: #fff; }
.explain { border-left: 4px solid var(--joker); }

/* ---------- Page d'accueil ---------- */
.top nav a.cta { background: var(--accent); color: #fff; padding: 6px 14px; border-radius: 20px; }
.hero { display: flex; gap: 30px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  margin: 20px 0; padding: 36px 34px; border-radius: 16px; color: #fff;
  background: linear-gradient(135deg, #b03428 0%, #d4552f 55%, #f39c12 100%); }
.hero h1 { margin: 0 0 10px; font-size: 2.2rem; line-height: 1.15; }
.hero .tagline { font-size: 1.15rem; font-weight: 600; margin: 0 0 12px; }
.hero-sub { max-width: 480px; opacity: .92; }
.hero-text { flex: 1 1 380px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.btn.big { padding: 12px 22px; font-size: 1.05rem; border-radius: 30px; background: #fff; color: var(--accent); font-weight: 600; }
.btn.big.ghost { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.8); }

.vinyl { flex: 0 0 auto; }
.disc { width: 190px; height: 190px; border-radius: 50%; position: relative;
  background: repeating-radial-gradient(circle at center, #111 0 2px, #2b2b2b 2px 4px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35); animation: spin 9s linear infinite; }
.disc-label { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%;
  background: #fdf3e3; color: var(--accent); display: grid; place-items: center;
  font-size: 1.7rem; box-shadow: 0 0 0 3px #111 inset; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .disc { animation: none; } }

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 14px 0; }
@media (max-width: 720px) { .features { grid-template-columns: 1fr; } }
.feature { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.feature .fic { font-size: 1.8rem; display: block; margin-bottom: 6px; }
.feature p { color: var(--muted); font-size: .92rem; margin: 6px 0 0; }

.picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.pick .yt-lazy, .pick .yt-frame { width: 100%; }
.pick-meta { margin-top: 8px; font-size: .95rem; }