/* ==========================================================
   Ze Reel Hunt — socle commun aux trois pages.
   Le thème suit trois états : clair, sombre système, et choix
   explicite. Chaque couleur est définie dans :root d'abord.
   ========================================================== */
:root{
  --paper:#EDEEE9; --surface:#F8F8F5; --surface-2:#E3E6DE;
  --ink:#1A1D1B; --ink-2:#5C625D; --ink-3:#888E88;
  --rule:#D3D6CE; --rule-strong:#B7BCB2;
  --blue:#2F7EA8; --blue-ink:#1F5F80; --blue-soft:#DCEAF2;
  --red:#BE3B2C; --red-soft:#F6E3DF;
  --ok:#4E8C5E; --ok-soft:#DFEDE2; --warn:#A8791F; --warn-soft:#F5EAD2; --stale:#8A8079;
  --shadow:0 1px 2px rgba(26,29,27,.05), 0 10px 26px -14px rgba(26,29,27,.30);
  --radius:3px; color-scheme:light;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --paper:#141715; --surface:#1C201D; --surface-2:#272C28;
  --ink:#E7E9E3; --ink-2:#A3AAA3; --ink-3:#787F79;
  --rule:#2D332E; --rule-strong:#434A44;
  --blue:#7FC1E2; --blue-ink:#A5D6EE; --blue-soft:#1A2A33;
  --red:#E2685A; --red-soft:#33211E;
  --ok:#71B786; --ok-soft:#1B2A20; --warn:#D3A548; --warn-soft:#2C2415; --stale:#9A918A;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 12px 32px -16px rgba(0,0,0,.8);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --paper:#141715; --surface:#1C201D; --surface-2:#272C28;
  --ink:#E7E9E3; --ink-2:#A3AAA3; --ink-3:#787F79;
  --rule:#2D332E; --rule-strong:#434A44;
  --blue:#7FC1E2; --blue-ink:#A5D6EE; --blue-soft:#1A2A33;
  --red:#E2685A; --red-soft:#33211E;
  --ok:#71B786; --ok-soft:#1B2A20; --warn:#D3A548; --warn-soft:#2C2415; --stale:#9A918A;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 12px 32px -16px rgba(0,0,0,.8);
  color-scheme:dark;
}

*{box-sizing:border-box}
/* Doit rester avant tout le reste : sans !important, la moindre règle de
   classe posant un display (.lb-o, .banner, .lk…) annule l'attribut hidden
   et l'élément s'affiche quand même. */
[hidden]{display:none !important}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased}
img{max-width:100%}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer; background:none; border:none}
a{color:var(--blue)}
:focus-visible{outline:2px solid var(--blue); outline-offset:2px; border-radius:2px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important; transition-duration:.01ms !important}}

/* ---------- barre haute ---------- */
.topbar{position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:18px;
  padding:0 20px; height:60px; background:var(--surface); border-bottom:1px solid var(--rule-strong)}
.logo{height:26px; width:auto; display:block; color:var(--ink); flex:none}
.wordmark{display:flex; align-items:center; gap:9px; flex:none; text-decoration:none; color:inherit}
.wordmark b{font-family:Anton,Impact,sans-serif; font-weight:400; font-size:22px;
  letter-spacing:.055em; text-transform:uppercase; line-height:1}
.wordmark b em{font-style:normal; color:var(--blue)}
.wordmark span{font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); white-space:nowrap}
.spacer{flex:1}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; height:34px; padding:0 13px;
  border:1px solid var(--rule-strong); border-radius:var(--radius); text-decoration:none;
  font-family:Archivo,sans-serif; font-weight:600; font-size:11.5px;
  letter-spacing:.04em; text-transform:uppercase; color:var(--ink-2); white-space:nowrap}
