@font-face { font-family: "Affiche"; src: url("/polices/InterDisplay-Black.otf") format("opentype"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Affiche"; src: url("/polices/InterDisplay-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/polices/Poppins-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/polices/Poppins-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

/* Plateau de télé-crochet de nuit : noir bleuté, LED bleues et violettes, couleurs Solana, or des tickets */
:root {
  --nuit: #070A18;
  --panneau: #0F1532;
  --panneau-2: #182150;
  --bord: #2C3B86;
  --texte: #EEF2FF;
  --doux: #9AA6D6;
  --bleu: #2F7BFF;
  --cyan: #5FD4FF;
  --violet: #9945FF;
  --vert: #19FB9B;
  --rose: #FF4FA0;
  --lampe: #FF3B5C;
  --or: #FFC94A;
  --brume: #9AA6D6;
  --degrade: linear-gradient(90deg, #9945FF, #2F7BFF 55%, #19FB9B);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(47, 123, 255, .22), transparent 70%),
    radial-gradient(ellipse 40% 30% at 0% 30%, rgba(153, 69, 255, .14), transparent 70%),
    var(--nuit);
  color: var(--texte);
  font: 500 16px/1.5 "Poppins", system-ui, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
h1, h2, h3 { font-family: "Affiche", "Poppins", sans-serif; font-weight: 900; line-height: 1.1; margin: 0 0 .5em; }

/* ------------------------------------------------ boutons */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em; text-decoration: none;
  border: 0; border-radius: 12px; padding: .7em 1.4em; background: var(--degrade); color: #fff; font-weight: 700;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset, 0 6px 22px rgba(47, 123, 255, .35);
  transition: transform .08s, filter .15s;
}
.bouton:hover { filter: brightness(1.12); }
.bouton:active { transform: translateY(2px); }
.bouton:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.bouton.grand { font-size: 1.1rem; padding: .9em 1.6em; width: 100%; }
.bouton.petit { font-size: .9rem; padding: .45em 1em; }
.bouton.secondaire { background: var(--panneau-2); box-shadow: 0 0 0 1px var(--bord) inset; }
.bouton.or { background: linear-gradient(180deg, #FFE08A, #F2B33D); color: #2A1B00; box-shadow: 0 6px 22px rgba(255, 201, 74, .35); }
.bouton.appel { animation: appel 1s infinite; }
@keyframes appel { 50% { box-shadow: 0 0 0 4px rgba(255, 59, 92, .5), 0 0 30px rgba(255, 59, 92, .7); } }
.lien { background: none; border: 0; color: var(--doux); text-decoration: underline; padding: .3em 0; }

/* ------------------------------------------------ en-tête */
.haut { display: flex; align-items: center; gap: 14px; padding: 14px 24px; max-width: 1480px; margin: 0 auto; }
.marque {
  font: italic 900 2rem/1 "Affiche", sans-serif; color: #fff; text-decoration: none; letter-spacing: .01em;
  text-shadow: 0 0 14px rgba(95, 212, 255, .7);
}
.marque span {
  font-style: normal; font-size: .62em; letter-spacing: .28em; vertical-align: .25em; margin-right: .2em;
  background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
}
.direct {
  display: inline-flex; align-items: center; gap: .45em; padding: .25em .7em; border-radius: 8px;
  background: rgba(255, 59, 92, .15); color: #FF8DA1; font-weight: 700; font-size: .85rem; border: 1px solid rgba(255, 59, 92, .5);
}
.direct i { width: 8px; height: 8px; border-radius: 50%; background: var(--lampe); box-shadow: 0 0 8px var(--lampe); animation: clignote 1.4s infinite; }
@keyframes clignote { 50% { opacity: .3; } }
.en-ligne { margin: 0 auto 0 0; color: var(--doux); font-size: .9rem; }
.bouton-musique { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--bord); background: var(--panneau); font-size: 1.1rem; display: grid; place-items: center; flex: none; }
.bouton-musique[aria-pressed=true] { opacity: .6; }
.bouton-musique.a-activer { width: auto; padding: 0 12px; font-weight: 700; font-size: .85rem; color: var(--texte); white-space: nowrap;
  border-color: var(--or, #FFC94A); animation: appel-son 1.6s ease-in-out infinite; }
@media (max-width: 560px) { .bouton-musique.a-activer { width: 42px; padding: 0; } .libelle-son { display: none; } }
@keyframes appel-son { 50% { box-shadow: 0 0 0 4px rgba(255, 201, 74, .25); } }
@media (prefers-reduced-motion: reduce) { .bouton-musique.a-activer { animation: none; } }
.bouton-wallet {
  display: flex; align-items: center; gap: .6em; border: 1px solid var(--bord); background: var(--panneau);
  border-radius: 12px; padding: .35em .9em .35em .35em; font-weight: 700;
}
.bouton-wallet:not(.connecte) { padding: .6em 1.1em; background: var(--degrade); border: 0; }
.bouton-wallet .avatar { width: 32px; height: 32px; }

/* ------------------------------------------------ plateau */
.plateau { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; padding: 4px 24px 0; max-width: 1480px; margin: 0 auto; }
.colonne-studio { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cadre-studio { border-radius: 20px; overflow: hidden; background: #04060F; box-shadow: 0 0 0 1px var(--bord), 0 20px 60px rgba(47, 123, 255, .18); }
.barre-action {
  background: var(--panneau); border: 1px solid var(--bord); border-radius: 16px; box-shadow: 0 0 30px rgba(47, 123, 255, .12) inset;
  padding: 16px 20px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; min-height: 86px;
}
.barre-action h3 { font-size: 1.45rem; margin: 0; }
.barre-action p { margin: 0; color: var(--doux); }
.barre-action .texte { flex: 1 1 280px; }
.barre-action .actions { display: flex; gap: 10px; flex-wrap: wrap; }
.extrait-titre { font: 900 1.2rem "Affiche"; color: var(--or); }
.tirage { display: block; font: 600 .78rem "Poppins", sans-serif; color: var(--doux); text-transform: uppercase; letter-spacing: .08em; }
.vignette-meme { width: 84px; height: 84px; border-radius: 14px; object-fit: cover; flex: none; box-shadow: 0 0 0 1px var(--bord), 0 8px 24px rgba(0,0,0,.35); background: var(--panneau-2); }
@media (max-width: 560px) { .vignette-meme { width: 64px; height: 64px; border-radius: 12px; } }
.compte { font: 900 3.2rem/1 "Affiche"; color: var(--cyan); min-width: 1.2em; text-align: center; text-shadow: 0 0 18px var(--bleu); }
.liste-extraits { display: flex; gap: 10px; flex-wrap: wrap; width: 100%; }
.liste-extraits button {
  display: flex; align-items: center; gap: 10px; text-align: left; background: var(--panneau-2); border: 1px solid var(--bord);
  border-radius: 12px; padding: 6px 12px 6px 6px; font-weight: 700;
}
.liste-extraits button:hover { border-color: var(--cyan); box-shadow: 0 0 16px rgba(95, 212, 255, .35); }
.liste-extraits img, .liste-extraits .pochette-vide { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--degrade); flex: none; }
.liste-extraits small { display: block; color: var(--doux); font-weight: 500; }
.notes-verdict { display: grid; grid-template-columns: auto 160px auto; gap: 4px 12px; align-items: center; font-size: .9rem; }
.grande-note { font: 900 3.2rem/1 "Affiche"; color: var(--or); text-shadow: 0 0 18px rgba(255, 201, 74, .5); }
.grande-note small { font-size: 1.1rem; color: var(--doux); }
.barre-note { height: 8px; border-radius: 4px; background: var(--panneau-2); overflow: hidden; }
.barre-note i { display: block; height: 100%; background: var(--degrade); }
.reactions { display: flex; gap: 8px; justify-content: center; }
.reactions button { font-size: 1.45rem; width: 52px; height: 52px; border-radius: 14px; border: 1px solid var(--bord); background: var(--panneau); }
.reactions button:hover { box-shadow: 0 0 16px rgba(95, 212, 255, .35); }
.reactions button:active { transform: scale(.92); }

/* ------------------------------------------------ colonne de droite */
.cote { display: flex; flex-direction: column; gap: 16px; }
.carte { background: var(--panneau); border: 1px solid var(--bord); border-radius: 16px; padding: 16px 18px; }
.carte h2 { font-size: 1.05rem; margin-bottom: .6em; color: var(--cyan); }
.moi .statut { font: 900 1.5rem "Affiche"; margin: 0 0 4px; }
.moi p { margin: 0 0 12px; color: var(--doux); }
.journal, .file { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 260px; overflow: auto; }
.journal li { font-size: .9rem; line-height: 1.35; padding-left: 10px; border-left: 3px solid var(--c, var(--bord)); color: #D3DAF5; }
.journal li b { color: var(--c, #fff); }
.journal li.vide, .file li.vide { border: 0; padding: 0; color: var(--doux); }
.file li { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.file li .avatar { width: 32px; height: 32px; flex: none; }
.avatar.portrait { border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); background: #1A1850; }
.file li small { display: block; color: var(--doux); font-weight: 500; line-height: 1.2; }
.file li.moi-meme { color: var(--or); }
.dernier:empty { display: none; }
.dernier a { color: var(--cyan); font-weight: 700; }
.dernier p { margin: 0 0 6px; color: #D3DAF5; }

/* ------------------------------------------------ règles */
.regles { max-width: 1480px; margin: 34px auto 48px; padding: 0 24px; }
.regles ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: etape; }
.regles li { counter-increment: etape; background: var(--panneau); border: 1px solid var(--bord); border-radius: 16px; padding: 16px 18px; color: var(--doux); font-size: .95rem; }
.regles li::before { content: counter(etape); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--degrade); color: #fff; font: 900 1.1rem "Affiche"; margin-bottom: 10px; }
.regles b { display: block; color: #fff; font: 900 1.1rem "Affiche"; margin-bottom: 4px; }

/* ------------------------------------------------ fenêtres */
.fenetre { background: var(--panneau); color: var(--texte); border: 1px solid var(--bord); border-radius: 20px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 40px rgba(47, 123, 255, .2); padding: 26px; width: min(92vw, 520px); }
.fenetre::backdrop { background: rgba(3, 5, 14, .8); backdrop-filter: blur(3px); }
.fenetre p { color: var(--doux); }
.liste-wallets { display: grid; gap: 12px; margin: 18px 0 6px; }
.erreur { color: #FF8DA1; min-height: 1.5em; font-weight: 700; }
.form-token { display: grid; gap: 12px; }
.form-token label { display: grid; gap: 4px; font-weight: 700; font-size: .9rem; }
.form-token input, .form-token textarea {
  font: 500 1rem "Poppins"; color: #fff; background: var(--nuit); border: 1px solid var(--bord); border-radius: 10px; padding: .6em .8em;
}
.ligne-image { display: flex; gap: 16px; align-items: center; }
.ligne-image img { border-radius: 14px; background: var(--nuit); object-fit: cover; border: 1px solid var(--bord); }
.ligne-image > div { display: grid; gap: 6px; justify-items: start; }
.note-site { font-size: .85rem; margin: 0; }
.etape-token { min-height: 1.5em; color: var(--or); margin: 0; font-weight: 700; }
.etape-token a { color: var(--cyan); }
.clip-pret:empty { display: none; }
.clip-pret { margin-top: 16px; padding: 14px; border-radius: 12px; background: var(--nuit); border: 1px dashed var(--bord); }
.clip-pret .rangee { display: flex; gap: 10px; flex-wrap: wrap; }
.clip-pret p { margin: 0 0 6px; }
.clip-pret .petit-texte { font-size: .85rem; color: var(--doux, #9AA6D6); margin: 0; }
.fermer { margin-top: 10px; }
.coulisses-intro b { color: var(--or); }
.regle-nom { margin: 4px 0 6px; font-size: .9rem; color: #C9D3F5; }
.regle-nom b { color: var(--or); }
.idees-nom { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.idee { font: 600 .82rem "Poppins", sans-serif; color: #fff; background: #18214A; border: 1px solid var(--bord); border-radius: 999px; padding: 5px 11px; cursor: pointer; }
.idee:hover { border-color: var(--or); }
.idee b { color: var(--or); font-weight: 700; }
.verif-nom { min-height: 1.2em; margin: 0; font-size: .85rem; }
.verif-nom.ok { color: #43D9AD; }
.verif-nom.non { color: #FF7A8C; }
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 160%); background: var(--panneau-2); color: #fff;
  border: 1px solid var(--cyan); box-shadow: 0 0 24px rgba(95, 212, 255, .35); font-weight: 700; padding: 10px 20px; border-radius: 14px;
  transition: transform .3s; z-index: 50; width: max-content; max-width: min(92vw, 520px); text-align: center;
}
.toast.visible { transform: translate(-50%, 0); }

.volee { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.emoji-volant { position: absolute; font-size: 1.7rem; transform: translate(-50%, -50%); animation: vole 1.8s ease-out forwards; }
@keyframes vole { from { opacity: 1; margin-top: 0; } to { opacity: 0; margin-top: -140px; font-size: 2.4rem; } }

/* ------------------------------------------------ page d'un passage (/p/id) */
.page-passage { display: grid; place-items: start center; }
.passage { width: min(100%, 480px); padding: 24px 16px 60px; display: grid; gap: 14px; text-align: center; }
.passage .logo { font: 900 1.6rem "Affiche"; color: #fff; text-decoration: none; }
.passage .clip { width: 100%; aspect-ratio: 9 / 16; border-radius: 22px; background: #000; }
.passage .clip-attente { display: grid; place-items: center; padding: 30px; color: var(--brume); }
.passage h1 { font-size: 1.8rem; margin: 0; }
.passage h1 small { display: block; font: 500 .9rem "Poppins"; color: var(--brume); }
.passage .sous { margin: 0; color: var(--or); font-weight: 700; }
.passage .score { margin: 0; font-size: 1.1rem; }
.passage .score b { font: 900 2.4rem "Affiche"; color: var(--or); }
.passage .mint code { font-size: .75rem; word-break: break-all; color: var(--brume); }
.passage .actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.passage .cta { margin-top: 10px; }

/* ================================================= studio voxel */
.studio { position: relative; width: 100%; }
.studio-canvas { display: block; }
.studio-calques { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.logo-mur {
  position: absolute; left: 0; top: 0; transform-origin: 0 0; text-align: center; color: #fff;
  display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 10px 24px;
}
.logo-solana {
  margin: 0; font: 900 84px/1 "Affiche", sans-serif; letter-spacing: .32em; padding-left: .32em;
  background: linear-gradient(90deg, #9945FF, #19FB9B); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 14px rgba(153, 69, 255, .65));
}
.logo-idol {
  margin: -6px 0 0; font: italic 900 165px/.95 "Affiche", sans-serif; letter-spacing: .02em; color: #fff;
  text-shadow: 0 0 18px #5FD4FF, 0 0 46px #2F7BFF, 6px 6px 0 #8A4BFF;
}
.plaque {
  position: absolute; transform: translate(-50%, 0); white-space: nowrap; padding: .15em .6em; border-radius: .4em;
  background: rgba(10, 14, 34, .88); color: #fff; font: 700 12px "Poppins", sans-serif; border-bottom: 3px solid var(--c);
}
.plaque.non { opacity: .55; }
.plaque { transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), box-shadow .35s; z-index: 2; }
.plaque.presente { transform: translate(-50%, 0) scale(1.6); box-shadow: 0 0 16px var(--c), 0 0 3px #fff inset; z-index: 4; }
.lampe {
  position: absolute; transform: translate(-50%, -100%) scale(0); background: linear-gradient(180deg, #FFE08A, #F2B33D); color: #2A1B00; padding: .1em .7em;
  border-radius: 999px; font: 900 14px "Affiche", sans-serif; box-shadow: 0 0 22px #FFC94A, 0 0 4px #fff inset;
  transition: transform .3s cubic-bezier(.3, 1.6, .5, 1);
}
.lampe.allumee { transform: translate(-50%, -100%) scale(1); }
.bulle {
  position: absolute; transform: translate(-50%, -100%) scale(.6); opacity: 0; width: max-content; max-width: 230px;
  background: #fff; color: #1B1530; padding: .6em .85em; border-radius: 14px; border: 3px solid var(--c);
  font: 700 13px/1.35 "Poppins", sans-serif; transition: opacity .2s, transform .25s cubic-bezier(.3, 1.5, .5, 1); z-index: 3;
}
.bulle::after { content: ""; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); border: 8px solid transparent; border-top-color: var(--c); border-bottom: 0; }
.bulle.visible { opacity: 1; transform: translate(-50%, -100%) scale(1); }
.etiquette-chanteur {
  position: absolute; transform: translate(-50%, -100%); background: var(--degrade); color: #fff; padding: .2em .8em;
  border-radius: 999px; font: 700 13px "Poppins", sans-serif; white-space: nowrap; box-shadow: 0 0 16px rgba(153, 69, 255, .6);
}
.ondes { position: absolute; width: 0; height: 0; opacity: 0; transition: opacity .2s; }
.ondes.actives { opacity: 1; }
.ondes i {
  position: absolute; left: 50%; top: 50%; border: 3px solid rgba(255, 59, 92, .8); border-radius: 50%;
  width: calc(var(--S) * 8); height: calc(var(--S) * 8); transform: translate(-50%, -50%) scale(calc(.6 + var(--n, 0) * 1.4));
  animation: onde 1.2s infinite ease-out;
}
.ondes i:nth-child(2) { animation-delay: .4s; } .ondes i:nth-child(3) { animation-delay: .8s; }
@keyframes onde { from { opacity: .9; } to { opacity: 0; width: calc(var(--S) * 16); height: calc(var(--S) * 16); } }
.etiquette-file, .etiquette-public {
  position: absolute; transform: translate(-50%, -100%); background: rgba(10, 14, 34, .88); color: #fff; padding: .2em .7em; border: 1px solid var(--bord);
  border-radius: 8px; font: 700 12px "Poppins", sans-serif; white-space: nowrap;
}

/* studio en cadrage serré (téléphone) : on garde l'essentiel */
.studio.serre .plaque { font-size: 9px !important; padding: .1em .45em; border-bottom-width: 2px; }
.studio.serre .plaque.presente { transform: translate(-50%, 0) scale(1.2); }
.studio.serre .etiquette-file, .studio.serre .etiquette-public { font-size: 10px; }
.studio.serre .bulle { max-width: 170px; font-size: 11.5px; }
.studio.serre .etiquette-chanteur { font-size: 11px; }
.direct { white-space: nowrap; }

/* ------------------------------------------------ mobile */
@media (max-width: 980px) {
  .plateau { grid-template-columns: 1fr; padding: 0 10px; gap: 12px; }
  .haut { padding: 10px 12px; gap: 10px; }
  .marque { font-size: 1.45rem; }
  .en-ligne { display: none; }
  .direct { margin-right: auto; font-size: .75rem; }
  .bouton-wallet.connecte span { display: none; }
  .bouton-wallet.connecte { padding: .3em; }
  .cadre-studio { border-radius: 14px; margin: 0 -4px; }
  .barre-action { padding: 12px 14px; gap: 12px; }
  .barre-action h3 { font-size: 1.2rem; }
  .barre-action .actions { width: 100%; }
  .barre-action .actions .bouton { flex: 1; }
  .reactions button { width: 46px; height: 46px; font-size: 1.3rem; }
  .regles ol { grid-template-columns: 1fr 1fr; }
  .notes-verdict { grid-template-columns: auto 1fr auto; width: 100%; }
}
@media (max-width: 520px) { .regles ol { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* écoute de l'extrait : lecture, retour en arrière, position */
.onde { display: block; width: 100%; height: 64px; margin-top: 10px; border-radius: 10px; background: rgba(4, 6, 15, .55); cursor: pointer; touch-action: none; }
.onde-prise { flex: 1 1 100%; height: 72px; cursor: default; }
.lecteur { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.lecteur input[type=range] { flex: 1 1 160px; min-width: 0; accent-color: var(--cyan); }
#ecoute-reste { color: var(--or); font-variant-numeric: tabular-nums; }
.identite { margin: 10px 0 0; font-size: .85rem; color: var(--doux); }
.identite b { color: var(--texte); }
#fenetre-pseudo .lien { justify-self: center; }

/* grand compte à rebours sur le plateau */
.compte-geant { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px;
  background: radial-gradient(circle at 50% 50%, rgba(7, 10, 24, .55), rgba(7, 10, 24, 0) 60%); z-index: 4; }
.compte-geant small { font: 700 clamp(14px, 2vw, 20px) "Poppins", sans-serif; color: #fff; text-shadow: 0 2px 10px #000; }
.compte-geant b { font: 900 clamp(90px, 16vw, 200px)/1 "Affiche", sans-serif; color: #fff;
  text-shadow: 0 0 30px var(--cyan), 0 0 70px var(--bleu), 8px 8px 0 var(--violet); }
.compte-geant b.pop { animation: pop .9s ease-out; }
@keyframes pop { 0% { transform: scale(1.6); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 100% { transform: scale(.92); opacity: .9; } }

.micro-etat { margin: 10px 0 0; display: grid; gap: 6px; justify-items: start; font-size: .85rem; }
.micro-etat.ok { color: var(--vert); font-weight: 700; }
.aide-micro { color: #FFB4BF; line-height: 1.4; }

/* voyant d'enregistrement sur le plateau */
.rec { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; border-radius: 999px; background: rgba(20, 4, 10, .82); border: 2px solid #FF3B5C; z-index: 4;
  box-shadow: 0 0 24px rgba(255, 59, 92, .6); color: #fff; font: 900 15px "Affiche", sans-serif; letter-spacing: .08em; }
.rec-point { width: 14px; height: 14px; border-radius: 50%; background: #FF3B5C; box-shadow: 0 0 12px #FF3B5C; animation: rec 1s infinite; }
.rec-barre { width: 120px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.rec-barre i { display: block; height: 100%; width: 0; background: #FF3B5C; }
@keyframes rec { 50% { opacity: .25; transform: scale(.8); } }
.rec-texte { color: #FF3B5C; animation: clignote 1s infinite; margin-right: 6px; }
.studio.serre .rec { font-size: 11px; padding: 5px 10px; } .studio.serre .rec-barre { width: 70px; }
.rec[hidden], .compte-geant[hidden] { display: none; }

.note-lien { font-size: .85rem; color: var(--doux); margin: 4px 0 0; }
.resultat-test { font-size: .85rem; min-height: 1em; }

/* délibération : bulles « … » au-dessus des juges */
.bulle.reflexion { display: flex; gap: 5px; padding: .55em .8em; width: auto; }
.bulle.reflexion i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); animation: pense 1s infinite; }
.bulle.reflexion i:nth-child(2) { animation-delay: .15s; } .bulle.reflexion i:nth-child(3) { animation-delay: .3s; }
@keyframes pense { 0%, 100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-5px); opacity: 1; } }
.delib-texte::after { content: ''; animation: points 1.2s steps(4) infinite; }
@keyframes points { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }


/* ================================================= thèmes visuels (aperçu : ?theme=…) */
@font-face { font-family: "Archivo Black"; src: url("/polices/themes/ArchivoBlack-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/polices/themes/JetBrainsMono.ttf") format("truetype"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "Bungee"; src: url("/polices/themes/Bungee-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Bungee Shade"; src: url("/polices/themes/BungeeShade-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "VT323"; src: url("/polices/themes/VT323-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Pixelify Sans"; src: url("/polices/themes/PixelifySans.ttf") format("truetype"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Dela Gothic One"; src: url("/polices/themes/DelaGothicOne-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Permanent Marker"; src: url("/polices/themes/PermanentMarker-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Rubik Spray Paint"; src: url("/polices/themes/RubikSprayPaint-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Oswald"; src: url("/polices/themes/Oswald.ttf") format("truetype"); font-weight: 200 700; font-display: swap; }

/* --- 1. studio de doublage : bois, mousse acoustique, ambre et rouge ON AIR */
:root[data-theme="doublage"] {
  --nuit: #0E0B0A; --panneau: #17120F; --panneau-2: #221A15; --bord: #3E3128; --texte: #F3EDE6; --doux: #B3A496; --brume: #B3A496;
  --bleu: #FFB347; --cyan: #FFB347; --violet: #FF4A3D; --vert: #FFB347; --rose: #FF4A3D; --lampe: #FF3B30; --or: #FFC23D;
  --degrade: linear-gradient(90deg, #FF4A3D, #FF7A3D 55%, #FFB347); --titre: "Archivo Black";
}
:root[data-theme="doublage"] body { background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255, 150, 70, .16), transparent 70%), var(--nuit); }
[data-theme="doublage"] .logo-solana { font: 700 58px/1 "JetBrains Mono", monospace; letter-spacing: .5em; padding-left: .5em; background: none; color: #FFB347; -webkit-text-fill-color: #FFB347; filter: drop-shadow(0 0 10px rgba(255, 179, 71, .6)); }
[data-theme="doublage"] .logo-idol { font: 400 150px/1 "Archivo Black", sans-serif; font-style: normal; letter-spacing: .01em; color: #F6F1EA; text-shadow: 0 0 28px rgba(255, 190, 110, .45), 0 6px 0 #000; }
[data-theme="doublage"] .logo-mur::after { content: "SCENE 01 · TAKE 3 · TC 00:00:03:12"; margin-top: 18px; font: 500 26px "JetBrains Mono", monospace; letter-spacing: .1em; color: #8FA3B8; white-space: nowrap; }

/* --- 2. jeu télé rétro : bleu roi, or, rouge, ampoules */
:root[data-theme="tele"] {
  --nuit: #07103C; --panneau: #0D1A5C; --panneau-2: #14298F; --bord: #3552D6; --texte: #FFF7E6; --doux: #C3CCFF; --brume: #C3CCFF;
  --bleu: #FFC93C; --cyan: #FFE08A; --violet: #C41E3A; --vert: #FFC93C; --rose: #FF5FA2; --lampe: #FF4B5C; --or: #FFC93C;
  --degrade: linear-gradient(90deg, #C41E3A, #E8452E 50%, #FFC93C); --titre: "Bungee";
}
:root[data-theme="tele"] body { background: radial-gradient(ellipse 60% 45% at 50% 0%, rgba(255, 201, 60, .18), transparent 70%), radial-gradient(ellipse 50% 40% at 0% 40%, rgba(196, 30, 58, .25), transparent 70%), var(--nuit); }
[data-theme="tele"] .logo-solana { font: 400 70px/1 "Bungee", sans-serif; letter-spacing: .35em; padding-left: .35em; background: none; color: #FFF7E6; -webkit-text-fill-color: #FFF7E6; filter: none; text-shadow: 4px 4px 0 #C41E3A; }
[data-theme="tele"] .logo-idol { font: 400 150px/1 "Bungee Shade", "Bungee", sans-serif; font-style: normal; color: #FFC93C; text-shadow: 0 0 30px rgba(255, 201, 60, .55); }

/* --- 3. internet vaporwave / Windows 98 */
:root[data-theme="vaporwave"] {
  --nuit: #12042A; --panneau: #1E0A40; --panneau-2: #2B0F54; --bord: #6A35A0; --texte: #FDF0FF; --doux: #CFB2EC; --brume: #CFB2EC;
  --bleu: #01CDFE; --cyan: #01CDFE; --violet: #FF71CE; --vert: #05FFA1; --rose: #FF71CE; --lampe: #FF71CE; --or: #FFE36E;
  --degrade: linear-gradient(90deg, #FF71CE, #B967FF 50%, #01CDFE); --titre: "Pixelify Sans";
}
:root[data-theme="vaporwave"] body { background: radial-gradient(ellipse 70% 45% at 50% 0%, rgba(255, 113, 206, .22), transparent 70%), radial-gradient(ellipse 50% 40% at 100% 60%, rgba(1, 205, 254, .14), transparent 70%), var(--nuit); }
[data-theme="vaporwave"] .logo-solana { font: 400 92px/1 "VT323", monospace; letter-spacing: .4em; padding-left: .4em; background: none; color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; filter: none; text-shadow: 4px 0 0 #FF71CE, -4px 0 0 #01CDFE, 0 6px 0 #12042A; }
[data-theme="vaporwave"] .logo-idol { font: 700 150px/1 "Pixelify Sans", sans-serif; font-style: normal; color: #FFFFFF; text-shadow: 7px 0 0 #FF71CE, -7px 0 0 #01CDFE, 0 10px 0 #12042A, 0 0 40px rgba(18, 4, 42, .9); }

/* --- 4. bar karaoké de Tokyo : bois sombre, néons rose et cyan */
:root[data-theme="karaoke"] {
  --nuit: #0A0517; --panneau: #140A28; --panneau-2: #1E1038; --bord: #3E2B66; --texte: #F7EEFF; --doux: #B19CD3; --brume: #B19CD3;
  --bleu: #29E7FF; --cyan: #29E7FF; --violet: #FF3EA5; --vert: #29E7FF; --rose: #FF3EA5; --lampe: #FF3EA5; --or: #FFD36E;
  --degrade: linear-gradient(90deg, #FF3EA5, #C25BFF 50%, #29E7FF); --titre: "Dela Gothic One";
}
:root[data-theme="karaoke"] body { background: radial-gradient(ellipse 60% 40% at 30% 0%, rgba(255, 62, 165, .18), transparent 70%), radial-gradient(ellipse 50% 40% at 100% 30%, rgba(41, 231, 255, .12), transparent 70%), var(--nuit); }
[data-theme="karaoke"] .logo-solana { font: 400 70px/1 "Dela Gothic One", sans-serif; letter-spacing: .42em; padding-left: .42em; background: none; color: #DFFBFF; -webkit-text-fill-color: #DFFBFF; filter: none; text-shadow: 0 0 6px #29E7FF, 0 0 22px #29E7FF, 0 0 46px rgba(41, 231, 255, .7); }
[data-theme="karaoke"] .logo-idol { font: 400 140px/1.05 "Dela Gothic One", sans-serif; font-style: normal; color: #FFE3F2; text-shadow: 0 0 8px #FF3EA5, 0 0 28px #FF3EA5, 0 0 60px rgba(255, 62, 165, .75); }

/* --- 5. arène de rap battle : béton, jaune de chantier, orange sodium */
:root[data-theme="rap"] {
  --nuit: #0E0E0F; --panneau: #18181A; --panneau-2: #232325; --bord: #3E3E40; --texte: #F2F2EE; --doux: #A9A9A2; --brume: #A9A9A2;
  --bleu: #F5E023; --cyan: #F5E023; --violet: #FF6A1A; --vert: #F5E023; --rose: #FF6A1A; --lampe: #FF6A1A; --or: #F5E023;
  --degrade: linear-gradient(90deg, #FF6A1A, #F5E023); --titre: "Oswald";
}
:root[data-theme="rap"] body { background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255, 160, 80, .14), transparent 70%), var(--nuit); }
[data-theme="rap"] .logo-solana { font: 400 74px/1 "Permanent Marker", cursive; letter-spacing: .25em; padding-left: .25em; background: none; color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; filter: none; text-shadow: 4px 4px 0 #0E0E0F; transform: rotate(-4deg); }
[data-theme="rap"] .logo-idol { font: 400 160px/1 "Rubik Spray Paint", "Permanent Marker", sans-serif; font-style: normal; color: #F5E023; -webkit-text-stroke: 4px #0E0E0F; text-shadow: 8px 8px 0 #0E0E0F; transform: rotate(-4deg); }

/* --- éléments de page communs à tous les thèmes */
:root[data-theme] h1, :root[data-theme] h2, :root[data-theme] h3 { font-family: var(--titre), "Affiche", sans-serif; font-weight: 400; }
:root[data-theme="rap"] h1, :root[data-theme="rap"] h2, :root[data-theme="rap"] h3 { font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
:root[data-theme="vaporwave"] h1, :root[data-theme="vaporwave"] h2, :root[data-theme="vaporwave"] h3 { font-weight: 700; }
:root[data-theme] .cadre-studio { box-shadow: 0 0 0 1px var(--bord), 0 20px 60px rgba(0, 0, 0, .45); }
:root[data-theme="doublage"] .marque { font: 400 1.9rem/1 "Archivo Black", sans-serif; font-style: normal; text-shadow: none; }
:root[data-theme="doublage"] .marque span { font-family: "JetBrains Mono", monospace; font-weight: 700; }
:root[data-theme="tele"] .marque { font: 400 1.9rem/1 "Bungee", sans-serif; font-style: normal; color: #FFC93C; text-shadow: 3px 3px 0 #C41E3A; }
:root[data-theme="tele"] .marque span { background: none; color: #FFF7E6; -webkit-text-fill-color: #FFF7E6; font-size: .62em; }
:root[data-theme="vaporwave"] .marque { font: 700 2rem/1 "Pixelify Sans", sans-serif; font-style: normal; text-shadow: 3px 0 0 #FF71CE, -3px 0 0 #01CDFE; }
:root[data-theme="vaporwave"] .marque span { font-family: "VT323", monospace; font-size: .8em; }
:root[data-theme="karaoke"] .marque { font: 400 1.8rem/1 "Dela Gothic One", sans-serif; font-style: normal; color: #FFE3F2; text-shadow: 0 0 10px #FF3EA5, 0 0 24px rgba(255, 62, 165, .7); }
:root[data-theme="karaoke"] .marque span { background: none; color: #DFFBFF; -webkit-text-fill-color: #DFFBFF; text-shadow: 0 0 10px #29E7FF; }
:root[data-theme="rap"] .marque { font: 400 2rem/1 "Rubik Spray Paint", "Permanent Marker", sans-serif; font-style: normal; color: #F5E023; text-shadow: 3px 3px 0 #000; }
:root[data-theme="rap"] .marque span { background: none; color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; font-family: "Permanent Marker", cursive; letter-spacing: .1em; }
:root[data-theme="rap"] .bouton, :root[data-theme="rap"] .bouton-wallet:not(.connecte), :root[data-theme="tele"] .bouton-wallet:not(.connecte) { color: #121212; }
:root[data-theme="rap"] .bouton:not(.secondaire), :root[data-theme="rap"] .bouton-wallet:not(.connecte) { border-radius: 4px; text-transform: uppercase; font-family: "Oswald", sans-serif; font-weight: 700; letter-spacing: .05em; }
:root[data-theme="tele"] .bouton:not(.secondaire) { border-radius: 999px; font-family: "Bungee", sans-serif; font-weight: 400; box-shadow: 0 5px 0 #8E1520; }
:root[data-theme="vaporwave"] .bouton:not(.secondaire) { border-radius: 4px; }
:root[data-theme="karaoke"] .bouton:not(.secondaire) { box-shadow: 0 0 22px rgba(255, 62, 165, .5); }

/* --- studio de doublage : détails du plateau */
[data-theme="doublage"] .lampe { background: #7BE36A; color: #0B1A08; font: 700 14px "JetBrains Mono", monospace; letter-spacing: .12em; border-radius: 6px; box-shadow: 0 0 22px rgba(123, 227, 106, .8), 0 0 3px #fff inset; }
[data-theme="doublage"] .compte-geant b { font-family: "Archivo Black", sans-serif; font-weight: 400; }
[data-theme="doublage"] .compte-geant small { font-family: "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
[data-theme="doublage"] .rec b { font-family: "JetBrains Mono", monospace; letter-spacing: .14em; }

[hidden] { display: none !important; }

/* --- token lancé : grande fête pour le créateur, bannière pour tout le studio */
.fenetre-fete { width: min(94vw, 480px); text-align: center; overflow: hidden; position: relative; padding: 34px 26px 22px;
  border-color: var(--or); box-shadow: 0 0 0 1px rgba(255, 194, 61, .35), 0 30px 90px rgba(0, 0, 0, .7), 0 0 80px rgba(255, 170, 60, .35); }
.fenetre-fete[open] { animation: fete-entree .55s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes fete-entree { from { transform: scale(.6) translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.fenetre-fete > :not(.fete-pluie) { position: relative; z-index: 1; }
.fete-surtitre { margin: 0 0 14px; font: 700 .95rem "JetBrains Mono", ui-monospace, monospace; letter-spacing: .32em; color: var(--lampe, #FF3B30) !important;
  text-shadow: 0 0 12px rgba(255, 59, 48, .6); animation: clignote 1.1s steps(2) 3; }
.fete-medaille { width: 148px; height: 148px; margin: 0 auto 14px; border-radius: 50%; padding: 8px;
  background: conic-gradient(from 0deg, #FFE08A, #F2B33D, #FFF4C8, #E39A1E, #FFE08A); animation: fete-tourne 4s linear infinite, fete-pulse 1.4s ease-in-out infinite;
  box-shadow: 0 0 40px rgba(255, 194, 61, .55); }
.fete-medaille img { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; display: block; background: var(--panneau-2); animation: fete-tourne 4s linear infinite reverse; }
@keyframes fete-tourne { to { transform: rotate(360deg); } }
@keyframes fete-pulse { 50% { box-shadow: 0 0 70px rgba(255, 194, 61, .85); } }
.fete-ticker { margin: 0; font: 400 clamp(2.4rem, 11vw, 3.6rem)/1 var(--titre, "Affiche"), sans-serif; color: var(--or);
  text-shadow: 0 0 24px rgba(255, 194, 61, .55), 0 4px 0 #000; white-space: nowrap; animation: fete-ticker .7s .25s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes fete-ticker { from { transform: scale(2.2); opacity: 0; letter-spacing: .3em; } to { transform: none; opacity: 1; } }
.fete-nom { margin: 6px 0 4px; font-weight: 800; color: var(--texte) !important; font-size: 1.1rem; }
.fete-texte { margin: 0 0 16px; }
.fete-ca { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 0 0 16px; }
.fete-ca code { font: 500 .85rem "JetBrains Mono", ui-monospace, monospace; background: var(--panneau-2); border: 1px solid var(--bord); border-radius: 8px; padding: .45em .7em; color: var(--texte); }
.fete-pump { margin-bottom: 12px; font-size: 1.15rem; }
.fete-actions { justify-content: center; gap: 10px; display: flex; flex-wrap: wrap; }
.fenetre-fete .fermer { margin-top: 14px; }
.fete-pluie { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.fete-pluie i { position: absolute; top: -40px; width: 10px; height: 16px; border-radius: 2px; opacity: .95; animation: fete-tombe var(--d) linear var(--r) forwards; }
.fete-pluie i.piece { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF4C8, #F2B33D 55%, #B87412) !important; box-shadow: 0 0 8px rgba(255, 194, 61, .6); }
@keyframes fete-tombe { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 8% { opacity: 1; } 100% { transform: translate(var(--x), 720px) rotate(var(--t)); opacity: 0; } }
.annonce-token { position: fixed; left: 50%; top: 14px; z-index: 60; transform: translate(-50%, -160%); display: flex; align-items: center; gap: 12px;
  max-width: calc(100vw - 32px); padding: 10px 18px 10px 10px; border-radius: 999px; text-decoration: none; color: #2A1B00;
  background: linear-gradient(180deg, #FFE08A, #F2B33D); box-shadow: 0 10px 40px rgba(0, 0, 0, .55), 0 0 40px rgba(255, 194, 61, .45);
  font-weight: 800; transition: transform .5s cubic-bezier(.2, 1.4, .4, 1); }
.annonce-token.visible { transform: translate(-50%, 0); }
.annonce-token img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; background: #2A1B00; }
.annonce-token span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.annonce-token b { background: #2A1B00; color: #FFE08A; border-radius: 999px; padding: .3em .8em; flex: none; font-size: .9rem; }
.lien-pump { display: inline-block; margin: 0 12px 6px 0; color: var(--or); font-weight: 800; }
.journal a { color: var(--or); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .fete-medaille, .fete-medaille img, .fete-pluie i { animation: none; } }

/* ================================================= logo ticket doré (thème doublage, défaut de MEME PARTY) */
.marque-ticket { display: none; }
.ticket-mur { display: none; }
:root[data-theme="doublage"] {
  --bleu: #FFC23D; --cyan: #FFD56B; --violet: #E39A1E; --vert: #FFE08A; --or: #FFC23D;
  --degrade: linear-gradient(180deg, #FFE08A, #F2B33D); --titre: "Bungee";
}
:root[data-theme="doublage"] body { background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255, 194, 61, .14), transparent 70%), var(--nuit); }
:root[data-theme="doublage"] .marque { display: inline-flex; align-items: center; gap: 12px; font: 400 1.6rem/1 "Bungee", sans-serif; color: #F3EDE6; }
:root[data-theme="doublage"] .marque .marque-mot { font: 400 1em/1 "Bungee", sans-serif; letter-spacing: .01em; color: #FFC23D; }
:root[data-theme="doublage"] .marque .marque-mot span { font: inherit; letter-spacing: 0; vertical-align: 0; margin: 0; background: none; color: #F3EDE6; -webkit-text-fill-color: #F3EDE6; }
:root[data-theme="doublage"] .marque-ticket { display: block; width: 52px; height: auto; transform: rotate(-8deg); filter: drop-shadow(0 4px 10px rgba(255, 194, 61, .35)); }
:root[data-theme="doublage"] .bouton, :root[data-theme="doublage"] .bouton-wallet:not(.connecte) { color: #2A1B00; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) inset, 0 6px 22px rgba(255, 194, 61, .28); }
:root[data-theme="doublage"] .bouton.secondaire { color: var(--texte); box-shadow: 0 0 0 1px var(--bord) inset; }
:root[data-theme="doublage"] .regles li::before { color: #2A1B00; font-family: "Bungee", sans-serif; font-weight: 400; }
:root[data-theme="doublage"] .carte h2 { color: var(--or); font-size: .95rem; letter-spacing: .02em; }
:root[data-theme="doublage"] .compte, :root[data-theme="doublage"] .grande-note { font-family: "Bungee", sans-serif; font-weight: 400; }
:root[data-theme="doublage"] .logo-solana, :root[data-theme="doublage"] .logo-idol { display: none; }
:root[data-theme="doublage"] .ticket-mur { display: block; width: 74%; transform: rotate(-4deg); filter: drop-shadow(0 0 26px rgba(255, 194, 61, .55)) drop-shadow(0 10px 0 rgba(0, 0, 0, .55)); }
:root[data-theme="doublage"] .ticket-svg { display: block; width: 100%; height: auto; }
:root[data-theme="doublage"] .logo-mur::after { content: none; }
@media (max-width: 560px) { :root[data-theme="doublage"] .marque { font-size: 1.15rem; gap: 8px; } :root[data-theme="doublage"] .marque-ticket { width: 38px; } }
/* ticket doré : on chasse les derniers bleus du plateau SOLANA IDOL */
:root[data-theme="doublage"] .idee { background: var(--panneau-2); }
:root[data-theme="doublage"] .fenetre { box-shadow: 0 30px 80px rgba(0, 0, 0, .65), 0 0 40px rgba(255, 194, 61, .12); }
:root[data-theme="doublage"] .fenetre::backdrop { background: rgba(10, 7, 5, .82); }
:root[data-theme="doublage"] .cadre-studio { background: #070504; box-shadow: 0 0 0 1px var(--bord), 0 20px 60px rgba(255, 170, 60, .12); }
:root[data-theme="doublage"] .barre-action { box-shadow: 0 0 30px rgba(255, 170, 60, .06) inset; }
:root[data-theme="doublage"] .liste-extraits button:hover, :root[data-theme="doublage"] .reactions button:hover { box-shadow: 0 0 16px rgba(255, 194, 61, .35); }
:root[data-theme="doublage"] .toast { box-shadow: 0 0 24px rgba(255, 194, 61, .3); }
:root[data-theme="doublage"] .plaque, :root[data-theme="doublage"] .etiquette-file, :root[data-theme="doublage"] .etiquette-public { background: rgba(23, 18, 15, .9); }
@media (max-width: 560px) {
  :root[data-theme="doublage"] .haut { gap: 8px; padding: 12px; }
  :root[data-theme="doublage"] .marque { font-size: .95rem; gap: 7px; white-space: nowrap; }
  :root[data-theme="doublage"] .marque-ticket { width: 34px; }
  :root[data-theme="doublage"] .direct { display: none; }
  :root[data-theme="doublage"] .bouton-wallet { white-space: nowrap; font-size: .9rem; }
}

/* pseudos au-dessus des personnages du public et de la file */
.noms { position: absolute; inset: 0; pointer-events: none; }
.nom-perso { position: absolute; transform: translate(-50%, -100%); white-space: nowrap; padding: .1em .55em; border-radius: 999px;
  background: rgba(14, 11, 10, .78); color: #F3EDE6; font: 700 11px/1.4 "Poppins", sans-serif; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
.nom-perso.moi { background: #FFC23D; color: #2A1B00; box-shadow: 0 0 10px rgba(255, 194, 61, .6); z-index: 1; }
:root[data-theme="doublage"] .etiquette-chanteur { color: #2A1B00; box-shadow: 0 0 16px rgba(255, 194, 61, .55); }

/* derniers tokens lancés */
.liste-tokens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.liste-tokens li { display: flex; align-items: center; gap: 10px; }
.liste-tokens img, .pastille-token { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; background: var(--panneau-2); display: grid; place-items: center; color: var(--or); font-weight: 700; }
.infos-token { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.infos-token b { color: var(--or); overflow: hidden; text-overflow: ellipsis; }
.infos-token small { color: var(--doux); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste-tokens .bouton { flex: none; }

/* ruban défilant des tokens lancés */
.ruban { overflow: hidden; border-block: 1px solid rgba(255, 194, 61, .35); background: linear-gradient(180deg, #1E160C, #150F09); margin: 0 0 12px; }
.ruban-piste { display: flex; width: max-content; animation: ruban var(--duree, 30s) linear infinite; }
.ruban:hover .ruban-piste { animation-play-state: paused; }
.ruban-groupe { display: flex; }
@keyframes ruban { to { transform: translateX(-50%); } }
.ruban-item { display: inline-flex; align-items: center; gap: 8px; padding: 7px 26px 7px 0; margin-left: 26px; color: var(--texte); text-decoration: none; white-space: nowrap; font-size: .9rem; border-right: 1px dashed rgba(255, 194, 61, .35); }
.ruban-item img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.ruban-ticket { width: 26px; height: 18px; border-radius: 3px; background: #FFC23D; transform: rotate(-8deg); display: inline-block; }
.ruban-item b { font: 400 1rem "Bungee", sans-serif; color: #FFC23D; }
.ruban-item span { font-weight: 700; }
.ruban-item small { color: var(--doux); }
.ruban-item:hover b { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .ruban-piste { animation: none; } .ruban { overflow-x: auto; } }

/* ================================================= pub pour le token du projet */
.ticket-mini { width: 26px; height: auto; flex: none; transform: rotate(-8deg); }
.bouton-token { display: inline-flex; align-items: center; gap: 8px; padding: .5em 1em; border-radius: 12px; text-decoration: none; white-space: nowrap;
  background: linear-gradient(180deg, #2A1F10, #1C140B); color: var(--texte); border: 1px solid rgba(255, 194, 61, .55); font-weight: 700; font-size: .95rem;
  box-shadow: 0 0 18px rgba(255, 194, 61, .18); }
.bouton-token b { font: 400 1em "Bungee", sans-serif; color: #FFC23D; }
.bouton-token:hover { border-color: #FFC23D; box-shadow: 0 0 24px rgba(255, 194, 61, .4); }
@media (max-width: 760px) { .bouton-token { display: none; } }
.notre-token { display: flex; flex-direction: column; gap: 12px; border-color: rgba(255, 194, 61, .45); background: linear-gradient(180deg, #221909, var(--panneau) 70%); }
.affiche-projet { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--texte); }
.affiche-projet .ticket-mini { width: 64px; }
.affiche-texte { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.affiche-texte small { font-size: .7rem; letter-spacing: .16em; color: var(--doux); font-weight: 700; }
.affiche-texte b { font: 400 1.7rem "Bungee", sans-serif; color: #FFC23D; overflow: hidden; text-overflow: ellipsis; }
.affiche-texte span { font-size: .85rem; color: var(--doux); }
.ca-projet { display: flex; align-items: center; gap: 8px; }
.ca-projet code { flex: 1; min-width: 0; font-size: .8rem; background: var(--panneau-2); border: 1px solid var(--bord); border-radius: 8px; padding: .45em .6em; }
.liens-projet { display: flex; gap: 14px; flex-wrap: wrap; font-size: .9rem; font-weight: 700; }
.liens-projet a { color: var(--or); }
.ruban-projet { background: rgba(255, 194, 61, .12); padding-left: 14px; margin-left: 12px; border-radius: 8px; }
.ruban-projet .ticket-mini { width: 22px; }
.ruban-vide { color: var(--doux); }
/* affiches sur les murs du studio (dans le repère incliné du mur) */
.pub-mur { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: auto; text-decoration: none; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px; border-radius: 18px;
  background: #FFC23D; color: #2A1B00; box-shadow: 0 0 0 6px #2A1B00, 0 0 40px rgba(255, 194, 61, .55); cursor: pointer; }
.pub-mur:hover { filter: brightness(1.08); box-shadow: 0 0 0 6px #2A1B00, 0 0 70px rgba(255, 194, 61, .9); }
.pub-mur b { font: 400 64px/1 "Bungee", sans-serif; white-space: nowrap; }
.pub-sur, .pub-sous { font: 700 26px/1 "JetBrains Mono", monospace; letter-spacing: .14em; }
.pub-droite b { font-size: 40px; writing-mode: horizontal-tb; }
.pub-droite { gap: 14px; }
.pub-droite .pub-sur, .pub-droite .pub-sous { font-size: 22px; text-align: center; white-space: normal; }
.pub-projet { display: flex; align-items: center; gap: 12px; margin: 14px 0; padding: 12px 16px; border-radius: 14px; text-decoration: none; color: var(--texte);
  background: linear-gradient(180deg, #2A1F10, #1C140B); border: 1px solid rgba(255, 194, 61, .55); font-weight: 700; }
.pub-projet-ticket { background: #FFC23D; color: #2A1B00; font: 400 1rem "Bungee", sans-serif; padding: .3em .7em; border-radius: 8px; white-space: nowrap; }