/* =========================================================
   NABS Music — thème « Mixtape »
   Papier crème, encre noire, ombres franches, couleurs autocollant.
   ========================================================= */
:root {
  --paper: #fff6e8; --paper2: #fbecd3; --card: #ffffff; --ink: #151412; --ink2: #2a2825;
  --mut: #6e675b; --line: var(--ink);
  --o: #ff9a1f; --lime: #c9f26b; --pink: #ff86bd; --vio: #a48bff; --sky: #8fd3ff; --y: #ffd84d;
  --g: #19b56f; --r: #ff4d4d;
  --b: 2px solid var(--ink);
  --sh: 4px 4px 0 var(--ink); --sh-lg: 7px 7px 0 var(--ink); --sh-sm: 2px 2px 0 var(--ink);
  --rad: 18px;
  font-family: "Ubuntu", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  color: var(--ink); overflow: hidden; -webkit-font-smoothing: antialiased;
  background-color: var(--paper);
  background-image: radial-gradient(rgba(21,20,18,.09) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
}
button { font-family: inherit; }
.mut { color: var(--mut); }
.okc { color: var(--g); font-weight: 800; } .koc { color: var(--r); font-weight: 800; }
code { background: var(--y); border: 1.5px solid var(--ink); padding: 1px 6px; border-radius: 6px; font-size: 13px; }
.ambient { display: none; }

.glass { background: var(--card); border: var(--b); border-radius: var(--rad); box-shadow: var(--sh); }

/* ---------- Égaliseur ---------- */
.eq { display: inline-flex; gap: 3px; align-items: flex-end; height: 20px; }
.eq i { width: 4px; height: 30%; background: var(--ink); border-radius: 2px; animation: eq .9s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -.3s; } .eq i:nth-child(3) { animation-delay: -.6s; } .eq i:nth-child(4) { animation-delay: -.15s; }
@keyframes eq { 0%, 100% { height: 20%; } 50% { height: 100%; } }
.paused .eq i { animation-play-state: paused; }

/* ---------- Layout ---------- */
.shell { display: grid; grid-template-columns: 262px 1fr; height: calc(100vh - 86px); }

/* Sidebar noire */
.side { display: flex; flex-direction: column; gap: 18px; padding: 22px 16px; background: var(--ink); color: var(--paper); border: 0; border-radius: 0; box-shadow: none; }
.brand { display: flex; align-items: center; gap: 12px; font-size: 21px; padding: 0 4px; letter-spacing: -.3px; }
.brand b { font-weight: 900; color: var(--lime); }
.brand small { display: block; font-size: 12px; color: rgba(255,246,232,.55); letter-spacing: 0; }
.brand .eq { width: 42px; height: 42px; padding: 10px; justify-content: center; border-radius: 12px; background: var(--o); border: 2px solid var(--paper); transform: rotate(-6deg); }
.brand .eq i { background: var(--ink); }

nav { display: flex; flex-direction: column; gap: 4px; }
.nav { all: unset; display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; color: rgba(255,246,232,.7); cursor: pointer; font-weight: 600; transition: .15s; border: 2px solid transparent; }
.nav i { font-style: normal; width: 20px; text-align: center; }
.nav:hover { color: var(--paper); background: rgba(255,246,232,.07); }
.nav.on { background: var(--lime); color: var(--ink); border-color: var(--paper); box-shadow: 3px 3px 0 var(--o); }
.nav em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 800; background: var(--r); color: #fff; border-radius: 20px; padding: 2px 8px; border: 1.5px solid var(--ink); }

.side .chips .chip { background: transparent; color: rgba(255,246,232,.7); border-color: rgba(255,246,232,.3); padding: 6px 12px; font-size: 13px; box-shadow: none; }
.side .chips .chip.on { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.sp-badge { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: rgba(255,246,232,.55); padding: 0 6px; }
.sp-badge i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,246,232,.3); }
.sp-badge.on { color: #1ed760; } .sp-badge.on i { background: #1ed760; box-shadow: 0 0 0 4px rgba(30,215,96,.2); }

.shift-card { margin-top: auto; padding: 14px 16px; border-radius: 14px; display: flex; flex-direction: column; gap: 1px; background: var(--o); color: var(--ink); border: 2px solid var(--paper); box-shadow: 4px 4px 0 var(--lime); transform: rotate(-2deg); }
.shift-card small { font-size: 11px; text-transform: uppercase; letter-spacing: 1.6px; font-weight: 800; }
.shift-card b { font-size: 22px; font-weight: 900; } .shift-card span { font-size: 13px; font-weight: 600; }

.me { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: var(--ink2); border: 1.5px solid rgba(255,246,232,.15); }
.me .who { min-width: 0; flex: 1; }
.me .who b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--paper); }
.me .who small { display: block; font-size: 12px; color: rgba(255,246,232,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me .icon { color: rgba(255,246,232,.6); }
.me .icon:hover { background: rgba(255,246,232,.1); color: var(--paper); }
.avatar { position: relative; overflow: hidden; width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: var(--ink); background: var(--pink); border: 2px solid var(--paper); }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.icon { all: unset; cursor: pointer; width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; color: var(--ink); transition: .15s; font-weight: 700; }
.icon:hover { background: var(--paper2); }
.icon.danger { color: var(--r); }

.main { overflow-y: auto; padding: 30px 38px 130px; }
.main::-webkit-scrollbar { width: 12px; } .main::-webkit-scrollbar-thumb { background: var(--ink); border-radius: 10px; border: 4px solid var(--paper); }
.top { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 26px; }
.top h1 { display: inline; font-size: 42px; font-weight: 900; letter-spacing: -1.5px; line-height: 1.1; background: linear-gradient(transparent 58%, var(--lime) 58%, var(--lime) 92%, transparent 92%); padding: 0 4px; }
.top p { margin-top: 8px; font-weight: 500; }
.view { animation: rise .35s cubic-bezier(.2,1.2,.4,1); }
@keyframes rise { from { transform: translateY(10px); opacity: 0; } }

.quota { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-radius: 40px; white-space: nowrap; font-size: 14px; font-weight: 600; background: var(--y); }
.dots { display: flex; gap: 6px; }
.dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--card); border: 2px solid var(--ink); }
.dots i.on { background: var(--o); }