.btn:hover{border-color:var(--ink-3); color:var(--ink)}
.btn.primary{background:var(--blue); border-color:var(--blue); color:#fff}
.btn.primary:hover{filter:brightness(1.08); color:#fff}
.btn.red{background:var(--red); border-color:var(--red); color:#fff}
.btn.red:hover{filter:brightness(1.08); color:#fff}
.btn.danger{border-color:var(--red); color:var(--red)}
.btn.danger:hover{background:var(--red-soft)}
.btn[disabled]{opacity:.45; cursor:not-allowed}
:root[data-theme="dark"] .btn.primary, :root:not([data-theme="light"]) .btn.primary,
:root[data-theme="dark"] .btn.red, :root:not([data-theme="light"]) .btn.red{color:var(--paper)}

/* ---------- bandeau ---------- */
.banner{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 20px;
  background:var(--blue-soft); border-bottom:1px solid var(--rule); font-size:12px; color:var(--blue-ink)}
.banner b{font-family:"IBM Plex Mono",monospace; font-weight:500; font-size:10px; flex:none;
  letter-spacing:.12em; text-transform:uppercase; border:1px solid currentColor;
  padding:1px 6px; border-radius:2px}
.banner.warn{background:var(--warn-soft); color:var(--warn)}
.banner.err{background:var(--red-soft); color:var(--red)}

/* ---------- pastilles ---------- */
.chips{display:flex; flex-wrap:wrap; gap:5px}
.chip{padding:4px 10px; border:1px solid var(--rule-strong); border-radius:20px;
  font-size:12px; color:var(--ink-2)}
.chip:hover{border-color:var(--ink-3); color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--blue); border-color:var(--blue); color:#fff}
.chip[disabled]{opacity:.35; cursor:not-allowed}
:root[data-theme="dark"] .chip[aria-pressed="true"],
:root:not([data-theme="light"]) .chip[aria-pressed="true"]{color:var(--paper)}
.chip .nn{font-family:"IBM Plex Mono",monospace; font-size:9.5px; opacity:.6; margin-left:5px}

/* ---------- carte artiste (recherche + aperçu de l'éditeur) ---------- */
.card{display:flex; flex-direction:column; position:relative; background:var(--surface);
  border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; z-index:3;
  background:var(--fresh-c,var(--ok))}
.thumb{position:relative; aspect-ratio:16/9; width:100%; display:block; padding:0; border:none;
  overflow:hidden; background:var(--surface-2); border-bottom:1px solid var(--rule)}
.thumb img{width:100%; height:100%; object-fit:cover; display:block}
.thumb::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 120% at 50% 45%,transparent 52%,rgba(0,0,0,.38) 100%)}
.thumb.blank{background:repeating-linear-gradient(45deg,var(--surface-2),var(--surface-2) 9px,var(--surface) 9px,var(--surface) 18px)}
.thumb.blank::after{background:none}
.thumb .no{position:absolute; inset:0; display:grid; place-items:center; z-index:2;
  font-size:12px; color:var(--ink-3); text-align:center; padding:0 20px}
.play{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:42px; height:42px; border-radius:50%; z-index:2; background:rgba(18,20,19,.55);
  border:1.5px solid rgba(255,255,255,.85); display:grid; place-items:center; backdrop-filter:blur(3px);
  transition:transform .18s ease, background .18s ease}
.play::after{content:""; border-style:solid; border-width:7px 0 7px 12px;
  border-color:transparent transparent transparent #fff; margin-left:3px}
.thumb:hover .play{transform:translate(-50%,-50%) scale(1.1); background:rgba(18,20,19,.78)}
.src{position:absolute; left:8px; top:8px; z-index:2; font-family:"IBM Plex Mono",monospace;
  font-size:9.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  padding:2.5px 6px; border-radius:2px; background:rgba(16,18,17,.6); color:#fff;
  backdrop-filter:blur(3px); border:1px solid rgba(255,255,255,.22)}
.dur{position:absolute; right:8px; bottom:8px; z-index:2; font-family:"IBM Plex Mono",monospace;
  font-size:10.5px; padding:2px 6px; border-radius:2px; background:rgba(16,18,17,.72); color:#fff}
.fav{position:absolute; right:8px; top:8px; z-index:4; width:28px; height:28px; border-radius:var(--radius);
  display:grid; place-items:center; background:rgba(16,18,17,.55);
  border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(3px); color:#fff}
.fav:hover{background:rgba(16,18,17,.8)}
.fav[aria-pressed="true"]{background:var(--red); border-color:var(--red)}
.cbody{padding:11px 13px 12px; display:flex; flex-direction:column; gap:8px; flex:1}
.nm{font-family:Archivo,sans-serif; font-weight:600; font-size:15px; line-height:1.25; margin:0; text-wrap:balance}
.rl{font-size:12.5px; color:var(--blue-ink); font-weight:500; margin:-5px 0 0}
.styl{font-size:11.5px; color:var(--ink-3); margin:-6px 0 0; line-height:1.4}
.meta{display:flex; flex-wrap:wrap; gap:4px 6px; font-size:12px; color:var(--ink-2); align-items:center}
.lvl{font-family:"IBM Plex Mono",monospace; font-size:9.5px; font-weight:500; letter-spacing:.09em;
  text-transform:uppercase; padding:1.5px 5px; border-radius:2px;
  border:1px solid var(--rule-strong); color:var(--ink-2)}
.auths{display:flex; flex-wrap:wrap; gap:4px}
.au{font-family:"IBM Plex Mono",monospace; font-size:10px; font-weight:500;
  padding:1.5px 5px; border-radius:2px; letter-spacing:.05em}
.au.held{background:var(--ok-soft); color:var(--ok); border:1px solid color-mix(in srgb,var(--ok) 40%,transparent)}
.au.prog{background:var(--warn-soft); color:var(--warn); border:1px dashed color-mix(in srgb,var(--warn) 55%,transparent)}
.au.none{color:var(--ink-3); border:1px solid var(--rule-strong)}
.sw{display:flex; flex-wrap:wrap; gap:4px; margin-top:auto; padding-top:2px}
.sw span{font-size:11px; padding:1.5px 6px; border-radius:2px; background:var(--surface-2); color:var(--ink-2)}
.foot{display:flex; align-items:center; gap:6px; padding-top:8px; border-top:1px solid var(--rule);
  font-size:11.5px; color:var(--ink-3)}
.fresh{width:6px; height:6px; border-radius:50%; background:var(--fresh-c,var(--ok)); flex:none}

/* ---------- panneaux ---------- */
.panel{border:1px solid var(--rule); border-radius:var(--radius); background:var(--surface); padding:14px}
.panel.key{border-color:var(--rule-strong); box-shadow:var(--shadow)}
.panel h3{font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 10px; font-weight:500}
.dl{display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px 14px; margin:0; font-size:13px}
.dl dt{font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-3); padding-top:2px}
.dl dd{margin:0}

/* ---------- formulaires ---------- */
.field{display:flex; flex-direction:column; gap:5px; margin-bottom:14px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.lb{font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3); display:flex; align-items:center; gap:6px}
.lb .req{color:var(--red); font-size:11px}
.lb .opt{color:var(--ink-3); text-transform:none; letter-spacing:0; font-size:10.5px;
  font-family:"IBM Plex Sans",sans-serif; opacity:.85}
.in{width:100%; height:36px; padding:0 11px; background:var(--paper);
  border:1px solid var(--rule-strong); border-radius:var(--radius)}
textarea.in{height:auto; padding:9px 11px; resize:vertical; min-height:76px; line-height:1.5}
.in:focus{border-color:var(--blue); outline:none; box-shadow:0 0 0 3px var(--blue-soft)}
.in::placeholder{color:var(--ink-3)}
.help{font-size:11.5px; color:var(--ink-3); line-height:1.45; margin:0}
.counter{font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--ink-3);
  margin-left:auto; font-variant-numeric:tabular-nums}
.counter.over{color:var(--red)}
.seg{display:inline-flex; border:1px solid var(--rule-strong); border-radius:var(--radius); overflow:hidden}
.seg button{padding:5px 12px; font-size:11.5px; border-right:1px solid var(--rule-strong);
  color:var(--ink-2); white-space:nowrap}
.seg button:last-child{border-right:none}
.seg button:hover{background:var(--surface-2)}
.seg button[aria-pressed="true"]{background:var(--surface-2); color:var(--ink); font-weight:500}
.seg button[aria-pressed="true"][data-v="held"]{background:var(--ok); border-color:var(--ok); color:#fff}
.seg button[aria-pressed="true"][data-v="prog"]{background:var(--warn); border-color:var(--warn); color:#fff}
.grp{font-family:"IBM Plex Mono",monospace; font-size:9px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); margin:10px 0 5px}
.emptyspec{font-size:12px; color:var(--ink-3); font-style:italic; margin:0}

.spin{display:inline-block; width:13px; height:13px; border:2px solid var(--rule-strong);
  border-top-color:var(--blue); border-radius:50%; animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.center{max-width:440px; margin:0 auto; padding:48px 20px 70px}