@font-face { font-family: "Inter"; src: url("assets/polices/Inter-Regular.otf"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("assets/polices/Inter-SemiBold.otf"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("assets/polices/InterDisplay-Bold.otf"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("assets/polices/InterDisplay-Black.otf"); font-weight: 900; font-display: swap; }

:root {
  --fond: #0c0d10; --panneau: #15161b; --panneau2: #1c1d24; --bord: #2a2c36; --texte: #eef0f4; --doux: #9aa0ad;
  --accent: #ffc23d; --accent2: #ff3d6e; --vert: #1fd1a5; --rouge: #ff4d4d; --bleu: #3d8bff;
  --rayon: 10px; --echelle-texte: 1;
  --haut-barre: 52px; --larg-cat: 264px; --larg-reg: 312px; --haut-frise: 230px;
  font-size: calc(14px * var(--echelle-texte));
}
* { box-sizing: border-box; }
/* Aucune barre de défilement visible (on défile à la molette ou au clavier). */
* { scrollbar-width: none; }
::-webkit-scrollbar { display: none; width: 0; height: 0; }
html, body { margin: 0; height: 100%; background: var(--fond); color: var(--texte); font-family: Inter, system-ui, sans-serif; overflow: hidden; -webkit-font-smoothing: antialiased; }
/* Comme dans un jeu : on ne surligne pas les textes de l'interface en cliquant ou en glissant (curseur flèche), sauf
   dans les champs où l'on écrit et dans les textes faits pour être copiés (code de fin, chemin d'une vidéo). */
html, body { -webkit-user-select: none; user-select: none; cursor: default; }
img, svg { -webkit-user-drag: none; }
:is(input, textarea, select, [contenteditable]:not([contenteditable="false"])) { -webkit-user-select: text; user-select: text; }
:is(input:not([type=range], [type=checkbox], [type=radio], [type=color], [type=button]), textarea, [contenteditable]:not([contenteditable="false"])) { cursor: text; }
.a-copier, code { -webkit-user-select: all; user-select: all; cursor: text; }
body.contraste { --doux: #d0d4dc; --bord: #6a6e7a; --panneau: #0a0a0c; --panneau2: #141418; }
body.reduit * { transition: none !important; animation: none !important; }
#app { position: fixed; inset: 0; }
#vue { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background: #000; }
#toile { display: block; width: 100%; height: 100%; }
#ui { position: absolute; inset: 0; pointer-events: none; }
#ui > * { pointer-events: auto; }
.ecran { position: absolute; inset: 0; pointer-events: none; }
.ecran > * { pointer-events: auto; }
h1, h2, h3 { font-family: "Inter Display", Inter, sans-serif; margin: 0; }
button { font: inherit; color: inherit; }
input, select { font: inherit; color: var(--texte); }
.ic { flex: none; }
code { background: #000; padding: 2px 6px; border-radius: 4px; font-size: 0.85em; word-break: break-all; }

/* ---------------------------------------------------------------- boutons */
.bt { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 8px; border: 1px solid var(--bord); background: var(--panneau2); cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s, transform .08s; }
.bt:hover:not(:disabled) { background: #262833; border-color: #3a3d4a; }
.bt:active:not(:disabled) { transform: translateY(1px); }
.bt:disabled { opacity: .4; cursor: default; }
.bt.actif { background: rgba(255,194,61,.16); border-color: var(--accent); color: var(--accent); }
.bt.principal { background: var(--accent); border-color: var(--accent); color: #17130a; font-weight: 600; }
.bt.principal:hover:not(:disabled) { background: #ffd068; }
.bt.danger { color: #ff8080; }
.fenetre-pied .bt.danger { background: var(--rouge); color: #fff; border-color: var(--rouge); }
.bt.icone { padding: 7px; }
.bt.petit { padding: 5px 9px; font-size: .9em; }
.bt.icone.petit { padding: 4px; }
.bt.grand { padding: 14px 22px; font-size: 1.15em; border-radius: 12px; }
.bt.rond { border-radius: 50%; padding: 8px; }
.bt.rec { color: #ff6b6b; }
.bt.rec .ic { fill: #ff4d4d; }
.lien { background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 4px; font-size: .9em; }

/* ---------------------------------------------------------------- champs */
.champ { display: grid; grid-template-columns: 1fr; gap: 5px; margin: 8px 0; font-size: .92em; }
.champ > span { color: var(--doux); }
.champ.curseur { grid-template-columns: 1fr auto; align-items: center; }
.champ.curseur > span { grid-column: 1 / 3; }
.champ.curseur input { width: 100%; accent-color: var(--accent); }
.champ.curseur output { min-width: 48px; text-align: right; font-variant-numeric: tabular-nums; }
.champ.nombre { grid-template-columns: 1fr 78px auto; align-items: center; }
.champ.nombre input { width: 78px; background: #0f1014; border: 1px solid var(--bord); border-radius: 6px; padding: 4px 6px; text-align: right; }
.champ.nombre em { color: var(--doux); font-style: normal; font-size: .85em; }
.champ.choix select, .reglages select { width: 100%; background: #0f1014; border: 1px solid var(--bord); border-radius: 6px; padding: 6px 8px; }
.champ.interrupteur { grid-template-columns: 1fr auto; align-items: center; cursor: pointer; }
.champ.interrupteur input { display: none; }
.champ.interrupteur i { width: 36px; height: 20px; border-radius: 10px; background: #383b47; position: relative; transition: background .15s; }
.champ.interrupteur i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.champ.interrupteur input:checked + i { background: var(--accent); }
.champ.interrupteur input:checked + i::after { transform: translateX(16px); }
.pastilles { display: flex; flex-wrap: wrap; gap: 6px; }
.pastilles button { width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(255,255,255,.15); cursor: pointer; padding: 0; }
.pastilles button.actif { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }
.pastilles input[type=color] { width: 26px; height: 26px; border: 0; padding: 0; background: none; cursor: pointer; }
.segments { display: inline-flex; background: #0f1014; border: 1px solid var(--bord); border-radius: 8px; padding: 2px; flex-wrap: wrap; }
.segments button { background: none; border: 0; padding: 5px 10px; border-radius: 6px; cursor: pointer; color: var(--doux); }
.segments button.actif { background: var(--panneau2); color: var(--accent); }
.section { border-top: 1px solid var(--bord); padding: 8px 0; }
.section summary { cursor: pointer; font-weight: 600; padding: 4px 0; list-style: none; display: flex; align-items: center; gap: 6px; }
.section summary::-webkit-details-marker { display: none; }
.section summary::before { content: "›"; transition: transform .15s; color: var(--doux); }
.section[open] summary::before { transform: rotate(90deg); }
.section h4 { margin: 10px 0 4px; font-size: .9em; color: var(--doux); }
.note { color: var(--doux); font-size: .85em; line-height: 1.4; }
.ligne-boutons { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.ligne-boutons.colonne { flex-direction: column; align-items: stretch; }
.ligne-interrupteurs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.puces { display: flex; flex-wrap: wrap; gap: 5px; }
.puce { border: 1px solid var(--bord); background: #0f1014; border-radius: 14px; padding: 4px 10px; cursor: pointer; font-size: .88em; }
.puce.actif { border-color: var(--accent); color: var(--accent); }
.grille-num { display: grid; grid-template-columns: 1fr; gap: 0; }
.barre { height: 8px; background: #23252e; border-radius: 4px; overflow: hidden; }
.barre i { display: block; height: 100%; background: var(--accent); width: 0; transition: width .3s; }
.barre.grande { height: 14px; border-radius: 7px; }

/* ---------------------------------------------------------------- fenêtres, notifications, bulles */
.fenetre-fond { position: absolute; inset: 0; background: rgba(5,6,9,.62); display: flex; align-items: center; justify-content: center; z-index: 50; backdrop-filter: blur(3px); }
.fenetre { background: var(--panneau); border: 1px solid var(--bord); border-radius: 14px; width: min(520px, 94vw); max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.5); animation: apparait .18s ease-out; }
.fenetre.large { width: min(860px, 96vw); }
.fenetre-tete { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 6px; }
.fenetre-tete h2 { font-size: 1.3em; }
.fenetre-corps { padding: 6px 16px 12px; overflow: auto; line-height: 1.45; }
.fenetre-pied { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px 14px; border-top: 1px solid var(--bord); }
@keyframes apparait { from { opacity: 0; transform: translateY(8px) scale(.98); } }
#notifs { position: absolute; top: 64px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; z-index: 60; pointer-events: none; }
.notif { background: #23252e; border: 1px solid var(--bord); padding: 8px 14px; border-radius: 20px; display: flex; gap: 8px; align-items: center; box-shadow: 0 8px 24px rgba(0,0,0,.4); animation: apparait .2s; transition: opacity .4s; }
.notif.ok { border-color: var(--vert); } .notif.ok .ic { color: var(--vert); }
.notif.erreur { border-color: var(--rouge); } .notif.erreur .ic { color: var(--rouge); }
.notif.part { opacity: 0; }
.bulle { position: absolute; z-index: 55; width: 290px; background: #fff4d6; color: #1a1408; border-radius: 12px; padding: 12px 14px; box-shadow: 0 12px 30px rgba(0,0,0,.45); animation: apparait .2s; }
.bulle strong { display: block; margin-bottom: 4px; }
.bulle p { margin: 0 0 8px; line-height: 1.4; }
.bulle .bt { background: #1a1408; color: #fff4d6; border: 0; }
.bulle.centre { left: 50%; top: 40%; transform: translate(-50%, -50%); }
/* tutoriel du premier niveau : halo autour de la cible, bulle à côté */
#ui > #tuto { position: absolute; inset: 0; z-index: 54; pointer-events: none; }
.tuto-halo { position: absolute; border: 2px solid var(--accent); border-radius: 12px; box-shadow: 0 0 0 4px rgba(255,194,61,.22), 0 0 26px rgba(255,194,61,.55); pointer-events: none; animation: halo 1.6s ease-in-out infinite; transition: left .12s, top .12s, width .12s, height .12s; }
@keyframes halo { 50% { box-shadow: 0 0 0 8px rgba(255,194,61,.12), 0 0 34px rgba(255,194,61,.75); } }
.tuto-bulle { position: absolute; width: 320px; pointer-events: auto; background: #fff4d6; color: #1a1408; border-radius: 12px; padding: 10px 14px 12px; box-shadow: 0 14px 34px rgba(0,0,0,.5); animation: apparait .2s; }
.tuto-bulle strong { display: block; font-size: 1.05em; margin-bottom: 4px; }
.tuto-texte { margin: 0 0 10px; line-height: 1.45; }
.tuto-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.tuto-numero { font-size: .8em; text-transform: uppercase; letter-spacing: .04em; opacity: .7; }
.tuto-tete .bt.icone { background: transparent; border: 0; color: #1a1408; }
.tuto-pied { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tuto-points { display: flex; gap: 4px; }
.tuto-points i { width: 7px; height: 7px; border-radius: 50%; background: rgba(26,20,8,.2); }
.tuto-points i.fait { background: rgba(26,20,8,.55); }
.tuto-points i.actif { background: #c98a00; }
.tuto-bulle .bt.lien { color: #6b4a00; text-decoration: underline; }
.liste-aide { display: flex; flex-direction: column; gap: 8px; min-width: 360px; }
.liste-aide .bt.large { justify-content: flex-start; width: 100%; }
kbd { background: #000; border: 1px solid var(--bord); border-radius: 5px; padding: 1px 7px; font: inherit; font-size: .9em; }
.chargement { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--doux); background: var(--fond); z-index: 5; }
.rond-chargement { width: 36px; height: 36px; border: 3px solid #333; border-top-color: var(--accent); border-radius: 50%; animation: tourne 0.9s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
.erreur-fatale { padding: 60px; max-width: 700px; pointer-events: auto; }

/* ---------------------------------------------------------------- accueil */
.ecran-accueil { background: radial-gradient(ellipse at 25% 50%, rgba(12,13,16,.9) 0%, rgba(12,13,16,.6) 40%, rgba(12,13,16,0) 72%); }
.accueil { position: absolute; left: 6vw; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 24px; max-width: 460px; }
.logo { display: flex; flex-direction: column; line-height: .9; }
.logo .rap { font-family: "Inter Display"; font-weight: 900; font-size: 5.4em; letter-spacing: -2px; color: var(--accent); text-shadow: 0 6px 30px rgba(255,194,61,.35); }
.logo .france { font-family: "Inter Display"; font-weight: 900; font-size: 5.4em; letter-spacing: -2px; background: linear-gradient(90deg, #fff 0%, #ffd6e1 50%, var(--accent2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo .slogan { margin-top: 12px; color: #d8dae0; font-size: 1.05em; line-height: 1.35; max-width: 420px; }
.menu-principal { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.menu-principal .bt.grand { min-width: 280px; justify-content: flex-start; background: rgba(28,29,36,.82); backdrop-filter: blur(4px); }
.menu-principal .bt.grand.principal { background: var(--accent); }
.menu-secondaire { display: flex; gap: 8px; margin-top: 6px; }
.bt.discord { background: #5865f2; border-color: #5865f2; color: #fff; font-weight: 600; }
.bt.discord:hover { background: #4752c4; border-color: #4752c4; color: #fff; }
.reprendre { display: flex; gap: 12px; align-items: center; background: rgba(21,22,27,.85); border: 1px solid var(--bord); border-radius: 12px; padding: 8px; cursor: pointer; text-align: left; max-width: 380px; }
.reprendre img { width: 112px; height: 63px; object-fit: cover; border-radius: 6px; }
.reprendre span { display: flex; flex-direction: column; gap: 2px; }
.reprendre small { color: var(--accent); text-transform: uppercase; font-size: .75em; letter-spacing: 1px; }
.reprendre em { color: var(--doux); font-style: normal; font-size: .85em; }
.vignette-vide { display: flex; align-items: center; justify-content: center; width: 112px; height: 63px; background: #23252e; border-radius: 6px; color: var(--doux); }
.pied-accueil { color: var(--doux); font-size: .85em; }
.choix-langue { display: inline-flex; align-self: flex-start; gap: 2px; padding: 3px; background: rgba(21,22,27,.85); border: 1px solid var(--bord); border-radius: 999px; }
.choix-langue button { border: 0; background: transparent; color: var(--doux); padding: 5px 12px; border-radius: 999px; cursor: pointer; font-size: .85em; font-weight: 600; }
.choix-langue button:hover { color: var(--texte); }
.choix-langue button.actif { background: var(--accent); color: #111; }
.choix-langue button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------------------------------------------------------------- pages (campagne, libre, galerie…) */
.page { position: absolute; inset: 0; background: var(--fond); overflow: auto; padding: 0 32px 40px; }
.page-tete { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 14px; padding: 18px 0 14px; background: linear-gradient(var(--fond) 80%, transparent); }
.page-tete h1 { font-size: 1.9em; }
.page-tete .total { color: var(--doux); margin-left: auto; }
.page-tete .onglets { display: flex; gap: 6px; margin-left: 20px; }
.chapitre { margin: 18px 0 28px; }
.chapitre h2 { font-size: 1.25em; margin-bottom: 4px; }
.chapitre-texte { color: var(--doux); margin: 0 0 12px; }
.niveaux { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.carte-niveau { background: var(--panneau); border: 1px solid var(--bord); border-radius: 12px; overflow: hidden; padding: 0; text-align: left; cursor: pointer; transition: transform .12s, border-color .12s; }
.carte-niveau:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--accent); }
.carte-niveau.ferme { opacity: .5; cursor: default; }
.vignette { position: relative; aspect-ratio: 16/9; background: #22242c center/cover; }
.vignette .numero { position: absolute; left: 10px; top: 8px; font-family: "Inter Display"; font-weight: 900; font-size: 2em; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.vignette .cadenas { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.45); }
.carte-texte { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px; }
.carte-texte small { color: var(--doux); }
.etoiles { display: inline-flex; gap: 2px; color: #4a4d58; margin-top: 4px; }
.etoiles i.pleine { color: var(--accent); }
.etoiles i.pleine .ic { fill: var(--accent); }
.detail-niveau .grande-vignette { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 10px; background: #22242c; }
.nouveaute { background: rgba(255,194,61,.1); border-left: 3px solid var(--accent); padding: 8px 10px; border-radius: 6px; display: flex; gap: 8px; }
.variantes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0; }
.variante { text-align: left; background: var(--panneau2); border: 1px solid var(--bord); border-radius: 10px; padding: 10px; cursor: pointer; }
.variante p { color: var(--doux); font-size: .88em; margin: 4px 0; }
.variante.actif { border-color: var(--accent); }
.variante.ferme { opacity: .45; cursor: default; }
.recompense { color: var(--accent); display: flex; gap: 6px; align-items: center; }
.colonnes { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; }
.colonnes h2 { font-size: 1.15em; margin: 8px 0 10px; }
.grille-decors { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.carte-decor { background: var(--panneau); border: 1px solid var(--bord); border-radius: 10px; padding: 0 0 8px; overflow: hidden; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 2px; }
.carte-decor img { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #22242c; }
.carte-decor strong, .carte-decor small { padding: 0 9px; }
.carte-decor small { color: var(--doux); font-size: .8em; }
.carte-decor.actif { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.liste-musiques { display: flex; flex-direction: column; gap: 4px; max-height: 340px; overflow: auto; margin-bottom: 8px; }
.musique { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; }
.musique:hover { background: var(--panneau); }
.musique.actif { border-color: var(--accent); background: rgba(255,194,61,.08); }
.musique div { display: flex; flex-direction: column; }
.musique small { color: var(--doux); }
.reglages-libre { background: var(--panneau); border-radius: 10px; padding: 8px 12px; margin-bottom: 14px; }
.grille-defis { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.carte-defi { background: var(--panneau); border: 1px solid var(--bord); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; gap: 6px; padding-bottom: 12px; }
.carte-defi strong, .carte-defi p, .carte-defi .difficultes { padding: 0 12px; }
.carte-defi p { margin: 0; color: var(--doux); }
.chrono-defi { position: absolute; right: 8px; top: 8px; background: rgba(0,0,0,.6); padding: 3px 8px; border-radius: 12px; display: flex; gap: 4px; align-items: center; font-size: .85em; }
.difficultes { display: flex; gap: 6px; flex-wrap: wrap; }
.grille-clips { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.carte-clip { background: var(--panneau); border: 1px solid var(--bord); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.carte-clip .vignette img { width: 100%; height: 100%; object-fit: cover; }
.carte-clip .vignette .vignette-vide { width: 100%; height: 100%; border-radius: 0; }
.carte-clip .format { position: absolute; right: 6px; bottom: 6px; background: rgba(0,0,0,.6); border-radius: 5px; padding: 1px 6px; font-size: .78em; }
.carte-actions { display: flex; gap: 6px; padding: 0 12px 12px; flex-wrap: wrap; }
.vide-galerie { text-align: center; padding: 80px; color: var(--doux); }
table.comparaison { width: 100%; border-collapse: collapse; }
table.comparaison td, table.comparaison th { padding: 6px 8px; border-bottom: 1px solid var(--bord); text-align: left; }
table.comparaison img.mini { width: 96px; border-radius: 4px; }
.corps-parametres { max-width: 640px; }
.table-raccourcis { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; margin: 8px 0; }
.ligne-raccourci { display: flex; justify-content: space-between; align-items: center; }
.bt.touche { min-width: 120px; justify-content: center; font-variant-numeric: tabular-nums; }
.astuces { color: var(--doux); padding-left: 18px; line-height: 1.6; }

/* ---------------------------------------------------------------- atelier */
.ecran-studio { display: grid; grid-template-columns: var(--larg-cat) minmax(0, 1fr) var(--larg-reg); grid-template-rows: var(--haut-barre) auto minmax(0, 1fr) auto; }
.barre-studio { grid-column: 1 / 4; grid-row: 1; display: flex; align-items: center; gap: 10px; padding: 0 10px; background: var(--panneau); border-bottom: 1px solid var(--bord); }
.gauche-barre { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.titre-projet { display: flex; flex-direction: column; min-width: 0; }
.titre-projet strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.outils { display: flex; align-items: center; gap: 5px; }
.outils .sep, .barre-avancee .sep { width: 1px; height: 24px; background: var(--bord); margin: 0 4px; }
.actions { display: flex; align-items: center; gap: 6px; flex: 1; justify-content: flex-end; }
.barre-avancee { grid-column: 1 / 4; grid-row: 2; display: flex; align-items: center; gap: 10px; padding: 6px 12px; background: #121318; border-bottom: 1px solid var(--bord); flex-wrap: wrap; }
.barre-avancee .champ { margin: 0; display: flex; align-items: center; gap: 6px; }
.barre-avancee .champ.nombre input { width: 60px; }
.menu-deroulant { position: relative; }
.menu-liste { display: none; position: absolute; top: 100%; left: 0; z-index: 20; background: var(--panneau); border: 1px solid var(--bord); border-radius: 8px; padding: 4px; flex-direction: column; min-width: 170px; }
.menu-deroulant:hover .menu-liste, .menu-deroulant:focus-within .menu-liste { display: flex; }
.menu-liste .bt { border: 0; background: none; justify-content: flex-start; }
.catalogue { grid-column: 1; grid-row: 3 / 5; background: var(--panneau); border-right: 1px solid var(--bord); display: flex; flex-direction: column; min-height: 0; }
.onglets-cat { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; border-bottom: 1px solid var(--bord); }
.onglet-cat { background: none; border: 0; border-radius: 6px; padding: 6px; cursor: pointer; color: var(--doux); }
.onglet-cat.actif { background: var(--panneau2); color: var(--accent); }
.cat-entete { padding: 8px 10px 4px; display: flex; flex-direction: column; gap: 6px; }
.cat-titre { font-weight: 600; }
.recherche { background: #0f1014; border: 1px solid var(--bord); border-radius: 6px; padding: 5px 8px; }
.cat-liste { flex: 1; overflow: auto; padding: 6px 8px 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-content: start; }
.carte-cat { position: relative; background: var(--panneau2); border: 1px solid var(--bord); border-radius: 8px; padding: 4px 4px 6px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: .82em; text-align: center; }
.carte-cat:hover { border-color: var(--accent); }
.carte-cat img, .carte-cat .sans-image { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 6px; background: #22242d; display: flex; align-items: center; justify-content: center; color: var(--doux); }
.carte-cat .prix { position: absolute; right: 5px; top: 5px; background: rgba(0,0,0,.65); padding: 0 5px; border-radius: 6px; color: var(--accent); font-size: .85em; }
.carte-cat.verrou { opacity: .45; cursor: not-allowed; }
.carte-cat .cadenas { position: absolute; left: 5px; top: 5px; }
.cat-liste .vide { grid-column: 1 / 3; color: var(--doux); }
.ligne-scene, .ligne-groupe { grid-column: 1 / 3; display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 6px; cursor: pointer; }
.ligne-scene:hover, .ligne-groupe:hover { background: var(--panneau2); }
.ligne-scene.actif { background: rgba(255,194,61,.12); color: var(--accent); }
.ligne-scene.retrait { padding-left: 24px; }
.ligne-groupe { color: var(--accent); }
.cadenas { color: var(--doux); }
.jauge-budget { padding: 8px 10px; border-top: 1px solid var(--bord); display: flex; flex-direction: column; gap: 4px; font-size: .9em; }
.zone-scene { grid-column: 2; grid-row: 3; position: relative; outline: none; overflow: hidden; }
.reglages { grid-column: 3; grid-row: 3 / 5; background: var(--panneau); border-left: 1px solid var(--bord); overflow: auto; padding: 10px 12px 30px; }
.reglages-tete { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.reglages-tete .type { color: var(--doux); font-size: .8em; text-transform: uppercase; letter-spacing: 1px; }
.nom-element { background: transparent; border: 1px solid transparent; border-radius: 6px; font-size: 1.2em; font-weight: 600; padding: 3px 4px; margin-left: -4px; }
.nom-element:hover, .nom-element:focus { border-color: var(--bord); background: #0f1014; }
.reglages-vide { color: var(--doux); text-align: left; }
.reglages-vide .grand-icone { color: var(--accent); margin: 10px 0; }
.liste-actions { display: flex; flex-direction: column; gap: 3px; margin: 4px 0; }
.action-ligne { display: flex; align-items: center; gap: 8px; background: #0f1014; border-radius: 6px; padding: 3px 6px; font-size: .9em; }
.action-ligne span:nth-child(2) { flex: 1; }
.action-ligne .temps { color: var(--accent); cursor: pointer; font-variant-numeric: tabular-nums; }
.trajet { background: #0f1014; border-radius: 8px; padding: 6px 8px; margin: 6px 0; }
.trajet-tete { display: flex; justify-content: space-between; }
.trajet-tete .temps { color: var(--accent); font-size: .85em; }
.chrono-studio { font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 600; display: flex; gap: 5px; align-items: center; }
.chrono-studio.urgent { color: var(--rouge); }

/* calques de la scène */
.calque { position: absolute; pointer-events: none; }
.calque.visible { pointer-events: auto; }
.etiquette { left: 0; top: 0; display: none; flex-direction: column; align-items: center; gap: 4px; }
.etiquette.visible { display: flex; }
.etiquette .nom { background: rgba(12,13,16,.85); border: 1px solid var(--accent); color: var(--accent); padding: 2px 9px; border-radius: 12px; font-size: .85em; font-weight: 600; white-space: nowrap; }
.mini-outils { display: flex; gap: 2px; background: rgba(12,13,16,.85); border: 1px solid var(--bord); border-radius: 8px; padding: 2px; }
.mini-outils button { background: none; border: 0; padding: 4px; border-radius: 5px; cursor: pointer; display: flex; color: #ddd; }
.mini-outils button:hover { background: #2a2c36; }
.mini-outils button.actif { color: var(--accent); background: rgba(255,194,61,.15); }
.mini-outils button.danger { color: #ff8080; }
.alerte { left: 50%; top: 12px; transform: translateX(-50%); background: rgba(255,77,77,.92); color: #fff; padding: 6px 12px; border-radius: 16px; display: none; align-items: center; gap: 6px; font-size: .9em; }
.alerte.visible { display: flex; }
.badge-vue { left: 12px; top: 12px; background: rgba(12,13,16,.85); border: 1px solid var(--bord); border-radius: 18px; padding: 4px 6px 4px 12px; display: none; align-items: center; gap: 8px; }
.badge-vue.visible { display: flex; }
.boutons-vue { right: 10px; top: 10px; display: flex; flex-direction: column; gap: 4px; pointer-events: auto; }
.boutons-vue .bt { background: rgba(21,22,27,.85); }
.rec-calque { right: 64px; top: 14px; display: none; align-items: center; gap: 8px; color: #fff; font-weight: 700; letter-spacing: 2px; }
.rec-calque.visible { display: flex; }
.point-rec { width: 12px; height: 12px; border-radius: 50%; background: #ff3030; animation: clignote 1s infinite; }
@keyframes clignote { 50% { opacity: .2; } }
.cadre-clip { display: none; }
.bandeau { left: 50%; bottom: 14px; transform: translateX(-50%); background: rgba(12,13,16,.92); border: 1px solid var(--accent); border-radius: 22px; padding: 6px 8px 6px 14px; display: flex; align-items: center; gap: 8px; pointer-events: auto; }
.bandeau-marche { top: 12px; bottom: auto; max-width: calc(100% - 140px); border-color: #1fd1a5; box-shadow: 0 10px 30px -12px rgba(31,209,165,.6); }
.bandeau-marche > span:first-child { color: #1fd1a5; display: grid; }
.prises { left: 10px; bottom: 10px; width: 250px; max-height: 45%; background: rgba(21,22,27,.92); border: 1px solid var(--bord); border-radius: 10px; display: none; flex-direction: column; overflow: hidden; }
.prises.visible { display: flex; pointer-events: auto; }
.prises-tete { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--bord); font-weight: 600; }
.prises-tete .bt { margin-left: auto; }
.prises-liste { overflow: auto; padding: 6px; display: flex; flex-direction: column; gap: 5px; }
.prise { background: #0f1014; border-radius: 8px; padding: 6px 8px; border: 1px solid transparent; }
.prise.favori { border-color: var(--accent); }
.prise.betisier .prise-titre strong::after { content: " 😂"; }
.prise-titre { display: flex; align-items: center; gap: 8px; }
.note-prise { color: var(--accent); margin-left: auto; font-variant-numeric: tabular-nums; }
.badge { font-size: .75em; background: #333; border-radius: 6px; padding: 0 5px; color: var(--doux); }
.prise-actions { display: flex; gap: 3px; margin-top: 4px; }

/* frise */
.frise { grid-column: 2; grid-row: 4; height: var(--haut-frise); background: #101116; border-top: 1px solid var(--bord); display: flex; flex-direction: column; min-width: 0; }
.frise.reduite { height: auto; }
.frise-tete { display: flex; align-items: center; gap: 10px; padding: 5px 10px; border-bottom: 1px solid var(--bord); }
.frise-tete .chrono { font-variant-numeric: tabular-nums; color: var(--doux); }
.frise-tete .chrono b { color: var(--texte); }
.frise-tete .morceau { color: var(--doux); font-size: .88em; display: flex; align-items: center; gap: 4px; }
.frise-tete .espace { flex: 1; }
.frise-corps { flex: 1; display: grid; grid-template-columns: 96px 1fr; overflow-y: auto; overflow-x: hidden; min-height: 0; align-content: start; }
.frise-noms { display: flex; flex-direction: column; border-right: 1px solid var(--bord); }
.nom-piste { height: 26px; line-height: 26px; padding: 0 8px; font-size: .8em; color: var(--doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid #1a1b22; flex: none; }
.regle-nom { height: 40px; line-height: 40px; }
.frise-pistes { position: relative; display: flex; flex-direction: column; margin-right: 10px; }
.piste { position: relative; height: 26px; border-bottom: 1px solid #1a1b22; flex: none; }
.piste.regle { height: 40px; cursor: ew-resize; background: #0c0d11; }
.onde { position: absolute; inset: 0; width: 100%; height: 100%; }
.tic { position: absolute; bottom: 0; width: 1px; height: 7px; background: #3a3d48; pointer-events: none; }
.tic.mesure { height: 16px; background: #6a6e7c; }
.section-mus { position: absolute; top: 2px; font-size: .72em; color: #fff; background: rgba(123,92,255,.45); padding: 0 5px; border-radius: 3px; transform: translateX(1px); pointer-events: none; white-space: nowrap; }
.bloc { position: absolute; top: 3px; height: 20px; border-radius: 5px; font-size: .75em; display: flex; align-items: center; padding: 0 6px; overflow: hidden; white-space: nowrap; cursor: grab; color: #111; background: #c9ccd6; }
.bloc span { overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.bloc.plan { color: #111; font-weight: 600; }
.bloc.anim { background: #3d8bff; color: #fff; border-left: 2px solid #fff; }
.bloc.anim.base { background: #2a3c5c; border-left: 0; cursor: default; }
.repere-geste { position: absolute; top: 2px; bottom: 2px; width: 10px; margin-left: -5px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 0 1px rgba(0,0,0,.5); cursor: ew-resize; z-index: 2; }
.presets { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 6px 0 10px; }
.presets .bt.preset { justify-content: center; font-weight: 600; background: linear-gradient(90deg, rgba(255,194,61,.14), rgba(255,61,110,.12)); }
.presets .bt.preset.actif { border-color: var(--accent); color: var(--accent); }
.ligne-boutons.plans { flex-wrap: wrap; }
.reglages-avances { display: flex; flex-direction: column; gap: 6px; min-width: 420px; }
.reglages-avances h3 { margin-top: 6px; font-size: 1em; }
details.sous-section { border-top: 1px solid var(--bord); margin-top: 8px; padding-top: 6px; }
details.sous-section > summary { cursor: pointer; color: var(--doux); font-size: .92em; margin-bottom: 6px; }
.bloc.trajet { background: #1fd1a5; }
.bloc.effet { background: #ff7a2f; }
.bloc.montage { background: #b07bff; color: #fff; border-left: 2px solid #fff; }
.coupe { position: absolute; left: -1px; top: -3px; bottom: -3px; width: 12px; cursor: ew-resize; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); }
.coupe .trans { color: #fff; font-size: 11px; pointer-events: none; }
.bloc .suppr { position: absolute; right: 2px; top: 2px; background: rgba(0,0,0,.35); border: 0; border-radius: 4px; padding: 1px; cursor: pointer; display: none; color: #fff; }
.bloc:hover .suppr { display: flex; }
.poignee-fin { position: absolute; right: 0; top: 0; bottom: 0; width: 7px; cursor: ew-resize; background: rgba(0,0,0,.25); }
.losange { position: absolute; top: 6px; width: 13px; height: 13px; transform: translateX(-6px) rotate(45deg); border: 2px solid #fff; cursor: grab; border-radius: 2px; }
.tete-lecture { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent2); pointer-events: none; z-index: 3; }
.tete-lecture::before { content: ""; position: absolute; top: 0; left: -5px; border: 6px solid transparent; border-top-color: var(--accent2); }

/* brief */
.brief h3 { margin: 12px 0 4px; }
.criteres { padding-left: 18px; line-height: 1.7; }
.contrainte { color: var(--accent); display: flex; gap: 6px; align-items: center; }
.astuce { background: #0f1014; border-radius: 8px; padding: 8px 10px; color: var(--doux); display: flex; gap: 6px; }

/* résultats */
.page-resultats { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) 400px; pointer-events: none; }
.page-resultats > * { pointer-events: auto; }
.zone-clip { position: relative; margin: 20px; pointer-events: none !important; }
.panneau-resultat { background: var(--panneau); border-left: 1px solid var(--bord); padding: 20px; overflow: auto; display: flex; flex-direction: column; gap: 12px; }
.panneau-resultat h1 { font-size: 1.35em; }
.grandes-etoiles { display: flex; gap: 8px; color: #3a3d48; }
.grandes-etoiles i { animation: etoile .5s backwards; }
.grandes-etoiles i.pleine { color: var(--accent); }
.grandes-etoiles i.pleine .ic { fill: var(--accent); }
@keyframes etoile { from { transform: scale(0) rotate(-40deg); opacity: 0; } }
.score { font-family: "Inter Display"; font-size: 1.5em; color: var(--doux); }
.score span { font-size: 2.4em; font-weight: 900; color: var(--texte); }
.medaille.or { color: #ffd34d; } .medaille.argent { color: #cfd6e4; } .medaille.bronze { color: #d9915a; }
.conseil { background: rgba(255,194,61,.1); border-left: 3px solid var(--accent); padding: 10px 12px; border-radius: 8px; display: flex; gap: 8px; line-height: 1.45; }
.criteres-resultat { display: flex; flex-direction: column; gap: 10px; }
.critere-tete { display: flex; justify-content: space-between; margin-bottom: 4px; }
.critere small { color: var(--doux); }
.recompenses { background: #1d1a10; border: 1px solid #5a4614; border-radius: 10px; padding: 10px 12px; }
.recompenses h3 { display: flex; gap: 6px; align-items: center; color: var(--accent); }
.actions-resultat { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.progres-export { display: flex; flex-direction: column; gap: 10px; padding: 10px 0; }
.bilan-export video { width: 100%; max-height: 52vh; background: #000; border-radius: 8px; }
.verifs { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.verifs li { display: flex; gap: 6px; align-items: center; }
.verifs li.ok .ic { color: var(--vert); }
.verifs li.ko .ic { color: var(--rouge); }
.formulaire-export .champ, .formulaire .champ { margin: 10px 0; }
.erreur { color: var(--rouge); }

@media (max-width: 1280px) { :root { --larg-cat: 220px; --larg-reg: 280px; } .outils .bt span { display: none; } }

/* ---------------------------------------------------------------- éditeur « Personnaliser » (studio) */
.ecran-studio.edition-perso > :not(.perso-editeur) { visibility: hidden; }
.perso-editeur { position: absolute; inset: 0; z-index: 40; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: transparent; pointer-events: none; }
.perso-editeur > * { pointer-events: auto; }
.perso-tete { display: flex; align-items: baseline; gap: 16px; padding: 12px 18px; background: var(--panneau); border-bottom: 1px solid var(--bord); }
.perso-tete .note { margin: 0; }
.perso-centre { display: grid; grid-template-columns: minmax(0, 1fr) min(400px, 42vw); min-height: 0; pointer-events: none; }
.perso-centre > * { pointer-events: auto; }
.perso-gauche { position: relative; display: flex; flex-direction: column; min-height: 0; pointer-events: none; }
.perso-vue { flex: 1; min-height: 0; cursor: grab; pointer-events: auto; touch-action: none; }
.perso-vue:active { cursor: grabbing; }
.perso-vues { position: absolute; left: 12px; bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; pointer-events: auto; }
.perso-vues .champ { margin: 0; }
.perso-panneau { background: var(--panneau); border-left: 1px solid var(--bord); display: flex; flex-direction: column; min-height: 0; }
.perso-onglets { display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid var(--bord); }
.perso-onglet { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--doux); cursor: pointer; font-size: .82rem; text-align: center; line-height: 1.15; }
.perso-onglet:hover { color: var(--texte); }
.perso-onglet.actif { color: var(--accent); border-bottom-color: var(--accent); }
.perso-reglages { overflow: auto; padding: 12px 16px 24px; display: flex; flex-direction: column; gap: 4px; }
.perso-reglages h4.perso-titre { margin: 12px 0 2px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-doux, #9aa0ad); font-weight: 600; }
.perso-reglages h4.perso-titre:first-child { margin-top: 0; }
.perso-actions { display: flex; align-items: center; gap: 8px; padding: 10px 18px; background: var(--panneau); border-top: 1px solid var(--bord); }
.perso-actions .espace { flex: 1; }
.ligne-boutons.personnaliser { margin: 4px 0 10px; }
.ligne-boutons.personnaliser .bt { width: 100%; justify-content: center; }

/* ---------------------------------------------------------------- objectifs de la campagne */
.objectifs-calque { left: 12px; top: 12px; width: 300px; max-width: calc(100% - 90px); max-height: calc(100% - 24px); overflow: auto; pointer-events: auto; background: rgba(12,13,16,.88); border: 1px solid var(--bord); border-radius: 12px; padding: 4px 6px 8px; font-size: .88em; backdrop-filter: blur(4px); }
.objectifs-calque:empty { display: none; }
.objectifs-calque.reduit { width: auto; padding-bottom: 4px; }
.badge-vue.visible ~ .objectifs-calque { top: 54px; }
.objectifs-calque .tete-obj { display: flex; align-items: center; gap: 7px; width: 100%; background: none; border: 0; padding: 5px 4px; cursor: pointer; color: var(--accent); }
.objectifs-calque .tete-obj .compte { margin-left: auto; background: var(--panneau2); color: var(--texte); border-radius: 10px; padding: 1px 8px; font-weight: 600; }
.objectifs-calque .objectif { margin: 2px 4px 6px; line-height: 1.35; }
.objectifs-calque .titre-bonus { margin: 8px 4px 2px; color: var(--doux); display: flex; align-items: center; gap: 4px; }
.liste-obj { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.liste-obj li { display: grid; grid-template-columns: 18px 1fr; gap: 2px 6px; padding: 4px; border-radius: 6px; line-height: 1.3; }
.liste-obj li em { grid-column: 2; font-style: normal; font-size: .85em; color: var(--doux); }
.liste-obj li.ok { color: var(--texte); }
.liste-obj li.ok .marque { color: var(--vert); }
.liste-obj li.ko .marque { color: var(--rouge); }
.liste-obj li.attente .marque { color: var(--doux); }
.liste-obj.bonus li { font-size: .95em; color: var(--doux); }
.chargement.analyse { background: rgba(12,13,16,.75); }
.objectif-brief, .objectif-niveau { background: rgba(31,209,165,.1); border-left: 3px solid var(--vert); padding: 8px 10px; border-radius: 6px; display: flex; gap: 8px; align-items: flex-start; line-height: 1.4; }
.objectif-niveau { display: block; }
.brief h4 { margin: 12px 0 4px; font-size: .95em; color: var(--doux); text-transform: uppercase; letter-spacing: .04em; }
.conditions { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.conditions li small { display: block; color: var(--doux); }
.verdict { display: flex; align-items: center; gap: 8px; font-size: 1.4em; font-weight: 700; }
.verdict.reussi { color: var(--vert); }
.verdict.rate { color: var(--rouge); }
.trois-mesures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.trois-mesures > div { background: var(--panneau2); border: 1px solid var(--bord); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.trois-mesures small, .trois-mesures span { color: var(--doux); font-size: .82em; }
.trois-mesures strong { font-size: 1.3em; }
.objectifs-resultat .objectif { display: flex; gap: 6px; align-items: flex-start; margin: 0; line-height: 1.4; }
.objectifs-resultat h3 { font-size: 1em; margin-top: 4px; }
.liste-resultat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.liste-resultat li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; background: var(--panneau2); border-radius: 8px; padding: 8px; }
.liste-resultat li > div { display: flex; flex-direction: column; gap: 3px; }
.liste-resultat li small { color: var(--doux); line-height: 1.35; }
.liste-resultat li .conseil-obj { color: var(--accent); }
.liste-resultat li.ok .marque { color: var(--vert); }
.liste-resultat li.ko .marque { color: var(--rouge); }
.liste-resultat.bonus li.ko .marque { color: var(--doux); }
.qualite-detail summary { cursor: pointer; color: var(--doux); padding: 4px 0; }
.qualite-detail[open] summary { margin-bottom: 8px; }

/* ================================================================ 0.4 : carrière, avant-première, accueil, réglages */
/* photos de profil des artistes : portrait rendu par le jeu, cerclé de la couleur de l'artiste (initiale en secours) */
.avatar { --c: var(--accent); position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--c) 70%, #fff 30%), color-mix(in srgb, var(--c) 55%, #120f1a 45%));
  box-shadow: 0 0 0 2px var(--c), 0 0 0 4px rgba(12,13,16,.9), 0 6px 18px -6px var(--c); }
.avatar b { font-family: "Inter Display"; font-weight: 900; font-size: 1.15em; color: #120f1a; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.avatar.mini { width: 26px; height: 26px; box-shadow: 0 0 0 1.5px var(--c); }
.avatar.mini b { font-size: .8em; }
.avatar.coin { position: absolute; right: 8px; bottom: -14px; width: 36px; height: 36px; }
.avatar.grand { width: 64px; height: 64px; }
.avatar.grand b { font-size: 1.7em; }
.banniere-artiste { --c: var(--accent); position: absolute; inset: 0; overflow: hidden; background: linear-gradient(120deg, color-mix(in srgb, var(--c) 45%, #0c0d10), #17101f 60%, color-mix(in srgb, var(--c) 25%, #0c0d10)); }
.banniere-artiste img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.banniere-artiste::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--panneau) 2%, rgba(21,22,27,.15) 70%); }
.titre-page h1 { font-size: 1.9em; line-height: 1.05; }
.titre-page p { margin: 4px 0 0; color: var(--doux); }
.pastille { display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); font-weight: 600; font-size: .92em; white-space: nowrap; }
@keyframes pulse-or { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,194,61,.55), 0 14px 40px -12px rgba(255,194,61,.6); } 50% { box-shadow: 0 0 0 8px rgba(255,194,61,0), 0 14px 40px -12px rgba(255,194,61,.9); } }
@keyframes monte { from { opacity: 0; transform: translateY(14px); } }
@keyframes glisse-g { from { opacity: 0; transform: translateX(-18px); } }

/* ---------------------------------------------------------------- carrière */
.carriere { padding-bottom: 20px; display: flex; flex-direction: column; overflow: hidden; background: radial-gradient(70% 60% at 70% 0%, #241536 0%, var(--fond) 70%); }
.carriere .page-tete { background: none; }
.corps-carriere { flex: 1; min-height: 0; display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 22px; }
.cote-carriere { display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow: auto; padding-right: 4px; }
.cote-carriere .bt.large { justify-content: center; padding: 12px; }
.telephone { padding: 14px; border-radius: 18px; background: linear-gradient(180deg, rgba(30,26,40,.92), rgba(19,18,25,.92)); border: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 6px; }
.telephone h3 { display: flex; align-items: center; gap: 6px; font-family: Inter; font-size: .78em; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.telephone h3 em { margin-left: auto; font-style: normal; color: var(--doux); letter-spacing: 0; text-transform: none; font-size: 1.1em; }
.dm { display: flex; gap: 11px; align-items: center; padding: 10px; border-radius: 13px; background: rgba(255,255,255,.04); border: 1px solid transparent; text-align: left; cursor: pointer; transition: background .15s, transform .15s; animation: glisse-g .4s backwards; }
.dm:nth-child(3) { animation-delay: .06s; } .dm:nth-child(4) { animation-delay: .12s; } .dm:nth-child(5) { animation-delay: .18s; } .dm:nth-child(6) { animation-delay: .24s; }
.dm:hover:not(:disabled) { background: rgba(255,255,255,.08); transform: translateX(3px); }
.dm:disabled { cursor: default; opacity: .55; }
.dm.neuf { background: rgba(255,194,61,.1); border-color: rgba(255,194,61,.45); }
.dm-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.dm-texte strong { display: flex; gap: 6px; align-items: baseline; }
.dm-texte strong small { color: var(--doux); font-weight: 400; font-size: .8em; }
.dm-texte > span { color: var(--doux); font-size: .9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm.neuf .dm-texte > span { color: var(--texte); }
.dm .badge { flex: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--accent2); display: grid; place-items: center; font-size: .78em; font-weight: 800; }
/* la carte de la ville : un chemin qui serpente du quartier jusqu'à la grande scène, sur l'affiche de Rap France */
.carriere { background: linear-gradient(90deg, rgba(13,11,19,.97) 0 25%, rgba(13,11,19,.3) 60%, rgba(13,11,19,.55)), var(--fond-carte) center / cover no-repeat, var(--fond); }
.carriere .page-tete { padding-bottom: 4px; }
.carriere .titre-page h1 { font-weight: 900; font-size: 3em; text-transform: uppercase; letter-spacing: -1px; text-shadow: 0 4px 30px rgba(0,0,0,.6); }
.carriere .titre-page p { font-weight: 600; color: #d6d2e0; }
.cote-carriere .bt.repondre { justify-content: center; padding: 14px; font-size: 1.12em; border-radius: 14px; box-shadow: 0 14px 36px -12px rgba(255,194,61,.8); }
.avatar.mystere { --c: #5b566a; background: #2b2735; }
.avatar.mystere b { color: #9aa0ad; }
.dm.verrouille { opacity: .62; }
.dm .verrou { color: var(--doux); font-size: .88em; }
.carte-ville { position: relative; overflow-x: auto; overflow-y: hidden; min-height: 0; border-radius: 22px; cursor: grab; scrollbar-width: none; }
.carte-ville.glisse { cursor: grabbing; }
.carte-ville.glisse .carte-niveau { pointer-events: none; }
.plateau-carte { position: relative; height: 100%; min-height: 560px; }
.chemin-carte { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.chemin-carte path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.chemin-carte .pointilles { stroke: var(--accent); stroke-width: 9; stroke-dasharray: 1 19; opacity: .55; }
.chemin-carte .parcouru { stroke: var(--accent); stroke-width: 8; filter: drop-shadow(0 0 6px rgba(255,194,61,.5)); stroke-dasharray: 3000; stroke-dashoffset: 3000; animation: trace 1.6s .2s ease-out forwards; }
@keyframes trace { to { stroke-dashoffset: 0; } }
.carte-ville .chapitre { position: absolute; top: 0; bottom: 0; margin: 0; padding: 0; border-left: 1px dashed rgba(255,255,255,.07); }
.carte-ville .chapitre:first-of-type { border-left: 0; }
.etiquette-quartier { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px 7px 7px; border-radius: 999px; background: rgba(21,22,27,.82); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(6px); font-weight: 800; font-size: .82em; letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; }
.etiquette-quartier b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #141216; letter-spacing: 0; }
.carte-ville .chapitre.final .etiquette-quartier { color: #a77bff; border-color: rgba(167,123,255,.6); }
.carte-ville .chapitre.ferme .etiquette-quartier { opacity: .6; }
.carriere .carte-niveau { --c: var(--accent); position: absolute; transform: translate(-50%, -50%); width: 170px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; background: none; border: 0; border-radius: 0; overflow: visible; text-align: center; cursor: pointer; animation: noeud .5s backwards; }
.carriere .carte-niveau:hover:not(:disabled) { transform: translate(-50%, -50%) scale(1.06); border: 0; }
@keyframes noeud { from { opacity: 0; transform: translate(-50%, -30%) scale(.9); } }
.carte-niveau .vign { position: relative; display: block; width: 150px; height: 94px; border-radius: 16px; overflow: hidden; border: 3px solid rgba(255,255,255,.88); box-shadow: 0 16px 34px rgba(0,0,0,.65); background: #22242c; transition: box-shadow .2s; }
.carte-niveau .vign img { width: 100%; height: 100%; object-fit: cover; }
.carte-niveau .vign .numero { position: absolute; left: 8px; top: 4px; font-family: "Inter Display"; font-weight: 900; font-size: 1.35em; text-shadow: 0 2px 8px #000; }
.carte-niveau > strong { font-size: 1.02em; text-shadow: 0 2px 8px #000; white-space: nowrap; }
.carte-niveau > small { color: var(--doux); text-shadow: 0 2px 6px #000; }
.carte-niveau .etoiles { margin-top: 0; filter: drop-shadow(0 2px 4px #000); }
.carte-niveau .coche { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; background: var(--vert); color: #0b2a22; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.carte-niveau .cadenas { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(0,0,0,.35); }
.carriere .carte-niveau.ferme { opacity: 1; cursor: default; }
.carriere .carte-niveau.ferme .vign img { filter: grayscale(1) brightness(.35); }
.carriere .carte-niveau.ferme .vign { border-color: rgba(255,255,255,.5); }
.carriere .carte-niveau.ferme > strong, .carriere .carte-niveau.ferme > small { color: #8d8899; }
.carriere .carte-niveau.ici .vign { width: 190px; height: 118px; border-color: var(--accent); animation: pulse-or 2.2s infinite; }
.carriere .carte-niveau.ici .vign img { filter: brightness(1.12); }
.carriere .carte-niveau.final .vign { width: 210px; height: 128px; border-color: #a77bff; box-shadow: 0 0 50px -6px rgba(167,123,255,.7), 0 16px 34px rgba(0,0,0,.65); }
.carriere .carte-niveau.final > strong { font-family: "Inter Display"; font-weight: 900; font-size: 1.3em; text-transform: uppercase; }
.bulle-ici { position: absolute; left: 50%; bottom: calc(100% + 12px); z-index: 3; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px 5px 5px; border-radius: 12px; background: var(--accent); color: #1b1408; font-weight: 800; white-space: nowrap; box-shadow: 0 8px 22px -6px rgba(255,194,61,.85); animation: flotte 2.4s ease-in-out infinite; }
.bulle-ici::after { content: ""; position: absolute; left: 50%; top: 100%; border: 7px solid transparent; border-bottom: 0; border-top-color: var(--accent); transform: translateX(-50%); }
@keyframes flotte { 50% { transform: translate(-50%, -5px); } }
/* la commande d'un clip : conversation avec l'artiste */
.fenetre-commande { max-width: 860px; }
.conversation { --c: var(--accent); display: flex; flex-direction: column; gap: 12px; }
.tete-conversation { position: relative; display: flex; gap: 14px; align-items: flex-end; min-height: 120px; padding: 14px; margin: -4px -4px 0; border-radius: 14px; overflow: hidden; }
.tete-conversation > :not(.banniere-artiste) { position: relative; }
.tete-conversation strong { display: block; font-family: "Inter Display"; font-size: 1.6em; }
.tete-conversation small { color: #d8dae0; }
.fil { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.msg { margin: 0; max-width: 78%; padding: 9px 13px; border-radius: 4px 16px 16px 16px; background: #262433; line-height: 1.4; animation: monte .35s backwards; box-shadow: inset 3px 0 0 var(--c); }
.msg.moi { align-self: flex-end; border-radius: 16px 4px 16px 16px; background: color-mix(in srgb, var(--accent) 22%, #1c1d24); box-shadow: none; color: var(--accent); font-weight: 600; }
.fiche-clip { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 14px; padding: 12px; border-radius: 14px; background: var(--panneau2); border: 1px solid var(--bord); }
.fiche-clip .grande-vignette { aspect-ratio: 16/9; height: auto; }
.fiche-texte { display: flex; flex-direction: column; gap: 8px; }
.fiche-texte p { margin: 0; }
.fiche-texte .lieu { color: var(--doux); display: flex; gap: 4px; align-items: center; }
.contraintes { color: var(--accent); font-weight: 600; }
.conversation h3 { margin-top: 4px; }
.client-brief { --c: var(--accent); display: flex; gap: 14px; align-items: flex-start; padding: 12px; margin-bottom: 10px; border-radius: 14px; background: color-mix(in srgb, var(--c) 10%, var(--panneau2)); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); }
.client-brief strong { display: block; margin-bottom: 6px; }
.client-brief .msg { max-width: 100%; margin-bottom: 5px; }
.client-obj { --c: var(--accent); display: flex; align-items: center; gap: 8px; padding: 6px 4px 2px; font-weight: 600; }
.client-obj small { color: var(--doux); font-weight: 400; }
/* code de fin de campagne */
.fin-campagne { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
.fin-campagne .trophee-fin { color: var(--accent); filter: drop-shadow(0 0 22px rgba(255,194,61,.6)); }
.fin-campagne .trophee-fin .ic { color: var(--accent); }
.fin-campagne .champ { width: 100%; max-width: 420px; text-align: left; }
.champ-pseudo { width: 100%; padding: 10px 12px; border-radius: 10px; background: #0f1014; border: 1px solid var(--bord); font-size: 1.05em; }
.champ-pseudo:focus { outline: 2px solid var(--accent); }
.code-fin { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; }
.code-fin .code { font-family: "Inter Display"; font-weight: 900; font-size: 2em; letter-spacing: 3px; padding: 10px 18px; border-radius: 12px; background: #000; color: var(--accent); user-select: all; }
.code-fin .note { flex-basis: 100%; }
.fenetre-pied .bt.discord { background: #5865f2; border-color: #5865f2; color: #fff; }

/* ---------------------------------------------------------------- accueil 0.4 */
.ecran-accueil { background: radial-gradient(ellipse at 22% 50%, rgba(12,13,16,.94) 0%, rgba(12,13,16,.72) 38%, rgba(12,13,16,0) 70%), linear-gradient(0deg, rgba(12,13,16,.75), transparent 30%); }
.accueil { left: 5vw; max-width: 560px; gap: 18px; }
.accueil .logo .rap, .accueil .logo .france { font-size: 4.6em; }
.accueil .logo { animation: glisse-g .6s backwards; }
.carte-carriere { --c: var(--accent); display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: 18px; cursor: pointer; text-align: left; width: 100%;
  background: linear-gradient(110deg, color-mix(in srgb, var(--c) 26%, rgba(21,22,27,.92)), rgba(21,22,27,.9) 60%); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
  box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--c) 70%, transparent); backdrop-filter: blur(8px); transition: transform .15s, box-shadow .15s; animation: monte .55s .1s backwards; }
.carte-carriere:hover { transform: translateY(-2px); box-shadow: 0 22px 48px -16px color-mix(in srgb, var(--c) 85%, transparent); }
.carte-carriere.fini .avatar { color: #1b1408; }
.carte-carriere.fini .avatar .ic { color: #1b1408; }
.cc-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cc-texte small { color: var(--c); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; font-size: .75em; }
.cc-texte strong { font-size: 1.2em; }
.cc-texte em { font-style: normal; color: #d8dae0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-fleche { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #1b1408; }
.cc-fleche .ic { fill: #1b1408; }
.menu-principal { gap: 12px; align-items: stretch; animation: monte .55s .2s backwards; }
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bt.mode { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 11px; row-gap: 1px; align-items: center; text-align: left; padding: 12px 14px; border-radius: 14px; background: rgba(28,29,36,.82); backdrop-filter: blur(6px); white-space: normal; }
.bt.mode .ic { grid-row: 1 / 3; width: 26px; height: 26px; }
.bt.mode .libelle { font-weight: 700; font-size: 1.08em; }
.bt.mode small { color: var(--doux); font-size: .82em; line-height: 1.25; }
.bt.mode:hover:not(:disabled) { background: rgba(40,41,52,.92); border-color: rgba(255,255,255,.22); transform: translateY(-1px); }
.bt.mode.principal { background: linear-gradient(135deg, var(--accent), #ffad3d); color: #17130a; }
.bt.mode.principal small { color: rgba(23,19,10,.7); }
.bt.mode.principal .ic { color: #17130a; }
.bt.mode.principal:hover:not(:disabled) { background: linear-gradient(135deg, #ffd068, #ffbb52); }
.bt.mode.a-la-une { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.bt.mode.a-la-une::after { content: attr(data-badge); position: absolute; right: 10px; top: -8px; padding: 2px 7px; border-radius: 6px; background: var(--accent); color: #17130a; font-size: .7em; font-weight: 800; letter-spacing: 1px; }
.menu-secondaire { margin-top: 2px; }
.coin-accueil { position: absolute; right: 24px; top: 20px; display: flex; gap: 12px; align-items: center; animation: monte .5s .3s backwards; }
.coin-accueil .choix-langue { align-self: center; }
.ecran-accueil .reprendre { position: absolute; right: 24px; bottom: 44px; animation: monte .5s .4s backwards; backdrop-filter: blur(8px); }
.ecran-accueil .pied-accueil { position: absolute; left: 5vw; bottom: 16px; }

/* ---------------------------------------------------------------- avant-première */
body[data-ecran="resultats"] { background: radial-gradient(60% 70% at 32% 40%, #2a1638 0%, #0d0b13 70%); }
.avant-premiere { grid-template-columns: minmax(0, 1fr) 430px; }
.colonne-clip { display: flex; flex-direction: column; min-height: 0; padding: 18px 0 18px 22px; gap: 12px; position: relative; }
.colonne-clip .zone-clip { flex: 1; margin: 0; min-height: 0; border-radius: 14px; }
.tag-sortie { display: flex; gap: 12px; align-items: center; color: var(--doux); font-weight: 600; animation: glisse-g .4s backwards; }
.tag-sortie .live { padding: 6px 12px; border-radius: 8px; background: var(--accent2); color: #fff; font-weight: 800; letter-spacing: 2px; font-size: .85em; }
.titrage { position: fixed; z-index: 2; pointer-events: none; display: flex; flex-direction: column; gap: 2px; animation: monte .6s .5s backwards; }
.titrage strong { font-family: "Inter Display"; font-weight: 900; font-size: 2.3em; line-height: 1.05; text-shadow: 0 4px 24px rgba(0,0,0,.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.titrage span { font-weight: 600; text-shadow: 0 2px 10px rgba(0,0,0,.9); }
.signature { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; padding: 12px 16px; border-radius: 16px; background: rgba(21,22,27,.85); border: 1px solid rgba(255,255,255,.08); animation: monte .5s .3s backwards; }
.signature .grandes-etoiles { gap: 4px; filter: drop-shadow(0 6px 18px rgba(255,194,61,.45)); }
.signature .grandes-etoiles i:nth-child(2) { transform: translateY(-8px); }
.score-grand { display: flex; align-items: baseline; gap: 2px; color: var(--accent); }
.score-grand strong { font-family: "Inter Display"; font-weight: 900; font-size: 3em; line-height: 1; }
.bilan { display: flex; flex-direction: column; gap: 4px; min-width: 180px; }
.bilan > strong { font-family: "Inter Display"; font-weight: 900; font-size: 1.5em; text-transform: uppercase; }
.bilan .gains { display: flex; gap: 6px; flex-wrap: wrap; }
.signature .actions-resultat { margin: 0 0 0 auto; justify-content: flex-end; }
.debloque { position: absolute; right: 18px; top: 10px; z-index: 3; display: flex; gap: 12px; align-items: center; padding: 8px 14px 8px 8px; border-radius: 14px; background: #fff; color: #141216; box-shadow: 0 20px 50px rgba(0,0,0,.6); transform: rotate(2deg); animation: tampon .6s 1.4s backwards cubic-bezier(.2,1.6,.4,1); }
@keyframes tampon { from { opacity: 0; transform: rotate(-8deg) scale(1.5); } }
.debloque img { width: 84px; height: 48px; object-fit: cover; border-radius: 8px; }
.debloque .ic-debloque .ic { color: var(--accent); }
.debloque div { display: flex; flex-direction: column; }
.debloque small { font-weight: 800; font-size: .72em; letter-spacing: 2px; color: var(--accent2); text-transform: uppercase; }
.avant-premiere .panneau-resultat { background: rgba(17,16,24,.88); backdrop-filter: blur(10px); border-left: 1px solid rgba(255,255,255,.08); }
.public { display: flex; flex-direction: column; gap: 12px; }
.vues { display: flex; align-items: baseline; gap: 10px; }
.vues strong { font-family: "Inter Display"; font-weight: 900; font-size: 3.4em; line-height: 1; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.vues span { color: var(--doux); font-weight: 600; }
.hausse { display: flex; gap: 6px; flex-wrap: wrap; }
.hausse b { color: var(--vert); }
.graphe { height: 56px; display: flex; align-items: flex-end; gap: 4px; }
.graphe i { flex: 1; border-radius: 4px 4px 0 0; background: var(--accent); opacity: .85; transform-origin: bottom; animation: pousse .7s backwards cubic-bezier(.2,.9,.3,1.2); }
@keyframes pousse { from { transform: scaleY(0); } }
.coms h3, .reaction h3 { font-family: Inter; font-size: .75em; letter-spacing: 2px; text-transform: uppercase; color: var(--doux); margin-bottom: 4px; }
.com { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.06); animation: monte .45s backwards; line-height: 1.35; }
.com .pp { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .9em; color: #fff; }
.com b { display: block; font-size: .9em; }
.com b em { font-style: normal; color: var(--doux); font-weight: 400; margin-left: 6px; font-size: .9em; }
.reaction { --c: var(--accent); padding: 12px; border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 22%, transparent), rgba(255,61,110,.1)); border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); animation: monte .5s backwards; }
.reaction .ligne { display: flex; gap: 12px; align-items: center; }
.reaction p { margin: 0; font-weight: 600; font-size: 1.05em; line-height: 1.35; }
.detail-note { border-top: 1px solid var(--bord); padding-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.detail-note > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; font-weight: 700; }
.detail-note > summary::-webkit-details-marker { display: none; }
.detail-note > summary em { margin-left: auto; font-style: normal; color: var(--accent); }
.detail-note[open] > summary { margin-bottom: 10px; }
.detail-note > :not(summary) + :not(summary) { margin-top: 10px; }
.confettis { position: absolute; inset: 0; overflow: hidden; pointer-events: none !important; z-index: 4; }
.confettis i { position: absolute; top: -20px; width: 9px; height: 15px; border-radius: 2px; opacity: 0; animation: tombe 3.4s ease-in forwards; }
@keyframes tombe { 0% { opacity: 1; transform: translateY(0) rotate(var(--r)); } 100% { opacity: 0; transform: translateY(105vh) rotate(calc(var(--r) + 540deg)); } }

/* ---------------------------------------------------------------- premier clip, concours */
.premier-clip { background: radial-gradient(70% 80% at 50% 0%, #251536, var(--fond) 70%); display: flex; flex-direction: column; gap: 16px; }
.premier-clip .page-tete { background: none; }
.degrade { color: var(--accent); }
.trois-choix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.carte-choix { padding: 16px; border-radius: 18px; background: rgba(28,29,36,.75); border: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 10px; animation: monte .5s backwards; }
.carte-choix:nth-child(2) { animation-delay: .08s; } .carte-choix:nth-child(3) { animation-delay: .16s; }
.carte-choix h2 { display: flex; align-items: center; gap: 10px; font-size: 1.3em; }
.carte-choix h2 b { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #141216; font-size: .8em; }
.choix-lieux, .choix-ambiances { display: flex; flex-direction: column; gap: 9px; }
.choix-lieu, .choix-artiste, .choix-ambiance { position: relative; cursor: pointer; border: 2px solid transparent; border-radius: 14px; padding: 0; overflow: hidden; background: #1b1824; text-align: left; transition: transform .15s, border-color .15s, box-shadow .15s; }
.choix-lieu:hover, .choix-artiste:hover, .choix-ambiance:hover { transform: translateY(-2px); }
.choisi { border-color: var(--accent) !important; box-shadow: 0 0 0 4px rgba(255,194,61,.22), 0 0 36px -8px rgba(255,194,61,.7); }
.choisi::after { content: "✓"; position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #1b1408; display: grid; place-items: center; font-weight: 900; }
.choix-lieu { height: 96px; }
.choix-lieu img { width: 100%; height: 100%; object-fit: cover; }
.choix-lieu span { position: absolute; left: 10px; bottom: 8px; font-weight: 800; text-shadow: 0 2px 8px #000; }
.choix-artistes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.choix-artiste { --c: var(--accent); display: flex; flex-direction: column; align-items: center; padding-bottom: 10px; }
.avatar.portrait { width: 100%; height: 170px; border-radius: 12px 12px 0 0; box-shadow: none; margin-bottom: 8px; }
.avatar.portrait b { font-size: 3em; }
.choix-artiste small { color: var(--doux); font-size: .82em; }
.son-artiste { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: rgba(255,194,61,.08); border: 1px solid rgba(255,194,61,.35); font-weight: 600; cursor: pointer; text-align: left; }
.son-artiste .lecture { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; }
.son-artiste .lecture .ic { fill: #17130a; }
.choix-ambiance { display: flex; gap: 12px; align-items: center; padding: 10px; background: rgba(255,255,255,.05); }
.choix-ambiance .nuancier { flex: none; width: 70px; height: 46px; border-radius: 10px; }
.choix-ambiance > span:last-child { display: flex; flex-direction: column; }
.choix-ambiance small { color: var(--doux); }
.barre-action { display: flex; align-items: center; gap: 18px; padding: 14px 18px; border-radius: 18px; background: rgba(28,29,36,.85); border: 1px solid rgba(255,255,255,.1); }
.apercu-lieu { width: 180px; aspect-ratio: 16/9; object-fit: cover; border-radius: 12px; }
.barre-action strong { font-family: "Inter Display"; font-size: 1.35em; }
.barre-action p { margin: 4px 0 0; color: var(--doux); }
.barre-action .bt.action { margin-left: auto; font-size: 1.3em; padding: 16px 28px; animation: pulse-or 2.4s infinite; }
.voile-tournage { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(12,13,16,.92); animation: apparait .3s; }
.voile-tournage p { font-family: "Inter Display"; font-weight: 900; font-size: 2.6em; margin: 0; }
.voile-tournage small { color: var(--doux); }
.clap { color: var(--accent); animation: clap .7s infinite alternate; }
.clap .ic { color: var(--accent); }
@keyframes clap { to { transform: rotate(-10deg) scale(1.08); } }
.page.concours { --fond: none; background: linear-gradient(180deg, rgba(12,13,16,.72), #0c0d10 62%), var(--fond) center top / cover no-repeat; background-color: var(--fond-page, #0c0d10); display: flex; flex-direction: column; gap: 18px; }
.page.concours .page-tete { background: none; }
.affiche-concours { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 22px; align-items: center; padding: 18px; border-radius: 22px; background: rgba(21,22,27,.82); border: 1px solid rgba(255,194,61,.35); box-shadow: 0 30px 80px -40px rgba(255,194,61,.6); animation: monte .5s backwards; }
.affiche-concours .visuel { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 16px; }
.texte-affiche { display: flex; flex-direction: column; gap: 14px; }
.etiquette-concours { align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: rgba(255,194,61,.14); border: 1px solid rgba(255,194,61,.45); color: var(--accent); font-weight: 700; }
.fiches { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fiche-concours { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: 12px; background: var(--panneau2); border: 1px solid var(--bord); }
.fiche-concours .ic-fiche { color: var(--accent); }
.fiche-concours div { display: flex; flex-direction: column; gap: 2px; }
.fiche-concours small { color: var(--doux); font-size: .78em; text-transform: uppercase; letter-spacing: 1px; }
.fiche-concours em { font-style: normal; color: var(--doux); font-size: .85em; }
.etapes-concours { list-style: none; counter-reset: e; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.etapes-concours li { counter-increment: e; padding: 14px 14px 14px 56px; position: relative; border-radius: 14px; background: rgba(28,29,36,.75); display: flex; flex-direction: column; gap: 4px; }
.etapes-concours li::before { content: counter(e); position: absolute; left: 14px; top: 14px; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #1b1408; display: grid; place-items: center; font-weight: 900; }
.etapes-concours span { color: var(--doux); font-size: .9em; }
.page.concours > .bt.discord { align-self: flex-start; }

/* ---------------------------------------------------------------- paramètres 0.4 */
.parametres { background: radial-gradient(60% 50% at 80% 0%, #1d1530, var(--fond) 70%); }
.parametres .page-tete { background: none; }
.disposition-param { display: grid; grid-template-columns: 240px minmax(0, 720px); gap: 26px; align-items: start; }
.disposition-param nav.onglets { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 16px; background: rgba(21,22,27,.85); border: 1px solid var(--bord); }
.disposition-param nav.onglets .bt { justify-content: flex-start; border-color: transparent; background: transparent; padding: 11px 12px; border-radius: 10px; }
.disposition-param nav.onglets .bt:hover { background: rgba(255,255,255,.05); }
.disposition-param nav.onglets .bt.actif { background: rgba(255,194,61,.14); color: var(--accent); }
.disposition-param nav.onglets .bt.actif .ic { color: var(--accent); }
.corps-parametres { max-width: none; display: flex; flex-direction: column; gap: 14px; animation: monte .35s backwards; }
.tete-onglet { display: flex; gap: 14px; align-items: center; }
.tete-onglet .ic-onglet { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,194,61,.12); border: 1px solid rgba(255,194,61,.35); }
.tete-onglet .ic-onglet .ic { color: var(--accent); }
.tete-onglet h2 { font-size: 1.5em; }
.tete-onglet p { margin: 2px 0 0; color: var(--doux); }
.carte-param { padding: 14px 18px; border-radius: 16px; background: var(--panneau); border: 1px solid var(--bord); }
.carte-param > h3 { font-size: 1em; margin-bottom: 8px; }
.cartes-qualite { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.carte-qualite { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; border: 1px solid var(--bord); background: var(--panneau2); cursor: pointer; text-align: left; transition: border-color .15s, transform .15s; }
.carte-qualite:hover { transform: translateY(-2px); border-color: #4a4d5a; }
.carte-qualite.actif { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 10px 26px -12px rgba(255,194,61,.7); }
.carte-qualite small { color: var(--doux); font-size: .82em; line-height: 1.3; }
.barres-qualite { display: flex; gap: 3px; align-items: flex-end; height: 18px; }
.barres-qualite i { width: 6px; border-radius: 2px; background: #3a3d48; }
.barres-qualite i:nth-child(1) { height: 30%; } .barres-qualite i:nth-child(2) { height: 55%; } .barres-qualite i:nth-child(3) { height: 80%; } .barres-qualite i:nth-child(4) { height: 100%; }
.barres-qualite i.plein { background: var(--accent); }

/* ---------------------------------------------------------------- studio : assistant de réalisation */
.assistant { padding: 12px; margin-bottom: 12px; border-radius: 14px; background: linear-gradient(160deg, rgba(255,194,61,.12), rgba(255,61,110,.06)); border: 1px solid rgba(255,194,61,.3); text-align: left; }
.assistant h3 { display: flex; align-items: center; gap: 4px; font-size: .95em; margin-bottom: 10px; color: var(--accent); }
.tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.tuile-assistant { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; padding: 10px; border-radius: 11px; border: 1px solid var(--bord); background: var(--panneau2); cursor: pointer; text-align: left; transition: transform .12s, border-color .12s; }
.tuile-assistant:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--accent); }
.tuile-assistant:disabled { opacity: .45; cursor: default; }
.tuile-assistant .ic-tuile { color: var(--accent); }
.tuile-assistant small { color: var(--doux); font-size: .78em; line-height: 1.25; }
@media (max-width: 1280px) {
  .corps-carriere { grid-template-columns: 290px minmax(0, 1fr); }
  .avant-premiere { grid-template-columns: minmax(0, 1fr) 360px; }
  .cartes-qualite { grid-template-columns: 1fr 1fr; }
  .accueil .logo .rap, .accueil .logo .france { font-size: 3.8em; }
}

/* ================================================================ studio de jeu : HUD, hype, mission, dock, direct */
.ecran-studio { --haut-barre: 64px; }
.barre-studio { gap: 14px; padding: 0 12px; background: linear-gradient(180deg, #19141f, #121318); border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, rgba(167,123,255,0), rgba(255,61,110,.55), rgba(255,194,61,.55), rgba(31,209,165,0)) 1; position: relative; z-index: 6; }
.barre-studio .gauche-barre { flex: 1 1 0; gap: 10px; }
.bt.icone.rond { width: 40px; height: 40px; justify-content: center; padding: 0; background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
.bt.icone.rond:hover:not(:disabled) { background: rgba(255,194,61,.14); border-color: rgba(255,194,61,.5); color: var(--accent); }
.titre-projet .surtitre { color: var(--accent); text-transform: uppercase; letter-spacing: .14em; font-size: .68em; font-weight: 700; }
.titre-projet strong { font-family: "Inter Display", Inter, sans-serif; font-size: 1.12em; font-weight: 700; }
.centre-barre { flex: 0 1 470px; display: flex; justify-content: center; min-width: 0; }
.barre-studio .actions { flex: 1 1 0; gap: 8px; }
.bt.rond-texte { border-radius: 999px; padding: 8px 14px; background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
.bt.principal.terminer { border-radius: 999px; padding: 10px 18px; font-weight: 800; letter-spacing: .02em; box-shadow: 0 8px 22px -10px rgba(255,194,61,.9); }

/* jauge de hype */
.jauge-hype { --c: #7d84a0; position: relative; flex: 1; max-width: 470px; min-width: 250px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); cursor: pointer; transition: border-color .3s, box-shadow .3s; user-select: none; }
.jauge-hype:hover { border-color: color-mix(in srgb, var(--c) 60%, transparent); }
.ic-hype { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c) 85%, #fff 15%), color-mix(in srgb, var(--c) 55%, #000)); box-shadow: 0 0 18px -2px var(--c); transition: background .4s, box-shadow .4s; }
.hype-corps { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.hype-tete { display: flex; align-items: baseline; gap: 10px; line-height: 1; }
.hype-tete strong { font-family: "Inter Display"; font-weight: 900; letter-spacing: .2em; font-size: .78em; }
.hype-tete .palier { font-style: normal; color: var(--c); font-weight: 800; text-transform: uppercase; font-size: .7em; letter-spacing: .08em; transition: color .4s; white-space: nowrap; }
.hype-tete .valeur { margin-left: auto; font-family: "Inter Display"; font-weight: 900; font-size: 1.25em; font-variant-numeric: tabular-nums; }
.hype-barre { position: relative; height: 10px; border-radius: 6px; background: #0a0a0f; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.7); }
.hype-barre .rempli { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 6px; background: linear-gradient(90deg, #7b5cff, #ff3d6e 62%, #ffc23d); box-shadow: 0 0 14px var(--c); transition: width .7s cubic-bezier(.2,1.3,.4,1); overflow: hidden; }
.hype-barre .rempli::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-100%); animation: reflet 2.6s ease-in-out infinite; }
.hype-barre .crans i { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(0,0,0,.65); }
@keyframes reflet { 60%, 100% { transform: translateX(100%); } }
.jauge-hype.viral .ic-hype, .jauge-hype.live .ic-hype { animation: flamme 0.9s ease-in-out infinite alternate; }
.jauge-hype.live { border-color: color-mix(in srgb, var(--c) 70%, transparent); box-shadow: 0 0 24px -8px var(--c); }
@keyframes flamme { from { box-shadow: 0 0 14px -2px var(--c); transform: scale(1); } to { box-shadow: 0 0 30px 2px var(--c); transform: scale(1.08); } }
.jauge-hype.pulse { animation: pulse-jauge .5s ease-out; }
.jauge-hype.palier-franchi { animation: palier .8s ease-out; }
@keyframes pulse-jauge { 30% { transform: scale(1.04); box-shadow: 0 0 26px -6px var(--c); } }
@keyframes palier { 20% { transform: scale(1.08); box-shadow: 0 0 40px 0 var(--c); } }
.detail-hype { display: none; position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 40; background: rgba(16,16,22,.97); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 10px 12px; box-shadow: 0 20px 50px -14px #000; cursor: default; }
.jauge-hype.ouverte .detail-hype { display: block; animation: apparait .15s ease-out; }
.detail-hype .titre-detail { margin: 0 0 6px; font-weight: 700; color: var(--c); font-size: .85em; }
.detail-hype ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: .86em; }
.detail-hype li { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 6px; color: var(--doux); }
.detail-hype li b { font-variant-numeric: tabular-nums; font-size: .9em; }
.detail-hype li.fait { color: var(--texte); }
.detail-hype li.fait .marque { color: var(--vert); }
.detail-hype li.partiel .marque { color: var(--accent); }


/* dock des outils et grands boutons */
.dock-outils { left: 12px; bottom: 12px; display: flex; align-items: stretch; gap: 6px; padding: 6px; border-radius: 18px; background: rgba(13,13,19,.9); border: 1px solid rgba(255,255,255,.09); box-shadow: 0 16px 34px -14px #000, inset 0 1px 0 rgba(255,255,255,.05); backdrop-filter: blur(6px); pointer-events: auto; }
.groupe-dock { display: flex; gap: 3px; padding-right: 6px; border-right: 1px solid rgba(255,255,255,.08); }
.dock-outils .bt { position: relative; flex-direction: column; justify-content: center; gap: 3px; min-width: 60px; padding: 7px 8px 5px; border-radius: 12px; border: 1px solid transparent; background: transparent; color: #c4c8d2; font-size: .74em; font-weight: 600; transition: background .12s, color .12s, transform .12s, box-shadow .12s; }
.dock-outils .bt .ic { width: 22px; height: 22px; }
.dock-outils .bt.icone { min-width: 40px; }
.dock-outils .bt:hover:not(:disabled) { background: rgba(255,255,255,.07); color: #fff; transform: translateY(-2px); }
.dock-outils .bt.actif { background: linear-gradient(180deg, rgba(255,194,61,.26), rgba(255,194,61,.07)); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(255,194,61,.6), 0 0 18px -6px var(--accent); }
.dock-outils .bt.danger:hover:not(:disabled) { color: #ff8080; }
.dock-outils .bt kbd { position: absolute; top: 2px; right: 4px; font: 700 .68em Inter, sans-serif; color: rgba(255,255,255,.3); }
.dock-outils .bt.actif kbd { color: rgba(255,194,61,.75); }
.dock-outils .bt.avance { margin-left: 2px; }
.commandes-prise { right: 14px; bottom: 14px; display: flex; align-items: center; gap: 10px; pointer-events: auto; }
.bt.apercu-gros { height: 50px; padding: 0 18px 0 14px; border-radius: 999px; background: rgba(13,13,19,.9); border: 1px solid rgba(255,255,255,.14); font-weight: 700; box-shadow: 0 12px 26px -14px #000; backdrop-filter: blur(6px); }
.bt.apercu-gros .ic { width: 22px; height: 22px; color: var(--vert); }
.bt.apercu-gros:hover:not(:disabled) { border-color: var(--vert); background: rgba(13,40,34,.92); }
.bt.prise-gros { height: 60px; padding: 0 24px 0 9px; gap: 12px; border-radius: 999px; border: 0; color: #fff; background: linear-gradient(135deg, #ff4f7c, #ff2b3b 60%, #d81b4f); box-shadow: 0 14px 34px -10px rgba(255,61,110,.85), inset 0 1px 0 rgba(255,255,255,.35); animation: respire 2.4s ease-in-out infinite; }
.bt.prise-gros:hover:not(:disabled) { background: linear-gradient(135deg, #ff6a90, #ff3b4b 60%, #e82860); transform: translateY(-2px) scale(1.02); }
.bt.prise-gros .ic { width: 42px; height: 42px; padding: 9px; border-radius: 50%; background: rgba(255,255,255,.95); fill: #ff2b3b; stroke: #ff2b3b; }
.textes-prise { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.textes-prise strong { font-family: "Inter Display"; font-weight: 900; font-size: 1.15em; text-transform: uppercase; letter-spacing: .03em; }
.textes-prise small { font-size: .74em; opacity: .9; font-weight: 600; }
@keyframes respire { 50% { box-shadow: 0 14px 44px -6px rgba(255,61,110,1), inset 0 1px 0 rgba(255,255,255,.35); } }
.prises { left: auto; right: 12px; bottom: 88px; }

/* conseil de l'équipe */
.indice-equipe { --c: var(--accent); left: 12px; bottom: 88px; max-width: min(470px, calc(100% - 340px)); display: none; align-items: center; gap: 10px; padding: 7px 8px 7px 7px; border-radius: 18px 18px 18px 5px; background: rgba(13,13,19,.93); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); box-shadow: 0 14px 30px -14px #000; pointer-events: auto; }
.indice-equipe.visible { display: flex; }
.indice-equipe.cache { display: none; }
.indice-equipe.arrive { animation: arrive .45s cubic-bezier(.2,1.4,.4,1); }
@keyframes arrive { from { transform: translateY(14px) scale(.96); opacity: 0; } }
.visage-equipe { --c: var(--accent); flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #120f1a; font-family: "Inter Display"; font-weight: 900; box-shadow: 0 0 0 2px rgba(0,0,0,.6), 0 0 14px -3px var(--c); }
.visage-equipe.toi { background: linear-gradient(135deg, #ffc23d, #ff3d6e); color: #fff; }
.texte-indice { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: .9em; line-height: 1.3; }
.texte-indice small { color: var(--c); font-weight: 700; font-size: .78em; }
.indice-equipe .bt.principal { flex: none; }
body:has(#tuto) .indice-equipe { display: none; }

/* suivi de mission (objectifs de la campagne) */
.objectifs-calque { width: 310px; background: linear-gradient(165deg, rgba(26,20,36,.95), rgba(12,13,17,.93)); border: 1px solid rgba(255,194,61,.28); border-radius: 16px; padding: 6px 8px 10px; box-shadow: 0 18px 40px -20px #000; }
.objectifs-calque.complet { border-color: rgba(31,209,165,.7); box-shadow: 0 0 0 1px rgba(31,209,165,.25), 0 0 30px -10px var(--vert); }
.objectifs-calque .tete-obj strong { font-family: "Inter Display"; letter-spacing: .06em; text-transform: uppercase; font-size: .9em; }
.objectifs-calque .tete-obj .compte { background: rgba(255,194,61,.16); color: var(--accent); }
.objectifs-calque.complet .tete-obj .compte { background: rgba(31,209,165,.2); color: var(--vert); }
.client-obj { display: flex; align-items: center; gap: 8px; margin: 2px 4px 6px; }
.client-obj .avatar.mini { width: 34px; height: 34px; }
.client-obj > span { display: flex; flex-direction: column; line-height: 1.15; }
.client-obj small { color: var(--accent); font-size: .68em; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; }
.client-obj em { font-style: normal; color: var(--doux); font-size: .82em; }
.progres-mission { position: relative; height: 20px; margin: 4px 4px 8px; border-radius: 10px; background: #0a0a0f; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.7); }
.progres-mission i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 10px; background: linear-gradient(90deg, #12a585, #1fd1a5); box-shadow: 0 0 14px rgba(31,209,165,.6); transition: width .6s cubic-bezier(.2,1.3,.4,1); }
.progres-mission span { position: relative; display: block; text-align: center; line-height: 20px; font-size: .74em; font-weight: 800; letter-spacing: .04em; text-shadow: 0 1px 2px #000; }
.liste-obj li { grid-template-columns: 22px 1fr auto; align-items: start; }
.liste-obj li em { grid-column: 2 / 4; }
.liste-obj .marque { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; border: 2px solid #4a4e5c; }
.liste-obj .marque .ic { width: 11px; height: 11px; }
.liste-obj li.ok .marque { background: var(--vert); border-color: var(--vert); color: #06261d; }
.liste-obj li.ok .marque .ic { stroke-width: 3; }
.liste-obj li.ko .marque { border-color: rgba(255,77,77,.8); }
.liste-obj li.ok .texte-obj { color: #e7fff7; }
.liste-obj li.nouveau { animation: rempli 1.2s ease-out; }
.liste-obj li.nouveau .marque { animation: coche .6s cubic-bezier(.2,1.6,.4,1); }
@keyframes rempli { 0% { background: rgba(31,209,165,.45); } 100% { background: transparent; } }
@keyframes coche { 0% { transform: scale(.2) rotate(-40deg); } 70% { transform: scale(1.35); } }
.etoile-bonus { color: #4a4e5c; display: grid; place-items: center; }
.liste-obj li.ok .etoile-bonus { color: var(--accent); filter: drop-shadow(0 0 4px var(--accent)); }
.liste-obj li.ok .etoile-bonus .ic { fill: var(--accent); }
.titre-bonus .compte-bonus { color: var(--accent); font-weight: 700; }

/* viseur de caméra */
.viseur { display: none; }
.viseur.visible { display: block; }
.viseur .coin { position: absolute; width: 28px; height: 28px; border: 0 solid rgba(255,255,255,.85); }
.viseur .coin.hg { left: 12px; top: 12px; border-top-width: 2px; border-left-width: 2px; }
.viseur .coin.hd { right: 12px; top: 12px; border-top-width: 2px; border-right-width: 2px; }
.viseur .coin.bg { left: 12px; bottom: 12px; border-bottom-width: 2px; border-left-width: 2px; }
.viseur .coin.bd { right: 12px; bottom: 12px; border-bottom-width: 2px; border-right-width: 2px; }
.viseur .tiers i { position: absolute; background: rgba(255,255,255,.3); box-shadow: 0 0 1px rgba(0,0,0,.6); }
.viseur .tiers .v1, .viseur .tiers .v2 { top: 0; bottom: 0; width: 1px; }
.viseur .tiers .h1, .viseur .tiers .h2 { left: 0; right: 0; height: 1px; }
.viseur .tiers .v1 { left: 33.333%; }
.viseur .tiers .v2 { left: 66.666%; }
.viseur .tiers .h1 { top: 33.333%; }
.viseur .tiers .h2 { top: 66.666%; }
.viseur .mire { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; background: linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.7)) center / 1px 100% no-repeat, linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.7)) center / 100% 1px no-repeat; }
.viseur .vs-haut { position: absolute; left: 50px; top: 18px; display: flex; align-items: center; gap: 14px; font: 700 .86em Inter, sans-serif; letter-spacing: .08em; color: #fff; text-shadow: 0 1px 3px #000; }
.viseur .vs-rec { display: inline-flex; align-items: center; gap: 6px; color: #ff4040; }
.viseur .vs-tc { font-variant-numeric: tabular-nums; }
.viseur .vs-prise { color: rgba(255,255,255,.8); }
.viseur .vs-cam { position: absolute; left: 50px; bottom: 20px; font: 700 .8em Inter, sans-serif; letter-spacing: .06em; color: #fff; text-shadow: 0 1px 3px #000; }
.viseur .vs-info { position: absolute; right: 50px; bottom: 20px; font: 600 .76em Inter, sans-serif; color: rgba(255,255,255,.75); text-shadow: 0 1px 3px #000; }
.viseur.cadrage .vs-haut, .viseur.cadrage .vs-info { display: none; }
.viseur.cadrage .vs-cam { left: 50%; bottom: auto; top: 18px; transform: translateX(-50%); padding: 3px 10px; border-radius: 999px; background: rgba(0,0,0,.45); white-space: nowrap; }
.ecran-studio.vue-camera .objectifs-calque > :not(.tete-obj) { display: none; }
.ecran-studio.vue-camera .objectifs-calque { width: auto; padding-bottom: 4px; }
.ecran-studio.vue-camera .indice-equipe { display: none; }
.viseur.rec .tiers, .viseur.rec .mire { display: none; }
.viseur.secoue-fort { animation: secoue-fort .28s ease-out; }
@keyframes secoue-fort { 20% { transform: translate(5px, -3px); } 45% { transform: translate(-4px, 3px); } 70% { transform: translate(2px, -1px); } }
.volets { inset: 0; }
.volets i { position: absolute; left: 0; right: 0; height: 0; background: #000; z-index: 30; }
.volets i:first-child { top: 0; }
.volets i:last-child { bottom: 0; }
.volets.joue i { animation: volet .42s cubic-bezier(.6,0,.4,1); }
@keyframes volet { 45%, 55% { height: 50.5%; } }

/* pendant la prise et l'aperçu : la scène d'abord */
.ecran-studio.en-prise :is(.dock-outils, .indice-equipe, .commandes-prise, .boutons-vue, .objectifs-calque, .prises, .badge-vue, .alerte) { display: none !important; }
.ecran-studio.en-lecture :is(.dock-outils, .indice-equipe) { display: none !important; }
.ecran-studio :is(.catalogue, .reglages, .frise) { transition: opacity .3s, filter .3s; }
.ecran-studio.en-prise :is(.catalogue, .reglages, .frise) { opacity: .3; filter: saturate(.3); pointer-events: none; }
.ecran-studio.en-prise .barre-studio :is(.actions, .gauche-barre) { opacity: .45; pointer-events: none; }

/* réalisation en direct */
.direct { inset: 0; pointer-events: none; z-index: 8; }
.bande-direct { position: absolute; left: 0; right: 0; bottom: 0; height: 132px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; padding: 10px 12px; background: linear-gradient(180deg, rgba(10,9,14,.86), rgba(7,7,10,.98)); border-top: 1px solid rgba(255,194,61,.4); box-shadow: 0 -12px 30px -16px rgba(255,194,61,.45); transform: translateY(105%); transition: transform .5s cubic-bezier(.2,1.25,.35,1); pointer-events: auto; }
.direct.pre .bande-direct, .direct.live .bande-direct { transform: none; }
.direct.termine .bande-direct { transform: translateY(105%); transition-delay: .9s; }
.cams-direct { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.titre-direct { color: var(--doux); font-size: .66em; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; white-space: nowrap; }
.liste-cams { display: flex; gap: 6px; }
.cam-direct { --c: var(--accent); position: relative; width: 86px; height: 82px; border-radius: 14px; border: 2px solid color-mix(in srgb, var(--c) 55%, #000); background: linear-gradient(180deg, #1b1c25, #121219); color: var(--texte); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; transition: transform .08s, box-shadow .15s, border-color .15s; }
.cam-direct kbd { font: 900 1.7em "Inter Display", sans-serif; color: var(--c); line-height: 1; }
.cam-direct span { font-size: .7em; color: var(--doux); max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cam-direct .tally { position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: #34363f; }
.cam-direct.antenne { border-color: #ff3030; box-shadow: 0 0 0 2px rgba(255,48,48,.3), 0 0 26px -6px #ff3030; }
.cam-direct.antenne .tally { background: #ff3030; box-shadow: 0 0 10px #ff3030; }
.cam-direct:disabled { opacity: .35; cursor: default; }
.cam-direct.frappe, .drop-direct.frappe { animation: frappe .22s ease-out; }
@keyframes frappe { 40% { transform: scale(.9); filter: brightness(1.6); } }
.piste-direct { position: relative; border-radius: 12px; overflow: hidden; background: linear-gradient(180deg, #0b0a10, #06060a); border: 1px solid rgba(255,255,255,.07); }
.toile-direct { position: absolute; inset: 0; width: 100%; height: 100%; }
.legende-piste { position: absolute; right: 8px; font: 800 .6em Inter, sans-serif; letter-spacing: .16em; color: rgba(255,255,255,.3); }
.legende-piste.l1 { top: 22%; }
.legende-piste.l2 { top: 64%; }
.piste-direct.une .legende-piste.l2 { top: 44%; }
.juge { position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); pointer-events: none; }
.texte-juge { font: 900 2.7em "Inter Display", sans-serif; letter-spacing: .06em; animation: juge .75s cubic-bezier(.2,1.4,.4,1) forwards; display: flex; flex-direction: column; align-items: center; line-height: 1; -webkit-text-stroke: 1px rgba(0,0,0,.35); }
.texte-juge small { font-size: .42em; font-weight: 900; margin-top: 2px; }
.texte-juge.parfait { color: var(--accent); text-shadow: 0 0 18px rgba(255,194,61,.9); }
.texte-juge.bien { color: var(--vert); text-shadow: 0 0 14px rgba(31,209,165,.7); }
.texte-juge.rate { color: #ff5a5a; text-shadow: 0 0 12px rgba(255,77,77,.6); }
@keyframes juge { 0% { transform: scale(1.7); opacity: 0; } 18% { transform: scale(1); opacity: 1; } 75% { opacity: 1; } 100% { transform: translateY(-10px); opacity: 0; } }
.cote-direct { display: flex; align-items: center; gap: 12px; }
.score-direct { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; min-width: 96px; }
.score-direct small, .combo-direct span { color: var(--doux); font-size: .62em; letter-spacing: .16em; font-weight: 800; }
.score-valeur { font: 900 1.65em "Inter Display", sans-serif; font-variant-numeric: tabular-nums; }
.score-direct .multi { margin-top: 3px; padding: 1px 8px; border-radius: 999px; background: rgba(255,194,61,.16); color: var(--accent); font-weight: 900; font-size: .85em; }
.combo-direct { display: flex; flex-direction: column; align-items: center; min-width: 64px; line-height: 1; }
.combo-direct b { font: 900 2.1em "Inter Display", sans-serif; transition: color .2s; }
.combo-direct.chaud b { color: var(--accent2); text-shadow: 0 0 18px rgba(255,61,110,.8); }
.combo-direct.pulse, .multi.pulse { animation: pulse-combo .3s ease-out; }
@keyframes pulse-combo { 40% { transform: scale(1.25); } }
.drop-direct { width: 92px; height: 100px; border-radius: 16px; border: 2px solid #ff3d6e; background: radial-gradient(circle at 50% 28%, rgba(255,61,110,.45), #1d0f18 70%); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; box-shadow: 0 0 24px -8px #ff3d6e; }
.drop-direct strong { font: 900 1.05em "Inter Display", sans-serif; letter-spacing: .12em; }
.drop-direct kbd { font: 700 .66em Inter, sans-serif; color: rgba(255,255,255,.6); }
.equipe-direct { position: absolute; right: 14px; top: 14px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; pointer-events: none; }
.replique { --c: var(--accent); display: flex; align-items: center; gap: 9px; padding: 6px 14px 6px 6px; border-radius: 16px; background: rgba(10,10,14,.92); border-left: 3px solid var(--c); box-shadow: 0 10px 24px -12px #000; animation: replique .35s cubic-bezier(.2,1.4,.4,1); transition: opacity .35s, transform .35s; }
.replique div { display: flex; flex-direction: column; line-height: 1.2; }
.replique small { color: var(--c); font-size: .7em; font-weight: 700; }
.replique strong { font-size: .95em; }
.replique.part { opacity: 0; transform: translateX(20px); }
@keyframes replique { from { opacity: 0; transform: translateX(30px) scale(.9); } }
.decompte { position: absolute; left: 0; right: 0; top: 0; bottom: 132px; display: grid; place-items: center; background: radial-gradient(circle, rgba(0,0,0,0) 30%, rgba(0,0,0,.55)); transition: opacity .4s; }
.decompte.fini { opacity: 0; }
.claquette { grid-area: 1 / 1; width: 360px; filter: drop-shadow(0 22px 30px rgba(0,0,0,.7)); animation: entre-clap .45s cubic-bezier(.2,1.3,.4,1); }
.claquette.parti { animation: sort-clap .35s ease-in forwards; }
@keyframes entre-clap { from { transform: translateY(40px) rotate(-6deg) scale(.8); opacity: 0; } }
@keyframes sort-clap { to { transform: translateY(-60px) rotate(8deg) scale(.85); opacity: 0; } }
.barre-clap { height: 44px; display: flex; overflow: hidden; border-radius: 7px 7px 0 0; border: 3px solid #f2f2f2; border-bottom: 0; background: #111; transform-origin: 2% 100%; transform: rotate(-22deg); }
.claquette.clac .barre-clap { animation: clac .16s ease-in forwards; }
@keyframes clac { to { transform: rotate(0); } }
.barre-clap i { flex: 1; background: #f2f2f2; transform: skewX(-30deg); margin: 0 9px; }
.corps-clap { background: #141414; border: 3px solid #f2f2f2; border-radius: 0 0 8px 8px; padding: 10px 14px 12px; color: #f2f2f2; display: flex; flex-direction: column; gap: 6px; }
.ligne-clap { display: flex; align-items: baseline; gap: 10px; border-bottom: 2px solid rgba(242,242,242,.4); padding-bottom: 4px; min-width: 0; }
.ligne-clap small { font-size: .62em; font-weight: 800; letter-spacing: .14em; opacity: .7; }
.ligne-clap strong { font-family: "Inter Display"; font-weight: 900; font-size: 1.05em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ligne-clap.trois { display: grid; grid-template-columns: 1fr 1fr 1fr; border-bottom: 0; }
.ligne-clap.trois span { display: flex; flex-direction: column; }
.claquette.or .barre-clap, .claquette.or .corps-clap { border-color: #ffc23d; }
.claquette.or .barre-clap i { background: #ffc23d; }
.claquette.or .corps-clap { color: #ffd982; background: linear-gradient(160deg, #241b08, #141008); }
.claquette.neon .barre-clap, .claquette.neon .corps-clap { border-color: #ff3d6e; box-shadow: 0 0 22px rgba(255,61,110,.7); }
.claquette.neon .barre-clap i { background: #2bd6ff; box-shadow: 0 0 10px #2bd6ff; }
.claquette.neon .corps-clap { color: #bdf3ff; background: #0d0a16; }
.chiffre-decompte { grid-area: 1 / 1; font: 900 150px/1 "Inter Display", sans-serif; color: #fff; text-shadow: 0 0 50px rgba(255,61,110,.85), 0 6px 0 rgba(0,0,0,.5); opacity: 0; pointer-events: none; }
.chiffre-decompte.pop { animation: chiffre .5s cubic-bezier(.2,1.4,.4,1) forwards; }
.chiffre-decompte.action { font-size: 104px; color: var(--accent); letter-spacing: .04em; text-shadow: 0 0 60px rgba(255,194,61,.9), 0 6px 0 rgba(0,0,0,.5); }
@keyframes chiffre { 0% { transform: scale(2.2); opacity: 0; } 35% { transform: scale(1); opacity: 1; } 80% { opacity: 1; } 100% { transform: scale(.9); opacity: 0; } }
body.reduit .chiffre-decompte.pop { opacity: 1; }
.bilan-direct { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 28px 18px; border-radius: 22px; background: linear-gradient(165deg, rgba(34,24,44,.97), rgba(12,12,17,.97)); border: 1px solid rgba(255,194,61,.5); box-shadow: 0 30px 70px -20px #000, 0 0 40px -16px var(--accent); animation: bilan .55s cubic-bezier(.2,1.4,.4,1); pointer-events: none; }
.bilan-direct > small { color: var(--accent); text-transform: uppercase; letter-spacing: .16em; font-weight: 800; font-size: .72em; }
@keyframes bilan { from { transform: translate(-50%, -40%) scale(.7); opacity: 0; } }
.rang-direct { font: 900 84px/1 "Inter Display", sans-serif; background: linear-gradient(180deg, #e3e6ee, #8a90a0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rang-direct.rS { background-image: linear-gradient(180deg, #fff2b0, #ffc23d 45%, #ff3d6e); filter: drop-shadow(0 0 18px rgba(255,194,61,.7)); }
.rang-direct.rA { background-image: linear-gradient(180deg, #c8fff0, #1fd1a5); filter: drop-shadow(0 0 14px rgba(31,209,165,.6)); }
.rang-direct.rB { background-image: linear-gradient(180deg, #e7dcff, #a77bff); }
.rang-direct.rC { background-image: linear-gradient(180deg, #d4e6ff, #3d8bff); }
.chiffres-direct { display: grid; grid-template-columns: repeat(5, auto); gap: 4px 18px; text-align: center; }
.chiffres-direct span { display: flex; flex-direction: column; }
.chiffres-direct b { font: 900 1.3em "Inter Display", sans-serif; font-variant-numeric: tabular-nums; }
.chiffres-direct small { color: var(--doux); font-size: .66em; font-weight: 700; letter-spacing: .08em; }
.chiffres-direct .p b, .compte-juges b.p { color: var(--accent); }
.chiffres-direct .b b, .compte-juges b.b { color: var(--vert); }
.chiffres-direct .r b, .compte-juges b.r { color: #ff6b6b; }

/* textes qui s'envolent, étincelles, secousses */
.flotte { position: absolute; z-index: 70; transform: translate(-50%, -50%); pointer-events: none; white-space: nowrap; font-weight: 800; font-size: .95em; opacity: 0; animation: flotte 1.4s cubic-bezier(.2,.9,.3,1) forwards; text-shadow: 0 2px 6px rgba(0,0,0,.9); }
.flotte.gain, .flotte.perte, .flotte.gain-mission { padding: 5px 12px; border-radius: 999px; background: rgba(12,11,17,.9); border: 1px solid rgba(255,194,61,.55); box-shadow: 0 8px 22px -8px rgba(255,194,61,.6); }
.flotte.gain { color: var(--accent); font-size: 1.05em; }
.flotte.gain b { color: var(--accent2); letter-spacing: .08em; }
.flotte.perte { color: #ff8a8a; font-size: .85em; border-color: rgba(255,77,77,.45); box-shadow: none; }
.flotte.gain-mission { color: var(--vert); font-size: 1em; border-color: rgba(31,209,165,.6); box-shadow: 0 8px 22px -8px rgba(31,209,165,.6); }
@keyframes flotte { 0% { opacity: 0; transform: translate(-50%, 10%) scale(.7); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); } 30% { transform: translate(-50%, -60%) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -150%) scale(1); } }
body.reduit .flotte { opacity: 1; }
.etincelles { position: absolute; z-index: 71; width: 0; height: 0; pointer-events: none; }
.etincelles i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 2px; animation: etincelle .75s cubic-bezier(.1,.8,.3,1) forwards; }
@keyframes etincelle { to { transform: translate(var(--dx), var(--dy)) rotate(200deg) scale(.15); opacity: 0; } }
.secoue { animation: secoue .4s ease-out; }
@keyframes secoue { 20% { transform: translateX(-5px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.bande-direct.secoue { animation: secoue-y .3s ease-out; }
@keyframes secoue-y { 30% { transform: translateY(3px); } 60% { transform: translateY(-2px); } }

/* succès, montée de niveau, XP */
#succes-bandeaux { position: absolute; top: 78px; right: 16px; z-index: 85; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.bandeau-succes { display: flex; align-items: center; gap: 12px; min-width: 300px; max-width: 380px; padding: 10px 14px 10px 10px; border-radius: 18px; background: linear-gradient(120deg, rgba(48,36,10,.97), rgba(22,17,30,.97)); border: 1px solid rgba(255,194,61,.65); box-shadow: 0 16px 40px -14px rgba(255,194,61,.55); animation: entre-bandeau .5s cubic-bezier(.2,1.4,.4,1); transition: transform .35s, opacity .35s; }
.bandeau-succes.part { transform: translateX(120%); opacity: 0; }
@keyframes entre-bandeau { from { transform: translateX(120%); } }
.bandeau-succes .ic-succes { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, #ffe08a, #ffc23d 60%, #c98a10); color: #241806; box-shadow: 0 0 20px -2px var(--accent); }
.bandeau-succes div { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.bandeau-succes small { color: var(--accent); text-transform: uppercase; letter-spacing: .12em; font-size: .66em; font-weight: 800; }
.bandeau-succes strong { font-family: "Inter Display"; font-size: 1.05em; }
.bandeau-succes em { font-style: normal; color: var(--doux); font-size: .8em; }
.xp-succes { margin-left: auto; flex: none; padding: 3px 9px; border-radius: 999px; background: rgba(255,194,61,.18); color: var(--accent); font-size: .82em; }
.annonce-niveau { position: absolute; inset: 0; z-index: 90; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle, rgba(40,22,52,.82), rgba(4,4,8,.94) 70%); animation: apparait .3s ease-out; pointer-events: auto; }
.annonce-niveau.part { opacity: 0; transition: opacity .3s; }
.rayons { position: absolute; left: 50%; top: 50%; width: 1500px; height: 1500px; margin: -750px 0 0 -750px; border-radius: 50%; background: repeating-conic-gradient(rgba(255,194,61,.075) 0 9deg, transparent 9deg 18deg); -webkit-mask: radial-gradient(circle, #000 15%, transparent 62%); mask: radial-gradient(circle, #000 15%, transparent 62%); animation: tourne 26s linear infinite; }
.contenu-niveau { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 20px; }
.contenu-niveau > small { color: var(--accent); text-transform: uppercase; letter-spacing: .3em; font-weight: 800; }
.gros-niveau { display: flex; flex-direction: column; align-items: center; line-height: .9; }
.gros-niveau span { font: 900 1.6em "Inter Display", sans-serif; letter-spacing: .35em; color: #fff; margin-right: -.35em; }
.gros-niveau b { font: 900 170px/1 "Inter Display", sans-serif; background: linear-gradient(180deg, #fff6c8, #ffc23d 45%, #ff3d6e); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 30px rgba(255,194,61,.6)); animation: frappe-niveau .7s cubic-bezier(.2,1.5,.4,1); }
@keyframes frappe-niveau { 0% { transform: scale(3); opacity: 0; } 60% { transform: scale(.92); opacity: 1; } }
.contenu-niveau p { margin: 0; color: #d9dbe3; font-size: 1.05em; }
.butin { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.carte-butin { position: relative; width: 210px; padding: 18px 14px 14px; border-radius: 18px; display: flex; flex-direction: column; align-items: center; gap: 6px; background: linear-gradient(165deg, #2a1d3a, #15131c); border: 1px solid rgba(255,194,61,.55); box-shadow: 0 18px 40px -16px #000, 0 0 30px -14px var(--accent); animation: retourne .6s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes retourne { from { transform: perspective(600px) rotateY(90deg) scale(.8); opacity: 0; } }
.carte-butin .nouveau { position: absolute; top: -11px; padding: 3px 10px; border-radius: 999px; background: var(--accent2); color: #fff; font: 900 .72em Inter, sans-serif; letter-spacing: .1em; transform: rotate(-4deg); box-shadow: 0 6px 16px -6px var(--accent2); }
.carte-butin .ic-butin { color: var(--accent); }
.carte-butin small { color: var(--doux); font-size: .8em; line-height: 1.3; }
.ligne-recompenses { display: flex; gap: 10px; flex: none; animation: monte .5s .5s backwards; }
.ligne-recompenses > * { flex: 1 1 0; min-width: 0; }
.ligne-recompenses > .carte-direct { flex: 0 1 auto; }
.carte-direct { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 14px; background: linear-gradient(160deg, rgba(36,26,48,.9), rgba(20,20,27,.9)); border: 1px solid rgba(255,194,61,.3); }
.carte-direct .rang-direct { font-size: 58px; }
.carte-direct > div:last-child { display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.carte-direct small { color: var(--accent); text-transform: uppercase; letter-spacing: .12em; font-size: .66em; font-weight: 800; }
.carte-direct .compte-juges { font-size: .8em; color: var(--doux); }
.carte-direct em { font-style: normal; color: var(--vert); font-size: .85em; font-weight: 700; }
.bloc-xp { padding: 10px 14px; border-radius: 14px; background: rgba(28,29,36,.9); border: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 6px; }
.xp-tete { display: flex; align-items: center; gap: 8px; color: var(--accent); }
.xp-tete strong { color: var(--texte); }
.xp-niveau { padding: 1px 8px; border-radius: 999px; background: rgba(255,194,61,.16); color: var(--accent); font-weight: 800; font-size: .82em; }
.xp-total { margin-left: auto; font: 900 1.1em "Inter Display", sans-serif; color: var(--accent); font-variant-numeric: tabular-nums; }
.xp-barre { height: 10px; border-radius: 6px; background: #0a0a0f; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.7); }
.xp-barre i { display: block; height: 100%; width: 0; border-radius: 6px; background: var(--accent); box-shadow: 0 0 12px rgba(255,194,61,.6); }
.xp-gains { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; font-size: .78em; color: var(--doux); }
.xp-gains li { display: flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.05); animation: apparait-g .3s ease-out both; }
.xp-gains li b { color: var(--accent); font-variant-numeric: tabular-nums; }
.xp-gains li em { display: inline-flex; align-items: center; color: #ff9a3d; font-style: normal; font-weight: 800; }
@keyframes apparait-g { from { opacity: 0; transform: translateX(-8px); } }
.page-succes { display: flex; flex-direction: column; gap: 10px; }
.page-succes h3 { font-size: 1em; margin-top: 6px; }
.tete-succes { display: flex; align-items: center; gap: 18px; padding: 12px 14px; border-radius: 16px; background: linear-gradient(140deg, rgba(255,194,61,.12), rgba(167,123,255,.08)); border: 1px solid rgba(255,194,61,.25); }
.tete-succes > div:last-child { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.tete-succes small { color: var(--doux); }
.tete-succes .serie-ligne { display: inline-flex; align-items: center; gap: 4px; color: #ff9a3d; font-weight: 700; }
.badge-grand { --part: 0%; flex: none; width: 82px; height: 82px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--accent) var(--part), #2a2c36 0); box-shadow: 0 0 30px -10px var(--accent); }
.badge-grand b { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; background: #15161b; font: 900 2em "Inter Display", sans-serif; color: var(--accent); }
.liste-butin { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ligne-butin { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px; background: #14151b; border: 1px solid var(--bord); opacity: .6; }
.ligne-butin.obtenu { opacity: 1; border-color: rgba(255,194,61,.5); }
.ligne-butin .ic-butin { color: var(--accent); }
.ligne-butin div { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; }
.ligne-butin small { color: var(--doux); font-size: .8em; }
.ligne-butin em { font-style: normal; color: var(--accent); font-weight: 800; font-size: .8em; }
.grille-succes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.carte-succes { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; background: #14151b; border: 1px solid var(--bord); filter: grayscale(.8); opacity: .62; }
.carte-succes.obtenu { filter: none; opacity: 1; background: linear-gradient(150deg, rgba(255,194,61,.13), rgba(20,21,27,.9)); border-color: rgba(255,194,61,.5); }
.carte-succes .ic-succes { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #22242d; color: var(--doux); }
.carte-succes.obtenu .ic-succes { background: radial-gradient(circle at 50% 35%, #ffe08a, #ffc23d 60%, #c98a10); color: #241806; }
.carte-succes div { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; }
.carte-succes small { color: var(--doux); font-size: .8em; }
.carte-succes em { font-style: normal; color: var(--accent); font-size: .78em; font-weight: 800; white-space: nowrap; }

/* catalogue et panneau de droite, version jeu */
.onglets-cat { gap: 4px; padding: 8px; }
.onglet-cat { border-radius: 10px; padding: 8px; transition: background .12s, color .12s, box-shadow .12s; }
.onglet-cat:hover { color: var(--texte); background: rgba(255,255,255,.05); }
.onglet-cat.actif { background: linear-gradient(180deg, rgba(255,194,61,.24), rgba(255,194,61,.06)); box-shadow: inset 0 0 0 1px rgba(255,194,61,.55); }
.cat-titre { font-family: "Inter Display"; font-size: 1.05em; }
.carte-cat { border-radius: 12px; background: linear-gradient(180deg, #20212b, #16171e); transition: transform .12s, border-color .12s, box-shadow .12s; }
.carte-cat:not(.verrou):hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 12px 22px -12px rgba(255,194,61,.7); }
.carte-cat:not(.verrou):active { transform: scale(.95); }
.carte-cat:not(.verrou)::after { content: "+"; position: absolute; right: 6px; bottom: 26px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #17130a; font-weight: 900; line-height: 1; opacity: 0; transform: scale(.5); transition: opacity .12s, transform .15s cubic-bezier(.2,1.5,.4,1); }
.carte-cat:not(.verrou):hover::after { opacity: 1; transform: scale(1); }
.assistant { border-radius: 16px; }
.tuile-assistant { border-radius: 13px; background: linear-gradient(170deg, #22232d, #18191f); }
.tuile-assistant .ic-tuile { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,194,61,.14); margin-bottom: 3px; }
.tuile-assistant:hover:not(:disabled) { box-shadow: 0 10px 22px -14px rgba(255,194,61,.8); }
.legende-souris { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 12px; }
.legende-souris span { padding: 3px 8px; border-radius: 999px; background: #14151b; border: 1px solid var(--bord); font-size: .78em; color: var(--doux); }
.frise .drops .marque-drop { position: absolute; top: 4px; width: 18px; height: 18px; margin-left: -9px; border-radius: 6px; display: grid; place-items: center; background: #ff3d6e; color: #fff; cursor: pointer; box-shadow: 0 0 8px rgba(255,61,110,.6); }
.frise .drops .marque-drop:hover { background: #ff6a8f; }

@media (max-width: 1400px) { .bt.rond-texte span { display: none; } .bt.rond-texte { padding: 9px; } }
@media (max-width: 1280px) {
  .jauge-hype { min-width: 200px; }
  .hype-tete .palier { display: none; }
  .dock-outils .bt { min-width: 44px; }
  .dock-outils .bt span { display: none; }
  .dock-outils .bt.avance span { display: inline; }
  .titre-projet strong { max-width: 160px; }
  .cam-direct { width: 70px; }
  .score-direct { min-width: 70px; }
}

/* briefing de mission */
.fenetre.fenetre-briefing { width: min(860px, 94vw); background: linear-gradient(170deg, #1d1726, #131419 40%); border-color: rgba(255,194,61,.28); }
.fenetre-briefing .fenetre-tete h2 { font-family: "Inter Display"; font-weight: 900; letter-spacing: .01em; }
.briefing { display: flex; flex-direction: column; gap: 10px; }
.mission-cible { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: linear-gradient(110deg, rgba(31,209,165,.16), rgba(31,209,165,.04)); border: 1px solid rgba(31,209,165,.45); color: var(--vert); }
.mission-cible > div { display: flex; flex-direction: column; gap: 2px; color: var(--texte); }
.mission-cible small { color: var(--vert); text-transform: uppercase; letter-spacing: .14em; font-weight: 800; font-size: .68em; }
.mission-cible strong { font-family: "Inter Display"; font-size: 1.12em; line-height: 1.3; }
.mission-cible em { font-style: normal; color: var(--doux); font-size: .85em; line-height: 1.35; }
.cartes-mission { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.carte-mission { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: #17181f; border: 1px solid var(--bord); }
.carte-mission .ic-mission { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(31,209,165,.15); color: var(--vert); }
.carte-mission.bonus .ic-mission { background: rgba(255,194,61,.15); color: var(--accent); }
.carte-mission > div { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; min-width: 0; }
.carte-mission small { color: var(--vert); font-size: .66em; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; }
.carte-mission.bonus small { color: var(--accent); }
.carte-mission strong { font-weight: 600; font-size: .92em; }
.carte-mission em { font-style: normal; color: var(--doux); font-size: .78em; }
.butin-mission { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 12px; border-radius: 12px; background: rgba(255,194,61,.07); border: 1px dashed rgba(255,194,61,.35); color: var(--doux); font-size: .85em; }
.etoiles-mission { color: var(--accent); letter-spacing: .1em; font-size: 1.15em; text-shadow: 0 0 10px rgba(255,194,61,.6); }
.gain-mission { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-weight: 700; }
.briefing .client-brief { margin-bottom: 0; }
.fenetre-briefing .fenetre-pied .bt.principal { padding: 12px 28px; font-size: 1.05em; font-weight: 800; border-radius: 999px; box-shadow: 0 10px 26px -10px rgba(255,194,61,.9); }
.commandes-prise.mission-prete .bt.prise-gros { background: linear-gradient(135deg, #ff6a3d, #ff2b3b 50%, #ff3d6e); animation: respire-fort 1.2s ease-in-out infinite; }
@keyframes respire-fort { 50% { transform: scale(1.05); box-shadow: 0 0 0 6px rgba(255,61,110,.25), 0 18px 50px -6px rgba(255,61,110,1); } }
.viseur.en-feu { box-shadow: inset 0 0 50px -6px rgba(255,61,110,.65), inset 0 0 0 2px rgba(255,194,61,.55); animation: en-feu .6s ease-in-out infinite alternate; }
@keyframes en-feu { to { box-shadow: inset 0 0 70px -4px rgba(255,61,110,.8), inset 0 0 0 3px rgba(255,194,61,.8); } }
/* textes qui s'envolent, étincelles, bandeaux de succès : jamais d'obstacle aux clics (#ui > * les rendrait cliquables) */
#ui > :is(.flotte, .etincelles, #succes-bandeaux) { pointer-events: none; }

/* ================================================================ studio simple (simple.js) : un jeu, pas un logiciel */
.ecran-studio.simple { display: block; --larg-carte: clamp(292px, 23vw, 372px); --larg-tuiles: 104px; --marge: 22px; --verre: rgba(20,18,28,.82); --ligne: rgba(255,255,255,.09); }
.ecran-studio.simple > :is(.catalogue, .barre-avancee) { display: none; }
.ecran-studio.simple .zone-scene { position: absolute; inset: 0; }
.ecran-studio:not(.simple) .simple-seul, .ecran-studio:not(.simple) .anneau-depot { display: none !important; }
.ecran-studio.simple :is(.dock-outils, .commandes-prise, .boutons-vue, .objectifs-calque) { display: none !important; }
.ecran-studio.simple :is(.carte-client, .tuile-action, .bac-objets, .pastille-son, .frise, .reglages, .palette-ambiances, .pastille-echauffe) { background: var(--verre); backdrop-filter: blur(14px); border: 1px solid var(--ligne); box-shadow: 0 24px 60px -24px rgba(0,0,0,.8); }

/* barre du haut : titre du clip, la musique, Mode avancé, Tourner la prise */
.ecran-studio.simple .barre-studio { position: absolute; left: 0; right: 0; top: 0; height: 88px; z-index: 7; padding: 0 var(--marge); gap: 18px; background: linear-gradient(180deg, rgba(8,7,12,.88), rgba(8,7,12,.72) 72%, transparent); border: 0; pointer-events: none; }
.ecran-studio.simple .barre-studio > * { pointer-events: auto; }
.ecran-studio.simple .barre-studio .gauche-barre { gap: 16px; flex: 1 1 0; min-width: 0; }
.ecran-studio.simple .barre-studio .bt.icone.rond { width: 48px; height: 48px; border-radius: 14px; background: var(--verre); border-color: var(--ligne); backdrop-filter: blur(14px); flex: none; }
.ecran-studio.simple .barre-studio .actions .bt.icone.rond { width: 42px; height: 42px; border-radius: 50%; }
.titre-clip { display: flex; flex-direction: column; min-width: 0; }
.titre-clip strong { font-family: "Inter Display", Inter, sans-serif; font-weight: 900; font-size: 2.1em; text-transform: uppercase; letter-spacing: -.02em; line-height: .95; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 14px rgba(0,0,0,.6); }
.titre-clip small { color: #b9b3c4; font-weight: 600; font-size: 1em; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 6px rgba(0,0,0,.8); }
.ecran-studio.simple .centre-barre { flex: 0 1 auto; display: flex; gap: 10px; align-items: center; min-width: 0; }
.pastille-son { display: flex; align-items: center; gap: 12px; padding: 7px 20px 7px 7px; border-radius: 999px; white-space: nowrap; min-width: 0; }
.pastille-son .lecture-son { width: 40px; height: 40px; border-radius: 50%; padding: 0; justify-content: center; background: var(--accent); border: 0; color: #17130a; flex: none; }
.pastille-son .lecture-son:hover:not(:disabled) { background: #ffd068; }
.pastille-son .lecture-son .ic { width: 16px; height: 16px; }
.eq { display: flex; gap: 3px; align-items: flex-end; height: 24px; flex: none; }
.eq i { width: 4px; height: 24px; border-radius: 2px; background: var(--vert); transform-origin: bottom; transform: scaleY(.3); transition: transform .3s; }
.pastille-son.joue .eq i { animation: eq .8s ease-in-out infinite alternate; }
.pastille-son:not(.joue) .eq i { background: #5b5f6d; }
@keyframes eq { 0% { transform: scaleY(.25); } 45% { transform: scaleY(1); } 100% { transform: scaleY(.45); } }
.pastille-son strong { font-weight: 700; font-size: 1.12em; }
.info-son { color: var(--doux); font-size: 1.05em; overflow: hidden; text-overflow: ellipsis; }
.jauge-hype.compacte { flex: none; min-width: 0; max-width: none; grid-template-columns: auto auto; gap: 6px; padding: 4px 14px 4px 4px; background: var(--verre); border-color: var(--ligne); backdrop-filter: blur(14px); }
.jauge-hype.compacte .ic-hype { width: 36px; height: 36px; }
.jauge-hype.compacte :is(.hype-barre, .palier) { display: none; }
.jauge-hype.compacte .hype-tete { gap: 8px; }
.jauge-hype.compacte .detail-hype { left: auto; right: 0; width: 300px; }
.inter-avance { display: flex; align-items: center; gap: 10px; margin: 0; color: #c9c3d4; font-weight: 600; font-size: 1em; white-space: nowrap; }
.inter-avance > span { color: inherit; }
.inter-avance i { width: 42px !important; height: 24px !important; border-radius: 12px !important; background: rgba(255,255,255,.15) !important; }
.inter-avance i::after { width: 18px !important; height: 18px !important; top: 3px !important; left: 3px !important; }
.inter-avance input:checked + i { background: var(--accent) !important; }
.inter-avance input:checked + i::after { transform: translateX(18px) !important; }
.barre-studio .actions .inter-avance { margin-right: 4px; }
.bt.bouton-or { gap: 12px; padding: 15px 28px; border-radius: 14px; border: 0; background: linear-gradient(180deg, #ffd56b, var(--accent)); color: #1b1408; font-weight: 800; font-size: 1.36em; box-shadow: 0 10px 30px -8px rgba(255,194,61,.7), inset 0 -3px 0 rgba(0,0,0,.15); }
.bt.bouton-or:hover:not(:disabled) { background: linear-gradient(180deg, #ffe08a, #ffcb52); transform: translateY(-1px); }
.bt.bouton-or .ic { width: 24px; height: 24px; }
.bt.bouton-or.pret { animation: or-pret 1.3s ease-in-out infinite; }
@keyframes or-pret { 50% { transform: scale(1.04); box-shadow: 0 0 0 6px rgba(255,194,61,.22), 0 16px 44px -6px rgba(255,194,61,1), inset 0 -3px 0 rgba(0,0,0,.15); } }
.ecran-studio.simple .barre-studio .chrono-studio { padding: 8px 14px; border-radius: 999px; background: var(--verre); }

/* colonne de gauche : la carte de l'artiste-client, et l'équipe en dessous */
.colonne-simple { left: var(--marge); top: 96px; bottom: 74px; width: var(--larg-carte); display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.colonne-simple > * { pointer-events: auto; }
.carte-client { --c: var(--accent); border-radius: 18px; padding: 16px 16px 14px; min-height: 0; overflow: auto; flex: 0 1 auto; scrollbar-width: thin; }
.carte-client.vide { display: none; }
.carte-tete { display: flex; align-items: center; gap: 12px; padding-bottom: 13px; border-bottom: 1px solid var(--ligne); }
.carte-client.repliee .carte-tete { padding-bottom: 0; border: 0; }
.carte-tete .avatar { width: 52px; height: 52px; box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
.carte-tete .qui { flex: 1; display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.carte-tete .qui strong { font-size: 1.32em; font-weight: 700; }
.en-ligne { color: var(--vert); font-weight: 600; font-size: .93em; display: inline-flex; align-items: center; gap: 6px; }
.en-ligne i, .point-ligne { width: 7px; height: 7px; border-radius: 50%; background: var(--vert); box-shadow: 0 0 8px var(--vert); display: inline-block; }
.compte-demandes { color: var(--accent); font-weight: 700; font-size: .93em; }
.carte-tete .bt.icone { background: transparent; border-color: transparent; color: var(--doux); }
.carte-tete .bt.icone:hover:not(:disabled) { color: #fff; background: rgba(255,255,255,.07); }
.bulles-client { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.bulle-client { margin: 0; padding: 9px 13px; border-radius: 4px 16px 16px 16px; background: rgba(255,255,255,.09); font-size: 1.02em; line-height: 1.38; }
.demandes { margin-top: 14px; display: flex; flex-direction: column; gap: 7px; }
.demandes h3 { font: 800 .86em Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 2px; }
.tache { display: flex; gap: 12px; align-items: flex-start; padding: 9px 11px; border-radius: 12px; background: rgba(255,255,255,.05); transition: background .3s, box-shadow .3s; }
.tache > .ic { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .95em; font-weight: 800; background: rgba(255,255,255,.1); color: #d6d1de; }
.tache > .ic .ic { width: 14px; height: 14px; }
.corps-tache { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; line-height: 1.3; }
.corps-tache strong { font-weight: 600; font-size: 1.07em; }
.corps-tache small { color: var(--doux); font-size: .93em; }
.tache.ok > .ic { background: var(--vert); color: #0b2a22; }
.tache.ok .corps-tache strong { color: var(--doux); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.35); }
.tache.encours { background: rgba(255,194,61,.12); box-shadow: inset 0 0 0 1.5px rgba(255,194,61,.5); }
.tache.encours > .ic { background: var(--accent); color: #1b1408; }
.tache.ko:not(.encours) > .ic { background: rgba(255,77,77,.22); color: #ff9a9a; }
.tache.prise > .ic { background: rgba(255,255,255,.08); color: var(--doux); }
.tache.bonus > .ic { background: rgba(167,123,255,.3); color: #e2d6ff; }
.tache.bonus.ok > .ic { background: #a77bff; color: #1a1030; }
.tache.bonus .corps-tache strong { color: #e8e0ff; }
.barre-demande { margin-top: 5px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
.barre-demande i { display: block; height: 100%; border-radius: 3px; background: var(--accent); transition: width .5s cubic-bezier(.2,1.3,.4,1); }
.tache.bonus .barre-demande i { background: #a77bff; }
.tache.nouveau { animation: rempli 1.2s ease-out; }
.tache.nouveau > .ic { animation: coche .6s cubic-bezier(.2,1.6,.4,1); }
.colonne-simple .indice-equipe { position: static; max-width: none; border-radius: 16px 16px 16px 5px; background: var(--verre); backdrop-filter: blur(14px); font-size: .95em; padding: 8px; box-shadow: 0 24px 60px -24px rgba(0,0,0,.8); }
.colonne-simple .indice-equipe .visage-equipe { width: 30px; height: 30px; }
.colonne-simple .indice-equipe { flex-wrap: wrap; }
.colonne-simple .indice-equipe .texte-indice { flex: 1 1 200px; }
.colonne-simple .indice-equipe .bt.principal { padding: 5px 10px; order: 3; margin-left: 40px; }

/* tuiles « un clic = un résultat » */
.tuiles-action { right: var(--marge); top: 96px; display: grid; gap: 12px; pointer-events: auto; }
.tuile-action { width: var(--larg-tuiles); padding: 12px 6px 10px; border-radius: 18px; cursor: pointer; color: var(--texte); display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; transition: transform .12s, border-color .15s; }
.tuile-action:hover { transform: translateY(-2px); border-color: rgba(255,194,61,.55); }
.tuile-action:active { transform: scale(.96); }
.tuile-action .rond { width: 54px; height: 54px; margin-bottom: 6px; border-radius: 16px; display: grid; place-items: center; color: var(--accent); background: rgba(255,194,61,.12); border: 1px solid rgba(255,194,61,.3); }
.tuile-action .rond .ic { width: 26px; height: 26px; }
.tuile-action strong { font-size: 1.05em; font-weight: 700; }
.tuile-action small { color: var(--doux); font-size: .86em; line-height: 1.2; min-height: 2.4em; display: flex; align-items: center; }
.tuile-action.verrou { opacity: .55; }
.tuile-action.verrou .rond { background: #2a2c36; border-color: transparent; color: var(--doux); }
.tuile-action.pulse { animation: tuile-pulse .45s ease-out; }
@keyframes tuile-pulse { 30% { transform: scale(1.08); border-color: var(--accent); box-shadow: 0 0 30px -6px var(--accent); } }
.palette-ambiances { right: calc(var(--marge) + var(--larg-tuiles) + 14px); top: 96px; width: 330px; padding: 12px 14px 14px; border-radius: 18px; display: none; pointer-events: auto; z-index: 7; }
.palette-ambiances.visible, .ecran-studio.simple.avec-selection > .reglages { animation: glisse-entree .18s ease-out; }
@keyframes glisse-entree { from { transform: translateX(10px); } }
.palette-ambiances.visible { display: block; }
.palette-ambiances h4 { margin: 2px 0 8px; font-size: .82em; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.palette-ambiances .grille-ambiances + h4 { margin-top: 12px; }
.grille-ambiances { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.carte-ambiance { padding: 5px 5px 7px; border-radius: 12px; border: 1px solid var(--ligne); background: rgba(255,255,255,.05); color: var(--texte); cursor: pointer; display: flex; flex-direction: column; gap: 5px; font-size: .86em; text-align: center; transition: transform .1s, border-color .15s; }
.carte-ambiance:hover { transform: translateY(-2px); border-color: rgba(255,194,61,.6); }
.carte-ambiance.actif { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.apercu-ambiance { height: 46px; border-radius: 8px; }
.carte-ambiance strong { font-weight: 600; line-height: 1.15; }

/* bac d'objets en verre */
.bac-objets { left: calc(var(--marge) + var(--larg-carte) + 18px); right: calc(var(--marge) + var(--larg-tuiles) + 18px); bottom: 70px; padding: 12px 16px 14px; border-radius: 18px; pointer-events: auto; }
.onglets-bac { display: flex; gap: 6px; align-items: center; margin-bottom: 11px; min-width: 0; }
.pilule { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 7px 15px; border-radius: 999px; border: 0; background: transparent; color: var(--doux); font-weight: 700; font-size: 1.05em; cursor: pointer; white-space: nowrap; }
.pilule .ic { width: 16px; height: 16px; }
.pilule:hover { color: #fff; background: rgba(255,255,255,.07); }
.pilule.actif { background: #fff; color: #141216; }
.point-demande { position: absolute; top: 4px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: clignote 1.2s infinite; }
.consigne-bac { margin-left: auto; font-style: normal; color: var(--doux); font-size: 1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; padding-left: 8px; }
.tuiles-bac { display: flex; gap: 10px; }
.tuile-objet { position: relative; flex: 0 0 106px; width: 106px; padding: 6px 6px 8px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid var(--ligne); color: var(--texte); cursor: grab; display: flex; flex-direction: column; align-items: center; gap: 5px; font-weight: 700; font-size: .93em; text-align: center; line-height: 1.15; transition: transform .1s, border-color .15s, background .15s; }
.tuile-objet:hover { transform: translateY(-3px); border-color: rgba(255,194,61,.6); background: rgba(255,255,255,.09); }
.tuile-objet:active { cursor: grabbing; }
.tuile-objet img, .tuile-objet .sans-image { width: 100%; aspect-ratio: 1.2; object-fit: contain; border-radius: 9px; background: rgba(255,255,255,.05); display: grid; place-items: center; color: var(--doux); pointer-events: none; }
.tuile-objet .nom { min-height: 2.3em; display: flex; align-items: center; }
.tuile-objet.verrou { opacity: .4; cursor: not-allowed; border-style: dashed; }
.tuile-objet.verrou .cadenas { position: absolute; left: 8px; top: 8px; }
.tuile-objet.demande { border-color: rgba(255,194,61,.7); box-shadow: 0 0 22px -10px var(--accent); }
.badge-bac { position: absolute; top: -8px; right: -6px; padding: 2px 7px; border-radius: 999px; background: var(--accent2); color: #fff; font-size: .72em; font-weight: 800; letter-spacing: .04em; box-shadow: 0 4px 10px -2px rgba(0,0,0,.6); }
.badge-bac.demande { background: var(--accent); color: #1b1408; }
.tuile-objet .prix { position: absolute; left: 8px; top: 8px; padding: 0 6px; border-radius: 6px; background: rgba(0,0,0,.65); color: var(--accent); font-size: .8em; }
.tuile-objet.tuile-plus { cursor: pointer; justify-content: center; color: var(--doux); font-weight: 600; }
.tuile-objet.tuile-plus strong { font-weight: 600; }
.fenetre.fenetre-catalogue { width: min(760px, 94vw); }
.fenetre-catalogue .catalogue { border: 0; background: transparent; height: min(62vh, 560px); }
.fenetre-catalogue .cat-liste { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.fenetre-catalogue :is(.cat-liste .vide, .ligne-scene, .ligne-groupe) { grid-column: 1 / -1; }

/* dans la scène : l'anneau « Dépose ici », l'artiste qui s'échauffe */
.anneau-depot { display: none; border: 3px dashed rgba(255,194,61,.95); border-radius: 50%; box-shadow: 0 0 40px rgba(255,194,61,.35), inset 0 0 26px rgba(255,194,61,.25); z-index: 3; pointer-events: none !important; transition: left .06s, top .06s, width .06s, height .06s; }
.anneau-depot.visible { display: block; }
.anneau-depot span { position: absolute; left: 50%; top: -40px; transform: translateX(-50%); white-space: nowrap; padding: 6px 12px; border-radius: 999px; background: var(--accent); color: #1b1408; font-weight: 800; font-size: 1em; box-shadow: 0 8px 20px -6px rgba(0,0,0,.6); }
.pastille-echauffe { left: 0; top: 0; display: none; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; font-weight: 700; font-size: 1em; white-space: nowrap; pointer-events: none !important; }
.pastille-echauffe.visible { display: flex; }
.pastille-echauffe .ic { color: var(--vert); width: 15px; height: 15px; }

/* la carte de réglages de l'élément choisi (panneaux.js), seulement quand quelque chose est choisi */
.ecran-studio.simple > .reglages { position: absolute; right: calc(var(--marge) + var(--larg-tuiles) + 14px); top: 96px; width: 310px; max-height: calc(100% - 96px - 300px); min-height: 0; z-index: 6; border-radius: 18px; padding: 12px 14px 14px; display: none; overflow: auto; }
.ecran-studio.simple.avec-selection > .reglages { display: block; }
.ecran-studio.simple:is(.en-prise, .en-lecture) > .reglages { display: none; }

/* la fine barre de lecture (timeline.js) */
.ecran-studio.simple > .frise.simple { position: absolute; left: calc(var(--marge) + var(--larg-carte) + 18px); right: calc(var(--marge) + var(--larg-tuiles) + 18px); bottom: 14px; height: 46px; z-index: 6; flex-direction: row; align-items: center; gap: 12px; padding: 0 8px 0 6px; border-radius: 999px; }
.frise.simple .lecture-simple { height: 34px; padding: 0 14px 0 10px; border-radius: 999px; background: rgba(31,209,165,.16); border-color: rgba(31,209,165,.45); color: #c9fff1; font-weight: 700; }
.frise.simple .lecture-simple .ic { color: var(--vert); }
.frise.simple .lecture-simple.actif { background: rgba(255,77,77,.18); border-color: rgba(255,77,77,.5); color: #ffd0d0; }
.frise.simple .lecture-simple.actif .ic { color: #ff8080; }
.frise.simple .chrono { font-variant-numeric: tabular-nums; color: var(--doux); white-space: nowrap; }
.frise.simple .chrono b { color: var(--texte); }
.barre-temps { position: relative; flex: 1; height: 8px; border-radius: 4px; background: rgba(255,255,255,.12); cursor: pointer; }
.barre-temps .rempli { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 4px; background: var(--accent); }
.barre-temps .curseur-temps { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255,194,61,.35); }
.frise.simple .bt.icone { background: transparent; border-color: transparent; }
.frise.simple .bt.icone.actif { color: var(--accent); background: rgba(255,194,61,.14); }

/* pendant l'aperçu et la prise : la scène d'abord */
.ecran-studio.simple :is(.colonne-simple, .tuiles-action, .bac-objets) { transition: opacity .3s, transform .3s; }
.ecran-studio.simple:is(.en-prise, .en-lecture) :is(.colonne-simple, .tuiles-action, .bac-objets, .palette-ambiances, .pastille-echauffe) { opacity: 0; pointer-events: none !important; transform: translateY(8px); }
.ecran-studio.simple.en-prise > .frise { display: none; }
.ecran-studio.simple.en-prise .barre-studio :is(.actions, .centre-barre) { opacity: .45; pointer-events: none; }
.ecran-studio.simple .badge-vue { left: 50%; top: 96px; transform: translateX(-50%); }
.ecran-studio.simple .alerte { top: 140px; }
.ecran-studio.simple .prises { right: calc(var(--marge) + var(--larg-tuiles) + 14px); left: auto; top: 96px; bottom: auto; }
.ecran-studio.simple .bandeau { bottom: auto; top: 140px; }
.mini-outils button.serie { font: 800 .9em Inter, sans-serif; padding: 4px 7px; color: var(--accent); }
.ecran-studio.simple .etiquette .mini-outils { padding: 3px; border-radius: 10px; }
.ecran-studio.simple .etiquette .mini-outils button { padding: 6px; }

/* petits écrans : tout se resserre */
@media (max-width: 1400px) {
  .ecran-studio.simple { --marge: 14px; }
  .titre-clip strong { font-size: 1.7em; }
  .pastille-son .info-son { display: none; }
  .bt.bouton-or { font-size: 1.15em; padding: 12px 18px; }
}
@media (max-width: 1150px) {
  .ecran-studio.simple .jauge-hype.compacte, .consigne-bac { display: none; }
  .titre-clip small { display: none; }
}

/* ================================================================ entrée du niveau (entree.js) */
.fenetre.fenetre-entree { width: min(940px, 95vw); background: linear-gradient(170deg, #1d1726, #131419 45%); border-color: rgba(255,194,61,.28); }
.fenetre-entree .fenetre-tete h2 { font-family: "Inter Display"; font-weight: 900; font-size: 1.7em; text-transform: uppercase; letter-spacing: -.01em; }
.fenetre-entree .fenetre-pied { justify-content: center; border-top: 0; padding: 4px 16px 20px; }
.fenetre-entree .fenetre-pied .bt.principal.grand { min-width: 280px; justify-content: center; padding: 16px 34px; font-size: 1.32em; font-weight: 800; border-radius: 14px; border: 0; background: linear-gradient(180deg, #ffd56b, var(--accent)); box-shadow: 0 12px 30px -8px rgba(255,194,61,.75), inset 0 -3px 0 rgba(0,0,0,.15); }
.entree { display: flex; flex-direction: column; gap: 12px; }
.lieu-entree { color: var(--doux); font-weight: 600; font-size: .95em; display: flex; align-items: center; gap: 4px; margin-top: -4px; }
.corps-entree { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px; align-items: start; }
.telephone-entree { --c: var(--accent); border-radius: 22px; padding: 12px; background: #0f0e14; border: 1px solid rgba(255,255,255,.1); box-shadow: inset 0 0 0 4px #1b1a22, 0 20px 40px -20px #000; min-height: 270px; cursor: pointer; }
.tete-tel { display: flex; align-items: center; gap: 10px; padding: 4px 4px 10px; border-bottom: 1px solid rgba(255,255,255,.07); }
.tete-tel .avatar { width: 42px; height: 42px; box-shadow: 0 0 0 2px var(--c); }
.tete-tel strong { display: block; font-size: 1.12em; }
.tete-tel small { color: var(--vert); display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.fil-entree { display: flex; flex-direction: column; gap: 8px; padding: 12px 2px 4px; align-items: flex-start; }
.msg-entree { margin: 0; max-width: 92%; padding: 10px 13px; border-radius: 4px 16px 16px 16px; background: #262433; box-shadow: inset 3px 0 0 var(--c); line-height: 1.42; font-size: 1.05em; }
.msg-entree.arrive { animation: bulle-arrive .32s cubic-bezier(.2,1.4,.4,1); transform-origin: left top; }
@keyframes bulle-arrive { from { opacity: 0; transform: scale(.7) translateY(8px); } }
.ecrit { display: inline-flex; gap: 4px; padding: 12px 14px; border-radius: 4px 16px 16px 16px; background: #262433; }
.ecrit i { width: 7px; height: 7px; border-radius: 50%; background: #9aa0ad; animation: ecrit 1s infinite; }
.ecrit i:nth-child(2) { animation-delay: .15s; } .ecrit i:nth-child(3) { animation-delay: .3s; }
@keyframes ecrit { 30% { transform: translateY(-4px); background: #fff; } }
.veut-entree { display: flex; flex-direction: column; gap: 10px; opacity: .25; filter: saturate(.4); transition: opacity .45s, filter .45s; }
.entree.tout .veut-entree { opacity: 1; filter: none; }
.veut-entree h3 { font: 800 .9em Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 2px 0 0; }
.liste-veut { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.ligne-veut { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.05); font-weight: 600; font-size: 1.06em; line-height: 1.3; }
.entree.tout .ligne-veut { animation: monte .35s backwards; }
.entree.tout .ligne-veut:nth-child(2) { animation-delay: .08s; } .entree.tout .ligne-veut:nth-child(3) { animation-delay: .16s; } .entree.tout .ligne-veut:nth-child(4) { animation-delay: .24s; } .entree.tout .ligne-veut:nth-child(5) { animation-delay: .32s; }
.ic-veut { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,194,61,.16); color: var(--accent); }
.ligne-veut.bonus { color: #e2d6ff; }
.ligne-veut.bonus .ic-veut { background: rgba(167,123,255,.28); color: #e2d6ff; }
.recompense-entree { margin: 2px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: #d8d2e2; font-size: .98em; }
.etoiles-entree { color: var(--accent); letter-spacing: .1em; font-size: 1.25em; text-shadow: 0 0 10px rgba(255,194,61,.6); }
.gain-entree { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-weight: 700; }
.contraintes-entree { margin: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.contraintes-entree > span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.06); color: #d8d2e2; font-size: .9em; }
.astuce-entree { margin: 2px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(31,209,165,.09); border: 1px solid rgba(31,209,165,.3); line-height: 1.4; font-size: .98em; }
.astuce-entree strong { color: var(--vert); }
@media (max-width: 820px) { .corps-entree { grid-template-columns: 1fr; } }
/* ---------------------------------------------------------------- panneau de réglages, mode simple (panneau-simple.js) */
.reglages.simple { scrollbar-width: none; }
.reglages.simple::-webkit-scrollbar { display: none; }
.simple-panneau { display: flex; flex-direction: column; gap: 10px; animation: apparait .18s ease-out; }
.simple-tete { display: flex; align-items: center; gap: 10px; min-width: 0; }
.simple-tete .avatar { width: 46px; height: 46px; box-shadow: 0 0 0 2px var(--c), 0 6px 18px -6px var(--c); }
.simple-tete .ic-type { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: var(--accent); background: linear-gradient(145deg, rgba(255,194,61,.2), rgba(255,61,110,.16)); box-shadow: inset 0 0 0 1px rgba(255,194,61,.3); }
.simple-nom { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; }
.simple-nom small { color: var(--doux); font-size: .7em; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.simple-nom .nom-element { width: 100%; min-width: 0; text-overflow: ellipsis; font-family: "Inter Display", Inter, sans-serif; font-weight: 700; font-size: 1.22em; padding: 1px 4px; }
.simple-nom .nom-multiple { font-family: "Inter Display", Inter, sans-serif; font-size: 1.22em; }
.actions-rapides { display: flex; gap: 4px; flex: none; }
.actions-rapides button { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--bord); background: var(--panneau2); color: var(--texte); display: grid; place-items: center; cursor: pointer; padding: 0; transition: background .12s, border-color .12s, transform .08s; }
.actions-rapides button:hover { background: #262833; border-color: #3a3d4a; }
.actions-rapides button:active { transform: translateY(1px); }
.actions-rapides button.danger { color: #ff8080; }
.note-simple { margin: 6px 0 0; color: var(--doux); font-size: .8em; line-height: 1.3; }
.note-simple.verrou { margin: 0; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 10px; background: rgba(255,194,61,.08); }
.note-simple.verrou .bt { margin-left: auto; }
.bloc-simple { background: linear-gradient(180deg, #1b1c24, #16171d); border: 1px solid var(--bord); border-radius: 14px; padding: 9px 10px 10px; }
.titre-bloc { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; margin-bottom: 7px; }
.titre-bloc h4 { margin: 0; font-family: "Inter Display", Inter, sans-serif; font-size: .78em; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #c9ccd6; }
.titre-bloc .instant { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; font-size: .74em; font-weight: 600; color: var(--accent); background: rgba(255,194,61,.12); white-space: nowrap; font-variant-numeric: tabular-nums; }
.titre-bloc .inter-mini .champ.interrupteur { margin: 0; gap: 8px; font-size: .8em; }
.tuiles-simple { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tuiles-simple.deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tuile-simple { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px; padding: 7px 3px 6px; border-radius: 12px; border: 1px solid var(--bord); background: #0f1015; color: var(--texte); cursor: pointer; transition: transform .1s, border-color .12s, background .12s, box-shadow .12s; }
.tuile-simple:hover:not(:disabled) { border-color: #4a4d5c; background: #15161d; transform: translateY(-1px); }
.tuile-simple:active:not(:disabled) { transform: translateY(1px) scale(.98); }
.tuile-simple:disabled { opacity: .38; cursor: default; }
.tuile-simple .emoji { font-size: 25px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,.45)); }
.tuile-simple .ic-simple { color: var(--accent); line-height: 0; }
.tuile-simple .nom { font-size: .8em; font-weight: 600; line-height: 1.15; text-align: center; overflow-wrap: anywhere; }
.tuile-simple.actif { border-color: var(--accent); background: linear-gradient(160deg, rgba(255,194,61,.24), rgba(255,61,110,.14)); box-shadow: inset 0 0 0 1px var(--accent), 0 6px 16px -8px rgba(255,194,61,.8); }
.tuile-simple.actif .nom { color: #fff; }
.tuile-simple.en-cours { animation: halo 1.4s ease-in-out infinite; }
/* grille des danses folles (tuile « Danses folles… ») : petites tuiles, 4 par ligne ; gestes osés marqués d'un liseré */
.tuiles-simple.danses-folles { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 6px; padding: 6px; border-radius: 12px; background: rgba(255,255,255,.03); }
.danses-folles .tuile-simple { min-height: 54px; padding: 5px 2px; }
.danses-folles .tuile-simple .emoji { font-size: 20px; }
.danses-folles .tuile-simple .nom { font-size: .7em; }
.tuile-simple.osee { border-style: dashed; border-color: #6a3a4a; }
.tuile-simple.danger .ic-simple { color: #ff8080; }
.tuile-simple.danger:hover:not(:disabled) { border-color: rgba(255,77,77,.6); }
.bloc-simple .champ.interrupteur.inter-simple { margin: 0; font-weight: 600; font-size: .88em; }
.bloc-simple .champ.interrupteur.inter-simple > span { color: var(--texte); }
.gestes-simple { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 9px; }
.pastille-geste { display: flex; align-items: center; gap: 7px; min-height: 38px; padding: 5px 9px 5px 7px; border-radius: 999px; border: 1px solid var(--bord); background: #0f1015; color: var(--texte); cursor: pointer; font-size: .8em; font-weight: 600; line-height: 1.15; text-align: left; transition: border-color .12s, background .12s; }
.pastille-geste .emoji { flex: none; font-size: 18px; line-height: 1; }
.pastille-geste:hover { border-color: #4a4d5c; background: #15161d; }
.pastille-geste.actif { border-color: var(--accent2); background: rgba(255,61,110,.16); box-shadow: inset 0 0 0 1px var(--accent2); }
.humeurs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.humeur { height: 46px; border-radius: 12px; border: 1px solid var(--bord); background: #0f1015; font-size: 25px; line-height: 1; cursor: pointer; padding: 0; transition: transform .1s, border-color .12s, background .12s; }
.humeur:hover { transform: translateY(-1px) scale(1.04); border-color: #4a4d5c; }
.humeur.actif { border-color: var(--accent); background: rgba(255,194,61,.16); box-shadow: inset 0 0 0 1px var(--accent); }
.simple-style { margin: 0; }
.simple-style .bt, .simple-vue .bt.principal, .simple-actions .bt { flex: 1; justify-content: center; padding: 10px 12px; border-radius: 12px; }
.simple-vue, .simple-actions { margin: 0; flex-wrap: nowrap; }
.couleurs-simple { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); justify-items: center; gap: 8px 4px; }
.couleurs-simple button { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255,255,255,.14); cursor: pointer; padding: 0; transition: transform .1s; }
.couleurs-simple button:hover { transform: scale(1.1); }
.couleurs-simple button.actif { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); transform: scale(1.08); }
.crans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 3px; border-radius: 12px; background: #0f1015; border: 1px solid var(--bord); }
.crans button { border: 0; background: none; color: var(--doux); padding: 7px 4px; border-radius: 9px; cursor: pointer; font-weight: 600; font-size: .86em; }
.crans button:hover { color: var(--texte); }
.crans button.actif { background: linear-gradient(160deg, var(--accent), #ffad3d); color: #17130a; }
.plans-simple { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.vignette-plan { display: flex; flex-direction: column; gap: 5px; padding: 5px 5px 6px; border-radius: 12px; border: 1px solid var(--bord); background: #0f1015; color: var(--texte); cursor: pointer; font-size: .8em; font-weight: 600; transition: border-color .12s, transform .1s; }
.vignette-plan:hover { border-color: #4a4d5c; transform: translateY(-1px); }
.vignette-plan .vignette { display: block; height: 52px; border-radius: 8px; overflow: hidden; color: #8d93a3; }
.vignette-plan .vignette svg { display: block; width: 100%; height: 100%; }
.vignette-plan .vignette.contre svg { transform: perspective(70px) rotateX(-14deg) scale(1.1); transform-origin: 50% 100%; }
.vignette-plan.actif { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.vignette-plan.actif .vignette { color: var(--accent); }
.lien.vers-avance { align-self: center; margin: 2px 0 4px; color: var(--doux); gap: 6px; font-size: .84em; text-decoration: underline; text-decoration-color: rgba(154,160,173,.35); text-underline-offset: 3px; }
.lien.vers-avance:hover { color: var(--accent); text-decoration-color: currentColor; }
/* la carte de réglages (panneau-simple.js) posée dans le studio simple : verre, sans animation d'opacité (le flou d'arrière-plan la figerait)
*/
.ecran-studio.simple > .reglages .simple-panneau { animation: none; }

/* ================================================================ multijoueur : « Tournage à deux » (multi.js, coop.js)
   accueil : les deux grands boutons ; écran Multijoueur ; salle d'attente ; studio à deux ; imprévus ; notes du duo */
.modes-principaux { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bt.mode.grand-mode { padding: 18px 18px 16px; border-radius: 18px; grid-template-columns: auto 1fr; min-height: 92px; }
.bt.mode.grand-mode .ic { width: 34px; height: 34px; }
.bt.mode.grand-mode .libelle { font-size: 1.42em; font-weight: 800; letter-spacing: -.01em; }
.bt.mode.grand-mode small { font-size: .9em; }
.bt.mode.multijoueur { background: rgba(20,21,27,.92); border-color: rgba(255,194,61,.55); color: var(--texte); }
.bt.mode.multijoueur small { color: var(--doux); }
.bt.mode.multijoueur .ic { color: var(--accent); }
.bt.mode.multijoueur:hover:not(:disabled) { background: rgba(34,33,30,.95); border-color: var(--accent); }
.modes .bt.mode { padding: 9px 12px; }
.modes .bt.mode .ic { width: 22px; height: 22px; }
.modes .bt.mode .libelle { font-size: 1em; }

.page.multi { background: radial-gradient(60% 70% at 15% 0%, #12304a, transparent 70%), radial-gradient(60% 70% at 90% 10%, #3a1838, var(--fond) 70%); display: flex; flex-direction: column; gap: 16px; }
.page.multi .page-tete { background: none; }
.roles-duo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.role-duo { --c: var(--accent); display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, var(--c) 12%, rgba(20,18,28,.85)); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); animation: monte .45s backwards; }
.role-duo strong { color: var(--c); font-size: 1.1em; }
.role-duo small { display: block; color: #cfd2db; line-height: 1.3; margin-top: 2px; }
.emoji-role { font-size: 34px; line-height: 1; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.colonnes-multi { display: grid; grid-template-columns: 1.15fr .9fr 1fr; gap: 16px; align-items: start; }
.carte-multi { padding: 18px; border-radius: 18px; background: rgba(24,25,33,.88); border: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 10px; animation: monte .5s backwards; }
.carte-multi:nth-child(2) { animation-delay: .06s; } .carte-multi:nth-child(3) { animation-delay: .12s; }
.carte-multi h2 { display: flex; align-items: center; gap: 9px; font-size: 1.3em; }
.carte-multi h2 .ic { color: var(--accent); }
.carte-multi > p { margin: 0; color: var(--doux); }
.carte-multi .champ, .reglages-salle .champ { margin: 4px 0; }
.carte-multi .segments, .reglages-salle .segments { width: 100%; }
.carte-multi .segments button, .reglages-salle .segments button { flex: 1; }
.apercu-decor-multi img, .apercu-salle { width: 100%; height: 110px; object-fit: cover; border-radius: 12px; display: block; }
.champ-code { width: 100%; padding: 14px 16px; border-radius: 14px; background: #0b0c10; border: 2px solid var(--bord); color: var(--texte); font: 800 2.1em "Inter Display", Inter, monospace; letter-spacing: .32em; text-align: center; text-transform: uppercase; }
.champ-code:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255,194,61,.18); }
.champ-code::placeholder { color: #3b3e4a; }
.ligne-code { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.ligne-code .bt { align-self: flex-end; }
.liste-publiques { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow: auto; }
.partie-publique { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.06); }
.partie-publique:hover { border-color: rgba(255,194,61,.4); }
.infos-publique { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.infos-publique small { color: var(--doux); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attente-liste { color: var(--doux); margin: 6px 0; }
.attente-liste.hors-ligne { color: #ffb3b3; }
.avatar-duo { width: 46px; height: 46px; flex: none; border-radius: 14px; display: grid; place-items: center; font-size: 26px; line-height: 1; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1.5px var(--c, rgba(255,255,255,.15)); }
.avatar-duo.attente { color: var(--doux); animation: pulse-attente 1.4s ease-in-out infinite; }
@keyframes pulse-attente { 50% { opacity: .4; } }
.note-multi { margin: 0; color: var(--doux); font-size: .92em; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.note-multi .ic { color: var(--accent); }
.erreur-multi { display: none; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: rgba(255,77,77,.12); border: 1px solid rgba(255,77,77,.45); color: #ffd2d2; font-weight: 600; }
.erreur-multi.visible { display: flex; }

/* salle d'attente */
.disposition-salle { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; align-items: start; }
.colonne-salle { display: flex; flex-direction: column; gap: 14px; }
.code-partie { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 18px; background: linear-gradient(135deg, rgba(43,214,255,.14), rgba(255,61,110,.12)); border: 1px solid rgba(255,255,255,.12); flex-wrap: wrap; }
.code-partie small { color: var(--doux); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .78em; }
.code-grand { font: 900 3em "Inter Display", Inter, sans-serif; letter-spacing: .22em; color: #fff; text-shadow: 0 4px 24px rgba(43,214,255,.45); user-select: all; }
.badge-visibilite { margin-left: auto; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.1); font-weight: 700; font-size: .9em; }
.joueurs-salle { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch; }
.et-duo { align-self: center; font: 900 2em "Inter Display", Inter, sans-serif; color: var(--accent); }
.joueur-salle { --c: var(--accent); display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 16px; border-radius: 18px; background: color-mix(in srgb, var(--c) 10%, rgba(24,25,33,.92)); border: 2px solid color-mix(in srgb, var(--c) 35%, transparent); position: relative; transition: border-color .2s, box-shadow .2s; }
.joueur-salle .avatar-duo { width: 64px; height: 64px; font-size: 38px; border-radius: 18px; }
.joueur-salle.pret { border-color: var(--vert); box-shadow: 0 0 0 4px rgba(31,209,165,.15); }
.joueur-salle.deconnecte { opacity: .55; }
.joueur-salle.vide { border-style: dashed; border-color: rgba(255,255,255,.18); background: rgba(24,25,33,.6); }
.joueur-salle.vide small { display: block; color: var(--doux); margin-top: 4px; }
.infos-joueur { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.infos-joueur strong { font-size: 1.2em; }
.infos-joueur em { color: var(--doux); font-style: normal; font-weight: 500; }
.infos-joueur small { color: #c9ccd6; line-height: 1.3; }
.badge-hote { margin-left: 8px; padding: 2px 8px; border-radius: 6px; background: var(--accent); color: #17130a; font-size: .62em; font-weight: 800; vertical-align: middle; letter-spacing: .06em; text-transform: uppercase; }
.role-badge { align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--c); color: #0e0f14; font-weight: 800; font-size: .92em; }
.etat-joueur { grid-column: 1 / 3; justify-self: end; font-weight: 700; color: var(--doux); }
.joueur-salle.pret .etat-joueur { color: var(--vert); }
.actions-salle { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.actions-salle .pret-bouton { margin-left: auto; padding: 14px 26px; font-size: 1.15em; border-radius: 14px; font-weight: 800; }
.actions-salle .pret-bouton.actif { background: var(--vert); border-color: var(--vert); color: #0b2a22; }
.ligne-avatar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ligne-avatar small { color: var(--doux); }
.choix-avatar { display: flex; gap: 6px; flex-wrap: wrap; }
.choix-avatar button { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--bord); background: #101117; font-size: 22px; cursor: pointer; padding: 0; }
.choix-avatar button.actif { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: rgba(255,194,61,.12); }
.reglages-salle { padding: 18px; border-radius: 18px; background: rgba(24,25,33,.9); border: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 10px; }
.resume-salle { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #d7d9e0; }
.bt.bouton-or.attente { opacity: .45; }
.connexion-salle { margin: 0; color: #ffb3b3; min-height: 1.2em; }

/* studio à deux */
.carte-duo { border-radius: 18px; padding: 12px 12px 10px; background: var(--verre, rgba(20,18,28,.86)); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; gap: 8px; box-shadow: 0 24px 60px -24px rgba(0,0,0,.8); flex: none; }
.tete-duo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tete-duo small { font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: .74em; background: linear-gradient(90deg, #ff7a2f, #2bd6ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.chrono-duo { font-weight: 700; font-size: .9em; color: #d9dbe2; font-variant-numeric: tabular-nums; }
.chrono-duo.urgent { color: #ff8a8a; animation: pulse-attente .8s infinite; }
.membres-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.membre-duo { --c: var(--accent); position: relative; display: flex; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 12px; background: color-mix(in srgb, var(--c) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); min-width: 0; }
.membre-duo .avatar-duo { width: 34px; height: 34px; font-size: 20px; border-radius: 10px; }
.membre-duo strong { display: block; font-size: .9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.membre-duo small { color: var(--c); font-weight: 700; font-size: .8em; white-space: nowrap; }
.membre-duo > div { min-width: 0; }
.membre-duo.deconnecte { opacity: .5; }
.bulle-phrase { position: absolute; left: 6px; right: 6px; top: calc(100% + 4px); z-index: 3; padding: 6px 9px; border-radius: 4px 12px 12px 12px; background: #fff; color: #15131b; font-weight: 700; font-size: .86em; opacity: 0; transform: translateY(-4px); transition: opacity .2s, transform .2s; pointer-events: none; }
.bulle-phrase.visible { opacity: 1; transform: none; }
.mission-duo { --c: var(--accent); margin: 0; font-size: .84em; line-height: 1.3; color: #cfd2db; padding: 6px 9px; border-radius: 10px; background: rgba(255,255,255,.05); border-left: 3px solid var(--c); }
.mission-duo strong { color: var(--c); }
.reactions-duo { display: flex; gap: 4px; flex-wrap: wrap; }
.reactions-duo .reaction { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--bord); background: #101117; font-size: 18px; cursor: pointer; padding: 0; transition: transform .1s; }
.reactions-duo .reaction:hover { transform: translateY(-2px) scale(1.08); border-color: var(--accent); }
.phrases-duo { display: flex; gap: 4px; flex-wrap: wrap; max-height: 98px; overflow: auto; scrollbar-width: thin; }
.phrases-duo .phrase { padding: 4px 9px; border-radius: 999px; border: 1px solid var(--bord); background: #101117; color: #d7d9e0; font-size: .8em; font-weight: 600; cursor: pointer; }
.phrases-duo .phrase:hover { border-color: var(--accent); color: #fff; }
.ecran-studio.coop .inter-avance, .ecran-studio.coop [data-tuto="terminer"], .ecran-studio.coop .indice-equipe { display: none !important; }
.tuile-action.role-autre { opacity: .42; filter: grayscale(.6); position: relative; }
.tuile-action.role-autre::after { content: attr(data-role-autre); position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); padding: 2px 7px; border-radius: 999px; background: #20212a; border: 1px solid rgba(255,255,255,.15); font-size: .68em; font-weight: 700; white-space: nowrap; color: #e3e5ec; }
.bac-objets.role-autre .tuiles-bac, .bac-objets.role-autre .onglets-bac button { opacity: .38; filter: grayscale(.7); }
.bac-objets.role-autre::after { content: attr(data-role-autre); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -30%); padding: 8px 16px; border-radius: 999px; background: rgba(12,12,18,.92); border: 1px solid rgba(255,122,47,.6); color: #ffd0b0; font-weight: 800; pointer-events: none; white-space: nowrap; }
.curseur-autre { --c: #2bd6ff; left: 0; top: 0; display: none; z-index: 7; }
.curseur-autre.visible { display: block; pointer-events: none; }
.curseur-autre i { position: absolute; left: -2px; top: -2px; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 22px solid var(--c); transform: rotate(-30deg); transform-origin: 50% 0; filter: drop-shadow(0 2px 4px rgba(0,0,0,.7)); }
.curseur-autre span { position: absolute; left: 14px; top: 16px; padding: 2px 8px; border-radius: 8px; background: var(--c); color: #0e0f14; font-weight: 800; font-size: .78em; white-space: nowrap; }
.etiquettes-autre, .pings-coop, .reactions-coop { inset: 0; z-index: 7; }
.etiquette-autre { --c: #2bd6ff; position: absolute; left: 0; top: 0; padding: 3px 9px; border-radius: 999px; background: var(--c); color: #0e0f14; font-weight: 800; font-size: .8em; white-space: nowrap; box-shadow: 0 6px 16px -6px #000; }
.ping { --c: #ffc23d; position: absolute; left: 0; top: 0; }
.ping i { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--c); box-shadow: 0 0 18px var(--c); }
.ping i.onde { animation: onde-ping 1s ease-out infinite; }
@keyframes onde-ping { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }
.ping span { position: absolute; left: 50%; top: -48px; transform: translateX(-50%); padding: 4px 10px; border-radius: 10px; background: var(--c); color: #0e0f14; font-weight: 800; font-size: .86em; white-space: nowrap; animation: monte .3s backwards; }
.reaction-volante { position: absolute; top: 34%; font-size: 64px; line-height: 1; animation: reaction-monte 2.5s cubic-bezier(.2,.8,.3,1) forwards; filter: drop-shadow(0 8px 16px rgba(0,0,0,.6)); display: flex; flex-direction: column; align-items: center; }
.reaction-volante.moi { font-size: 40px; }
.reaction-volante small { font-size: 13px; font-weight: 800; padding: 2px 8px; border-radius: 8px; background: rgba(12,12,18,.85); margin-top: 4px; }
@keyframes reaction-monte { 0% { opacity: 0; transform: translateY(40px) scale(.4); } 15% { opacity: 1; transform: translateY(0) scale(1.15); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-160px) scale(1); } }
.phrase-volante { --c: #2bd6ff; position: absolute; left: 50%; top: 110px; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; padding: 10px 18px; border-radius: 16px 16px 16px 4px; background: #fff; color: #15131b; font-size: 1.2em; font-weight: 800; box-shadow: 0 0 0 3px var(--c), 0 18px 40px -12px #000; animation: monte .3s backwards; white-space: nowrap; }
.phrase-volante strong { color: color-mix(in srgb, var(--c) 70%, #000); font-size: .8em; }
.voile-coop { inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(12,13,16,.86); pointer-events: auto; font-weight: 700; font-size: 1.15em; }
.proposition-coop { left: 50%; top: 96px; transform: translateX(-50%); z-index: 9; display: none; }
.proposition-coop.visible { display: block; }
.proposition { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 18px; background: rgba(14,14,20,.95); border: 2px solid var(--accent); box-shadow: 0 20px 50px -14px rgba(255,194,61,.6); animation: monte .3s backwards; }
.proposition strong { font-size: 1.15em; }

/* imprévus */
.bandeau-imprevu { left: 50%; top: 92px; transform: translateX(-50%); z-index: 12; display: none; width: min(620px, calc(100% - 40px)); }
.bandeau-imprevu.visible { display: block; }
.ecran-studio.en-prise .bandeau-imprevu { top: 70px; }
.imprevu { --c: #ffc23d; position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px 16px 18px; border-radius: 18px; background: rgba(16,12,20,.95); border: 2px solid var(--c); box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 18%, transparent), 0 24px 60px -18px #000; animation: imprevu-arrive .45s cubic-bezier(.2,1.4,.4,1) backwards; overflow: hidden; }
@keyframes imprevu-arrive { from { transform: translateY(-30px) scale(.8) rotate(-2deg); opacity: 0; } }
.imprevu small { font-weight: 900; letter-spacing: .18em; text-transform: uppercase; color: var(--c); font-size: .78em; }
.imprevu strong { display: block; font-size: 1.3em; line-height: 1.15; }
.imprevu em { display: block; font-style: normal; color: #cfd2db; margin-top: 3px; }
.emoji-imprevu { font-size: 44px; line-height: 1; animation: secoue-emoji .5s ease-in-out infinite alternate; }
@keyframes secoue-emoji { from { transform: rotate(-12deg); } to { transform: rotate(12deg) scale(1.08); } }
.imprevu .sauver { padding: 12px 18px; font-size: 1.05em; font-weight: 800; border-radius: 14px; animation: pulse-or 1s infinite; }
.jauge-imprevu { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(255,255,255,.08); }
.temps-imprevu { display: block; height: 100%; background: var(--c); transform-origin: left; animation: temps-imprevu linear forwards; }
@keyframes temps-imprevu { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.imprevu.sauve { border-color: var(--vert); --c: var(--vert); }
.imprevu.sauve em { color: var(--vert); font-weight: 800; font-size: 1.1em; }
.imprevu.rate { border-color: #ff4d4d; --c: #ff4d4d; }
.imprevu.rate em { color: #ff9a9a; font-weight: 800; font-size: 1.1em; }
.imprevu.sauve .temps-imprevu, .imprevu.rate .temps-imprevu { animation-play-state: paused; }
.zone-effets { z-index: 4; overflow: hidden; }
.effet-imprevu { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fx-pigeon .pigeon { position: absolute; left: 8%; top: 4%; font-size: min(26vh, 220px); line-height: 1; animation: pigeon-arrive .7s cubic-bezier(.2,1.3,.4,1) backwards, pigeon-hoche .35s .7s ease-in-out infinite alternate; transform-origin: 50% 90%; filter: blur(1.5px) drop-shadow(0 20px 30px rgba(0,0,0,.6)); }
.fx-pigeon .plumes { position: absolute; left: 30%; top: 30%; font-size: 40px; animation: plumes 2s ease-out infinite; }
@keyframes pigeon-arrive { from { transform: translate(-60vw, -40vh) rotate(-30deg) scale(.4); } }
@keyframes pigeon-hoche { to { transform: rotate(8deg) translateY(4%); } }
@keyframes plumes { from { transform: translate(0, 0) rotate(0); opacity: 1; } to { transform: translate(80px, 160px) rotate(220deg); opacity: 0; } }
.fx-courant { background: #000; animation: courant 2.4s steps(1) forwards; }
.fx-courant .etincelle-courant { position: absolute; right: 12%; top: 18%; font-size: 70px; animation: pulse-attente .2s infinite; }
@keyframes courant { 0% { opacity: .96; } 10% { opacity: .3; } 14% { opacity: .97; } 60% { opacity: .95; } 66% { opacity: .2; } 70% { opacity: .98; } 100% { opacity: .9; } }
.fx-pluie { background: linear-gradient(180deg, rgba(30,50,80,.35), rgba(10,20,40,.2)); }
.fx-pluie i { position: absolute; top: -20%; width: 2px; height: 22%; background: linear-gradient(transparent, rgba(190,220,255,.9)); animation: goutte .55s linear infinite; }
@keyframes goutte { to { transform: translate(-40px, 560%); } }
.fx-figurant .passant { position: absolute; bottom: 4%; left: -20%; font-size: min(46vh, 380px); line-height: 1; animation: traverse 3.6s linear forwards; filter: blur(1px) brightness(.25) drop-shadow(0 0 2px #000); }
@keyframes traverse { to { left: 105%; } }
.fx-fumee .nuage { position: absolute; left: 10%; bottom: -30%; width: 80%; height: 80%; border-radius: 50%; background: radial-gradient(closest-side, rgba(235,238,245,.92), rgba(235,238,245,0)); animation: nuage 3.5s ease-out forwards; filter: blur(8px); }
.fx-fumee .nuage.n2 { left: -20%; animation-delay: .3s; } .fx-fumee .nuage.n3 { left: 40%; animation-delay: .6s; }
@keyframes nuage { from { transform: scale(.3); opacity: 0; } 40% { opacity: 1; } to { transform: scale(1.6) translateY(-30%); opacity: .95; } }
.fx-danse .notes-danse { position: absolute; left: 50%; top: 8%; transform: translateX(-50%); font-size: 54px; animation: secoue-emoji .3s infinite alternate; }
.effet-imprevu.ralenti * { animation-duration: 3s !important; }
.flotte.synchro-duo { font-size: 2.3em; padding: 10px 26px; border-radius: 999px; color: #fff; background: linear-gradient(90deg, #ff7a2f, #ff3d6e 50%, #2bd6ff); box-shadow: 0 18px 50px -12px rgba(255,61,110,.9); animation-duration: 1.8s; }

/* la prise à deux : boutons de l'autre rôle grisés, bouton Danse */
.cam-direct.autre-role, .drop-direct.autre-role { opacity: .35; filter: grayscale(.8); }
.danse-direct { border-color: #ff7a2f; background: radial-gradient(circle at 50% 28%, rgba(255,122,47,.45), #1d140f 70%); box-shadow: 0 0 24px -8px #ff7a2f; }
.danse-direct > span { font-size: 22px; line-height: 1; }

/* notes du duo (résultats) */
.carte-duo-resultat { --c1: #ff7a2f; --c2: #2bd6ff; position: relative; padding: 16px; border-radius: 18px; background: linear-gradient(140deg, color-mix(in srgb, var(--c1) 18%, #15141c), #15141c 45%, color-mix(in srgb, var(--c2) 18%, #15141c)); border: 1px solid rgba(255,255,255,.12); display: flex; flex-direction: column; gap: 8px; animation: monte .5s .3s backwards; }
.surtitre-duo { font-weight: 900; letter-spacing: .18em; text-transform: uppercase; font-size: .74em; color: #ffd8a8; }
.titre-duo { font: 900 1.9em "Inter Display", Inter, sans-serif; line-height: 1; background: linear-gradient(90deg, var(--c1), #ff3d6e 50%, var(--c2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.carte-duo-resultat > p { margin: 0; color: #d6d8df; }
.stats-duo { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.stats-duo li { display: flex; flex-direction: column; padding: 7px 10px; border-radius: 12px; background: rgba(255,255,255,.06); }
.stats-duo li b { font-size: 1.35em; font-weight: 900; }
.stats-duo li span { color: var(--doux); font-size: .82em; }
.stats-duo li.points { grid-column: 1 / 3; flex-direction: row; justify-content: space-between; align-items: center; background: rgba(255,194,61,.12); }
.stats-duo li.points b { color: var(--accent); }
.betisier-duo h3 { margin: 6px 0 6px; font-size: 1em; }
.betisier-duo ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.betisier-duo li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 7px 9px; border-radius: 12px; background: rgba(255,77,77,.08); border: 1px solid rgba(255,77,77,.22); }
.betisier-duo .emoji-imprevu { font-size: 26px; animation: none; }
.betisier-duo strong { display: block; font-size: .92em; }
.betisier-duo small { color: var(--doux); font-size: .8em; }
.attente-duo { margin: 0; color: var(--doux); font-weight: 600; align-self: center; }
.effets-ralenti { position: absolute; inset: 0; overflow: hidden; border-radius: 14px; pointer-events: none; z-index: 3; }
.ralenti-etiquette { position: absolute; left: 18px; top: 16px; z-index: 4; display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 10px; background: rgba(255,61,110,.92); color: #fff; font-weight: 900; letter-spacing: .08em; animation: pulse-attente 1s infinite; }
.ralenti-etiquette small { font-weight: 600; letter-spacing: 0; opacity: .9; }
@media (max-width: 1300px) {
  .colonnes-multi { grid-template-columns: 1fr 1fr; }
  .carte-multi.publiques { grid-column: 1 / 3; }
  .disposition-salle { grid-template-columns: 1fr; }
}
/* ---------------------------------------------------------------- ta progression (recompenses.js) */
/* une seule carte : avatar du joueur dans l'anneau d'XP, « Niveau 3 · Réalisateur de quartier », la barre, ce qu'il manque */
.carte-progression { display: flex; align-items: center; gap: 12px; padding: 9px 12px 9px 9px; border-radius: 16px; background: rgba(16,15,22,.82); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(10px); color: var(--texte); text-align: left; cursor: pointer; min-width: 0; transition: border-color .15s, transform .1s, background .15s; }
.carte-progression:hover { border-color: rgba(255,194,61,.6); background: rgba(24,22,32,.9); transform: translateY(-1px); }
.avatar-joueur { --part: 0%; position: relative; flex: none; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--accent) var(--part), rgba(255,255,255,.12) 0); }
.avatar-joueur .visage { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(140deg, #2b2140, #15131c); color: var(--accent); }
.avatar-joueur .pastille-niv { position: absolute; right: -4px; bottom: -3px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; display: grid; place-items: center; background: var(--accent); color: #17130a; font-family: "Inter Display"; font-weight: 900; font-size: .8em; border: 2px solid #15131c; }
.avatar-joueur.grand { width: 84px; height: 84px; }
.avatar-joueur.grand .visage { width: 70px; height: 70px; }
.avatar-joueur.grand .pastille-niv { min-width: 30px; height: 30px; border-radius: 15px; font-size: 1.05em; }
.texte-prog { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.titre-prog { font-family: "Inter Display"; font-weight: 800; font-size: 1.06em; line-height: 1.2; }
.titre-prog .rang-prog { color: var(--accent); }
.barre-prog { display: block; height: 7px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
.barre-prog i { display: block; height: 100%; border-radius: 4px; background: var(--accent); transition: width .6s; }
.encore-prog { color: #c9cdd6; font-size: .8em; line-height: 1.3; }
.compteurs-prog { display: flex; gap: 12px; color: var(--doux); font-size: .78em; }
.compteurs-prog > span { display: inline-flex; align-items: center; gap: 4px; }
.compteurs-prog i { display: inline-flex; color: var(--accent); }
.plus-prog { flex: none; align-self: flex-start; color: var(--doux); opacity: .8; }
.carte-progression:hover .plus-prog { color: var(--accent); opacity: 1; }
.coin-accueil .carte-progression { min-width: 330px; }
.cote-carriere .carte-progression { width: 100%; }
/* version de la barre du studio : avatar, « Niveau 3 · titre », barre fine */
.carte-progression.compacte { gap: 9px; padding: 4px 10px 4px 4px; border-radius: 999px; flex: 0 1 auto; }
.carte-progression.compacte .avatar-joueur { width: 40px; height: 40px; }
.carte-progression.compacte .avatar-joueur .visage { width: 32px; height: 32px; }
.carte-progression.compacte .avatar-joueur .pastille-niv { min-width: 18px; height: 18px; font-size: .68em; right: -5px; bottom: -4px; }
.carte-progression.compacte .titre-prog { font-size: .86em; max-width: 230px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carte-progression.compacte .encore-prog { white-space: nowrap; }
.carte-progression.compacte .barre-prog { height: 5px; }
.carte-progression.compacte .encore-prog { font-size: .7em; }
.ecran-studio.simple .barre-studio .carte-progression.compacte { background: var(--verre); border-color: var(--ligne); }
@media (max-width: 1800px) { .ecran-studio.simple .barre-studio .carte-progression.compacte .texte-prog { display: none; } .ecran-studio.simple .barre-studio .carte-progression.compacte { padding: 3px; } }
@media (max-width: 1300px) { .barre-studio .carte-progression.compacte .texte-prog { display: none; } .barre-studio .carte-progression.compacte { padding: 3px; } }
/* la fenêtre « Ta progression » */
.fenetre.fenetre-progression { width: min(980px, 96vw); }
.page-progression { display: flex; flex-direction: column; gap: 16px; padding-top: 6px; }
.tete-progression { display: flex; gap: 18px; align-items: center; padding: 16px 18px; border-radius: 18px; background: linear-gradient(120deg, rgba(255,194,61,.12), rgba(255,61,110,.08) 60%, rgba(167,123,255,.08)); border: 1px solid rgba(255,194,61,.25); }
.tete-progression .texte-prog { flex: 1; gap: 7px; }
.tete-progression .titre-prog { font-size: 1.5em; white-space: normal; }
.tete-progression .barre-prog { height: 10px; border-radius: 5px; }
.tete-progression small { color: #d2d5dd; }
.tete-progression .serie-ligne { display: inline-flex; align-items: center; gap: 4px; color: #ff9a3d; }
.colonnes-progression { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.bloc-progression { padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.035); border: 1px solid var(--bord); display: flex; flex-direction: column; gap: 9px; }
.bloc-progression h3 { display: flex; align-items: center; gap: 6px; font-size: 1.08em; color: var(--accent); }
.bloc-progression h3:not(:first-child) { margin-top: 10px; }
.bloc-progression h4 { margin: 6px 0 0; font-size: .82em; letter-spacing: .12em; text-transform: uppercase; color: var(--doux); }
.bloc-progression p { margin: 0; color: #d2d5dd; }
.bloc-progression ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.gains-xp li { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; padding: 6px 9px; border-radius: 10px; background: rgba(255,255,255,.04); font-size: .92em; }
.gains-xp li .ic-gain { color: var(--accent); display: inline-flex; }
.gains-xp li b { color: var(--vert); font-weight: 700; text-align: right; font-size: .92em; max-width: 210px; }
.liste-butin .ligne-butin, .liste-rangs .ligne-rang { display: grid; grid-template-columns: 26px 1fr auto; gap: 9px; align-items: center; padding: 7px 10px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid transparent; color: var(--doux); }
.liste-butin .ligne-butin div { display: flex; flex-direction: column; }
.liste-butin .ligne-butin small { font-size: .82em; }
.ligne-butin em, .ligne-rang em { font-style: normal; font-size: .8em; font-weight: 700; }
.ligne-butin.obtenu, .ligne-rang.obtenu { color: var(--texte); }
.ligne-butin.obtenu .ic-butin, .ligne-rang.obtenu .ic-butin, .ligne-rang.actuel .ic-butin { color: var(--vert); }
.ligne-butin.obtenu em, .ligne-rang.obtenu em { color: var(--vert); }
.ligne-butin.prochain, .ligne-rang.prochain { border-color: rgba(255,194,61,.45); background: rgba(255,194,61,.08); color: var(--texte); }
.ligne-butin.prochain em, .ligne-rang.prochain em { color: var(--accent); }
.ligne-rang.actuel { color: var(--texte); border-color: rgba(31,209,165,.5); background: rgba(31,209,165,.1); }
.ligne-rang.actuel em { color: var(--vert); }
.bloc-progression .note { color: var(--accent); font-weight: 600; }
@media (max-width: 900px) { .colonnes-progression { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- vignettes des ambiances (simple.js) */
.palette-ambiances { width: 372px; max-height: calc(100% - 210px); overflow: auto; }
.apercu-ambiance { position: relative; display: block; height: auto; aspect-ratio: 16 / 9; overflow: hidden; }
.apercu-ambiance::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%); background-size: 250% 100%; animation: reflet-attente 1.4s linear infinite; }
.apercu-ambiance:has(.pret)::after { display: none; }
.image-ambiance { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .35s; }
.image-ambiance.pret { opacity: 1; }
@keyframes reflet-attente { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.carte-ambiance.verrou .apercu-ambiance { filter: grayscale(.85) brightness(.55); }
.carte-ambiance.verrou strong { color: var(--doux); }
.verrou-ambiance { display: inline-flex; align-items: center; justify-content: center; gap: 2px; color: var(--doux); font-size: .74em; line-height: 1.1; }

/* ---------------------------------------------------------------- paramètres par-dessus le jeu (roue crantée) */
.fenetre.fenetre-parametres { width: min(1040px, 96vw); height: min(780px, 92vh); }
.fenetre-parametres .fenetre-corps { flex: 1; padding: 10px 18px 14px; }
.parametres.en-jeu { background: none; }
.parametres.en-jeu .disposition-param { grid-template-columns: 210px minmax(0, 1fr); gap: 18px; }
.parametres.en-jeu .disposition-param nav.onglets { top: 0; }

/* ---------------------------------------------------------------- premier clip : les ambiances en image (premier.js) */
.choix-ambiance .nuancier { position: relative; overflow: hidden; width: 96px; height: 54px; }
.choix-ambiance .nuancier img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.choix-ambiance .nuancier.melange img:nth-child(1) { clip-path: polygon(0 0, 45% 0, 25% 100%, 0 100%); }
.choix-ambiance .nuancier.melange img:nth-child(2) { clip-path: polygon(45% 0, 78% 0, 58% 100%, 25% 100%); }
.choix-ambiance .nuancier.melange img:nth-child(3) { clip-path: polygon(78% 0, 100% 0, 100% 100%, 58% 100%); }