/* ---------- Hero « en ce moment » : scène noire + vinyle ---------- */
.hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 30px; padding: 26px 30px 26px 26px; margin-bottom: 30px; border-radius: 24px; min-height: 220px; background: var(--ink); color: var(--paper); border: var(--b); box-shadow: 8px 8px 0 var(--o); }
.hero-bg { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(50px) saturate(1.6); opacity: .35; z-index: 0; }
.hero-bg.grad { background: linear-gradient(135deg, hsl(var(--h) 80% 55%), hsl(calc(var(--h) + 70) 70% 40%)); }
.hero > *:not(.hero-bg) { position: relative; z-index: 1; }
/* Vinyle qui dépasse derrière la pochette */
.hero::before { content: ""; position: absolute; z-index: 1; left: 96px; top: 50%; width: 160px; height: 160px; margin-top: -80px; border-radius: 50%;
  background: radial-gradient(circle, var(--o) 0 15%, var(--ink) 15.5% 17%, transparent 17.5%), repeating-radial-gradient(circle, #0b0b0b 0 2px, #262626 2.5px 3.5px);
  box-shadow: 0 0 0 2px var(--paper); animation: spin 3s linear infinite; }
.hero.paused::before { animation-play-state: paused; }
.hero .cover.xl { z-index: 2; transform: rotate(-4deg); border: 3px solid var(--paper); box-shadow: 6px 6px 0 var(--lime); }
.hero-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding-left: 70px; }
.hero-meta h2 { font-size: 40px; font-weight: 900; letter-spacing: -1.5px; line-height: 1.02; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-meta p { font-size: 18px; font-weight: 600; color: rgba(255,246,232,.8); margin-bottom: 12px; }
.hero-meta .prog { max-width: 540px; color: rgba(255,246,232,.75); }
.hero-meta .bar { background: rgba(255,246,232,.2); border: 0; height: 8px; }
.hero-meta .bar i { background: var(--lime); }
.hero .live { align-self: flex-start; padding: 5px 12px; border-radius: 20px; background: var(--r); color: #fff; border: 2px solid var(--paper); transform: rotate(-2deg); }
.hero .live i { background: #fff; }
.hero .live.off { background: var(--ink2); color: rgba(255,246,232,.7); }
.hero-eq .eq { height: 54px; gap: 6px; } .hero-eq .eq i { width: 8px; background: var(--lime); border-radius: 3px; }
.hero.idle { min-height: 0; gap: 18px; background: var(--card); color: var(--ink); box-shadow: var(--sh); }
.hero.idle::before { display: none; }
.hero.idle .eq-orb { background: var(--y); }

/* ---------- Recherche ---------- */
.search { display: flex; align-items: center; gap: 14px; padding: 6px 10px 6px 22px; border-radius: 18px; margin-bottom: 32px; transition: .15s; }
.search:focus-within { box-shadow: var(--sh-lg); transform: translate(-2px, -2px); }
.search i { font-style: normal; font-size: 24px; font-weight: 700; }
.search input { flex: 1; background: none; border: 0; outline: 0; color: var(--ink); font-size: 18px; font-weight: 500; padding: 15px 0; font-family: inherit; }
.search input::placeholder { color: #a39b8c; }
kbd { font-family: inherit; font-size: 12px; padding: 7px 12px; border-radius: 10px; background: #1ed760; color: var(--ink); font-weight: 800; border: 2px solid var(--ink); }
.sec { display: inline-block; font-size: 13px; text-transform: uppercase; letter-spacing: 2px; font-weight: 900; margin-bottom: 18px; padding: 6px 12px; background: var(--ink); color: var(--paper); border-radius: 8px; transform: rotate(-1.5deg); }

/* ---------- Thèmes : autocollants ---------- */
.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 18px; }
.theme { all: unset; cursor: pointer; position: relative; overflow: hidden; height: 120px; padding: 16px; border-radius: 18px; display: flex; flex-direction: column; justify-content: flex-end; color: var(--ink); background: var(--c1); border: var(--b); box-shadow: var(--sh); transition: .18s cubic-bezier(.2,1.4,.4,1); }
.theme:nth-child(3n+1) { transform: rotate(-1deg); } .theme:nth-child(3n+2) { transform: rotate(.8deg); } .theme:nth-child(3n) { transform: rotate(-.4deg); }
.theme:hover { transform: translate(-3px, -3px) rotate(0); box-shadow: var(--sh-lg); }
.theme:active { transform: translate(2px, 2px); box-shadow: var(--sh-sm); }
.theme::after { content: ""; position: absolute; right: -30px; bottom: -30px; width: 110px; height: 110px; border-radius: 50%; background: var(--c2); opacity: .55; }
.theme .th-emoji { position: absolute; right: 10px; top: 8px; z-index: 1; font-size: 48px; transform: rotate(12deg); transition: .3s; }
.theme:hover .th-emoji { transform: rotate(-8deg) scale(1.15); }
.theme b { position: relative; z-index: 1; font-size: 19px; font-weight: 900; letter-spacing: -.3px; }
.theme small { position: relative; z-index: 1; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }

.theme-head { display: flex; align-items: center; gap: 16px; padding: 18px 22px; margin-bottom: 26px; border-radius: 20px; color: var(--ink); background: var(--c1); border: var(--b); box-shadow: var(--sh); flex-wrap: wrap; position: relative; overflow: hidden; }
.theme-head::after { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: var(--c2); opacity: .5; }
.theme-head > * { position: relative; z-index: 1; }
.theme-head .back { background: var(--card); border: var(--b); box-shadow: var(--sh-sm); }
.theme-head .back:hover { background: var(--paper); }
.theme-head .th-emoji { font-size: 46px; transform: rotate(-8deg); }
.theme-head small { font-size: 12px; text-transform: uppercase; letter-spacing: 2px; font-weight: 900; }
.theme-head h2 { font-size: 34px; font-weight: 900; letter-spacing: -1px; }
.theme-head p { margin-left: auto; font-size: 14px; font-weight: 600; max-width: 300px; }

/* ---------- Grille titres ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; }
.card.track { cursor: pointer; padding: 10px 10px 14px; border-radius: 18px; background: var(--card); border: var(--b); box-shadow: var(--sh); display: flex; flex-direction: column; gap: 10px; transition: .15s; user-select: none; }
.card.track:hover { transform: translate(-3px, -3px); box-shadow: var(--sh-lg); }
.card.track:active { transform: translate(2px, 2px); box-shadow: var(--sh-sm); }
.card.track.sel { background: var(--lime); transform: rotate(-1.2deg); box-shadow: 6px 6px 0 var(--o); }
.card.track.dis { cursor: default; opacity: .5; filter: grayscale(.7); }
.card.track.dis:hover { transform: none; box-shadow: var(--sh); }
.card .art { position: relative; }
.card .art .cover { width: 100%; height: auto; aspect-ratio: 1; border-radius: 12px; font-size: 42px; border: var(--b); }
.rank { position: absolute; left: -8px; top: -8px; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 10px; display: grid; place-items: center; font-weight: 900; font-size: 16px; background: var(--ink); color: var(--lime); border: 2px solid var(--paper); transform: rotate(-8deg); box-shadow: var(--sh-sm); }
.check { position: absolute; right: 8px; top: 8px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 16px; color: transparent; background: var(--card); border: var(--b); transition: .18s cubic-bezier(.2,1.6,.4,1); }
.card.track:hover .check { color: #c9c2b4; }
.card.track.sel .check { background: var(--ink); color: var(--lime); transform: scale(1.15) rotate(-10deg); }
.card.track.dis .check { display: none; }
.flag { position: absolute; left: 8px; bottom: 8px; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 20px; background: var(--y); color: var(--ink); border: 1.5px solid var(--ink); transform: rotate(-3deg); }
.skel { aspect-ratio: .8; border-radius: 18px; border: 2px dashed #c9c0b0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.7) 50%, transparent 70%); background-size: 300% 100%; animation: skel 1.2s infinite linear; }
@keyframes skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---------- Pochettes ---------- */
.cover { flex: none; position: relative; overflow: hidden; width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; font-weight: 900; font-size: 15px; letter-spacing: 1px; color: var(--ink); background: hsl(var(--h) 85% 72%); border: 1.5px solid var(--ink); }
.cover.has-img { background: var(--paper2); }
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover.sm { width: 44px; height: 44px; font-size: 13px; border-radius: 10px; }
.cover.lg { width: 84px; height: 84px; border-radius: 50%; font-size: 22px; border: 3px solid var(--o); }
.cover.lg.has-img img { border-radius: 50%; }
.cover.xl { width: 160px; height: 160px; border-radius: 14px; font-size: 46px; }
.cover.art { background: #ffd3d3; color: var(--r); font-size: 20px; }

.meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.meta b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 800; }
.meta small { color: var(--mut); font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .meta { padding: 0 4px; }
.tags { display: flex; gap: 8px; align-items: center; color: var(--mut); font-size: 12px; font-weight: 600; margin-top: 4px; }
.e { font-style: normal; font-size: 10px; font-weight: 900; background: var(--ink); color: var(--paper); padding: 1px 5px; border-radius: 3px; }

/* ---------- Boutons ---------- */
.btn { all: unset; box-sizing: border-box; cursor: pointer; text-align: center; white-space: nowrap; background: var(--o); color: var(--ink); font-weight: 800; padding: 12px 22px; border-radius: 12px; border: var(--b); box-shadow: var(--sh); transition: .12s; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: var(--sh-sm); }
.btn.sm { padding: 8px 15px; font-size: 14px; box-shadow: var(--sh-sm); }
.btn.sm:hover { box-shadow: 4px 4px 0 var(--ink); }
.btn.wide { display: block; width: 100%; }
.btn.ghost { background: var(--card); }
.btn.danger { color: var(--r); }
a.btn { text-decoration: none; }

/* ---------- Barre de sélection ---------- */
.selbar { position: fixed; left: calc(262px + 38px); right: 38px; bottom: 102px; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 12px 14px 12px 18px; border-radius: 20px; background: var(--ink); color: var(--paper); border: 2px solid var(--ink); box-shadow: 7px 7px 0 var(--o); animation: up .35s cubic-bezier(.2,1.4,.4,1); }
@keyframes up { from { transform: translateY(30px) rotate(-1deg); opacity: 0; } }
.selbar .stack { display: flex; }
.selbar .stack .cover { border: 2px solid var(--paper); }
.selbar .stack .cover:nth-child(odd) { transform: rotate(-6deg); } .selbar .stack .cover:nth-child(even) { transform: rotate(5deg); }
.selbar .stack .cover + .cover { margin-left: -14px; }
.selbar .meta b { color: var(--paper); }
.selbar .meta small, .selbar .mut { color: rgba(255,246,232,.55); font-weight: 600; }
.selbar .btn { background: var(--lime); border-color: var(--paper); box-shadow: 3px 3px 0 var(--o); }
.selbar .btn.ghost { background: transparent; color: var(--paper); border-color: rgba(255,246,232,.4); box-shadow: none; }
.shiftpick { display: flex; flex-direction: column; gap: 4px; }
.shiftpick small { font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px; color: rgba(255,246,232,.55); font-weight: 800; }
.shiftpick > div { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: var(--ink2); border: 1.5px solid rgba(255,246,232,.2); }
.shiftpick button { all: unset; cursor: pointer; padding: 7px 12px; border-radius: 9px; font-size: 13px; font-weight: 700; color: rgba(255,246,232,.75); white-space: nowrap; transition: .15s; }
.shiftpick button:hover { color: var(--paper); }
.shiftpick button.on { background: var(--y); color: var(--ink); }
.shiftpick button i { font-style: normal; font-size: 10px; font-weight: 900; color: var(--o); margin-left: 2px; }
.shiftpick button.on i { color: var(--ink); }

/* ---------- Listes ---------- */
.list { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-radius: 14px; transition: .12s; box-shadow: var(--sh-sm); }
.row:hover { transform: translate(-2px, -2px); box-shadow: var(--sh); }
.row.now { background: var(--lime); box-shadow: 4px 4px 0 var(--o); }
.num { width: 28px; text-align: center; flex: none; font-weight: 900; font-size: 15px; }
.num .eq { height: 16px; }
.meta .why { font-size: 12px; font-weight: 600; } .meta .why.ko { color: #d63030; } .meta .why.warn { color: #a5650a; }
.pill { font-size: 12px; font-weight: 800; padding: 5px 11px; border-radius: 30px; white-space: nowrap; border: 1.5px solid var(--ink); }
.pill.ok { background: var(--lime); }
.pill.ko { background: #ffc4c4; }
.pill.ai { background: var(--vio); }
.pill.man { background: var(--y); }
.empty { text-align: center; padding: 56px 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.empty b { font-size: 18px; font-weight: 900; }
.eq-orb { width: 62px; height: 62px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--lime); border: var(--b); box-shadow: var(--sh-sm); }
.found { margin-bottom: 20px; }

/* ---------- Dashboard ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 24px; }
.stat { padding: 18px 20px; background: var(--c); }
.stat:nth-child(odd) { transform: rotate(-.6deg); } .stat:nth-child(even) { transform: rotate(.5deg); }
.stat small { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 1.2px; }
.stat b { display: block; font-size: 46px; font-weight: 900; margin: 4px 0 0; letter-spacing: -2px; }
.stat span { font-size: 13px; font-weight: 600; color: var(--ink2); }
.c-v { --c: var(--vio); } .c-g { --c: var(--lime); } .c-r { --c: var(--pink); } .c-o { --c: var(--y); }
.cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 22px; }
.panel { padding: 22px; }
.panel h3 { display: inline-block; font-size: 15px; font-weight: 900; margin-bottom: 16px; padding: 3px 8px; background: var(--y); border-radius: 6px; }
.panel h3:not(:first-child) { margin-top: 24px; }
.panel p { margin-bottom: 8px; line-height: 1.5; }
.panel .row { box-shadow: none; border: 1.5px solid var(--ink); background: var(--paper); }
.panel .row:hover { transform: none; }
.bars { display: flex; gap: 18px; align-items: flex-end; height: 160px; }
.bars .b { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; font-weight: 800; }
.bars .b i { width: 100%; max-width: 56px; min-height: 6px; border-radius: 10px 10px 4px 4px; background: var(--o); border: var(--b); }
.bars .b:nth-child(2) i { background: var(--pink); } .bars .b:nth-child(3) i { background: var(--vio); }

/* ---------- Manager ---------- */
.chips { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.chip { all: unset; cursor: pointer; padding: 8px 16px; border-radius: 30px; border: var(--b); font-weight: 700; font-size: 14px; background: var(--card); box-shadow: var(--sh-sm); transition: .12s; }
.chip:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.chip.on { background: var(--ink); color: var(--lime); }
.chip small { opacity: .7; margin-left: 4px; }
.addbl { display: flex; gap: 12px; padding: 12px; margin-bottom: 18px; }
.addbl input, .addbl select, .field input { flex: 1; min-width: 0; background: var(--paper); border: var(--b); border-radius: 12px; color: var(--ink); padding: 12px 14px; font-size: 15px; font-weight: 500; outline: 0; font-family: inherit; transition: .12s; }
.addbl input:focus, .addbl select:focus, .field input:focus { background: #fff; box-shadow: var(--sh-sm); }
.addbl.flat { padding: 0; margin-bottom: 10px; background: none; border: 0; box-shadow: none; align-items: center; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field span { font-size: 13px; font-weight: 700; }
.toggle { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 2px dashed #e2d6c1; cursor: pointer; font-weight: 600; }
.toggle input { display: none; }
.toggle i { width: 50px; height: 28px; border-radius: 20px; background: #e9dfcd; border: var(--b); position: relative; transition: .2s; flex: none; }
.toggle i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--card); border: var(--b); transition: .2s cubic-bezier(.2,1.6,.4,1); }
.toggle input:checked + i { background: var(--o); }
.toggle input:checked + i::after { left: 24px; }
.stepper { display: flex; align-items: center; gap: 12px; }
.stepper b { font-size: 28px; font-weight: 900; min-width: 28px; text-align: center; }
.stepper .icon { border: var(--b); background: var(--card); box-shadow: var(--sh-sm); }
.model { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.pipe { padding-left: 20px; line-height: 2; margin-bottom: 18px; font-weight: 500; }

/* ---------- Diffusion ---------- */
.sp-connect { display: flex; flex-direction: column; gap: 16px; }
.sp-logo { width: 56px; height: 56px; border-radius: 50%; background: #1ed760; color: var(--ink); display: grid; place-items: center; font-size: 26px; border: var(--b); box-shadow: var(--sh-sm); }
.account { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 2px dashed #e2d6c1; }
.account img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: var(--b); }
.account small { display: block; }
.account .btn { margin-left: auto; }
.status { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--mut); }
.dot { width: 10px; height: 10px; border-radius: 50%; background: #c9c0b0; flex: none; border: 1.5px solid var(--ink); }
.dot.on { background: var(--g); }
.vol { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.vol b { min-width: 50px; text-align: right; font-weight: 900; font-size: 18px; }
.vol input[type=range] { flex: 1; -webkit-appearance: none; appearance: none; height: 12px; border-radius: 10px; background: linear-gradient(90deg, var(--lime), var(--o), var(--pink)); border: var(--b); outline: 0; }
.vol input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--card); border: 3px solid var(--ink); box-shadow: var(--sh-sm); cursor: pointer; }
.vol input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border: 3px solid var(--ink); border-radius: 50%; background: var(--card); cursor: pointer; }
.btns { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.sh-ico { font-size: 24px; width: 44px; text-align: center; }

/* ---------- Player (barre noire) ---------- */
.player { position: fixed; left: 0; right: 0; bottom: 0; height: 86px; display: grid; grid-template-columns: 1fr 1.4fr 1fr; align-items: center; gap: 20px; padding: 0 24px; border-radius: 0; border: 0; border-top: 3px solid var(--o); background: var(--ink); color: var(--paper); box-shadow: none; }
.player .mut { color: rgba(255,246,232,.6); }
.np { display: flex; align-items: center; gap: 12px; min-width: 0; }
.np .cover { border-color: var(--paper); transform: rotate(-4deg); }
.np .meta { flex: 0 1 auto; }
.np .meta small { color: rgba(255,246,232,.6); }
.np .eq i, .player .eq i { background: var(--lime); }
.ctrl { display: flex; align-items: center; gap: 8px; }
.player .icon { color: var(--paper); }
.player .icon:hover { background: rgba(255,246,232,.1); }
.icon.play { background: var(--lime); color: var(--ink) !important; border-radius: 50%; border: 2px solid var(--paper); }
.icon.play:hover { background: var(--y) !important; }
.prog { flex: 1; display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; color: rgba(255,246,232,.65); font-variant-numeric: tabular-nums; }
.bar { flex: 1; height: 6px; border-radius: 6px; background: rgba(255,246,232,.15); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--lime); transition: width 1s linear; }
.live { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 900; letter-spacing: 1.4px; color: var(--r); white-space: nowrap; }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--r); animation: pulse 1.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,77,77,.6); } 100% { box-shadow: 0 0 0 10px rgba(255,77,77,0); } }
.up { text-align: right; min-width: 0; }
.up small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px; font-weight: 800; }
.up b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

/* ---------- Écrans de chargement / erreur ---------- */
.login { height: 100vh; display: grid; place-items: center; padding: 20px; }
.login-card { width: min(460px, 100%); padding: 40px; display: flex; flex-direction: column; gap: 18px; border-radius: 26px; box-shadow: var(--sh-lg); transform: rotate(-1deg); animation: pop .5s cubic-bezier(.2,1.3,.4,1); }
.login h1 { font-size: 34px; font-weight: 900; letter-spacing: -1px; }

/* ---------- Modal revue IA ---------- */
.overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(21,20,18,.45); animation: fade .2s; }
.modal { position: relative; overflow: hidden; width: min(440px, 92vw); max-height: 92vh; overflow-y: auto; padding: 32px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; border-radius: 26px; background: var(--paper); border: var(--b); box-shadow: 10px 10px 0 var(--o); animation: pop .4s cubic-bezier(.2,1.5,.4,1); }
.modal.wide { width: min(530px, 94vw); }
.modal > *:not(.modal-bg) { position: relative; z-index: 1; }
.modal-bg { position: absolute; inset: -40px; height: 280px; background-size: cover; background-position: center; filter: blur(45px) saturate(1.6); opacity: .45; z-index: 0; -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }
@keyframes pop { from { transform: scale(.85) rotate(-3deg); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
.modal h2 { font-size: 26px; font-weight: 900; letter-spacing: -.5px; }
.disc { position: relative; border-radius: 50%; overflow: hidden; margin-bottom: 14px; border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); transition: box-shadow .3s; }
.vinyl { width: 180px; height: 180px; border-radius: 50%; display: grid; place-items: center; background: repeating-radial-gradient(circle, #0d0d0d 0 2px, #2a2a2a 2.5px 3.5px); animation: spin 2.2s linear infinite; }
.vinyl.stop { animation: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.scan { position: absolute; left: 0; right: 0; height: 46px; background: linear-gradient(transparent, rgba(201,242,107,.6), transparent); animation: scan 1.1s ease-in-out infinite alternate; }
@keyframes scan { from { top: -46px; } to { top: 180px; } }
.v-ok .disc { box-shadow: 6px 6px 0 var(--g); } .v-ko .disc { box-shadow: 6px 6px 0 var(--r); }
.steps { list-style: none; padding: 0; width: 100%; text-align: left; margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.steps li { display: flex; align-items: center; gap: 12px; font-weight: 600; opacity: .4; transition: .25s; }
.steps li i { width: 22px; height: 22px; flex: none; border-radius: 50%; border: var(--b); background: var(--card); display: grid; place-items: center; font-style: normal; font-size: 12px; }
.steps li.act, .steps li.done { opacity: 1; }
.steps li.act i { border-color: var(--o); border-top-color: transparent; border-width: 3px; animation: spin .7s linear infinite; background: transparent; }
.steps li.done i { background: var(--lime); }
.steps li.done i::after { content: "✓"; font-weight: 900; }
.verdict { width: 100%; padding: 16px; border-radius: 16px; margin: 14px 0 10px; display: flex; flex-direction: column; gap: 5px; border: var(--b); animation: pop .4s cubic-bezier(.2,1.5,.4,1); }
.verdict b { font-size: 16px; font-weight: 900; }
.verdict.ok { background: var(--lime); box-shadow: 4px 4px 0 var(--g); }
.verdict.ko { background: #ffd0d0; box-shadow: 4px 4px 0 var(--r); }
.verdict small { font-size: 13px; font-weight: 600; }
.verdict .mut { color: var(--ink2); }

.qprog { width: 100%; display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 13px; font-weight: 900; white-space: nowrap; }
.qprog .bar { background: #e9dfcd; border: 1.5px solid var(--ink); height: 10px; }
.qprog .bar i { background: var(--o); transition: width .4s; }
.queue { width: 100%; display: flex; flex-direction: column; gap: 8px; margin: 14px 0 12px; text-align: left; }
.queue.mini { border-top: 2px dashed #e2d6c1; padding-top: 14px; }
.qrow { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; background: var(--card); border: 1.5px solid var(--ink); transition: .2s; }
.qrow.act { background: var(--y); transform: translateX(4px); box-shadow: var(--sh-sm); }
.qrow .qst { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 14px; border: var(--b); background: var(--paper); }
.qrow.act .qst { border-color: var(--ink); border-top-color: transparent; animation: spin .7s linear infinite; background: transparent; }
.qrow.ok { background: #eafbd0; } .qrow.ok .qst { background: var(--lime); }
.qrow.ko { background: #ffe1e1; } .qrow.ko .qst { background: #ff9c9c; }
.qrow.ok small { color: #2f6b12; } .qrow.ko small { color: #b02222; }
.sum-head { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sum-ico { font-size: 52px; animation: pop .5s cubic-bezier(.2,1.8,.4,1); }

/* ---------- Toast ---------- */
#toast { position: fixed; top: 22px; left: 50%; z-index: 99; transform: translate(-50%, -24px) rotate(-2deg); opacity: 0; transition: .3s cubic-bezier(.2,1.4,.4,1); pointer-events: none; }
#toast.show { opacity: 1; transform: translate(-50%, 0) rotate(-1deg); }
#toast .t { padding: 12px 20px; border-radius: 14px; background: var(--ink); color: var(--paper); font-weight: 700; border: 2px solid var(--paper); box-shadow: 5px 5px 0 var(--mut); }
#toast .ok { box-shadow: 5px 5px 0 var(--lime); } #toast .ko { box-shadow: 5px 5px 0 var(--r); }

/* ---------- Responsive ---------- */
@media (max-width: 1150px) { .stats { grid-template-columns: repeat(2, 1fr); } .cols { grid-template-columns: 1fr; } .theme-head p { margin-left: 0; max-width: none; width: 100%; } }
@media (max-width: 820px) { .shell { grid-template-columns: 1fr; } .side { display: none; } .selbar { left: 16px; right: 16px; } .player { grid-template-columns: 1fr 1fr; } .up { display: none; } .main { padding: 20px 16px 150px; } .hero::before { display: none; } .hero-meta { padding-left: 0; } }

/* ---------- Popup « Pour quel shift ? » ---------- */
.shift-modal { gap: 10px; }
.shift-modal h2 { font-size: 32px; letter-spacing: -1px; }
.shift-modal > p { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.stack.big { display: flex; margin-bottom: 6px; }
.stack.big .cover { width: 58px; height: 58px; border: 2px solid var(--ink); box-shadow: var(--sh-sm); }
.stack.big .cover + .cover { margin-left: -18px; }
.stack.big .cover:nth-child(odd) { transform: rotate(-7deg); } .stack.big .cover:nth-child(even) { transform: rotate(6deg) translateY(-4px); }
.shift-cards { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 14px 0 8px; }
.shift-opt { all: unset; cursor: pointer; position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 10px 18px; border-radius: 18px; border: var(--b); box-shadow: var(--sh); transition: .15s cubic-bezier(.2,1.4,.4,1); }
.shift-opt.s-jour { background: var(--y); } .shift-opt.s-soir { background: var(--pink); } .shift-opt.s-nuit { background: var(--vio); }
.shift-opt:hover { transform: translate(-3px, -3px) rotate(-1deg); box-shadow: var(--sh-lg); }
.shift-opt:active { transform: translate(2px, 2px); box-shadow: var(--sh-sm); }
.shift-opt .ico { font-size: 46px; line-height: 1; margin-bottom: 4px; }
.shift-opt b { font-size: 22px; font-weight: 900; }
.shift-opt small { font-size: 13px; font-weight: 700; }
.shift-opt i { font-style: normal; font-size: 11px; font-weight: 800; margin-top: 6px; padding: 3px 8px; border-radius: 20px; background: rgba(255,255,255,.75); border: 1.5px solid var(--ink); }
.shift-opt em { position: absolute; top: -12px; left: 50%; transform: translateX(-50%) rotate(-4deg); font-style: normal; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; padding: 4px 10px; border-radius: 20px; background: var(--ink); color: var(--lime); white-space: nowrap; }
.shift-opt.now { box-shadow: 5px 5px 0 var(--o); }
.kiosk .shift-opt { padding: 30px 12px 24px; } .kiosk .shift-opt .ico { font-size: 60px; } .kiosk .shift-opt b { font-size: 26px; }

/* ---------- Éditeur de shifts ---------- */
.tl { position: relative; padding-bottom: 22px; }
.tl-bar { position: relative; height: 54px; border-radius: 14px; border: var(--b); background: repeating-linear-gradient(45deg, #f3e9d6 0 8px, #fbf3e4 8px 16px); overflow: hidden; }
.tl-seg { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; border-right: 2px solid var(--ink); overflow: hidden; }
.tl-seg span { font-size: 13px; font-weight: 900; white-space: nowrap; padding: 0 6px; }
.tl-ticks { position: relative; height: 18px; margin-top: 4px; }
.tl-ticks span { position: absolute; transform: translateX(-50%); font-size: 11px; font-weight: 800; color: var(--mut); }
.tl-ticks span:first-child { transform: none; } .tl-ticks span:last-child { transform: translateX(-100%); }
.shift-editor { display: flex; flex-direction: column; gap: 14px; margin: 22px 0 18px; }
.shift-row { display: grid; grid-template-columns: 64px 1.3fr .7fr .7fr 1.6fr 1.3fr auto; gap: 14px; align-items: end; padding: 16px; }
.shift-row .sw { width: 64px; height: 64px; border-radius: 16px; border: var(--b); display: grid; place-items: center; font-size: 32px; box-shadow: var(--sh-sm); align-self: center; transform: rotate(-4deg); }
.shift-row .field input { width: 100%; padding: 10px 12px; font-size: 15px; font-weight: 600; background: var(--paper); border: var(--b); border-radius: 12px; font-family: inherit; outline: 0; }
.shift-row .field input:focus { background: #fff; box-shadow: var(--sh-sm); }
.shift-row .field > span { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
.picks { display: flex; flex-wrap: wrap; gap: 5px; }
.ipick { all: unset; cursor: pointer; width: 32px; height: 32px; display: grid; place-items: center; font-size: 18px; border-radius: 9px; border: 1.5px solid transparent; transition: .12s; }
.ipick:hover { background: var(--paper2); }
.ipick.on { border-color: var(--ink); background: var(--y); box-shadow: var(--sh-sm); }
.cpick { all: unset; cursor: pointer; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ink); transition: .12s; }
.cpick:hover { transform: scale(1.12); }
.cpick.on { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); }
.sr-side { display: flex; flex-direction: column; align-items: center; gap: 6px; align-self: center; }
.shift-actions .btn[disabled] { opacity: .5; cursor: default; transform: none; box-shadow: var(--sh-sm); }
@media (max-width: 1300px) { .shift-row { grid-template-columns: 64px 1fr 1fr 1fr; } .shift-row .field:nth-of-type(4), .shift-row .field:nth-of-type(5) { grid-column: span 2; } }