/* Charte graphique Maquette, version street/cave : voir docs/charte-graphique.md */
/* Chaque thème redéfinit les mêmes variables. Le thème par défaut est Cave : neutre, une seule couleur d'action. */
:root {
  color-scheme: dark;
  --accent: #c8402f;
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --on-accent: #fff;
  --bg: #0d0c0b;
  --s1: #161513;
  --s2: #1e1c1a;
  --s3: #2a2825;
  --line: #36332f;
  --text: #ece7de;
  --muted: #98928a;
  /* Repères : dans les thèmes neutres, ce sont des nuances de la même matière */
  --yellow: #d6cfc1; --cyan: #b3ada3; --magenta: #a39d93; --green: #8fa88c; --orange: #b9b0a2;
  --bank-bg: #d6cfc1; --bank-fg: #141210;
  --ok: var(--green); --warn: #c9a45c;
  --r-s: 8px; --r-m: 12px; --r-l: 16px;
  --f-beat: #7d7870; --f-lead: var(--accent); --f-add: #b09a6f; --f-back: #8b8f8c; --f-crea: #9a8478;
  --font: "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, -apple-system, sans-serif;
  --display: Impact, Haettenschweiler, "Arial Narrow Bold", "Franklin Gothic Heavy", sans-serif;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  --wall: linear-gradient(transparent 97%, rgba(255,255,255,.022) 97%) 0 0 / 100% 64px, linear-gradient(90deg, transparent 98.6%, rgba(255,255,255,.018) 98.6%) 0 0 / 128px 64px;
  --ambient: radial-gradient(1000px 560px at 50% -10%, rgba(255, 205, 150, .10), transparent 72%), radial-gradient(1400px 900px at 50% 120%, rgba(0, 0, 0, .55), transparent 70%);
  --hard: 0 10px 26px rgba(0,0,0,.34);
  --glow: 0px;
  --hero-shadow: 4px 4px 0 #000;
  --pop1: #d9a24a; --pop2: #4f8f8a;
  --head-w: 210px; --side-w: 320px; --insp-h: 270px; --lyrics-h: 55%;
}
:root[data-theme="noir"] {
  --pop1: #ffffff; --pop2: #a6a6a6; --err: #ff6b5e;
  --accent: #ffffff; --on-accent: #000000;
  --bg: #000000; --s1: #0f0f0f; --s2: #171717; --s3: #262626; --line: #3a3a3a; --text: #ffffff; --muted: #a6a6a6;
  --yellow: #e0e0e0; --cyan: #bdbdbd; --magenta: #a6a6a6; --green: #c8c8c8; --orange: #b4b4b4; --warn: #d6d6d6;
  --bank-bg: #ffffff; --bank-fg: #000000;
  --f-beat: #6e6e6e; --f-add: #b4b4b4; --f-back: #8c8c8c; --f-crea: #9e9e9e;
  --noise: none; --wall: none; --ambient: none; --hard: none; --hero-shadow: none;
  --bg-filter: none; --bg-tint: transparent;
}
:root[data-theme="blanc"] {
  --pop1: #000000; --pop2: #555555; --err: #b3261e;
  color-scheme: light;
  --accent: #000000; --on-accent: #ffffff;
  --bg: #ffffff; --s1: #f6f6f6; --s2: #ededed; --s3: #dcdcdc; --line: #bdbdbd; --text: #000000; --muted: #555555;
  --yellow: #333333; --cyan: #444444; --magenta: #555555; --green: #333333; --orange: #444444; --warn: #444444;
  --bank-bg: #000000; --bank-fg: #ffffff;
  --f-beat: #8a8a8a; --f-add: #4a4a4a; --f-back: #6a6a6a; --f-crea: #5a5a5a;
  --noise: none; --wall: none; --ambient: none; --hard: none; --hero-shadow: none;
  --bg-filter: none; --bg-tint: transparent;
}
:root[data-theme="drill"] {
  --pop1: #9cc8e8; --pop2: #5f8fb0; --err: #ff7a6b;
  --accent: #9cc8e8; --on-accent: #06121c;
  --bg: #0b0f13; --s1: #11171d; --s2: #161e25; --s3: #22303b; --line: #2c3a45; --text: #dbe5ee; --muted: #8ea0b0;
  --yellow: #c8d6e2; --cyan: #9db4c6; --magenta: #93a3b5; --green: #86b6a0; --orange: #aab6c2; --warn: #c9b47a;
  --bank-bg: #dbe5ee; --bank-fg: #0b0f13;
  --f-beat: #6f8191; --f-add: #a8b7c6; --f-back: #7c9ab0; --f-crea: #8f93b8;
  --wall: none;
  --ambient: radial-gradient(1100px 620px at 50% -12%, rgba(120, 175, 220, .08), transparent 72%);
  --hard: none; --hero-shadow: none;
  --bg-filter: grayscale(1) contrast(1.2) brightness(.75); --bg-tint: #2f6d9a;
}
:root[data-theme="beton"] {
  --pop1: #9fb4c7; --pop2: #c8a56a;
  --accent: #d4d8dc; --on-accent: #111417;
  --bg: #101214; --s1: #171a1d; --s2: #1f2327; --s3: #2b3035; --line: #3a4046; --text: #e6e9ec; --muted: #8f979e;
  --yellow: #cfd4d9; --cyan: #a9b0b6; --magenta: #979ea5; --green: #8fa79a; --orange: #b4bac0; --warn: #b9b48f;
  --bank-bg: #cfd4d9; --bank-fg: #101214;
  --f-beat: #6f767c; --f-add: #a0a8ae; --f-back: #848c93; --f-crea: #929aa1;
  --ambient: radial-gradient(1200px 600px at 50% -15%, rgba(210, 225, 240, .06), transparent 72%);
}
:root[data-theme="encre"] {
  --pop1: #e0b458; --pop2: #5fc4d0;
  --accent: #7fa6d8; --on-accent: #0a1220;
  --bg: #090d14; --s1: #10161f; --s2: #172030; --s3: #223046; --line: #2c3c54; --text: #e3e9f2; --muted: #8796ab;
  --yellow: #c3d3e8; --cyan: #9fb4cf; --magenta: #a6a3cd; --green: #84b0a4; --orange: #b0bdd0; --warn: #cdb987;
  --bank-bg: #c3d3e8; --bank-fg: #0a1220;
  --f-beat: #66758b; --f-add: #9d9fc4; --f-back: #6f97a8; --f-crea: #a18db3;
  --ambient: radial-gradient(1100px 620px at 50% -12%, rgba(120, 165, 225, .13), transparent 72%);
}
:root[data-theme="bois"] {
  --pop1: #e0b458; --pop2: #a65a3c;
  --accent: #d08a3c; --on-accent: #1a1006;
  --bg: #120e0a; --s1: #1a1510; --s2: #2a2118; --s3: #382d21; --line: #46392a; --text: #efe6d8; --muted: #a6978a;
  --yellow: #e0cfb4; --cyan: #b9a58c; --magenta: #a8967f; --green: #9aa97a; --orange: #c2a67f; --warn: #d6a64f;
  --bank-bg: #e0cfb4; --bank-fg: #171009;
  --f-beat: #7e6e5c; --f-add: #c79a5a; --f-back: #8f9a7c; --f-crea: #a57f66;
  --ambient: radial-gradient(1000px 560px at 50% -10%, rgba(255, 180, 90, .13), transparent 72%);
}
:root[data-theme="foret"] {
  --pop1: #d7c35a; --pop2: #3f9c8c;
  --accent: #6fb587; --on-accent: #08130c;
  --bg: #0a100c; --s1: #111914; --s2: #18261c; --s3: #233428; --line: #2e4334; --text: #e3ece5; --muted: #8ea396;
  --yellow: #c6d8ca; --cyan: #9db8a6; --magenta: #a0ad9b; --green: #7fc497; --orange: #aebfa8; --warn: #c9b97b;
  --bank-bg: #c6d8ca; --bank-fg: #0a120d;
  --f-beat: #66796c; --f-add: #a9a56f; --f-back: #6d9d97; --f-crea: #8d8fa0;
  --ambient: radial-gradient(1100px 620px at 50% -12%, rgba(120, 210, 150, .09), transparent 72%);
}
:root[data-theme="prune"] {
  --pop1: #e08fb0; --pop2: #6e8fe0;
  --accent: #b784d8; --on-accent: #150b1c;
  --bg: #100b12; --s1: #18111b; --s2: #261a2c; --s3: #33253b; --line: #43324d; --text: #efe6f2; --muted: #a292aa;
  --yellow: #dccbe5; --cyan: #b6a4c2; --magenta: #c49ad6; --green: #93ad96; --orange: #b9a4bd; --warn: #cfb27f;
  --bank-bg: #dccbe5; --bank-fg: #150d19;
  --f-beat: #75667e; --f-add: #b58fa6; --f-back: #7f8fbd; --f-crea: #a57fc2;
  --ambient: radial-gradient(1100px 620px at 50% -12%, rgba(190, 130, 230, .12), transparent 72%);
}
:root[data-theme="sang"] {
  --pop1: #e8a53a; --pop2: #7a2a2a;
  --accent: #d32a20;
  --bg: #0c0606; --s1: #150c0c; --s2: #2a1212; --s3: #391a1a; --line: #4a2222; --text: #f4e8e6; --muted: #ad8f8c;
  --yellow: #ecd6d2; --cyan: #c0a29e; --magenta: #b38f8b; --green: #a0a585; --orange: #c29b90; --warn: #d6a55a;
  --bank-bg: #ecd6d2; --bank-fg: #190a09;
  --f-beat: #7d6462; --f-add: #b98a6a; --f-back: #8a7c86; --f-crea: #a0706f;
  --ambient: radial-gradient(1000px 560px at 50% -10%, rgba(240, 60, 45, .13), transparent 72%);
}
:root[data-theme="sable"] {
  --pop1: #b56a2a; --pop2: #3f7f6a;
  color-scheme: light;
  --accent: #8a5a1f;
  --bg: #e6dcc8; --s1: #f6efe0; --s2: #ede3cf; --s3: #dccfb6; --line: #c6b698; --text: #1d170e; --muted: #625544;
  --yellow: #4a3e2c; --cyan: #5c4f3c; --magenta: #6a5b46; --green: #4c6a3c; --orange: #5f4f38; --warn: #80601a;
  --bank-bg: #2a2115; --bank-fg: #f6efe0;
  --f-beat: #6c5f4c; --f-add: #94703a; --f-back: #5f7069; --f-crea: #84604f;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  --wall: linear-gradient(transparent 97%, rgba(0,0,0,.035) 97%) 0 0 / 100% 64px, linear-gradient(90deg, transparent 98.6%, rgba(0,0,0,.03) 98.6%) 0 0 / 128px 64px;
  --ambient: radial-gradient(1200px 600px at 50% -10%, rgba(255,250,235,.7), transparent 70%);
  --hard: 0 8px 22px rgba(29,23,14,.12); --hero-shadow: 3px 3px 0 rgba(29,23,14,.1);
}
:root[data-theme="neon"] {
  --pop1: #ffd400; --pop2: #00e5ff;
  --accent: #e11d2e;
  --bg: #08080a; --s1: #131316; --s2: #1c1c21; --s3: #2a2a31; --line: #34343d; --text: #f5f3ee; --muted: #9c9aa3;
  --yellow: #ffd400; --cyan: #00e5ff; --magenta: #ff2bd6; --green: #39ff88; --orange: #ff5a1f; --warn: #ffd400;
  --bank-bg: #ffd400; --bank-fg: #000;
  --f-beat: #9aa0ad; --f-add: #ffd400; --f-back: #00e5ff; --f-crea: #ff2bd6;
  --ambient: radial-gradient(900px 500px at 12% -5%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), radial-gradient(700px 500px at 100% 20%, rgba(255, 43, 214, .07), transparent 70%);
  --hard: 4px 4px 0 #000; --glow: 16px;
}
:root[data-theme="mur"] {
  --pop1: #c9862a; --pop2: #2f7f7a;
  color-scheme: light;
  --accent: #b3261e;
  --bg: #ece9e2; --s1: #fbfaf6; --s2: #f2efe8; --s3: #e0dcd2; --line: #c9c4b8; --text: #141317; --muted: #5d5a63;
  --yellow: #4a4740; --cyan: #5a574f; --magenta: #6a665d; --green: #3f6e4a; --orange: #5f5a50; --warn: #8a6d1d;
  --bank-bg: #1c1a17; --bank-fg: #f5f2ea;
  --f-beat: #66625a; --f-add: #8a7445; --f-back: #5f6b70; --f-crea: #806a60;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  --wall: linear-gradient(transparent 97%, rgba(0,0,0,.035) 97%) 0 0 / 100% 64px, linear-gradient(90deg, transparent 98.6%, rgba(0,0,0,.03) 98.6%) 0 0 / 128px 64px;
  --ambient: radial-gradient(1200px 600px at 50% -10%, rgba(255,255,255,.7), transparent 70%);
  --hard: 0 8px 22px rgba(20,19,23,.1); --hero-shadow: 3px 3px 0 rgba(20,19,23,.1);
}
:root[data-theme="asphalte"] {
  --pop1: #e8c547; --pop2: #6c8ea0;
  --accent: #e3b505; --on-accent: #161206;
  --bg: #0e0f10; --s1: #17181a; --s2: #202225; --s3: #2c2f33; --line: #3a3e43; --text: #ecebe6; --muted: #989a9c;
  --yellow: #e3d9a8; --cyan: #a8adb0; --magenta: #9a9ca0; --green: #93a88a; --orange: #bcae83; --warn: #e3b505;
  --bank-bg: #e4dfca; --bank-fg: #141310;
  --f-beat: #6f7276; --f-add: #b9a35a; --f-back: #7f8c94; --f-crea: #94908a;
  --ambient: radial-gradient(1100px 600px at 50% -12%, rgba(240, 205, 70, .07), transparent 72%);
}
:root[data-theme="rouille"] {
  --pop1: #e0a14a; --pop2: #5f8a80;
  --accent: #d0682e; --on-accent: #170904;
  --bg: #110b08; --s1: #1a120e; --s2: #281b14; --s3: #37261c; --line: #493325; --text: #f0e5da; --muted: #a9978a;
  --yellow: #e4cfba; --cyan: #bba48f; --magenta: #ab9280; --green: #9aa57c; --orange: #d0a07a; --warn: #d9a04e;
  --bank-bg: #e4cfba; --bank-fg: #1a0f08;
  --f-beat: #7e6a5c; --f-add: #c58a52; --f-back: #868b7a; --f-crea: #a4765e;
  --ambient: radial-gradient(1000px 560px at 50% -10%, rgba(230, 110, 50, .13), transparent 72%);
}
:root[data-theme="ardoise"] {
  --pop1: #c9b27a; --pop2: #6fa3b8;
  --accent: #79adc2; --on-accent: #08141a;
  --bg: #0c1114; --s1: #141b1f; --s2: #1c262b; --s3: #29363c; --line: #36464d; --text: #e4ebee; --muted: #8fa0a8;
  --yellow: #c8d6dc; --cyan: #a0b6c0; --magenta: #a0a8b8; --green: #8fb0a0; --orange: #b1bcc0; --warn: #c9b27a;
  --bank-bg: #c8d6dc; --bank-fg: #0c1317;
  --f-beat: #66767d; --f-add: #a4a990; --f-back: #6f97a8; --f-crea: #8f93a8;
  --ambient: radial-gradient(1100px 620px at 50% -12%, rgba(120, 175, 200, .10), transparent 72%);
}
:root[data-theme="cuivre"] {
  --pop1: #e0b078; --pop2: #4f8f83;
  --accent: #cf9264; --on-accent: #190e06;
  --bg: #0d0d0a; --s1: #161612; --s2: #22211a; --s3: #302e25; --line: #403d30; --text: #eee8da; --muted: #a39d8b;
  --yellow: #dfd2b4; --cyan: #b5ad97; --magenta: #a79c88; --green: #94a884; --orange: #cda984; --warn: #d6a95a;
  --bank-bg: #dfd2b4; --bank-fg: #15120a;
  --f-beat: #78735f; --f-add: #c49a6c; --f-back: #7f9486; --f-crea: #a58770;
  --ambient: radial-gradient(1000px 560px at 50% -10%, rgba(225, 160, 110, .11), transparent 72%);
}
:root[data-theme="vinyle"] {
  --pop1: #f0a25a; --pop2: #7a8fe0;
  --accent: #ee5f86; --on-accent: #1c060c;
  --bg: #050505; --s1: #101010; --s2: #1a1a1a; --s3: #272727; --line: #353535; --text: #f2f0ed; --muted: #9b9996;
  --yellow: #dcd9d4; --cyan: #b0aeaa; --magenta: #c9a0ae; --green: #98a890; --orange: #bdb2a4; --warn: #d9ab62;
  --bank-bg: #eeeae3; --bank-fg: #0a0a0a;
  --f-beat: #767472; --f-add: #b98e9b; --f-back: #8a8c94; --f-crea: #a07f8e;
  --ambient: radial-gradient(1000px 560px at 50% -12%, rgba(240, 95, 135, .08), transparent 72%);
}
:root[data-theme="tabac"] {
  --pop1: #d8bb5e; --pop2: #6d8f6a;
  --accent: #bfa65c; --on-accent: #151106;
  --bg: #0f0d08; --s1: #18150e; --s2: #242015; --s3: #322d1e; --line: #443d29; --text: #ece6d5; --muted: #a29a84;
  --yellow: #d9cfae; --cyan: #b1a88e; --magenta: #a59a82; --green: #98a578; --orange: #bcae86; --warn: #cfae55;
  --bank-bg: #d9cfae; --bank-fg: #15110a;
  --f-beat: #78705a; --f-add: #b19c5c; --f-back: #7f8d70; --f-crea: #978469;
  --ambient: radial-gradient(1000px 560px at 50% -10%, rgba(215, 185, 95, .10), transparent 72%);
}
:root[data-theme="menthe"] {
  --pop1: #d7c866; --pop2: #5fa8d0;
  --accent: #4fd1b0; --on-accent: #04140f;
  --bg: #07100e; --s1: #0f1a17; --s2: #172622; --s3: #22352f; --line: #2d453e; --text: #e2f0ec; --muted: #8aa69e;
  --yellow: #c0dbd2; --cyan: #94bfb2; --magenta: #9eb0ab; --green: #6fd0a0; --orange: #a9c0a8; --warn: #cfc06a;
  --bank-bg: #c0dbd2; --bank-fg: #07120f;
  --f-beat: #5f7a72; --f-add: #9fae72; --f-back: #5f9aa0; --f-crea: #8690a0;
  --ambient: radial-gradient(1100px 620px at 50% -12%, rgba(80, 210, 175, .10), transparent 72%);
}
:root[data-theme="indigo"] {
  --pop1: #e0b458; --pop2: #d07fc0;
  --accent: #8f93f5; --on-accent: #0a0b24;
  --bg: #0a0a14; --s1: #12121f; --s2: #1b1b2e; --s3: #28283f; --line: #363651; --text: #e8e8f4; --muted: #9393ad;
  --yellow: #cfcfe8; --cyan: #a8a8cc; --magenta: #b09fd0; --green: #8fb0a4; --orange: #b4adc8; --warn: #cdb987;
  --bank-bg: #cfcfe8; --bank-fg: #0c0c1a;
  --f-beat: #6a6a85; --f-add: #a59ac0; --f-back: #7388b8; --f-crea: #a180bd;
  --ambient: radial-gradient(1100px 620px at 50% -12%, rgba(130, 135, 245, .13), transparent 72%);
}
:root[data-theme="bordeaux"] {
  --pop1: #dfae62; --pop2: #8a6fb0;
  --accent: #d0557a; --on-accent: #180509;
  --bg: #0f080b; --s1: #190f13; --s2: #281820; --s3: #38242d; --line: #4b303c; --text: #f2e6ea; --muted: #ab929b;
  --yellow: #e6d1d8; --cyan: #bea6ae; --magenta: #c08da0; --green: #a0a588; --orange: #c29f9e; --warn: #d6a862;
  --bank-bg: #e6d1d8; --bank-fg: #190c11;
  --f-beat: #7d666e; --f-add: #b58a80; --f-back: #89798f; --f-crea: #a4708a;
  --ambient: radial-gradient(1000px 560px at 50% -10%, rgba(210, 80, 120, .12), transparent 72%);
}
:root[data-theme="kraft"] {
  --pop1: #b0642a; --pop2: #466f66;
  color-scheme: light;
  --accent: #9c3d1f;
  --bg: #d9c7a8; --s1: #efe3cc; --s2: #e4d5ba; --s3: #cfbc9c; --line: #b5a07e; --text: #1e160b; --muted: #5a4a35;
  --yellow: #443623; --cyan: #554631; --magenta: #5f4e38; --green: #47603a; --orange: #5a472e; --warn: #7a5716;
  --bank-bg: #2a1f10; --bank-fg: #efe3cc;
  --f-beat: #66573f; --f-add: #8c6732; --f-back: #5a6a60; --f-crea: #7f5a48;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  --wall: linear-gradient(transparent 97%, rgba(0,0,0,.04) 97%) 0 0 / 100% 64px, linear-gradient(90deg, transparent 98.6%, rgba(0,0,0,.03) 98.6%) 0 0 / 128px 64px;
  --ambient: radial-gradient(1200px 600px at 50% -10%, rgba(255,245,225,.55), transparent 70%);
  --hard: 0 8px 22px rgba(30,22,11,.14); --hero-shadow: 3px 3px 0 rgba(30,22,11,.12);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font: 15px/1.45 var(--font); color: var(--text); background: var(--noise), var(--wall), var(--ambient), var(--bg); background-attachment: fixed; }
h1 { font: 400 clamp(34px, 5vw, 48px)/1 var(--display); margin: 0 0 18px; letter-spacing: .02em; text-transform: uppercase; }
h2 { font-size: 19px; margin: 0 0 4px; line-height: 1.25; }
h3 { font: 700 12px/1.3 var(--font); margin: 0 0 10px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.mt { margin-top: 20px; }
button { font: inherit; font-weight: 700; background: var(--accent); color: var(--on-accent); border: 1px solid transparent; border-radius: var(--r-s); padding: 9px 15px; cursor: pointer; transition: filter .12s, background .12s, border-color .12s, transform .08s, box-shadow .12s; }
button:hover:not(:disabled) { filter: brightness(1.15); }
button:active:not(:disabled) { transform: translate(1px, 1px); }
button:disabled { opacity: .4; cursor: not-allowed; }
button.ghost { background: var(--s2); color: var(--text); border-color: var(--line); }
button.danger { color: var(--err, var(--accent)); }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
input, select, textarea { font: inherit; background: var(--s2); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-s); padding: 9px 11px; min-width: 0; }
input[type=color] { padding: 2px; width: 44px; height: 38px; cursor: pointer; }
input[type=range] { accent-color: var(--accent); padding: 0; background: none; border: 0; }
input[type=checkbox] { accent-color: var(--accent); width: 18px; height: 18px; flex: none; margin: 1px 0 0; }
.muted { color: var(--muted); } .small { font-size: 12px; } .grow { flex: 1; min-width: 0; } .wide { width: 100%; } .hidden { display: none !important; }
.error { color: var(--err, var(--accent)); margin: 8px 0 0; font-weight: 600; } .error:empty { display: none; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .row.nowrap { flex-wrap: nowrap; } .row.center { justify-content: center; }
.stack { display: grid; gap: 4px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; align-items: center; }
.field { display: grid; gap: 5px; margin-bottom: 12px; color: var(--muted); font-size: 13px; }
.field input, .field select { color: var(--text); font-size: 15px; }
.check { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0; cursor: pointer; }
.i { width: 18px; height: 18px; flex: none; } .i.big { width: 28px; height: 28px; }

/* Barre du haut */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 6px 18px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 2px solid var(--line); min-height: 50px; }
.brand { display: flex; align-items: center; gap: 9px; font: 400 23px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; background: none; color: var(--text); padding: 4px; }
.logo { width: 14px; height: 22px; background: var(--accent); transform: skewX(-12deg); box-shadow: 0 0 var(--glow) var(--accent); }
nav { display: flex; flex-wrap: wrap; gap: 2px; }
nav button { background: transparent; color: var(--muted); padding: 6px 10px; font-weight: 600; font-size: 14px; }
nav button:hover { color: var(--text); background: var(--s2); }
nav button.active { color: var(--text); box-shadow: inset 0 -3px 0 var(--accent); }
.nav-bank { color: var(--bank-bg) !important; }
.nav-bank.active { box-shadow: inset 0 -3px 0 var(--bank-bg); }

/* Pages */
.view { display: none; } .view.active { display: block; }
.page { padding: 28px 24px 60px; max-width: 1180px; margin: 0 auto; }
.page.narrow { max-width: 720px; }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; } .page-head h1, .page-head h2 { margin: 0; }
.panel { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-m); padding: 20px; margin: 0 0 16px; box-shadow: var(--hard); }
.tabs { display: inline-flex; flex-wrap: wrap; gap: 3px; margin-bottom: 14px; }
.tab { background: var(--s2); color: var(--muted); padding: 7px 14px; font-weight: 700; border: 1px solid var(--line); }
.tab.active { background: var(--text); color: var(--bg); border-color: var(--text); }
.tab-bank { color: var(--bank-bg); }
.tab-bank.active { background: var(--bank-bg); color: var(--bank-fg); border-color: var(--bank-bg); }
.page-head .tabs { margin: 0; }
.tape { display: inline-block; background: var(--bank-bg); color: var(--bank-fg); font: 700 12px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; transform: rotate(-2deg); }

/* Accueil */
.home { padding: 0 24px 40px; max-width: 1180px; margin: 0 auto; }
.hero { position: relative; overflow: hidden; padding: 58px 0 40px; }
.hero-title { font: 400 clamp(62px, 12vw, 148px)/.88 var(--display); margin: 16px 0 14px; text-transform: uppercase; letter-spacing: .01em; text-shadow: var(--hero-shadow); }
.hero-title em { font-style: normal; color: var(--accent); text-shadow: 0 0 calc(var(--glow) * 2) color-mix(in srgb, var(--accent) 65%, transparent), var(--hero-shadow); }
.hero-sub { font-size: clamp(16px, 2vw, 20px); color: var(--muted); margin: 0 0 22px; }
.hero-cta { display: inline-flex; align-items: center; gap: 11px; font-size: 17px; padding: 14px 20px; box-shadow: var(--hard), 0 0 calc(var(--glow) * 2) color-mix(in srgb, var(--accent) 45%, transparent); }
.hero-bars { position: absolute; right: 0; bottom: 38px; display: flex; align-items: flex-end; gap: 9px; height: 62%; opacity: var(--bars-o, .75); pointer-events: none; }
.hero-bars i { width: clamp(9px, 1.5vw, 20px); background: var(--c, var(--accent)); box-shadow: 0 0 var(--glow) var(--c, var(--accent)); height: var(--h, 40%); transform-origin: bottom; animation: bar 1.5s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
.hero-bars i:nth-child(1) { --h: 20%; --c: var(--accent); --d: -.2s; } .hero-bars i:nth-child(2) { --h: 45%; --c: var(--accent); --d: -.9s; } .hero-bars i:nth-child(3) { --h: 72%; --c: var(--orange); --d: -.4s; }
.hero-bars i:nth-child(4) { --h: 38%; --c: var(--yellow); --d: -1.2s; } .hero-bars i:nth-child(5) { --h: 96%; --c: var(--yellow); --d: -.6s; } .hero-bars i:nth-child(6) { --h: 60%; --c: var(--green); --d: -1.4s; }
.hero-bars i:nth-child(7) { --h: 82%; --c: var(--cyan); --d: -.1s; } .hero-bars i:nth-child(8) { --h: 34%; --c: var(--cyan); --d: -1s; } .hero-bars i:nth-child(9) { --h: 64%; --c: var(--magenta); --d: -.7s; }
.hero-bars i:nth-child(10) { --h: 44%; --c: var(--magenta); --d: -1.3s; } .hero-bars i:nth-child(11) { --h: 76%; --c: var(--accent); --d: -.5s; } .hero-bars i:nth-child(12) { --h: 24%; --c: var(--accent); --d: -.8s; }
@keyframes bar { from { transform: scaleY(.55); } to { transform: scaleY(1); } }
@media (max-width: 860px) { .hero-bars { opacity: .22; height: 80%; } }
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.tile { --c: var(--accent); position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 2px; min-height: 158px; text-align: left; background: var(--s1); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-m); padding: 16px; font-weight: 400; box-shadow: var(--hard); overflow: hidden; }
.tile:hover:not(:disabled) { filter: none; border-color: var(--c); box-shadow: 3px 3px 0 var(--c), 0 0 var(--glow) color-mix(in srgb, var(--c) 30%, transparent); transform: translate(-1px, -1px); }
.tile .ico { width: 30px; height: 30px; color: var(--c); margin-bottom: auto; filter: drop-shadow(0 0 calc(var(--glow) / 2) var(--c)); }
.tile b { font: 400 30px/1 var(--display); letter-spacing: .03em; text-transform: uppercase; }
.tile small { color: var(--muted); font-size: 13px; }
.t-random { --c: var(--orange); grid-column: span 3; } .t-bank { --c: var(--bank-bg); grid-column: span 3; background: var(--bank-bg); color: var(--bank-fg); border-color: var(--bank-bg); }
.t-bank .ico { color: var(--bank-fg); filter: none; } .t-bank small { color: var(--bank-fg); opacity: .8; } .t-bank b { font-size: 42px; } .t-bank:hover:not(:disabled) { box-shadow: var(--hard), 0 0 calc(var(--glow) * 2) color-mix(in srgb, var(--bank-bg) 50%, transparent); }
.t-analyse { --c: var(--cyan); grid-column: span 2; } .t-daw { --c: var(--magenta); grid-column: span 2; } .t-lib { --c: var(--green); } .t-set { --c: var(--muted); }
@media (max-width: 760px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bento .tile { grid-column: span 1; min-height: 132px; } .t-bank { grid-column: span 2 !important; } .t-random { grid-column: span 2 !important; } .tile b { font-size: 25px; } .t-bank b { font-size: 34px; } .page { padding: 20px 16px 48px; } .home { padding: 0 16px 32px; } .topbar { padding: 6px 12px; } .hero { padding-top: 32px; } }
.bank-strip { margin-top: 24px; }
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: 158px; gap: 10px; overflow-x: auto; padding-bottom: 8px; }
.strip-item { display: grid; gap: 3px; text-align: left; background: var(--s1); color: var(--text); border: 1px solid var(--line); padding: 8px; font-weight: 400; min-width: 0; }
.strip-item .cover { width: 100%; height: 84px; }
.strip-item span { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .strip-item small { color: var(--muted); font-size: 11px; }
.tiny-link { display: flex; align-items: center; gap: 5px; margin: 26px auto 0; background: none; color: var(--muted); font-size: 11px; font-weight: 500; padding: 4px 8px; }
.tiny-link:hover:not(:disabled) { color: var(--text); filter: none; }
.tiny-link .i { display: none; }

/* Random */
.beat-card { display: grid; gap: 11px; text-align: center; }
.beat-art { aspect-ratio: 16/9; max-height: 300px; width: 100%; background: var(--s3) center/cover; display: grid; place-items: center; color: var(--muted); overflow: hidden; border-radius: var(--r-s); }
.beat-art .ico { width: 54px; height: 54px; }
.beat-art iframe { width: 100%; height: 100%; border: 0; display: block; }
.primary-arrow { display: inline-flex; align-items: center; gap: 8px; }
.finder { display: grid; gap: 9px; text-align: left; }
.chips-row { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { background: var(--s2); color: var(--text); border: 1px solid var(--line); padding: 5px 11px; font-size: 13px; font-weight: 700; }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.toggle-big { background: var(--s3); color: var(--text); border: 1px solid var(--line); flex: none; }
.toggle-big.on { background: var(--bank-bg); color: var(--bank-fg); border-color: var(--bank-bg); }
#rbSearch input { flex: 1; }
.rappers { display: grid; gap: 8px; padding: 10px; background: var(--s2); border: 1px dashed var(--line); max-height: 280px; overflow: auto; }
.rb-actions { margin-top: 2px; }
.plus-wrap { position: relative; }
.plus { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; }
.plus-text { background: transparent; color: var(--text); border: 1px solid var(--muted); padding: 6px 10px; font-size: 13px; }
.popover.up { top: auto; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); }

/* Lien -> Rec */
.stepper { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 7px; font-size: 14px; color: var(--muted); }
.stepper li { display: flex; align-items: center; gap: 9px; }
.stepper li::before { content: ""; width: 11px; height: 11px; border: 2px solid var(--line); flex: none; }
.stepper li.now { color: var(--text); font-weight: 600; } .stepper li.now::before { border-color: var(--accent); background: var(--accent); animation: pulse 1s infinite; }
.stepper li.done { color: var(--text); } .stepper li.done::before { background: var(--ok); border-color: var(--ok); }
@keyframes pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.yt-head { display: flex; gap: 16px; margin-bottom: 14px; } .yt-head img { width: 148px; height: 84px; object-fit: cover; background: var(--s3); flex: none; }
@media (max-width: 480px) { .yt-head { flex-direction: column; } .yt-head img { width: 100%; height: auto; aspect-ratio: 16/9; } }
.facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 8px 0 4px; } .facts span { display: grid; } .facts small { color: var(--muted); font-size: 11px; } .facts b { font: 400 26px/1.1 var(--display); letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.go-daw { display: flex; justify-content: space-between; align-items: center; text-align: left; padding: 13px 18px; margin-top: 14px; font-size: 17px; box-shadow: var(--hard); } .go-daw small { display: block; font-size: 12px; font-weight: 400; opacity: .9; }

/* Analyse */
.dropzone { display: flex; align-items: center; gap: 14px; padding: 16px; border: 2px dashed var(--line); border-radius: var(--r-m); cursor: pointer; margin-bottom: 12px; background: var(--s1); }
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone .i { width: 34px; height: 34px; padding: 8px; background: var(--accent); color: var(--on-accent); } .dropzone span { display: grid; } .dropzone small { font-size: 13px; }
.big-drop { justify-content: center; text-align: center; flex-direction: column; padding: 46px 20px; border-color: var(--muted); }
.big-drop .i { width: 52px; height: 52px; padding: 12px; background: var(--accent); color: var(--on-accent); box-shadow: 0 0 calc(var(--glow) * 2) color-mix(in srgb, var(--accent) 50%, transparent); } .big-drop b { font: 400 30px/1.1 var(--display); letter-spacing: .03em; text-transform: uppercase; }
.big-drop:hover, .big-drop.over { border-color: var(--accent); background: var(--accent-soft); }
.an-busy { display: flex; align-items: center; gap: 10px; padding: 14px 0; font-weight: 600; } .an-busy i { width: 12px; height: 12px; background: var(--accent); animation: pulse .8s infinite; }
.an-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0 12px; } .an-head h2 { overflow-wrap: anywhere; }
.an-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat-card { --c: var(--accent); display: grid; gap: 2px; background: var(--s1); border: 1px solid var(--line); border-top: 4px solid var(--c); padding: 14px 16px; box-shadow: var(--hard); min-width: 0; }
.stat-card small { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.stat-card b { font: 400 44px/1.05 var(--display); letter-spacing: .02em; color: var(--c); overflow-wrap: anywhere; } .stat-card b i { font-size: 18px; font-style: normal; }
.stat-card span { font-size: 12px; color: var(--muted); }
.s-bpm { --c: var(--accent); } .s-key { --c: var(--yellow); } .s-style { --c: var(--magenta); } .s-lufs { --c: var(--cyan); }
.stat-card b { color: var(--text); } .s-bpm b { color: var(--accent); } :root[data-theme="neon"] .stat-card b { color: var(--c); }
.an-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; align-items: start; } .an-cols .panel { margin: 0; }
.bar-row { display: grid; grid-template-columns: 112px 1fr 40px; gap: 8px; align-items: center; font-size: 13px; margin-bottom: 6px; } .bar { height: 8px; background: var(--s3); } .bar i { display: block; height: 100%; background: var(--magenta); } .bar-row em { font-style: normal; color: var(--muted); text-align: right; font-size: 12px; }
.scale { display: flex; flex-wrap: wrap; gap: 4px; } .scale span { background: var(--s2); border: 1px solid var(--line); padding: 3px 9px; font-weight: 700; font-size: 13px; }
.tip { --c: var(--cyan); border-left: 3px solid var(--c); padding: 3px 0 3px 11px; margin-bottom: 11px; } .tip b { font-size: 14px; } .tip .lvl { margin-left: 7px; font-size: 11px; color: var(--c); font-weight: 700; } .tip p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.tip-warn { --c: var(--yellow); } .tip-ok { --c: var(--green); }
.plug { margin-bottom: 11px; } .plug b { font-size: 14px; display: block; } .plug code { display: inline-block; font: 600 12px/1.4 Consolas, monospace; background: var(--s2); border: 1px solid var(--line); padding: 1px 7px; margin: 2px 0; } .plug p { margin: 1px 0 0; }

/* Bibliothèque */
.bank-hero { display: flex; gap: 14px; align-items: center; background: var(--bank-bg); color: var(--bank-fg); padding: 16px 18px; margin-bottom: 12px; box-shadow: var(--hard); }
.bank-hero .i { width: 40px; height: 40px; } .bank-hero b { display: block; font: 400 34px/1 var(--display); letter-spacing: .03em; text-transform: uppercase; } .bank-hero span { font-size: 14px; }
.add-via { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 10px; } .add-label { font-weight: 800; text-transform: uppercase; font-size: 12px; letter-spacing: .08em; color: var(--muted); }
.search { margin-bottom: 12px; }
.list { display: grid; gap: 8px; } .scroll-list { max-height: 60vh; overflow: auto; }
.item { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 13px; align-items: center; background: var(--s1); border: 1px solid var(--line); padding: 9px 11px; border-radius: var(--r-s); }
.cover { width: 52px; height: 52px; object-fit: cover; background: var(--s3); display: block; border-radius: var(--r-s); }
.item .t { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .meta { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item audio { height: 34px; width: 190px; }
.item .row { gap: 6px; } .item .row button { padding: 6px 10px; font-size: 13px; }
.tag { font-size: 11px; background: var(--accent-soft); color: var(--accent); padding: 1px 7px; font-weight: 700; margin-left: 6px; }
.empty { padding: 34px; text-align: center; color: var(--muted); }
@media (max-width: 980px) { .item { grid-template-columns: 44px minmax(0, 1fr); } .item .cover { width: 44px; height: 44px; } .item .row { grid-column: 1 / -1; } .item audio { width: 100%; } }

/* Écriture façon Notes iOS : volontairement calme, c'est un carnet */
body.in-notes { overflow: hidden; }
.notes { --note: var(--bank-bg); --note-fg: var(--bank-fg); display: grid; grid-template-columns: 300px minmax(0, 1fr) 280px; height: calc(100vh - 52px); background: var(--bg); }
.notes.no-rhymes { grid-template-columns: 300px minmax(0, 1fr); } .notes.no-rhymes .note-rhymes { display: none; }
.notes-list { background: var(--s1); border-right: 1px solid var(--line); padding: 14px 12px; overflow: auto; display: flex; flex-direction: column; }
.notes-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .notes-top h1 { font: 700 30px/1 var(--font); text-transform: none; letter-spacing: 0; margin: 0; }
.icon-btn { background: transparent; color: var(--note); padding: 5px 8px; font-weight: 600; font-size: 14px; border-radius: var(--r-m); }
.icon-btn:hover:not(:disabled) { background: var(--s2); filter: none; } .icon-btn.on { background: color-mix(in srgb, var(--note) 20%, transparent); }
.note-search { width: 100%; background: var(--s3); border: 0; border-radius: var(--r-m); margin-bottom: 8px; padding: 7px 11px; }
.note-group { margin: 12px 4px 5px; font-size: 13px; font-weight: 700; }
.note-card { background: var(--s2); border-radius: var(--r-l); overflow: hidden; }
.note-row { display: grid; gap: 1px; width: 100%; background: transparent; color: var(--text); text-align: left; padding: 9px 13px; font-weight: 400; border-radius: 0; border-bottom: 1px solid var(--line); }
.note-row:last-child { border-bottom: 0; } .note-row:hover:not(:disabled) { filter: none; background: var(--s3); }
.note-row.sel { background: var(--note); color: var(--note-fg); } .note-row.sel span, .note-row.sel time { color: var(--note-fg); opacity: .8; }
.note-row b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note-row span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .note-row time { margin-right: 5px; color: var(--text); }
.note-empty { padding: 20px 4px; } .note-count { text-align: center; margin: auto 0 0; padding-top: 12px; }
.note-editor { display: flex; flex-direction: column; min-width: 0; background: var(--s1); }
.note-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px; } .note-date { font-size: 12px; color: var(--muted); flex: 1; text-align: center; } .back-btn { display: none; }
.note-text { flex: 1; border: 0; border-radius: 0; background: transparent; padding: 8px clamp(18px, 5vw, 64px) 40px; resize: none; font: 18px/1.65 var(--font); }
.note-text:focus { outline: 0; }
.note-text::first-line { font-weight: 700; font-size: 24px; }
.note-rhymes { background: var(--s1); border-left: 1px solid var(--line); padding: 14px 12px; display: flex; flex-direction: column; min-height: 0; }
.note-rhymes button:not(.rich):not([type=button]) { background: var(--note); color: var(--note-fg); }
@media (max-width: 860px) {
  body.in-notes { overflow: auto; }
  .notes, .notes.no-rhymes { grid-template-columns: 1fr; height: auto; min-height: calc(100vh - 52px); }
  .notes .note-editor, .notes .note-rhymes { display: none; }
  .notes.editing .notes-list { display: none; } .notes.editing .note-editor { display: flex; min-height: 62vh; } .notes.editing:not(.no-rhymes) .note-rhymes { display: flex; border-left: 0; border-top: 1px solid var(--line); }
  .back-btn { display: inline-block; } .note-date { display: none; }
}
textarea.lyrics { width: 100%; flex: 1; resize: none; line-height: 1.65; font-size: 16px; min-height: 0; }
.chips { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 5px; margin-top: 10px; overflow: auto; flex: 1; min-height: 0; }
.chips button { background: var(--s2); color: var(--text); border-color: var(--line); padding: 3px 10px; font-weight: 500; font-size: 14px; }
.chips button.rich { border-color: var(--accent); }
.chips button:hover { background: var(--accent-soft); filter: none; }
.admin-link { font-size: 12px; color: var(--muted); }

/* ---------- MINI DAW ---------- */
body.in-daw { overflow: hidden; }
body.in-daw .topbar { min-height: var(--top-h); padding: 2px 14px; }
body.in-daw .brand { font-size: 19px; }
body.in-daw nav button { padding: 4px 9px; font-size: 13px; }
.daw { display: grid; height: calc(100vh - var(--top-h)); overflow: hidden; grid-template-columns: minmax(0, 1fr) 5px var(--side-w); grid-template-rows: auto minmax(90px, 1fr) 5px var(--insp-h); }
.daw.no-side { grid-template-columns: minmax(0, 1fr) 0 0; } .daw.no-side .d-side, .daw.no-side #splitSide { display: none; }
.daw.no-insp { grid-template-rows: auto minmax(90px, 1fr) 0 0; } .daw.no-insp .d-insp, .daw.no-insp #splitInsp { display: none; }
.d-bar { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 7px 12px; background: var(--s1); border-bottom: 2px solid var(--line); }
.d-tl { grid-column: 1; grid-row: 2; position: relative; min-height: 0; min-width: 0; }
#splitInsp { grid-column: 1; grid-row: 3; } .d-insp { grid-column: 1; grid-row: 4; overflow: auto; background: var(--s1); padding: 10px 12px; min-height: 0; }
#splitSide { grid-column: 2; grid-row: 2 / 5; } .d-side { grid-column: 3; grid-row: 2 / 5; display: grid; grid-template-rows: var(--lyrics-h) 5px minmax(60px, 1fr); background: var(--s1); min-height: 0; min-width: 0; }
.side-top { padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; min-height: 0; } .side-top textarea { font-size: 15px; } .side-notes select { padding: 4px 7px; font-size: 13px; } .side-notes .icon-btn { color: var(--accent); }
.side-bottom { padding: 10px 12px; display: flex; flex-direction: column; min-height: 0; }
.rhyme-form input { flex: 1; }
.split { background: var(--line); transition: background .1s; touch-action: none; position: relative; }
.split::after { content: ""; position: absolute; inset: -4px; z-index: 5; }
.split-v { cursor: col-resize; } .split-h { cursor: row-resize; }
.split:hover, .split.drag, .split:focus-visible { background: var(--accent); outline: none; }
.add-audio { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; font-size: 15px; font-weight: 800; box-shadow: var(--hard), 0 0 var(--glow) color-mix(in srgb, var(--accent) 45%, transparent); }
.add-wrap { position: relative; }
.popover { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; width: 260px; display: grid; gap: 7px; background: var(--s1); border: 1px solid var(--line); padding: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.popover .field { margin-bottom: 4px; }
.transport { display: flex; align-items: center; gap: 5px; }
.tbtn { width: 36px; height: 36px; padding: 0; background: var(--s3); color: var(--text); font-size: 13px; display: grid; place-items: center; }
.tbtn.play { background: var(--text); color: var(--bg); }
.tbtn.rec { color: var(--rec, #d0453a); font-size: 18px; } .tbtn.rec.on { background: var(--rec, #d0453a); color: #fff; animation: pulse 1s infinite; }
.clock { display: grid; margin-left: 8px; background: var(--bg); border: 1px solid var(--line); padding: 1px 11px; min-width: 96px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.clock b { font-size: 16px; color: var(--text); } .clock small { font-size: 11px; color: var(--muted); }
.music-info, .tools, .project { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.music-info label { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.d-bar input, .d-bar select { padding: 5px 7px; font-size: 14px; }
.d-bar #bpmIn { width: 70px; font-variant-numeric: tabular-nums; }
.seg { display: inline-flex; gap: 1px; } .seg button { background: var(--s3); color: var(--text); padding: 5px 8px; font-size: 12px; }
.toggle { background: var(--s3); color: var(--muted); padding: 5px 10px; font-size: 13px; font-weight: 600; } .toggle.on { color: var(--text); background: var(--accent-soft); border-color: var(--accent); }
.zoom { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); } .zoom input { width: 84px; }
.project { margin-left: auto; } .project input { width: 150px; font-weight: 700; } .project button { padding: 5px 11px; font-size: 13px; }

.tl-scroll { position: absolute; inset: 0; overflow: auto; background: var(--bg); }
.tl-inner { position: relative; min-width: 100%; min-height: 100%; }
.tl-ruler { position: sticky; top: 0; z-index: 6; display: flex; height: 26px; background: var(--s1); border-bottom: 1px solid var(--line); }
.tl-corner { position: sticky; left: 0; z-index: 7; width: var(--head-w); flex: none; background: var(--s1); border-right: 1px solid var(--line); font-size: 11px; color: var(--muted); padding: 5px 10px; }
.ruler { position: relative; flex: 1; cursor: pointer; overflow: hidden; }
.ruler span { position: absolute; top: 5px; font-size: 11px; color: var(--muted); padding-left: 4px; border-left: 1px solid var(--line); height: 21px; font-variant-numeric: tabular-nums; pointer-events: none; }
.tl-row { display: flex; position: relative; border-bottom: 1px solid var(--line); }
.tl-row.sel { background: color-mix(in srgb, var(--c) 8%, transparent); }
.head { position: sticky; left: 0; z-index: 4; width: var(--head-w); flex: none; background: var(--s1); border-right: 1px solid var(--line); box-shadow: inset 4px 0 0 var(--c); padding: 5px 8px 5px 13px; display: flex; flex-direction: column; gap: 3px; overflow: hidden; cursor: pointer; }
.tl-row.sel .head { background: var(--s2); }
.head-top { display: flex; align-items: center; gap: 4px; }
.head .name { flex: 1; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mini { width: 22px; height: 20px; padding: 0; font-size: 11px; background: var(--s3); color: var(--muted); flex: none; }
.mini.m-on { background: var(--warn); color: #000; } .mini.s-on { background: var(--green); color: #000; } .mini.r-on { background: var(--rec, #d0453a); color: #fff; }
.head-sl { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--muted); } .head-sl input { flex: 1; min-width: 0; height: 12px; }
.meter { height: 3px; background: var(--s3); overflow: hidden; flex: none; } .meter i { display: block; height: 100%; width: 0; background: var(--green); }
.row-resize { position: absolute; left: 0; right: 0; bottom: -3px; height: 6px; cursor: row-resize; z-index: 5; touch-action: none; } .row-resize:hover, .row-resize.drag { background: var(--accent); }
.col-resize { position: absolute; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 8; touch-action: none; left: calc(var(--head-w) - 3px); } .col-resize:hover, .col-resize.drag { background: var(--accent); }
.lane { position: relative; flex: 1; min-width: 0; background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--line) 40%, transparent) 1px, transparent 1px); background-size: var(--bar) 100%, var(--beat) 100%; background-position-x: var(--grid-x), var(--grid-x); }
.lane.over { background-color: var(--accent-soft); }
.clip { position: absolute; top: 3px; bottom: 3px; border-radius: 3px; background: color-mix(in srgb, var(--c) 55%, #0b0b0d); border: 1px solid var(--c); overflow: hidden; cursor: grab; user-select: none; touch-action: none; }
.clip:active { cursor: grabbing; } .clip.selected { outline: 2px solid var(--text); outline-offset: -1px; }
.clip canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.clip span { position: absolute; left: 7px; top: 2px; font-size: 11px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.9); pointer-events: none; white-space: nowrap; z-index: 1; font-weight: 700; }
.trim { position: absolute; top: 0; bottom: 0; width: 7px; cursor: ew-resize; z-index: 2; } .trim.l { left: 0; } .trim.r { right: 0; } .trim:hover { background: rgba(255,255,255,.3); }
.playhead { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--text); pointer-events: none; z-index: 5; }
.playhead::before { content: ""; position: absolute; top: 0; left: -5px; border: 6px solid transparent; border-top: 8px solid var(--text); }
.empty-cta { position: absolute; left: calc(var(--head-w) + 24px); right: 24px; top: 44px; max-width: 460px; margin: auto; display: grid; justify-items: center; text-align: center; gap: 7px; padding: 24px; background: var(--s1); border: 2px dashed var(--accent); z-index: 4; }
.empty-cta .i { color: var(--accent); } .empty-cta b { font: 400 24px/1.1 var(--display); letter-spacing: .03em; text-transform: uppercase; }
.drop-hint { position: absolute; top: 34px; left: 50%; transform: translateX(-50%); background: var(--accent); color: var(--on-accent); font-weight: 700; padding: 5px 14px; z-index: 9; pointer-events: none; }

/* Rack et panneau de plugins */
.rack-wrap { display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: 12px; min-height: 100%; }
.rack { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rack-title { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 3px solid var(--c); padding-bottom: 4px; }
.slots { display: grid; gap: 3px; }
.slot { display: flex; align-items: center; gap: 8px; padding: 5px 8px; background: var(--s2); border: 1px solid var(--line); cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); }
.slot.on { color: var(--text); } .slot.sel { border-color: var(--c); box-shadow: inset 3px 0 0 var(--c); background: var(--s3); }
#fxAdd { padding: 5px 7px; font-size: 13px; color: var(--muted); }
.switch { width: 30px; height: 16px; padding: 0; border-radius: var(--r-s); background: var(--s3); border: 1px solid var(--line); position: relative; flex: none; } .switch::after { content: ""; position: absolute; left: 1px; top: 1px; width: 12px; height: 12px; border-radius: var(--r-s); background: var(--muted); transition: left .1s; }
.switch.on { background: var(--accent); border-color: var(--accent); } .switch.on::after { left: 15px; background: var(--on-accent); }
.switch.big { width: 40px; height: 22px; } .switch.big::after { width: 18px; height: 18px; } .switch.big.on::after { left: 19px; }
.plugin-panel { background: var(--s2); border: 1px solid var(--line); padding: 10px 14px; min-width: 0; }
.pp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.pp-head h3 { font: 400 24px/1 var(--display); letter-spacing: .03em; color: var(--text); margin: 0 0 2px; }
.pp-head p { margin: 0; max-width: 460px; }
.pp-actions { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; } .pp-actions select, .pp-actions button:not(.switch) { padding: 4px 8px; font-size: 12px; }
.pp-body.off { opacity: .55; }
@media (min-width: 1100px) { .pp-body:has(.pp-curve) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 14px; align-items: start; } .pp-body:has(.pp-curve) .pp-curve { margin: 0; } .pp-body:has(.pp-curve) .pp-params { grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); } }
.pp-curve { display: block; width: 100%; height: 120px; background: var(--bg); border: 1px solid var(--line); margin-bottom: 8px; color: var(--c); --c-line: #55555f; }
.pp-params { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 6px 18px; }
.pr { display: grid; grid-template-columns: 92px minmax(0, 1fr) 66px; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.pr input, .pr select { width: 100%; } .pr select { padding: 3px 6px; font-size: 12px; grid-column: 2 / 4; } .pr em { display: none; }
.pr output { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 12px; }
.gr { display: grid; grid-template-columns: 92px 1fr 66px; gap: 7px; align-items: center; margin-top: 9px; } .gr-bar { height: 8px; background: var(--bg); border: 1px solid var(--line); } .gr-bar i { display: block; height: 100%; width: 0; background: var(--warn); } .gr output { text-align: right; }
.insp-info { margin: 8px 0 0; } .insp-info button { padding: 2px 8px; font-size: 12px; margin-left: 6px; }
@media (max-width: 640px) { .rack-wrap { grid-template-columns: 1fr; } }

.dialog { background: var(--s1); color: var(--text); border: 2px solid var(--line); border-radius: var(--r-m); padding: 20px; width: min(760px, calc(100vw - 32px)); box-shadow: var(--hard); } .dialog::backdrop { background: rgba(0,0,0,.65); }
.small-dialog { width: min(440px, calc(100vw - 32px)); } .small-dialog h2 { margin-bottom: 14px; }
.pick-row { width: 100%; text-align: left; background: var(--s2); color: var(--text); border-color: var(--line); font-weight: 400; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 11px; align-items: center; padding: 6px 9px; } .pick-row .cover { width: 40px; height: 40px; }
#toasts { position: fixed; right: 16px; bottom: 16px; z-index: 100; display: grid; gap: 7px; max-width: min(400px, calc(100vw - 32px)); }
.toast { background: var(--s3); color: var(--text); border: 1px solid var(--line); border-left: 5px solid var(--ok); padding: 9px 13px; box-shadow: var(--hard); font-size: 14px; }
.toast.err { border-left-color: var(--accent); } .toast.busy { border-left-color: var(--warn); }
#swatches button { width: 28px; height: 28px; padding: 0; border: 2px solid transparent; } #swatches button.cur { border-color: var(--text); }

/* Petits écrans : tout s'empile et la page défile */
@media (max-width: 900px) {
  body.in-daw { overflow: auto; }
  .daw { display: block; height: auto; overflow: visible; }
  .d-tl { height: 62vh; } .d-insp { max-height: none; } .d-side { display: block; } .side-top textarea { min-height: 220px; } .chips { max-height: 200px; }
  .split { display: none; } .col-resize { display: none; } .project { margin-left: 0; }
  :root { --head-w: 172px !important; }
}

/* Hors Néon, les barres de l'accueil restent dans la matière : gris, avec l'accent en rappel */
:root:not([data-theme="neon"]) .hero-bars i { --c: var(--s3) !important; background: var(--muted); opacity: .55; }
:root:not([data-theme="neon"]) .hero-bars i:nth-child(3n) { background: var(--accent); opacity: 1; }
.t-lib b, .t-set b { font-size: clamp(20px, 2vw, 28px); }

/* Menu de thèmes */
.theme-quick { display: flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12px; color: var(--muted); }
.theme-quick select { padding: 3px 6px; font-size: 13px; }
.theme-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.theme-card { display: grid; gap: 3px; text-align: left; background: var(--s2); color: var(--text); border: 1px solid var(--line); padding: 10px; font-weight: 400; }
.theme-card.active { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.theme-card b { font-size: 15px; } .theme-card small { color: var(--muted); font-size: 12px; line-height: 1.3; }
.theme-swatch { display: flex; height: 26px; margin-bottom: 4px; border: 1px solid var(--line); } .theme-swatch i { flex: 1; }

/* Random : transport, infos, historique */
.rb-transport { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; }
.nav-btn { padding: 11px 14px; font-size: 15px; }
.rb-info { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.rb-info > div { background: var(--s2); padding: 8px 6px; display: grid; gap: 1px; min-height: 58px; align-content: center; min-width: 0; }
.rb-info small { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.rb-info b { font: 400 25px/1.1 var(--display); letter-spacing: .02em; min-height: 27px; overflow-wrap: anywhere; }
.rb-info.loading b { width: 56%; justify-self: center; background: linear-gradient(90deg, var(--s3), var(--line), var(--s3)); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; border-radius: var(--r-s); }
@keyframes shimmer { to { background-position: -200% 0; } }
.rb-info-note { margin: 0; min-height: 16px; }
.hist-head { margin-bottom: 6px; } .hist-head h3 { margin: 0; } .small-btn { padding: 2px 9px; font-size: 12px; }
.hist-list { display: grid; gap: 2px; max-height: 320px; overflow: auto; }
.hist-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; text-align: left; background: transparent; color: var(--text); font-weight: 400; padding: 6px 8px; border-bottom: 1px solid var(--line); border-radius: 0; font-size: 13px; }
.hist-row:hover:not(:disabled) { background: var(--s2); filter: none; }
.hist-row.cur { background: var(--s3); box-shadow: inset 3px 0 0 var(--accent); }
.hist-src { color: var(--muted); font-size: 11px; } .hist-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hist-facts { color: var(--muted); font-size: 12px; white-space: nowrap; }
@media (max-width: 620px) { .hist-row { grid-template-columns: minmax(0, 1fr); gap: 1px; } .theme-quick { display: none; } }

/* Petites animations de chargement */
.eq-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; vertical-align: -1px; }
.eq-bars i { width: 3px; height: 100%; background: var(--accent); transform-origin: bottom; animation: eqbar .8s ease-in-out infinite alternate; }
.eq-bars i:nth-child(2) { animation-delay: -.5s; } .eq-bars i:nth-child(3) { animation-delay: -.25s; } .eq-bars i:nth-child(4) { animation-delay: -.65s; } .eq-bars i:nth-child(5) { animation-delay: -.1s; }
.eq-bars.big { height: 20px; gap: 3px; } .eq-bars.big i { width: 4px; }
.big-loader { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 120; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 11px 18px; background: var(--s3); color: var(--text); border: 1px solid var(--line); box-shadow: var(--hard); font-weight: 600; font-size: 14px; }
.toast.busy .eq-bars { margin-right: 4px; }

/* Bouton de lien : volontairement le plus petit de la page */
.quick { display: grid; justify-items: start; gap: 3px; }
.quiet-link { background: none; border: 0; padding: 2px 0; color: var(--muted); font-size: 12px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.quiet-link:hover:not(:disabled) { color: var(--text); filter: none; }
.quiet-note { color: var(--muted); font-size: 10px; opacity: .75; }
.quick-form { display: flex; gap: 5px; margin: 3px 0; } .quick-form input { padding: 4px 8px; font-size: 13px; width: min(340px, 70vw); }

/* Compte */
.acc-btn { background: var(--s2); color: var(--text); border: 1px solid var(--line); padding: 4px 11px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.acc-btn.on { border-color: var(--text); }
.theme-quick { margin-left: auto; }
.pub-btn { background: var(--bank-bg) !important; color: var(--bank-fg) !important; }

/* Navigation : la DemoBank ressort vraiment */
nav .nav-bank { background: var(--bank-bg); color: var(--bank-fg) !important; font-weight: 800; margin: 0 4px; }
nav .nav-bank:hover { background: var(--bank-bg); filter: brightness(1.08); }
nav .nav-bank.active { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--bank-bg); }

/* Page DemoBank */
.bank-page { max-width: 1320px; padding-top: 20px; }
.bank-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; background: var(--bank-bg); color: var(--bank-fg); padding: 22px 24px; box-shadow: var(--hard); margin-bottom: 14px; }
.bank-head h1 { font-size: clamp(42px, 7vw, 82px); margin: 0 0 4px; line-height: .95; }
.bank-head p { margin: 0; font-size: 15px; opacity: .85; }
.bank-count { font: 400 26px/1 var(--display); letter-spacing: .03em; white-space: nowrap; }
.bank-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; } .bank-tools input { width: min(320px, 100%); }
.bank-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px 14px; }
.bank-card { position: relative; display: grid; gap: 7px; min-width: 0; }
.bank-cover { display: block; padding: 0; width: 100%; aspect-ratio: 1; overflow: hidden; background: var(--s3); border: 1px solid var(--line); border-radius: var(--r-s); box-shadow: var(--hard); }
.bank-cover:hover:not(:disabled) { filter: none; border-color: var(--text); }
.bank-cover img, .beat-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.bank-cover:hover img { transform: scale(1.04); }
.cover-gen { display: grid; place-items: center; width: 100%; height: 100%; color: var(--muted); background: linear-gradient(135deg, var(--s2), var(--s3)); font: 400 64px/1 var(--display); }
.bank-play { position: absolute; left: 8px; width: 40px; height: 40px; padding: 0; border-radius: var(--r-s); display: grid; place-items: center; font-size: 13px; top: calc(100% - 118px); opacity: 0; transition: opacity .12s; }
.bank-card:hover .bank-play, .bank-play:focus-visible, .bank-card.playing .bank-play { opacity: 1; }
@media (hover: none) { .bank-play { opacity: 1; } }
.bank-card.playing .bank-cover { border-color: var(--accent); outline: 2px solid var(--accent); }
.bank-badge { position: absolute; top: 7px; right: 7px; background: var(--bank-bg); color: var(--bank-fg); font-size: 11px; font-weight: 800; padding: 2px 7px; }
.bank-text { display: grid; gap: 1px; text-align: left; background: none; color: var(--text); padding: 0; font-weight: 400; min-height: 66px; align-content: start; min-width: 0; }
.bank-text:hover:not(:disabled) { filter: none; } .bank-text:hover b { text-decoration: underline; text-underline-offset: 3px; }
.bank-text b { font-size: 16px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bank-author { color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.bank-text small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bank-player { position: sticky; bottom: 12px; z-index: 12; display: flex; gap: 12px; align-items: center; margin-top: 18px; padding: 8px 14px; background: var(--s3); border: 1px solid var(--line); box-shadow: var(--hard); }
.bank-player .grow { display: grid; } .bank-player b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bank-player audio { height: 34px; width: min(420px, 50vw); }
@media (max-width: 620px) { .bank-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bank-head { align-items: flex-start; flex-direction: column; padding: 16px; } .bank-player { flex-wrap: wrap; } .bank-player audio { width: 100%; order: 3; } }

/* Fiche d'un beat */
.beat-dialog { width: min(860px, calc(100vw - 32px)); max-height: calc(100vh - 40px); position: fixed; }
.beat-close { position: absolute; top: 12px; right: 12px; z-index: 2; }
.beat-top { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px; }
.beat-cover { aspect-ratio: 1; overflow: hidden; background: var(--s3); border: 1px solid var(--line); }
.beat-meta { display: grid; gap: 8px; align-content: start; min-width: 0; padding-right: 60px; }
.beat-meta h2 { font: 400 clamp(32px, 5vw, 50px)/1 var(--display); letter-spacing: .02em; text-transform: uppercase; overflow-wrap: anywhere; margin: 0; }
.beat-meta .bank-author { font-size: 15px; white-space: normal; }
.beat-facts { display: flex; flex-wrap: wrap; gap: 5px; } .beat-facts span { background: var(--s3); padding: 3px 9px; font-weight: 700; font-size: 13px; }
.beat-full { margin: 0; overflow-wrap: anywhere; } .beat-actions { margin-top: 2px; }
.crea-list { display: grid; gap: 7px; }
.crea { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 300px) auto; gap: 10px; align-items: center; padding: 8px 10px; background: var(--s2); border: 1px solid var(--line); }
.crea-info { display: grid; min-width: 0; } .crea-info b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .crea-info span { font-size: 12px; color: var(--muted); }
.crea audio { height: 34px; width: 100%; }
@media (max-width: 640px) { .beat-top { grid-template-columns: 1fr; } .beat-cover { max-width: 240px; } .beat-meta { padding-right: 0; } .crea { grid-template-columns: 1fr; } }

/* Bouton d'ajout : il doit se voir tout de suite */
.add-big { display: inline-flex; align-items: center; justify-content: center; gap: 9px; background: var(--bank-bg); color: var(--bank-fg); padding: 13px 22px; font-size: 16px; font-weight: 800; border-radius: var(--r-m); box-shadow: var(--hard); }
.add-big .i { width: 20px; height: 20px; }
.add-big.small { padding: 7px 12px; font-size: 13px; box-shadow: none; }
.add-big.done, .add-big.done:disabled { background: transparent; color: var(--ok); border: 1px solid var(--ok); box-shadow: none; opacity: 1; }
.rb-actions { display: grid; grid-template-columns: 1.7fr 1fr; gap: 8px; }
.rb-actions .plus-wrap, .rb-actions .add-big { width: 100%; }
.rb-actions #rbOpen { justify-content: center; }
.flash { animation: flash .9s ease-out; border-radius: var(--r-s); }
@keyframes flash { 0%, 60% { background: var(--accent-soft); outline: 2px solid var(--accent); outline-offset: 3px; } 100% { background: transparent; outline-color: transparent; } }
.bank-card .add-big.small { width: 100%; }
.card-in { color: var(--ok); font-size: 12px; font-weight: 700; padding: 7px 0; text-align: center; }

/* Cartes de Ma biblio : Modifier est séparé de l'action principale */
.card-actions { display: flex; align-items: center; gap: 6px; }
.card-actions button { padding: 6px 10px; font-size: 13px; }
.card-edit { margin-left: auto; font-weight: 500; color: var(--muted) !important; background: transparent !important; border-color: var(--line) !important; }
.edit-del { margin-left: auto; }
#libShuffle { margin-right: auto; margin-left: 4px; }
.bank-head-side { display: grid; justify-items: end; gap: 7px; }
.bank-shuffle { background: var(--bank-fg); color: var(--bank-bg); padding: 7px 12px; font-size: 13px; white-space: nowrap; }

/* Lecteur commun */
.bank-player { position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); width: min(960px, calc(100vw - 24px)); margin: 0; border-radius: var(--r-m); z-index: 60; }
.player-nav .nav-btn { padding: 4px 11px; font-size: 18px; line-height: 1; }
.player-text { display: grid; }
.bank-page, #view-library { padding-bottom: 90px; }
@media (max-width: 620px) { .bank-head-side { justify-items: start; } }

/* ---------- Mini DAW, version arrondie ---------- */
.daw { --c-gap: 8px; padding: 0 8px 8px; gap: 0; }
.daw button, .daw input, .daw select, .daw textarea { border-radius: var(--r-s); }
.daw textarea { border-radius: var(--r-m); }
.d-bar { margin: 8px 0; border: 1px solid var(--line); border-radius: var(--r-l); padding: 8px 14px; background: var(--s1); }
.add-audio { border-radius: var(--r-s); padding: 10px 19px; box-shadow: none; }
.tbtn { border-radius: var(--r-s); }
.clock { border-radius: var(--r-m); padding: 2px 14px; }
.seg { gap: 0; } .seg button:first-child { border-radius: var(--r-s) 0 0 var(--r-s); padding-left: 11px; } .seg button:last-child { border-radius: 0 var(--r-s) var(--r-s) 0; padding-right: 11px; margin-left: 1px; }
.monitor { display: flex; align-items: center; gap: 6px; padding: 3px 5px 3px 3px; border: 1px solid var(--line); border-radius: var(--r-s); }
.monitor #monVol { width: 70px; opacity: .45; } .monitor.active #monVol { opacity: 1; }
.monitor #btnMonFx { padding: 4px 9px; }
.d-tl, .d-insp, .d-side { border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; background: var(--s1); }
.d-insp { overflow: auto; }
.tl-scroll { border-radius: var(--r-l); }
/* Séparateurs : une fente fine avec une poignée arrondie, à la place des traits */
.split { background: transparent; position: relative; }
.split::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: var(--r-s); background: var(--line); transition: background .1s; }
.split-h::before { width: 44px; height: 3px; } .split-v::before { width: 3px; height: 44px; }
.split:hover, .split.drag, .split:focus-visible { background: transparent; }
.split:hover::before, .split.drag::before, .split:focus-visible::before { background: var(--accent); }
.daw { grid-template-columns: minmax(0, 1fr) 9px var(--side-w); grid-template-rows: auto minmax(90px, 1fr) 9px var(--insp-h); }
.daw.no-side { grid-template-columns: minmax(0, 1fr) 0 0; } .daw.no-insp { grid-template-rows: auto minmax(90px, 1fr) 0 0; }
.tl-ruler { background: var(--s1); } .tl-corner { background: var(--s1); }
/* Pistes en capsules */
#tracks { padding: 5px 0 8px; }
.tl-row { border-bottom: 0; margin-bottom: 4px; }
.head { border-right: 0; border-radius: 0 var(--r-m) var(--r-m) 0; margin-left: 6px; width: calc(var(--head-w) - 6px); background: var(--s2); box-shadow: inset 5px 0 0 var(--c); padding-left: 14px; border-radius: var(--r-m); }
.tl-row.sel .head { background: var(--s3); }
.lane { border-radius: var(--r-m); margin: 0 6px; background-color: color-mix(in srgb, var(--s2) 45%, transparent); }
.tl-row.sel { background: transparent; } .tl-row.sel .lane { background-color: color-mix(in srgb, var(--c) 10%, var(--s2)); }
.clip { border-radius: var(--r-s); border-width: 1px; top: 4px; bottom: 4px; }
.mini { border-radius: var(--r-s); width: 22px; height: 22px; }
.meter { border-radius: var(--r-s); } .meter i { border-radius: var(--r-s); }
.row-resize { bottom: -5px; border-radius: var(--r-s); } .col-resize { border-radius: var(--r-s); }
.playhead { border-radius: var(--r-s); }
.empty-cta { border-radius: var(--r-l); }
.drop-hint { border-radius: var(--r-s); }
/* Rack et panneau */
.rack-title { border-bottom-width: 2px; }
.slot { border-radius: var(--r-s); padding: 5px 10px 5px 6px; }
.slot.sel { box-shadow: none; }
.plugin-panel { border-radius: var(--r-m); }
.pp-curve { border-radius: var(--r-s); }
.gr-bar, .gr-bar i { border-radius: var(--r-s); }
.popover { border-radius: var(--r-m); }
.daw .chips button { border-radius: var(--r-s); }
.side-top textarea { border-radius: var(--r-m); }
@media (max-width: 900px) { .daw { display: block; padding: 0 8px 8px; } .d-tl, .d-insp, .d-side { margin-bottom: 8px; } }

.add-big.done .i { display: none; }
@media (max-width: 760px) { .topbar { flex-wrap: wrap; } nav { order: 5; width: 100%; } nav button { padding: 5px 8px; font-size: 13px; } }

/* ---------- Accueil : affiche et mur d'images ---------- */
body.in-home nav { display: none; }
body.in-home { overflow-x: hidden; }
body.in-home .topbar { position: absolute; left: 0; right: 0; background: transparent; backdrop-filter: none; border-bottom: 0; z-index: 5; }
.acc-link { background: none; border: 0; color: var(--muted); padding: 4px 6px; font-size: 12px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; display: none; }
body.in-home .acc-link { display: inline-block; color: var(--text); }
.home { position: relative; min-height: 100vh; padding: 0; max-width: none; overflow: hidden; display: none; }
.home.active { display: grid; place-items: center; }
.home-wall { position: absolute; inset: -40px 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; transform: rotate(-3deg) scale(1.08); }
.wall-col { overflow: hidden; }
.wall-track { display: grid; gap: 8px; animation: wall-up var(--dur, 70s) linear infinite; will-change: transform; }
.wall-col.down .wall-track { animation-name: wall-down; }
@keyframes wall-up { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 4px)); } }
@keyframes wall-down { from { transform: translateY(calc(-50% - 4px)); } to { transform: translateY(0); } }
.wall-tile { aspect-ratio: 1; overflow: hidden; border-radius: var(--r-m); }
.wall-tile svg { display: block; width: 100%; height: 100%; }
.home-veil { position: absolute; inset: 0; background: radial-gradient(ellipse 720px 62% at 50% 50%, color-mix(in srgb, var(--bg) 96%, transparent) 55%, color-mix(in srgb, var(--bg) 62%, transparent) 100%); }
@media (max-width: 760px) {
  .home-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } .wall-col:nth-child(n+5) { display: none; }
  .home-veil { background: color-mix(in srgb, var(--bg) 78%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .wall-track { animation: none; } }

/* Le bouton lecture reste sur la pochette, quelle que soit la hauteur de la carte */
.bank-cover, .bank-card > .bank-play { grid-row: 1; grid-column: 1; }
.bank-card > .bank-play { position: relative; top: auto; left: auto; align-self: end; justify-self: start; margin: 8px; z-index: 1; }

/* ---------- Commandes de lecture et likes ---------- */
.ctl-row { display: flex; align-items: center; justify-content: center; gap: 6px; }
.ctl { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; background: var(--s3); color: var(--text); border-radius: var(--r-s); font-size: 15px; font-weight: 400; flex: none; }
.ctl-play { width: 50px; height: 50px; background: var(--text); color: var(--bg); font-size: 16px; }
.ctl-next { background: var(--accent); color: var(--on-accent); }
.like { font-size: 21px; line-height: 1; background: var(--s3); color: var(--text); }
.like.on { color: #fff; background: var(--like, #d6336c); }
.card-like { position: absolute; top: 7px; left: 7px; width: 32px; height: 32px; font-size: 17px; background: color-mix(in srgb, #000 62%, transparent); color: #fff; z-index: 1; }
.player-ctl .ctl { width: 34px; height: 34px; font-size: 13px; } .player-ctl .ctl-play { width: 42px; height: 42px; }
.bank-player { flex-wrap: wrap; }
.player-seek { display: flex; align-items: center; gap: 8px; } .player-seek input { flex: 1; min-width: 80px; } .player-seek output { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); }
.bank-player > .like { width: 34px; height: 34px; font-size: 18px; }
.bank-player .player-text { min-width: 150px; }
a.add-big { text-decoration: none; }

/* ---------- Écriture : vocabulaire ---------- */
.vocab { display: flex; flex-direction: column; gap: 8px; min-height: 0; flex: 1; }
.vocab-form input { flex: 1; }
.vocab-tabs { display: flex; flex-wrap: wrap; gap: 3px; }
.vocab-tabs button { background: var(--s2); color: var(--muted); border: 1px solid var(--line); padding: 4px 10px; font-size: 12px; font-weight: 600; border-radius: var(--r-s); }
.vocab-tabs button.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.vocab-out { overflow: auto; flex: 1; min-height: 0; }
.vocab-out .chips { margin-top: 0; overflow: visible; flex: none; }
.vocab-cat { margin: 9px 0 5px; font-size: 12px; color: var(--muted); font-weight: 700; }
.vocab-cat:first-child { margin-top: 0; }
.theme-chips { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.theme-chips button.on { background: var(--text) !important; color: var(--bg) !important; border-color: var(--text); }
.argot-list { display: grid; gap: 2px; }
.argot-list button { display: flex; justify-content: space-between; gap: 10px; width: 100%; background: transparent; color: var(--text); text-align: left; padding: 5px 7px; font-weight: 400; font-size: 13px; border-radius: var(--r-s); }
.argot-list button:hover:not(:disabled) { background: var(--s2); filter: none; } .argot-list span { color: var(--muted); font-size: 12px; text-align: right; }
.note-stats { padding: 6px 14px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }

/* ---------- Panneau du DAW : presets et effets ---------- */
.insp-arrow { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); z-index: 7; background: var(--s3); color: var(--text); border: 1px solid var(--line); padding: 4px 14px; font-size: 12px; font-weight: 700; border-radius: var(--r-s); box-shadow: 0 3px 10px rgba(0,0,0,.4); }
.insp-arrow:hover:not(:disabled) { filter: none; background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.insp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 9px; }
.insp-track { padding-left: 9px; border-left: 4px solid var(--c); font-size: 14px; }
.insp-tabs { display: inline-flex; background: var(--s2); border: 1px solid var(--line); border-radius: var(--r-s); padding: 2px; }
.insp-tabs button { background: transparent; color: var(--muted); padding: 4px 14px; font-size: 13px; font-weight: 700; }
.insp-tabs button.on { background: var(--text); color: var(--bg); }
.insp-right { display: flex; gap: 6px; margin-left: auto; }
.preset-top { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.preset-cats { display: flex; flex-wrap: wrap; gap: 4px; }
.preset-cats button { background: var(--s2); color: var(--text); border: 1px solid var(--line); padding: 4px 12px; font-size: 13px; font-weight: 600; }
.preset-cats button.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.preset-save { display: flex; gap: 6px; align-items: center; } .preset-save input { padding: 5px 11px; font-size: 13px; width: 170px; }
.preset-save .add-big.small { border-radius: var(--r-s); white-space: nowrap; }
.preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 6px; }
.preset-card { position: relative; background: var(--s2); border: 1px solid var(--line); border-radius: var(--r-m); }
.preset-card:hover { border-color: var(--muted); }
.preset-card.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.preset-main { display: grid; gap: 1px; width: 100%; text-align: left; background: transparent !important; color: var(--text); padding: 8px 11px; font-weight: 400; }
.preset-main:hover:not(:disabled) { filter: none; }
.preset-main b { font-size: 14px; } .preset-main small { font-size: 11px; color: var(--muted); line-height: 1.25; }
.preset-del { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; padding: 0; background: var(--s3); color: var(--text); font-size: 14px; line-height: 1; }
.preset-empty { padding: 18px; display: grid; justify-items: start; gap: 8px; } .preset-empty p { margin: 0; color: var(--muted); }


/* ---------- Refonte DA : accueil lisible, photos de cave, image de fond ---------- */
#bgLayer { position: fixed; inset: 0; z-index: -1; display: none; isolation: isolate; overflow: hidden; }
#bgLayer i { position: absolute; inset: 0; }
#bgLayer .bg-img { background: var(--user-bg) center / cover no-repeat; filter: var(--bg-filter, none); }
#bgLayer .bg-tint { background: var(--bg-tint, transparent); mix-blend-mode: color; }
#bgLayer .bg-veil { background: color-mix(in srgb, var(--bg) var(--bg-dim, 25%), transparent); }
body.bg-mine #bgLayer .bg-img { filter: none; } body.bg-mine #bgLayer .bg-tint { display: none; }
body.bg-on.in-home #bgLayer, body.bg-on.bg-all:not(.in-daw) #bgLayer { display: block; }
body.bg-on.in-home .home-wall, body.bg-on.in-home .home-veil, body.bg-none .home-wall { display: none; }
body.bg-all:not(.in-home) .panel { background: color-mix(in srgb, var(--s1) 90%, transparent); backdrop-filter: blur(6px); }

body.in-home .acc-link { font-size: 14px; }
@media (max-width: 760px) {
}

.topbar { border-bottom-width: 1px; }
.page { padding-top: 34px; }
.page.narrow { max-width: 860px; }
.page > h1, .page-head h1 { font-size: clamp(38px, 5vw, 58px); }
.panel { padding: 22px; border-radius: var(--r-l); border-color: color-mix(in srgb, var(--line) 72%, transparent); }
.panel h3 { margin-top: 0; }
.tab { border-radius: var(--r-s); padding: 8px 16px; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-cards { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.theme-card { border-radius: var(--r-m); padding: 12px; transition: transform .12s, border-color .12s; }
.theme-card:hover:not(:disabled) { filter: none; transform: translateY(-2px); border-color: var(--text); }

.bg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin: 12px 0; }
.bg-card { display: grid; gap: 6px; padding: 6px; text-align: left; font-weight: 500; font-size: 13px; color: var(--text); background: var(--s2); border: 1px solid var(--line); border-radius: var(--r-m); }
.bg-card:hover:not(:disabled) { filter: none; border-color: var(--text); }
.bg-card.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.bg-card i { display: block; aspect-ratio: 16 / 10; border-radius: var(--r-s); background: var(--s3) center / cover no-repeat; border: 1px solid var(--line); }
.bg-card.hidden { display: none; }
.bg-actions { margin-bottom: 14px; }
.bg-credits { margin-top: 12px; color: var(--muted); font-size: 13px; }
.bg-credits ul { margin: 8px 0 0; padding-left: 18px; }
.bg-credits a { color: inherit; }


/* ---------- Accueil, disposition 3 : l'image arrive doucement et se fond dans le panneau ---------- */
@media (max-width: 860px) {
}


/* ---------- Direction artistique Drill : condensé, froid, coins coupés. ---------- */
:root {
  --font: Archivo, "Segoe UI", system-ui, sans-serif;
  --display: Archivo, Impact, "Arial Narrow Bold", sans-serif;
  --title-stretch: 62%; --title-heavy: 900; --title-light: 300; --top-h: 56px;
  --r-s: 4px; --r-m: 6px; --r-l: 8px; --cut: 16px;
  --chamfer: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  --chamfer-s: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  --speed: 140ms;
}
h1, .poster, .page > h1, .page-head h1 { font-weight: 900; letter-spacing: 0; }
.tape { transform: none; }

/* Accueil */

/* Barre du haut */
.brand { font-weight: 900; letter-spacing: .03em; }
nav button { font: 800 17px/1.1 var(--display); letter-spacing: .02em; text-transform: uppercase; padding: 6px 7px; }
nav .nav-bank { font-weight: 800; }

/* Pages */

.panel h3 { font: 800 25px/1.1 var(--display); letter-spacing: .03em; text-transform: uppercase; color: var(--text); }
.tab { border-radius: var(--r-s); font: 800 19px/1.1 var(--display); letter-spacing: .03em; text-transform: uppercase; }
.theme-card, .bg-card { border-radius: 0; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); border: 0; }
.theme-card.active, .bg-card.active { background: var(--s3); box-shadow: inset 0 -3px 0 var(--accent); }
.theme-card:hover:not(:disabled), .bg-card:hover:not(:disabled) { background: var(--s3); }
.theme-card b { font: 800 21px/1.1 var(--display); letter-spacing: .03em; text-transform: uppercase; }


/* Accueil : place du logo à gauche, boutons ramenés vers le milieu de l'écran */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Chinois : les polices condensées n'ont pas ces caractères */
html[lang="zh"] { --font: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", Archivo, sans-serif; --display: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", Archivo, sans-serif; }
html[lang="zh"] nav button { font-size: 15px; }

.theme-quick.lang-quick { margin-left: 0; }
@media (max-width: 620px) { .theme-quick.lang-quick { display: flex; margin-left: auto; } }

/* Barre du haut : tout tient sur une ligne, les sélecteurs n'ont pas besoin de libellé visible */
@media (min-width: 621px) { .theme-quick { font-size: 0; gap: 0; } .topbar { gap: 10px; } nav button { font-size: 16px; padding: 6px 6px; } }



/* ---------- Système Drill : règles communes à toutes les pages. Spec : docs/handoff-da-drill.md ---------- */
/* Blocs à angle coupé */
.panel, .dialog, .bank-head, .bank-hero, .bank-player, .big-loader { border: 0; border-radius: 0; box-shadow: none; clip-path: var(--chamfer); }
.dialog { clip-path: var(--chamfer-s); }
.daw .panel { clip-path: none; border-radius: var(--r-l); }
.dialog::backdrop { background: rgba(4, 8, 12, .72); }
.item, .stat-card, .plug, .preset-card, .bank-cover, .beat-cover, .crea, .strip-item, .hist-row { border-color: transparent; border-radius: 0; box-shadow: none; clip-path: var(--chamfer-s); }
.stat-card { --c: var(--text); border-top: 1px solid transparent; background: var(--s2); }
.item, .plug, .preset-card, .crea, .strip-item, .hist-row { background: var(--s2); transition: background var(--speed); }
.item:hover, .plug:hover, .preset-card:hover:not(:disabled), .crea:hover, .strip-item:hover, .hist-row:hover:not(:disabled) { background: var(--s3); filter: none; }
.add-big { border-radius: 0; clip-path: var(--chamfer-s); box-shadow: none; }
.go-daw { border-radius: 0; clip-path: var(--chamfer-s); box-shadow: none; }
.panel .item, .panel .plug, .panel .strip-item, .panel .hist-row, .panel .stat-card, .dialog .item, .dialog .strip-item { background: var(--s2); }

/* Boutons et champs */
button { transition: filter var(--speed), background var(--speed), color var(--speed), transform var(--speed); }
button.ghost, .acc-btn, .chip, .toggle-big, .vocab-tabs button, .preset-cats button, .tab, .ctl, .tbtn, .slot, .monitor { border-color: transparent; }
button.ghost:hover:not(:disabled), .acc-btn:hover:not(:disabled), .chip:hover:not(:disabled), .toggle-big:hover:not(:disabled), .tab:hover:not(:disabled), .ctl:hover:not(:disabled), .tbtn:hover:not(:disabled) { background: var(--s3); filter: none; }
input:not([type=range]):not([type=checkbox]):not([type=color]), select, textarea { border-color: transparent; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
.note-text:focus { border-color: transparent; }
.add-audio, .hero-cta { box-shadow: none; }
.tab.active:hover:not(:disabled), .chip.on:hover:not(:disabled) { background: var(--text); color: var(--bg); }

/* Focus : à l'intérieur des blocs à angle coupé, sinon il serait rogné */
.panel:focus-visible, .item:focus-visible, .preset-card:focus-visible, .theme-card:focus-visible, .bg-card:focus-visible, .add-big:focus-visible, .go-daw:focus-visible, .hist-row:focus-visible, .strip-item:focus-visible, .bank-cover:focus-visible { outline-offset: -3px; }

/* Titres */
h2 { font-family: var(--display); font-weight: 800; letter-spacing: .02em; }
.item .t, .preset-card b, .plug b, .crea-info b { font-family: var(--display); font-weight: 800; font-size: 20px; line-height: 1.1; letter-spacing: .02em; text-transform: uppercase; }
.insp-tabs button, .preset-cats button { font-family: var(--display); font-weight: 800; font-size: 16px; letter-spacing: .03em; text-transform: uppercase; }

/* Mini DAW : mêmes formes, sans angle coupé pour garder toute la surface de travail */
.daw { --r-s: 3px; --r-m: 4px; --r-l: 6px; }
.d-tl, .d-insp, .d-side, .d-bar { border-color: transparent; }
.add-audio { font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: .03em; text-transform: uppercase; }
.tbtn { background: var(--s3); }
.tbtn.play, .tbtn.on:not(.rec) { background: var(--text); color: var(--bg); }

/* Messages */
.toast { border: 0; border-left: 4px solid var(--ok); border-radius: 0; box-shadow: none; }
.toast.err { border-left-color: var(--err, var(--accent)); }
.ko { color: var(--err, var(--accent)); }

/* Panneau admin */
.admin-wrap .side { border: 0; border-radius: 0; clip-path: var(--chamfer); }
.admin-wrap .side button { font: 800 18px/1.1 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.admin-wrap .side button.active { box-shadow: inset 3px 0 0 var(--accent); }
.admin-wrap .stat { border-radius: 0; clip-path: var(--chamfer-s); }
.admin-wrap .stat b { font: 900 34px/1 var(--display); }
.admin-wrap th { font: 800 15px/1.1 var(--display); letter-spacing: .03em; }

html[lang="zh"] .item .t, html[lang="zh"] .preset-card b, html[lang="zh"] .plug b, html[lang="zh"] .crea-info b, html[lang="zh"] .insp-tabs button, html[lang="zh"] .preset-cats button, html[lang="zh"] .add-audio { letter-spacing: 0; font-weight: 700; font-size: 15px; }
.card-actions { flex-wrap: wrap; } .card-actions button { white-space: nowrap; }


/* ---------- Identité mp3todemo : voir design-handoff/HANDOFF.md ---------- */
@font-face { font-family: Archivo; src: url("fonts/archivo-variable.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
.topbar { min-height: var(--top-h); padding-top: 0; padding-bottom: 0; }
body.in-daw .topbar { padding-top: 0; padding-bottom: 0; }

/* Nom et slogan : du fin au gras, le M de Map est toujours le logo */
.word { margin: 0; font-family: Archivo, "Arial Narrow", sans-serif; font-stretch: var(--title-stretch); font-weight: var(--title-light); line-height: 1; white-space: nowrap; text-transform: uppercase; letter-spacing: 0; color: var(--text); text-shadow: none; }
.word b { font-weight: var(--title-heavy); }
.word .m { display: inline-block; height: .878em; width: .97em; vertical-align: baseline; margin: 0 -.015em; }
.word-main { font-size: clamp(64px, 14.5vw, 220px); }
.word-slogan { font-size: clamp(26px, 3.2vw, 46px); }
.brand { padding: 0; background: none; }
.brand-word { display: inline-block; font-size: 55px; }
.brand-sub { margin-left: 10px; font: var(--title-heavy) 20px/1 var(--display); text-transform: uppercase; }
.brand, .brand:hover:not(:disabled) { filter: none; }
@media (max-width: 620px) { .brand-word { font-size: 44px; } }

/* Accueil */
.home.active { display: block; }
body.in-home .topbar { justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 14px clamp(16px, 3vw, 32px); }
body.in-home .brand, body.in-home nav { display: none; }
body.in-home .theme-quick { display: flex; margin: 0; gap: 8px; font-size: 13px; }
body.in-home .theme-quick:first-of-type { margin-right: auto; }
body.in-home .theme-quick select { height: 44px; padding: 0 8px; border: 1px solid var(--line); border-radius: 0; background: var(--bg); font-size: 14px; font-weight: 500; }
body.in-home .acc-link { color: var(--text); font-size: 14px; min-height: 44px; }
body.in-home .acc-btn { min-height: 44px; padding: 0 14px; background: transparent; border: 1px solid var(--text); border-radius: 0; font-size: 14px; font-weight: 600; }
.home-content { position: relative; width: 100%; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(20px, 2.4vw, 32px); padding: 76px clamp(16px, 3vw, 32px) 40px; text-align: center; }
.home-brand { display: flex; flex-direction: column; align-items: center; gap: clamp(6px, 1vw, 14px); max-width: 100%; }
.home-grid { width: 100%; max-width: 1080px; display: flex; flex-direction: column; gap: 10px; }
.home-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pad { flex: 1 1 180px; min-width: 0; min-height: 104px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 14px; background: var(--s2); color: var(--text); border: 0; border-radius: 0; font-weight: 400; clip-path: var(--chamfer); transition: transform .1s ease; }
.pad:hover:not(:disabled) { filter: none; transform: scale(1.015); }
.pad:active:not(:disabled) { transform: scale(.985); }
.pad:focus-visible { outline: 3px solid currentColor; outline-offset: -5px; }
.pad b { font-family: var(--display); font-size: 30px; line-height: 1; font-weight: var(--title-heavy); font-stretch: var(--title-stretch); text-transform: uppercase; overflow-wrap: anywhere; }
.pad small { font-size: 13px; color: var(--muted); }
.pad-mid { flex-basis: 240px; min-height: 112px; }
.pad-mid b { font-size: 38px; }
.pad-mid small { font-size: 14px; }
.pad-big { min-height: 148px; gap: 8px; }
.pad-big b { font-size: clamp(46px, 5vw, 68px); line-height: .95; }
.pad-big small { font-size: 15px; }
.pad-main { flex: 3 1 340px; background: var(--text); color: var(--bg); }
.pad-main small { color: inherit; font-weight: 500; }
.pad-side { flex: 2 1 240px; }
.home-legal { margin: 0; max-width: 640px; font-size: 13px; line-height: 1.45; color: var(--muted); }
body.bg-on .home-legal { color: var(--text); }
html[lang="zh"] .pad b { font-weight: 700; font-stretch: normal; }
html[lang="zh"] .pad-big b { font-size: clamp(34px, 3.6vw, 48px); }
html[lang="zh"] .pad-mid b { font-size: 30px; }
html[lang="zh"] .pad b { font-size: 24px; }
html[lang="zh"] .pad-big b { font-size: clamp(34px, 3.6vw, 48px); }
html[lang="zh"] .pad-mid b { font-size: 30px; }

/* Titres : Archivo très condensée et grasse. Tout nouveau titre en --display s'ajoute ici. */
h1, .brand, .hero-title, .tile b, .facts b, .big-drop b, .stat-card b, .bank-hero b, .empty-cta b, .pp-head h3, .rb-info b, .bank-count, .cover-gen, .beat-meta h2, nav button, .panel h3, .tab, .theme-card b, h2, .item .t, .preset-card b, .plug b, .crea-info b, .insp-tabs button, .preset-cats button, .add-audio, .admin-wrap .side button, .admin-wrap .stat b, .admin-wrap th, .brand-sub { font-stretch: var(--title-stretch); font-weight: var(--title-heavy); }
html[lang="zh"] :where(h1, .brand, .hero-title, .tile b, .facts b, .big-drop b, .stat-card b, .bank-hero b, .empty-cta b, .pp-head h3, .rb-info b, .bank-count, .cover-gen, .beat-meta h2, nav button, .panel h3, .tab, .theme-card b, h2, .item .t, .preset-card b, .plug b, .crea-info b, .insp-tabs button, .preset-cats button, .add-audio, .admin-wrap .side button, .admin-wrap .stat b, .admin-wrap th, .brand-sub) { font-stretch: normal; font-weight: 700; }
html[lang="zh"] .word { font-family: Archivo, "Arial Narrow", sans-serif; font-stretch: var(--title-stretch); font-weight: var(--title-light); }
html[lang="zh"] .word b { font-weight: var(--title-heavy); }
.brand-word { line-height: 1; height: 52px; overflow: visible; }

/* L'en-tête de l'accueil reste dans le flux : sur téléphone il passe sur deux lignes sans recouvrir le nom */
body.in-home .topbar { position: relative; }
.home.active { min-height: 0; }
.home-content { min-height: calc(100vh - 72px); padding-top: 8px; }


/* ---------- Profils, communauté, Premium ---------- */
.link-btn { display: inline; padding: 0; background: none; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.link-btn:hover:not(:disabled) { filter: none; color: var(--accent); }
.avatar { display: block; flex: none; width: 56px; height: 56px; object-fit: cover; background: var(--s3); clip-path: var(--chamfer-s); }
.avatar-gen { display: grid; place-items: center; font: var(--title-heavy) 26px/1 var(--display); font-stretch: var(--title-stretch); color: var(--text); }
.avatar-big { width: 128px; height: 128px; font-size: 56px; clip-path: var(--chamfer); }
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 14px; }
.person-card { display: flex; align-items: center; gap: 12px; padding: 12px; text-align: left; background: var(--s2); color: var(--text); font-weight: 400; clip-path: var(--chamfer-s); }
.person-card:hover:not(:disabled) { filter: none; background: var(--s3); }
.person-text { display: grid; gap: 1px; min-width: 0; }
.person-text b { font: var(--title-heavy) 22px/1.1 var(--display); font-stretch: var(--title-stretch); overflow-wrap: anywhere; }
.person-text small { font-size: 12px; }
.profile-head { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-bottom: 18px; }
.profile-id { flex: 1 1 240px; min-width: 0; } .profile-id h1 { margin: 0 0 6px; overflow-wrap: anywhere; } .profile-id p { margin: 0 0 8px; }
.profile-bio { white-space: pre-wrap; overflow-wrap: anywhere; }
.role-tag { display: inline-block; padding: 3px 8px; font-size: 12px; font-weight: 700; background: var(--s3); border-radius: var(--r-s); }
.premium-tag { background: var(--accent); color: var(--on-accent); }
.profile-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 22px; }
.profile-stats .stat-card b { color: var(--text); font-size: 36px; }
@media (max-width: 520px) { .profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.profile-edit { margin-top: 22px; }
.community-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.field-inline { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.community-list { display: grid; gap: 10px; }
.community-list .crea, .beat-dialog .crea { display: grid; gap: 8px; padding: 12px 14px; }
.crea-info { display: grid; gap: 2px; min-width: 0; }
.crea-info b { overflow-wrap: anywhere; }
.crea-credits { font-size: 13px; overflow-wrap: anywhere; }
.crea audio { width: 100%; height: 36px; }
.crea-actions { display: flex; flex-wrap: wrap; gap: 6px; } .crea-actions:empty { display: none; }
.pub-feat { display: grid; gap: 8px; margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-s); }
.pub-feat legend { padding: 0 6px; font-size: 13px; font-weight: 700; }
.pad-premium { flex: none; width: 100%; max-width: 1080px; min-height: 58px; flex-direction: row; gap: 14px; }
.pad-premium b { font-size: 26px; }
.premium-price { margin: 0 0 12px; } .premium-price b { font: var(--title-heavy) 56px/1 var(--display); font-stretch: var(--title-stretch); }
.premium-list { margin: 0 0 14px; padding-left: 18px; display: grid; gap: 6px; }
.premium-btn.on { background: var(--accent); color: var(--on-accent); }
html[lang="zh"] .person-text b, html[lang="zh"] .premium-price b, html[lang="zh"] .avatar-gen { font-stretch: normal; font-weight: 700; }

/* Écrans peu hauts : le Premium reste visible sans défilement */
@media (min-width: 861px) and (max-height: 980px) {
  .home-content { gap: 12px; padding-bottom: 14px; }
  .pad-big { min-height: 124px; } .pad-mid { min-height: 94px; } .pad:not(.pad-big):not(.pad-mid):not(.pad-premium) { min-height: 88px; }
  .home-grid, .home-row { gap: 8px; }
  .pad-premium { min-height: 46px; } .pad-premium b { font-size: 22px; }
}
@media (min-width: 621px) { .topbar { gap: 8px; } nav button { font-size: 15px; padding: 6px 5px; } nav { flex-wrap: nowrap; white-space: nowrap; } }
@media (min-width: 621px) and (max-width: 1360px) { nav { flex-wrap: wrap; } }


/* ---------- Mini DAW : poignées de clip, prise en direct ---------- */
/* Poignée de volume du clip : ligne horizontale à glisser (haut = plus fort), étiquette en dB */
.clip .gain-h { position: absolute; left: 12px; right: 12px; height: 12px; margin-top: -6px; cursor: ns-resize; z-index: 2; touch-action: none; }
.clip .gain-h::before { content: ''; position: absolute; left: 0; right: 0; top: 5px; height: 2px; border-radius: 1px; background: color-mix(in srgb, #fff 45%, transparent); opacity: 0; transition: opacity .12s; }
.clip:hover .gain-h::before, .clip.selected .gain-h::before, .clip .gain-h.set::before { opacity: 1; }
.clip .gain-h:hover::before, .clip .gain-h:active::before { background: #fff; height: 3px; top: 4px; }
.clip .gain-h b { position: absolute; right: 0; top: -15px; font: 700 10px/1 var(--font, system-ui); padding: 2px 5px; border-radius: 4px; background: rgba(0,0,0,.72); color: #fff; opacity: 0; transition: opacity .12s; pointer-events: none; white-space: nowrap; }
.clip:hover .gain-h b, .clip.selected .gain-h b, .clip .gain-h.set b { opacity: 1; }
.clip .gain-h.set b { background: color-mix(in srgb, var(--c, #e11d2e) 70%, #000); }
.clip .fade-h { position: absolute; top: 0; width: 10px; height: 10px; background: #fff; border: 1px solid #000; z-index: 3; cursor: ew-resize; opacity: 0; transition: opacity .12s; }
.clip .fade-h.l { margin-left: -1px; } .clip .fade-h.r { margin-right: -1px; }
.clip:hover .fade-h, .clip.selected .fade-h { opacity: 1; }
.clip .fade-ov { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.clip .fade-ov polygon { fill: rgba(0, 0, 0, .45); }
.clip .clip-move { position: absolute; right: 12px; bottom: 2px; display: none; gap: 2px; z-index: 3; }
.clip:hover .clip-move, .clip.selected .clip-move { display: flex; }
.clip .clip-move button { width: 18px; height: 16px; padding: 0; font-size: 9px; line-height: 1; background: rgba(0,0,0,.7); color: #fff; border: 0; border-radius: 2px; }
.clip .clip-move button:hover:not(:disabled) { background: #000; filter: none; }
.clip.recording { background: color-mix(in srgb, var(--rec, #d0453a) 45%, #0b0b0d); border-color: var(--rec, #d0453a); pointer-events: none; }
.clip.recording span { color: #fff; font-weight: 700; }
#micSelect { max-width: 170px; height: 30px; padding: 2px 6px; font-size: 12px; }
.keys-table { width: 100%; border-collapse: collapse; margin: 6px 0 10px; font-size: 14px; }
.keys-table td { padding: 5px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
.keys-table td:first-child { white-space: nowrap; width: 1%; padding-right: 14px; }
kbd { display: inline-block; padding: 1px 6px; font: 600 12px/1.4 var(--font); background: var(--s3); border-radius: 3px; }

.license-note { margin: 4px 0 10px; padding: 8px 10px; font-size: 13px; line-height: 1.4; color: var(--muted); border-left: 3px solid var(--line); text-align: left; }
/* Random sur téléphone : la recherche passe sous les boutons au lieu de déborder */
@media (max-width: 620px) { .finder-line { flex-wrap: wrap; } .finder-line form { min-width: 0; flex: 1 1 100%; } #rbSearch input { min-width: 0; } }
/* Le lecteur YouTube de Random suit la largeur de l’écran */
.beat-art iframe, #rbArt iframe { width: 100%; max-width: 100%; }


/* ---------- Random : grand lecteur ---------- */
.random-page { max-width: 1160px; }
.random-page .beat-card { display: grid; gap: 12px; }
.random-page .beat-art { width: 100%; max-width: none; aspect-ratio: 16 / 9; height: auto; margin: 0; border-radius: 0; background-size: cover; background-position: center; }
.random-page .beat-art audio { position: absolute; left: 16px; right: 16px; bottom: 16px; width: calc(100% - 32px); }
.random-page .beat-art { position: relative; }
.random-page .ctl-row { justify-content: center; gap: 10px; }
.random-page .ctl { width: 52px; height: 52px; font-size: 20px; }
.random-page #rbFav.on, .beat-dialog #beatFav.on { color: #f5c518; }
.random-page #rbTitle { margin: 4px 0 0; }
@media (max-width: 620px) { .random-page .ctl { width: 46px; height: 46px; } }
.random-page #rbArt { height: auto; max-height: none; aspect-ratio: 16 / 9; }
/* Le nom MP3TODEMO est plus long : le menu se resserre pour tenir sur une ligne */
@media (min-width: 621px) { nav button { font-size: 14px; padding: 6px 4px; } nav { gap: 0; } .theme-quick select { max-width: 104px; } }

.bank-tabs { margin: 0 0 12px; }
#bankGrid.list { display: block; }


/* ---------- Random : GO et actions ---------- */
.rb-go { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; background: var(--text); color: var(--bg); border: 0; font: var(--title-heavy) 26px/1 var(--display); font-stretch: var(--title-stretch); letter-spacing: .04em; clip-path: var(--chamfer-s); }
.rb-go .i { width: 22px; height: 22px; }
.rb-go:hover:not(:disabled) { filter: none; transform: translateY(-1px); }
.random-page .rb-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rb-add { background: var(--s2); color: var(--text); }
.rb-add span[aria-hidden] { font-size: 18px; line-height: 1; }
.rb-add.done { background: transparent; color: var(--text); border: 1px solid var(--line); }
@media (max-width: 760px) { .random-page .rb-actions { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Ma bibliothèque : même en-tête pour tous les onglets ---------- */
#view-library .page-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; }
#view-library .page-head h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view-library .page-head .tabs { flex-wrap: nowrap; }
.lib-tools { display: flex; align-items: center; gap: 10px; margin: 10px 0 14px; }
@media (max-width: 980px) {
  #view-library .page-head { grid-template-columns: minmax(0, 1fr); }
  #view-library .page-head .tabs { overflow-x: auto; scrollbar-width: none; }
  #view-library .page-head .tabs .tab { flex: none; }
}

/* ---------- Random : styles en lignes qui passent à la suite, sans défilement ---------- */
#rbStyles { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
#rbStyles .chip { white-space: nowrap; padding: 4px 9px; font-size: 12.5px; }
.finder { min-width: 0; }
.finder { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 620px) { .finder-line.nowrap { flex-wrap: wrap; } #rbSearch.nowrap { flex: 1 1 100%; min-width: 0; } #rbSearch input { flex: 1; } }


/* ---------- Mini DAW : roues doubleur, reverb, delay ---------- */
.macro-knobs { display: flex; gap: 6px; padding: 2px 8px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.knob { display: grid; justify-items: center; width: 66px; cursor: ns-resize; user-select: none; touch-action: none; outline: none; }
.knob svg { width: 44px; height: 44px; }
.knob .k-track { fill: none; stroke: var(--s3); stroke-width: 4; stroke-linecap: round; }
.knob .k-val { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; }
.knob .k-cap { fill: var(--s2); stroke: var(--line); }
.knob .k-hand { stroke: var(--text); stroke-width: 2.5; stroke-linecap: round; }
.knob .k-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.knob .k-num { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.knob.on .k-num { color: var(--text); }
.knob:focus-visible .k-cap, .knob.drag .k-cap { stroke: var(--accent); stroke-width: 2; }
@media (max-width: 760px) { .macro-knobs { order: 5; width: 100%; justify-content: center; border: 0; } }
.random-page .rb-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .random-page .rb-actions { grid-template-columns: minmax(0, 1fr); } }
#rbStyles .chip-more { background: transparent; border: 1px dashed var(--line); color: var(--muted); }
.rb-info { grid-template-columns: 1fr 1fr; }


/* ---------- Écran de chargement : fondu, logo qui rebondit, barre ---------- */
#bigLoader.big-loader { position: fixed; inset: 0; left: 0; bottom: 0; transform: none; max-width: none; z-index: 400; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(6px); clip-path: none; box-shadow: none; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .28s ease, visibility 0s linear .28s; }
#bigLoader.big-loader.on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .28s ease; }
.bl-box { display: grid; justify-items: center; gap: 14px; text-align: center; transform: translateY(8px); transition: transform .35s ease; }
#bigLoader.on .bl-box { transform: none; }
.bl-jump { animation: bl-bounce .9s cubic-bezier(.3, 0, .6, 1) infinite; }
.bl-logo { display: block; width: 88px; height: 88px; color: var(--text); }
.bl-shadow { width: 64px; height: 10px; margin-top: -10px; border-radius: 50%; background: var(--text); opacity: .18; animation: bl-shadow .9s cubic-bezier(.3, 0, .6, 1) infinite; }
.bl-bar { width: 180px; height: 4px; background: var(--s3); overflow: hidden; position: relative; }
.bl-bar i { position: absolute; top: 0; bottom: 0; width: 40%; background: var(--accent); animation: bl-slide 1.1s ease-in-out infinite; }
#bigLoaderText { font-weight: 700; font-size: 15px; color: var(--text); max-width: 320px; }
@keyframes bl-bounce { 0%, 100% { transform: translateY(0) scale(1.06, .94); } 15% { transform: translateY(-4px) scale(.97, 1.03); } 50% { transform: translateY(-34px) scale(1, 1); } 85% { transform: translateY(-4px) scale(.98, 1.02); } }
@keyframes bl-shadow { 0%, 100% { transform: scaleX(1); opacity: .22; } 50% { transform: scaleX(.55); opacity: .08; } }
@keyframes bl-slide { 0% { left: -40%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .bl-jump, .bl-shadow { animation: none; } .bl-bar i { animation-duration: 2.4s; } }

/* ---------- Random : « Aucun » ---------- */
#rbStyles .chip-none { font-style: italic; }

/* ---------- Mini DAW : ciseaux ---------- */
#daw.cut-mode .clip { cursor: crosshair; }
#daw.cut-mode .clip::after { content: ''; position: absolute; top: 0; bottom: 0; left: var(--cut-x, -10px); width: 0; border-left: 2px dashed var(--text); pointer-events: none; z-index: 3; }
#daw.cut-mode .clip:not(:hover)::after { display: none; }


/* ---------- Random : volume ---------- */
.rb-vol { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; }
.random-page .rb-vol .ctl { width: 40px; height: 40px; font-size: 16px; }
#rbVol { width: 110px; accent-color: var(--text); }
@media (max-width: 620px) { #rbVol { width: 80px; } .random-page .rb-vol .ctl { width: 36px; height: 36px; } }

/* ---------- Mini DAW : presets d'artistes ---------- */
.artist-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 10px; }
.artist-country button { padding: 4px 12px; }
.artist-country button.on { background: var(--text); color: var(--bg); }
.artist-card { display: grid; gap: 8px; padding: 10px; }
.artist-card .preset-main { cursor: default; background: none; padding: 0; text-align: left; }
.artist-roles { display: flex; gap: 4px; flex-wrap: wrap; }
.artist-roles button { flex: 1; padding: 5px 6px; font-size: 12px; font-weight: 800; background: var(--s2); color: var(--text); border: 1px solid var(--line); }
.artist-roles button.match { border-color: var(--text); }
.artist-roles button.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.artist-card.locked { opacity: .75; }
.artist-card.locked .artist-roles button { color: #f5c518; }
.adapt-note { margin: 0 0 8px; }
@media (max-width: 620px) { .random-page .ctl-row { flex-wrap: wrap; } .rb-vol { flex: 1 1 100%; justify-content: center; margin-left: 0; } #rbVol { width: 160px; } }

/* L'écran de chargement vit dans la couche du dessus (popover) : on retire les styles par défaut */
#bigLoader[popover] { margin: 0; border: 0; width: auto; height: auto; max-height: none; overflow: hidden; color: inherit; inset: 0; }
#bigLoader::backdrop { background: transparent; }

/* Groupes de pistes : volume général et bouton + */
.tl-group { display: flex; height: 26px; margin: 6px 0 3px; }
.g-head { position: sticky; left: 0; z-index: 4; width: calc(var(--head-w) - 6px); margin-left: 6px; flex: none; display: flex; align-items: center; gap: 6px; padding: 0 6px 0 10px; border-radius: var(--r-m); background: color-mix(in srgb, var(--c) 16%, var(--s1)); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.g-head b { color: var(--text); white-space: nowrap; }
.g-head input { flex: 1; min-width: 30px; height: 12px; }
.g-num { font-size: 10px; color: var(--muted); min-width: 32px; text-align: right; font-variant-numeric: tabular-nums; }
.g-add { font-weight: 800; font-size: 14px; line-height: 1; }
.g-lane { flex: 1; margin: 0 6px; border-bottom: 1px dashed color-mix(in srgb, var(--c) 35%, transparent); }
.head-foot { display: flex; align-items: center; gap: 3px; min-height: 16px; }
.preset-tag { flex: 1; min-width: 0; font-size: 10px; color: var(--c); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preset-tag.none { color: var(--muted); font-weight: 400; }
.head-foot .mini { width: 18px; height: 16px; font-size: 8px; padding: 0; }

/* Bibliothèque : plus de grand titre, les onglets en tête, un peu plus petits */
#view-library .page-head { margin-bottom: 12px; }
#libTabs.lib-tabs .tab { font-size: 15px; padding: 6px 12px; }

/* Voix Premium */
.lang-tag { font-size: 9px; font-weight: 800; padding: 1px 4px; border-radius: 3px; background: var(--s3); color: var(--muted); vertical-align: middle; margin-left: 4px; }
.voice-grid .preset-card.locked { opacity: .6; }

/* Volume de groupe : barre verticale le long des pistes du groupe */
.tl-group { display: block; height: auto; margin: 6px 0 2px; }
.g-top { display: flex; height: 24px; margin-bottom: 3px; }
.g-head .g-num { flex: 1; text-align: right; }
.g-body { display: flex; }
.g-strip { position: sticky; left: 6px; z-index: 5; flex: none; width: 22px; margin: 0 0 4px 6px; padding: 6px 0; display: flex; justify-content: center; border-radius: var(--r-m); background: color-mix(in srgb, var(--c) 16%, var(--s1)); }
.g-strip input { position: absolute; top: 6px; bottom: 6px; left: 4px; writing-mode: vertical-lr; direction: rtl; width: 14px; height: auto; margin: 0; accent-color: var(--c); cursor: ns-resize; }
.g-rows { flex: 1; min-width: 0; }
.g-rows .head { left: 32px; margin-left: 4px; width: calc(var(--head-w) - 32px); }

/* Barre du DAW : Export et Écriture à droite, le reste à gauche */
.project { margin-left: 0; }
.d-right { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.d-right button { padding: 5px 13px; font-size: 13px; }
.pstar { font-size: .62em; margin-left: 2px; vertical-align: super; line-height: 0; color: var(--accent); }
button.on .pstar, .premium-btn.on .pstar { color: inherit; }
/* Panneaux repliables : une fine ligne de couleur sur toute la longueur */
.daw .split-line { background: transparent; cursor: pointer; }
.daw .split-line::before { content: ""; position: absolute; border-radius: 2px; background: var(--accent); opacity: .8; transform: none; transition: opacity .12s; }
.daw .split-line.split-h::before { left: 0; right: 0; top: 50%; height: 3px; width: auto; margin-top: -1.5px; }
.daw .split-line.split-v::before { top: 0; bottom: 0; left: 50%; width: 3px; height: auto; margin-left: -1.5px; }
.daw .split-line:hover::before, .daw .split-line:focus-visible::before, .daw .split-line.drag::before { opacity: 1; background: var(--accent); }
.daw .split-line.split-h:hover::before { height: 4px; margin-top: -2px; } .daw .split-line.split-v:hover::before { width: 4px; margin-left: -2px; }
.daw.no-insp { grid-template-rows: auto minmax(90px, 1fr) 7px 0; } .daw.no-insp #splitInsp { display: block; cursor: pointer; }
.daw.no-side { grid-template-columns: minmax(0, 1fr) 7px 0; } .daw.no-side #splitSide { display: block; cursor: pointer; }
.daw.no-insp #splitInsp::before, .daw.no-side #splitSide::before { opacity: 1; }
/* Panneau Export */
.side-export { display: none; padding: 14px; gap: 12px; flex-direction: column; overflow: auto; }
.side-export h3 { margin: 0 0 2px; font-size: 15px; text-transform: uppercase; letter-spacing: .04em; }
.exp-item { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: var(--r-m); background: var(--s2); }
.exp-item button { align-self: stretch; }
.exp-item small { font-size: 11px; }
.daw.side-exp .d-side { grid-template-rows: minmax(0, 1fr); }
.daw.side-exp .side-export { display: flex; }
.daw.side-exp .side-top, .daw.side-exp #splitLyrics, .daw.side-exp .side-bottom { display: none; }
@media (max-width: 760px) { .daw .split-line { display: none; } .d-right { margin-left: 0; } }
/* Le DAW prend exactement la hauteur restante, même quand la barre du haut passe sur deux lignes */
.daw { height: calc(100vh - var(--daw-top, var(--top-h))); }

/* Onglets Export / Écriture : vert quand ils sont ouverts */
.d-right .toggle.on { background: #2fbf5b; color: #04140a; border-color: #2fbf5b; }
.d-right .toggle:not(.on):hover:not(:disabled) { border-color: #2fbf5b; color: var(--text); }
/* Premium : bordure jaune */
.premium-btn, .preset-cats [data-cat="artists"], .preset-cats [data-cat="voices"] { border: 1.5px solid #f2c230 !important; }
.pstar { color: #f2c230; }
.premium-btn.on { background: #f2c230; color: #1a1400; }
/* Lignes de repli 2,5 fois plus épaisses */
.daw { grid-template-columns: minmax(0, 1fr) 12px var(--side-w); grid-template-rows: auto minmax(90px, 1fr) 12px var(--insp-h); }
.daw.no-side { grid-template-columns: minmax(0, 1fr) 12px 0; }
.daw.no-insp { grid-template-rows: auto minmax(90px, 1fr) 12px 0; }
.daw .split-line.split-h::before { height: 7.5px; margin-top: -3.75px; border-radius: 4px; }
.daw .split-line.split-v::before { width: 7.5px; margin-left: -3.75px; border-radius: 4px; }
.daw .split-line.split-h:hover::before { height: 9px; margin-top: -4.5px; } .daw .split-line.split-v:hover::before { width: 9px; margin-left: -4.5px; }
/* Boucle */
.loop-band { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, #2fbf5b 18%, transparent); border-left: 2px solid #2fbf5b88; border-right: 2px solid #2fbf5b88; pointer-events: none; z-index: 1; }
.loop-band.on { background: color-mix(in srgb, #2fbf5b 34%, transparent); border-color: #2fbf5b; }
/* Décompte */
#btnRec.counting { background: #f2c230; color: #1a1400; font-weight: 800; }

/* Panneau Export */
.side-export { gap: 14px; }
.exp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.exp-sec { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--r-m); background: var(--s2); }
.exp-sec h4 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.exp-sec .field { font-size: 12px; }
.exp-sec textarea { resize: vertical; min-height: 54px; }
.exp-actions .exp-item { background: var(--s1); }
.exp-credits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.cr { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: var(--r-s); background: var(--s1); font-size: 13px; min-width: 0; }
.cr b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr .mini { margin-left: auto; }
.cr-role { font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--muted); min-width: 52px; }
.cr-tag { font-size: 10px; padding: 1px 6px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.cr-tag.ok { border-color: #2fbf5b; color: #2fbf5b; }
.exp-add { display: flex; gap: 6px; } .exp-add input { flex: 1; min-width: 0; }
.flash { outline: 2px solid #f2c230; outline-offset: 2px; }
.pub-recap { margin: 0; padding: 10px; border-radius: var(--r-s); background: var(--s2); }
.crea-desc { display: block; font-size: 12px; color: var(--muted); margin: 2px 0; white-space: pre-line; }

/* Choisir dans la bibliothèque : préécoute */
#pickList .pick-row { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: var(--r-s); background: var(--s1); border: 1px solid var(--line); margin-bottom: 6px; }
#pickList .pick-row.playing { border-color: #2fbf5b; }
.pick-play { width: 34px; height: 34px; flex: none; border-radius: 50%; padding: 0; font-size: 12px; }
.pick-row.playing .pick-play { background: #2fbf5b; color: #04140a; border-color: #2fbf5b; }
.pick-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.pick-info .t { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-prog { display: block; height: 4px; border-radius: 2px; background: var(--s3); margin-top: 3px; overflow: hidden; cursor: pointer; }
.pick-prog i { display: block; height: 100%; width: 0; background: #2fbf5b; }
.pick-add { flex: none; padding: 5px 12px; font-size: 13px; }

/* Bibliothèque : Mes titres / Téléchargés */
.lib-split { display: flex; flex-direction: column; gap: 22px; }
.lib-sec h2 { margin: 0 0 2px; font-size: 18px; } .lib-sec h2 small { font-size: 13px; margin-left: 6px; }
.lib-sec > p { margin: 0 0 10px; }
.lib-titre { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lib-under { list-style: none; margin: 0; padding: 6px; display: flex; flex-direction: column; gap: 4px; border-radius: var(--r-s); background: var(--s2); }
.lib-under li { display: flex; align-items: center; gap: 7px; font-size: 13px; min-width: 0; }
.lib-under b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lu-tag { font-size: 10px; font-weight: 800; text-transform: uppercase; padding: 1px 6px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); }
.lu-tag.pub { border-color: #2fbf5b; color: #2fbf5b; }

/* Onglet Micro */
.side-mic { display: none; padding: 14px; gap: 14px; flex-direction: column; overflow: auto; }
.daw.mode-mic .d-side { grid-template-rows: minmax(0, 1fr); }
.daw.mode-mic .side-mic { display: flex; }
.daw.mode-mic .side-top, .daw.mode-mic #splitLyrics, .daw.mode-mic .side-bottom, .daw.mode-mic .side-export { display: none; }
.mic-meter { position: relative; height: 14px; border-radius: 4px; background: linear-gradient(90deg, #1f6f3a 0 70%, #8a7a1a 70% 90%, #7a1f1f 90%); overflow: hidden; }
.mic-meter::before { content: ""; position: absolute; inset: 0; left: var(--rms, 0%); background: var(--s1); opacity: .82; transition: left .05s linear; }
.mic-meter .mm-peak { position: absolute; top: 0; bottom: 0; width: 2px; left: var(--peak, 0%); background: #fff; }
.mic-meter .mm-rms, .mic-meter .mm-zone { display: none; }
.mic-read { justify-content: space-between; align-items: center; gap: 8px; }
.mic-clip { color: #ff5a5a; font-weight: 800; font-size: 12px; }
.mic-val { min-width: 54px; text-align: right; font-variant-numeric: tabular-nums; }
#micPre { flex: 1; }
.mic-noise, .clean-level { display: flex; } .mic-noise button, .clean-level button { flex: 1; }
.side-mic .monitor { border: 0; padding: 0; gap: 8px; } .side-mic .monitor #monVol { flex: 1; width: auto; }
/* Menu du master */
.master-wrap { position: relative; display: inline-flex; }
#masterMenu { min-width: 230px; right: 0; left: auto; }
#masterMenu button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; }
#masterMenu button small { font-size: 11px; color: var(--muted); font-weight: 400; }
#masterMenu button.on { outline: 2px solid #f2c230; }
/* Six boutons rotatifs : un peu plus serrés */
.macro-knobs { gap: 6px; flex-wrap: wrap; }

/* Défis */
#view-challenges .page-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ch-list { display: flex; flex-direction: column; gap: 12px; }
.ch-card { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px; border-radius: var(--r-m); background: var(--s1); border: 1px solid var(--line); }
.ch-card.ended { opacity: .85; }
.ch-cover { width: 84px; height: 84px; border-radius: var(--r-s); object-fit: cover; background: var(--s3); display: grid; place-items: center; font-size: 28px; color: var(--muted); }
.ch-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ch-main h3, .ch-main h2 { margin: 0; }
.ch-theme { margin: 0; white-space: pre-line; }
.ch-stats { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; font-size: 12px; }
.ch-time { font-weight: 800; color: #2fbf5b; } .ch-time.over { color: var(--muted); }
.ch-winner { margin: 0; font-size: 13px; }
.ch-actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.ch-tag { font-size: 11px; font-weight: 800; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; border: 1px solid #2fbf5b; color: #2fbf5b; text-align: center; }
.ch-back { margin-bottom: 10px; }
.ch-head { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 16px; }
.ch-head .ch-cover { width: 120px; height: 120px; }
.ch-beat { display: flex; flex-direction: column; gap: 4px; } .ch-beat audio { width: 100%; max-width: 420px; }
.ch-entries { display: flex; flex-direction: column; gap: 8px; }
.ch-entry { display: grid; grid-template-columns: 38px minmax(0, 1fr) 92px; gap: 10px; align-items: center; padding: 8px; border-radius: var(--r-m); background: var(--s1); border: 1px solid var(--line); }
.ch-entry.voted { border-color: #2fbf5b; }
.ch-rank { font-size: 20px; font-weight: 900; text-align: center; }
.ch-crea { min-width: 0; } .ch-crea .crea { border: 0; padding: 0; background: none; }
.ch-vote { display: flex; flex-direction: column; align-items: center; gap: 3px; } .ch-vote b { font-size: 20px; } .ch-vote small { color: var(--muted); font-size: 11px; } .ch-vote button { padding: 4px 10px; font-size: 12px; }
.ch-month { align-items: end; gap: 14px; margin-bottom: 12px; } .ch-month p { margin: 0 0 6px; }
.ch-rank-cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 18px; }
.ch-artists { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ch-artists li { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--r-s); background: var(--s1); }
.ch-artists li .ch-rank { width: 30px; font-size: 16px; } .ch-artists li b { margin-left: auto; white-space: nowrap; }
.ch-artists .avatar { width: 32px; height: 32px; }
.exp-challenge { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-s); border: 1px solid #2fbf5b; font-size: 13px; }
.exp-challenge .mini { margin-left: auto; }
@media (max-width: 760px) {
  .ch-card { grid-template-columns: 64px minmax(0, 1fr); } .ch-card .ch-cover { width: 64px; height: 64px; } .ch-actions { grid-column: 1 / -1; flex-direction: row; }
  .ch-head { grid-template-columns: 1fr; } .ch-rank-cols { grid-template-columns: 1fr; }
  .ch-entry { grid-template-columns: 30px minmax(0, 1fr); } .ch-vote { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; }
}
.macro-knobs .knob { width: 74px; } .macro-knobs .knob svg { width: 40px; height: 40px; }
.macro-knobs .k-label { white-space: nowrap; font-size: 10px; letter-spacing: 0; }
/* Nouveau projet : petit rectangle bleu à gauche de « Ajouter un audio » */
.new-project { background: #2f6bff; color: #fff; border: 1px solid #2f6bff; border-radius: var(--r-s); padding: 6px 12px; font-size: 12px; font-weight: 800; align-self: center; }
.new-project:hover:not(:disabled) { background: #1f56e0; border-color: #1f56e0; filter: none; }
/* Concours : onglets sur le bord droit de l'accueil, tiroir qui s'ouvre */
.contest-tabs { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; gap: 8px; }
.ct-tab { writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center; gap: 8px; padding: 14px 9px; border-radius: 0 var(--r-m) var(--r-m) 0; background: #f2c230; color: #1a1400; border: 0; font-weight: 900; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 6px 20px rgba(0,0,0,.4); max-height: 260px; }
.ct-tab .ct-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-tab .ct-ico { transform: rotate(180deg); writing-mode: horizontal-tb; }
.ct-tab:hover:not(:disabled) { filter: brightness(1.08); }
.ct-tab.on { background: var(--text); color: var(--bg); }
.contest-drawer { position: fixed; top: var(--top-h, 56px); right: 0; bottom: 0; z-index: 39; width: min(420px, 100vw); background: var(--s1); border-left: 1px solid var(--line); box-shadow: -18px 0 40px rgba(0,0,0,.45); padding: 16px 52px 16px 18px; overflow: auto; transform: translateX(105%); transition: transform .25s ease, width .25s ease; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.contest-drawer.open { transform: none; }
.contest-drawer.full { width: min(720px, 100vw); }
.ct-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ct-head h2 { margin: 0; font-size: 22px; }
.ct-head p { margin: 2px 0 0; }
.ct-close { font-size: 22px; line-height: 1; }
.ct-desc { margin: 0; white-space: pre-line; } .ct-prize { margin: 0; font-weight: 700; }
.ct-sort { max-width: 260px; }
.ct-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ct-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px; border-radius: var(--r-m); background: var(--s2); }
.ct-rank { font-size: 18px; font-weight: 900; text-align: center; }
.ct-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ct-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-info audio { width: 100%; height: 30px; }
.ct-score { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.ct-score > b { color: #f2c230; font-size: 16px; white-space: nowrap; }
.ct-score small { color: var(--muted); font-size: 11px; white-space: nowrap; }
.stars { display: flex; }
.star { background: none; border: 0; padding: 0 1px; font-size: 18px; line-height: 1; color: var(--s3); cursor: pointer; }
.star.on { color: #f2c230; }
.stars:not(.own):hover .star { color: #f2c230; } .stars:not(.own) .star:hover ~ .star { color: var(--s3); }
.stars.own .star { cursor: default; opacity: .5; }
.star:hover:not(:disabled) { filter: none; background: none; }
.ct-help { margin: 0; }
body:not(.in-home) .contest-tabs, body:not(.in-home) .contest-drawer { display: none; }
@media (max-width: 760px) {
  .contest-tabs { top: auto; bottom: 12px; transform: none; }
  .ct-tab { padding: 10px 7px; font-size: 11px; max-height: 170px; }
  .contest-drawer, .contest-drawer.full { width: 100vw; padding-right: 18px; }
  .ct-row { grid-template-columns: 28px minmax(0, 1fr); } .ct-score { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-end; gap: 10px; }
}

/* Boutons rotatifs rangés par type */
.macro-knobs { display: flex; gap: 6px 10px; flex-wrap: wrap; align-items: flex-start; }
.knob-group { display: flex; flex-direction: column; gap: 2px; padding: 3px 6px 2px; border-radius: var(--r-s); background: color-mix(in srgb, var(--s2) 70%, transparent); }
.kg-label { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding-left: 2px; }
.kg-row { display: flex; gap: 2px; }
.macro-knobs .knob { width: 64px; } .macro-knobs .knob svg { width: 36px; height: 36px; }
.macro-knobs .knob { width: auto; min-width: 64px; } .macro-knobs .knob .k-label { white-space: normal; text-align: center; line-height: 1.1; max-width: 76px; }

/* Bouton « Sans FX » à côté de Presets / Effets */
.fx-off { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 7px; font-size: 12px; }
.fx-off-ico { width: 18px; height: 18px; flex: none; }
.fx-off.on { background: #ff5a5a; color: #fff; border-color: #ff5a5a; }

/* Onglet AutoTracks */
.side-auto { display: none; padding: 14px; gap: 12px; flex-direction: column; overflow: auto; }
.daw.mode-auto .d-side { grid-template-rows: minmax(0, 1fr); }
.daw.mode-auto .side-auto { display: flex; }
.daw.mode-auto .side-top, .daw.mode-auto #splitLyrics, .daw.mode-auto .side-bottom, .daw.mode-auto .side-export, .daw.mode-auto .side-mic { display: none; }
.side-auto > p { margin: 0; }
.auto-card.on { outline: 1px solid #2fbf5b; }
.auto-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.auto-head h4 { margin: 0; font-size: 14px; color: var(--text); text-transform: none; letter-spacing: 0; }
.auto-params { grid-template-columns: 1fr !important; gap: 4px; }
.auto-params.off { opacity: .5; }
.auto-params .pr { grid-template-columns: 86px minmax(0, 1fr) 58px; }

/* Barre du Mini DAW plus compacte */
.d-bar { padding: 5px 10px; gap: 5px 12px; }
.d-bar button, .d-bar .toggle { padding: 4px 9px; font-size: 12px; }
.d-bar .add-audio { padding: 6px 12px; font-size: 13px; gap: 6px; }
.d-bar .add-audio .i { width: 15px; height: 15px; }
.d-bar .tbtn { width: 30px; height: 30px; font-size: 12px; padding: 0; } .d-bar .tbtn.rec { font-size: 15px; }
.d-bar .clock { padding: 1px 9px; min-width: 82px; } .d-bar .clock b { font-size: 14px; } .d-bar .clock small { font-size: 10px; }
.d-bar input, .d-bar select { padding: 3px 6px; font-size: 13px; }
.d-bar .project input { width: 140px; }
.d-right { gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.d-right .save-state { margin-right: 4px; white-space: nowrap; }
.d-right button { padding: 4px 10px; font-size: 12px; }
/* « Nouveau projet » : un simple + dans un carré bleu */
.d-bar .new-project { width: 30px; height: 30px; padding: 0; font-size: 20px; font-weight: 700; line-height: 1; display: inline-grid; place-items: center; border-radius: var(--r-s); margin-right: 6px; }
.add-wrap { display: inline-flex; align-items: center; }
/* Titres moins grands partout */
h1 { font-size: clamp(26px, 3.4vw, 36px); margin-bottom: 14px; }
.page > h1, .page-head h1 { font-size: clamp(26px, 3.4vw, 38px); }
.bank-head h1 { font-size: clamp(30px, 4.6vw, 54px); }
h2 { font-size: 17px; }
.ct-head h2, .ch-main h2 { font-size: 19px; }

.d-bar .icon-tool, .d-bar #btnKeys, .d-bar #btnCut { min-width: 28px; padding: 4px 7px; font-size: 14px; line-height: 1; }
.d-bar .zoom input { width: 80px; }
.d-bar .tools { gap: 4px; }
h1, .page > h1, .page-head h1 { font-size: clamp(22px, 2.4vw, 30px); }
.bank-head h1 { font-size: clamp(26px, 3.6vw, 42px); }

/* Barre du DAW épurée : ligne 1 = audio, transport, tempo ; ligne 2 = outils, nom, panneaux */
.d-bar { align-items: center; }
.d-bar .d-break { flex-basis: 100%; height: 0; }
.d-bar .tools { flex-wrap: nowrap; gap: 2px; }
.d-bar .icon-tool { width: 28px; height: 28px; min-width: 28px; padding: 0; display: inline-grid; place-items: center; background: transparent; border-color: transparent; color: var(--muted); }
.d-bar .icon-tool .i { width: 17px; height: 17px; }
.d-bar .icon-tool:hover:not(:disabled) { background: var(--s2); color: var(--text); filter: none; }
.d-bar .icon-tool.on { background: var(--s3); color: var(--text); }
.d-bar #btnKeys { font-weight: 800; font-size: 13px; }
.tool-sep { width: 1px; height: 18px; background: var(--line); margin: 0 5px; }
.d-bar .zoom { display: inline-flex; align-items: center; margin: 0 4px; } .d-bar .zoom input { width: 74px; }
.d-bar .project { margin-left: 8px; } .d-bar .project input { width: 130px; }
.d-bar .d-right { margin-left: auto; flex-wrap: nowrap; }
.d-bar .music-info label { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
#keySel { min-width: 104px; }
@media (max-width: 1150px) { .d-bar .d-right { flex-wrap: wrap; margin-left: 0; } }

/* Choix du thème : bouton + petite fenêtre avec aperçus du Mini DAW */
.theme-quick { position: relative; }
.theme-btn { padding: 3px 9px; font-size: 13px; background: var(--s2); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-s); font-weight: 600; }
.theme-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: min(640px, calc(100vw - 24px)); max-height: min(70vh, 560px); overflow: auto; padding: 12px; background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: 0 18px 50px rgba(0,0,0,.55); }
.theme-pop-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; color: var(--text); }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.theme-tile { display: flex; flex-direction: column; gap: 5px; padding: 6px; background: var(--s2); border: 1px solid var(--line); border-radius: var(--r-s); color: var(--text); font-size: 12px; font-weight: 700; text-align: left; }
.theme-tile:hover:not(:disabled) { border-color: var(--text); filter: none; }
.theme-tile.active { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.theme-prev { display: block; width: 100%; height: auto; border-radius: 6px; }
.theme-card .theme-prev { margin-bottom: 6px; }
@media (max-width: 620px) { .theme-pop { position: fixed; top: 60px; left: 12px; right: 12px; width: auto; } }

/* Groupe Ambiance (couleur dérivée du thème) */
:root { --f-amb: color-mix(in srgb, var(--f-back) 55%, #5f8f5a); }
/* Couleurs vives par groupe, sur la grille : en-tête du groupe, fond des pistes, clips */
body.group-colors { --f-beat: #8b95a7; --f-lead: #ff5f57; --f-add: #e3a23a; --f-back: #34b3a6; --f-crea: #a77be3; --f-amb: #6dbb58; }
body.group-colors .lane { background-color: color-mix(in srgb, var(--c) 9%, color-mix(in srgb, var(--s2) 45%, transparent)); }
body.group-colors .tl-row.sel .lane { background-color: color-mix(in srgb, var(--c) 17%, var(--s2)); }
body.group-colors .tl-row .head { box-shadow: inset 3px 0 0 var(--c); }
body.group-colors .g-head { background: color-mix(in srgb, var(--c) 26%, var(--s1)); }
body.group-colors .g-lane { border-bottom: 2px solid color-mix(in srgb, var(--c) 55%, transparent); }
body.group-colors .clip { background: color-mix(in srgb, var(--c) 62%, #0b0b0d); }

/* ---------- Hub de presets ---------- */
.hub-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.hub-hero p { max-width: 640px; margin: 4px 0 0; }
.hub-target { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.hub-sources { margin-bottom: 10px; }
.hub-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.hub-tools input[type=search] { flex: 1 1 260px; max-width: 420px; }
.hub-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.hub-chips .chip { padding: 4px 11px; border-radius: 999px; background: var(--s2); border: 1px solid var(--line); color: var(--text); font-size: 12px; font-weight: 600; }
.hub-chips .chip[style] { box-shadow: inset 3px 0 0 var(--c); }
.hub-chips .chip.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 8px; }
.hub-card { display: flex; flex-direction: column; background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; transition: border-color .15s, transform .15s; }
.hub-card:hover { border-color: color-mix(in srgb, var(--text) 40%, var(--line)); transform: translateY(-1px); }
.hub-cover { position: relative; height: 92px; display: grid; place-items: center; background: radial-gradient(120% 120% at 15% 10%, color-mix(in srgb, var(--c, var(--accent)) 85%, #fff 10%), color-mix(in srgb, var(--c, var(--accent)) 35%, #000) 70%); }
.hub-cover span { font-size: 30px; font-weight: 900; letter-spacing: .04em; color: rgba(255,255,255,.92); text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.hub-cover i { position: absolute; left: 10px; bottom: 7px; font-style: normal; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.85); }
.artist-cover { --c: var(--accent); background: radial-gradient(120% 120% at 80% 0%, #f0c34e, #6b3d10 75%); }
.hub-body { padding: 10px 12px 4px; flex: 1; }
.hub-body h3 { margin: 0 0 3px; font-size: 15px; }
.hub-desc { margin: 0 0 6px; font-size: 13px; color: var(--muted); min-height: 2.4em; }
.hub-by { margin: 0 0 6px; }
.linkish { background: none; border: 0; padding: 0; color: var(--text); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font-size: inherit; }
.hub-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 4px; }
.hub-tag { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--s2); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.hub-tag.role { background: transparent; border: 1px solid var(--line); }
.hub-chain summary { font-size: 12px; color: var(--muted); cursor: pointer; }
.hub-chain p { margin: 4px 0 0; }
.hub-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px 12px; }
.hub-actions button { padding: 5px 10px; font-size: 12px; }
.hub-actions [data-hub-play].on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.hub-stats { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.hub-like { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.hub-like.on { color: #ff4d6d; border-color: #ff4d6d; }
.hub-role-pair { display: inline-flex; gap: 2px; }
.hub-role-pair .ghost { padding: 5px 7px; }
.hub-card.locked .hub-body { opacity: .75; }
.hub-note { grid-column: 1 / -1; margin: 0; padding: 10px 12px; border: 1px dashed var(--line); border-radius: var(--r-m); color: var(--muted); font-size: 13px; }
.hub-pub form { display: grid; gap: 10px; min-width: min(420px, 86vw); }
.hub-pub label { display: grid; gap: 4px; font-size: 13px; }
.hub-pub-tags { border: 1px solid var(--line); border-radius: var(--r-s); padding: 8px 10px; }
.hub-pub-tags > div { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.hub-pub .row.end { justify-content: flex-end; }
.sub-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--s2); margin-bottom: 10px; }
.sub-tabs button { border: 0; background: transparent; padding: 4px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--muted); }
.sub-tabs button.on { background: var(--text); color: var(--bg); }
.preset-card .preset-author { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.preset-card { position: relative; }
.preset-pub { position: absolute; top: 4px; right: 26px; width: 20px; height: 20px; padding: 0; font-size: 12px; line-height: 1; background: var(--s3); border: 0; border-radius: 4px; color: var(--text); }
.preset-hub-link { margin: 8px 0 0; }
@media (max-width: 620px) { .hub-grid { grid-template-columns: 1fr 1fr; } .hub-cover { height: 70px; } }

.exp-stems select { padding: 1px 4px; font-size: 12px; }
.exp-stems .check { margin-top: 4px; font-size: 12px; }

/* ---------- Master : bouton, panneau, presets ---------- */
:root { --f-master: #d9b54a; }
.side-master { display: none; padding: 14px; gap: 12px; flex-direction: column; overflow: auto; }
.daw.mode-master .d-side { grid-template-rows: minmax(0, 1fr); }
.daw.mode-master .side-master { display: flex; }
.daw.mode-master .side-top, .daw.mode-master #splitLyrics, .daw.mode-master .side-bottom, .daw.mode-master .side-export, .daw.mode-master .side-mic, .daw.mode-master .side-auto { display: none; }
.master-btn { display: inline-flex; align-items: center; gap: 6px; max-width: 230px; }
.master-btn .mp-name { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Preset actif sur le master : le bouton s'allume en or et affiche le nom */
.master-btn.has-preset { background: color-mix(in srgb, var(--f-master) 22%, var(--s2)); border-color: var(--f-master); color: var(--text); box-shadow: 0 0 0 1px var(--f-master), 0 0 14px color-mix(in srgb, var(--f-master) 45%, transparent); }
.master-btn.has-preset .mp-name::before { content: '● '; color: var(--f-master); }
.mp-now { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-m); border: 1px solid var(--f-master); background: color-mix(in srgb, var(--f-master) 14%, var(--s1)); }
.mp-now > div { flex: 1; min-width: 0; display: grid; }
.mp-now small { color: var(--muted); font-size: 11px; }
.mp-now b { font-size: 15px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-now b em { font-style: normal; font-size: 11px; color: var(--f-master); margin-left: 4px; }
.mp-now button { padding: 4px 9px; font-size: 12px; }
.mp-now.none { border-color: var(--line); background: var(--s1); }
.mp-now.off { border-style: dashed; opacity: .8; }
.mp-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--f-master); box-shadow: 0 0 10px var(--f-master); flex: none; }
.mp-now.none .mp-dot, .mp-now.off .mp-dot { background: var(--line); box-shadow: none; }
.mp-cats { display: flex; flex-wrap: wrap; gap: 4px; }
.mp-cats button { padding: 3px 9px; font-size: 11px; font-weight: 700; border-radius: 999px; background: var(--s2); border: 1px solid var(--line); color: var(--muted); }
.mp-cats button.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.mp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mp-card { position: relative; display: grid; gap: 2px; text-align: left; padding: 8px 9px; background: var(--s2); border: 1px solid var(--line); border-radius: var(--r-s); color: var(--text); }
.mp-card b { font-size: 13px; } .mp-card small { color: var(--muted); font-size: 11px; line-height: 1.3; }
.mp-card i { font-style: normal; font-size: 10px; color: var(--muted); }
.mp-card:hover:not(:disabled) { border-color: var(--f-master); filter: none; }
.mp-card.on { border-color: var(--f-master); background: color-mix(in srgb, var(--f-master) 18%, var(--s2)); box-shadow: inset 0 0 0 1px var(--f-master); }
.mp-used { position: absolute; top: -8px; right: 6px; padding: 1px 7px; border-radius: 999px; background: var(--f-master); color: #1a1406; font-size: 10px; font-weight: 800; }
.mp-save { display: flex; gap: 6px; } .mp-save input { flex: 1; min-width: 0; }
.mp-sub { margin: 4px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.mp-fx h4 { margin: 0 0 4px; font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--text); }
/* Presets de piste : celui qui est utilisé se voit tout de suite */
.preset-card.on { border-color: var(--accent) !important; box-shadow: inset 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--s2)); }
.preset-card.on::after { content: '✓ Utilisé'; position: absolute; z-index: 2; bottom: 6px; right: 6px; padding: 1px 6px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 10px; font-weight: 800; }
.preset-card.on .preset-main { padding-bottom: 26px; }
/* Hub : cartes utilisées dans le projet ouvert */
.hub-card { position: relative; }
.hub-card.in-use { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 6px 22px color-mix(in srgb, var(--accent) 22%, transparent); }
.hub-used { position: absolute; z-index: 2; top: 8px; right: 8px; padding: 2px 9px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 800; box-shadow: 0 2px 8px rgba(0,0,0,.35); max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Dock de droite : onglet Presets */
.side-presets { display: none; padding: 14px; gap: 12px; flex-direction: column; overflow: auto; }
.daw.mode-presets .d-side { grid-template-rows: minmax(0, 1fr); }
.daw.mode-presets .side-presets { display: flex; }
.daw.mode-presets .side-top, .daw.mode-presets #splitLyrics, .daw.mode-presets .side-bottom, .daw.mode-presets .side-export, .daw.mode-presets .side-mic, .daw.mode-presets .side-auto, .daw.mode-presets .side-master { display: none; }
.daw.mode-presets .side-presets .preset-top { flex-direction: column; align-items: stretch; gap: 8px; }
.daw.mode-presets .side-presets .preset-cats { display: flex; flex-wrap: wrap; gap: 4px; }
.daw.mode-presets .side-presets .preset-cats button { font-size: 13px; padding: 4px 9px; }
.daw.mode-presets .side-presets .preset-save { display: flex; gap: 6px; } .daw.mode-presets .side-presets .preset-save input { flex: 1; min-width: 0; }
.daw.mode-presets .side-presets .preset-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
.side-presets .artist-top { flex-wrap: wrap; }
.ptrack { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--text); }
.ptrack::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--c, var(--accent)); }
.preset-thumb { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: calc(var(--r-s) - 2px); margin-bottom: 6px; }
.insp-tabs [data-open-presets] { color: var(--muted); }
.daw.mode-presets .insp-tabs [data-open-presets] { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }

/* DA commune : titres du dock et onglets de la barre comme « Effets / Presets » */
.d-side .exp-head h3 { font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: .03em; text-transform: uppercase; color: var(--text); margin: 0; font-stretch: var(--title-stretch); }
.d-side .exp-head { align-items: center; }
.d-side .exp-sec { background: var(--s2); border: 1px solid var(--line); border-radius: var(--r-m); }
.d-side .exp-sec h4, .d-side .exp-sec .exp-title, .d-side .mp-sub { font-family: var(--display); font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.d-side .mp-cats button { font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: .03em; text-transform: uppercase; border-radius: var(--r-s); }
.d-side .mp-cats button.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.d-side .mp-card b, .d-side .preset-card b { font-family: var(--display); font-weight: 800; letter-spacing: .02em; text-transform: uppercase; font-stretch: var(--title-stretch); }
.d-right #btnSideAuto, .d-right #btnSideMic, .d-right #btnSide, .d-right #btnSideMaster, .d-right #btnSidePresets, .d-right #btnSideExport { font-family: var(--display); font-weight: 800; font-size: 14px; letter-spacing: .03em; text-transform: uppercase; font-stretch: var(--title-stretch); }
.d-right .master-btn .mp-name { font-family: inherit; text-transform: none; letter-spacing: 0; font-size: 12px; }

/* Images des presets */
.hub-cover.has-img { background-size: cover; background-position: center; }
.hub-cover.has-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.6)); }
.hub-cover.has-img i { z-index: 1; }
.hub-img-btn { display: inline-flex; align-items: center; padding: 5px 10px; font-size: 12px; font-weight: 700; border-radius: var(--r-s); background: var(--s2); cursor: pointer; }
.hub-pub-img { display: grid; grid-template-columns: 120px 1fr; gap: 10px; align-items: center; }
.hub-pub-prev { aspect-ratio: 16 / 9; border-radius: var(--r-s); border: 1px dashed var(--line); display: grid; place-items: center; overflow: hidden; font-size: 11px; color: var(--muted); text-align: center; padding: 4px; }
.hub-pub-prev img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Panneau de droite : 4 onglets intégrés (Écriture, Presets, Chœurs, Export) ---------- */
.d-side { grid-template-rows: auto var(--lyrics-h) 5px minmax(60px, 1fr); }
.daw.side-exp .d-side, .daw.mode-mic .d-side, .daw.mode-auto .d-side, .daw.mode-presets .d-side { grid-template-rows: auto minmax(0, 1fr); }
.dock-tabs { display: flex; margin: 10px 12px 2px; }
.dock-tabs button { flex: 1; padding: 6px 4px; font-size: 14px; white-space: nowrap; }
.d-right #btnSide, .d-right #btnSidePresets, .d-right #btnSideAuto, .d-right #btnSideExport { display: none; }
/* Masqué, le panneau garde sa ligne : un clic dessus le rouvre */
.daw.no-side { grid-template-columns: minmax(0, 1fr) 12px 0; } .daw.no-side #splitSide { display: block; }
.d-bar .mic-btn { display: inline-grid; place-items: center; } .d-bar .mic-btn .i { width: 16px; height: 16px; }
.d-bar .mic-btn.on { background: var(--accent); color: var(--on-accent); }

/* ---------- Barre Master au-dessus de la timeline ---------- */
.master-bar { position: absolute; z-index: 6; top: 0; left: 0; right: 0; height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 10px; background: var(--s1); border-bottom: 1px solid var(--line); }
.d-tl .tl-scroll { top: 38px; }
.d-tl .empty-cta { top: 82px; }
.mb-label { display: inline-flex; align-items: center; gap: 7px; font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--text); font-stretch: var(--title-stretch); }
.master-bar .mp-dot { width: 9px; height: 9px; background: var(--line); box-shadow: none; }
.master-bar.has-preset .mp-dot { background: var(--f-master); box-shadow: 0 0 10px var(--f-master); }
.mb-wrap { position: relative; }
.mb-pick { padding: 4px 12px; font-size: 12px; font-weight: 800; border-radius: var(--r-s); background: var(--s2); border: 1px solid var(--line); color: var(--muted); max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-pick::after { content: ' ▾'; }
.master-bar.has-preset .mb-pick { color: var(--text); border-color: var(--f-master); background: color-mix(in srgb, var(--f-master) 22%, var(--s2)); box-shadow: 0 0 0 1px var(--f-master), 0 0 14px color-mix(in srgb, var(--f-master) 40%, transparent); }
.master-bar.bypassed .mb-pick { border-style: dashed; border-color: var(--f-master); color: var(--text); }
.mb-mini { padding: 3px 9px; font-size: 12px; }
.mb-info { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-right { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.mb-right .master-wrap { position: relative; } .mb-right #masterMenu { right: 0; left: auto; }
.mb-right #btnAutoMaster { padding: 3px 10px; font-size: 12px; }
.mb-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 70; width: min(470px, 82vw); max-height: min(70vh, 620px); overflow: auto; padding: 12px; background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: 0 18px 50px rgba(0,0,0,.55); }
.mb-pop .mp-cats button { font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: .03em; text-transform: uppercase; border-radius: var(--r-s); }
.mb-pop .mp-cats button.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.mb-pop .mp-card b { font-family: var(--display); font-weight: 800; letter-spacing: .02em; text-transform: uppercase; font-stretch: var(--title-stretch); }
.mb-pop .mp-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .mb-info { display: none; } .mb-pop .mp-grid { grid-template-columns: 1fr 1fr; } .master-bar { position: relative; } .d-tl .tl-scroll { top: 0; } }

/* ---------- Proposer une prod : bulle de l'accueil ---------- */
.sub-bubble { position: fixed; right: 22px; bottom: 22px; z-index: 40; display: none; align-items: flex-end; gap: 10px; max-width: 330px; }
body.in-home .sub-bubble:not(.hidden) { display: flex; }
.sub-bubble { opacity: 0; transform: translateY(14px) scale(.96); transition: opacity .35s, transform .35s; }
.sub-bubble.show { opacity: 1; transform: none; }
.sub-ava { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.sub-ava svg { width: 24px; height: 24px; }
.sub-msg { position: relative; display: grid; gap: 6px; padding: 12px 14px; background: var(--s1); color: var(--text); border: 1px solid var(--line); border-radius: 16px 16px 4px 16px; box-shadow: 0 12px 34px rgba(0,0,0,.5); order: -1; }
.sub-msg b { font-family: var(--display); font-weight: 800; font-size: 17px; text-transform: uppercase; letter-spacing: .02em; font-stretch: var(--title-stretch); }
.sub-msg span { font-size: 13px; color: var(--muted); }
.sub-msg button { justify-self: start; padding: 6px 12px; font-size: 13px; }
.sub-x { position: absolute; top: -10px; right: 34px; width: 24px; height: 24px; padding: 0; border-radius: 50%; background: var(--s3); color: var(--text); border: 1px solid var(--line); font-size: 15px; line-height: 1; z-index: 1; }
/* ---------- Fenêtre d'envoi ---------- */
.sub-dialog { width: min(620px, 94vw); }
.sub-dialog form { display: grid; gap: 12px; }
.sub-dialog .page-head h2 { margin: 0; }
.sub-drop { display: block; cursor: pointer; padding: 18px; text-align: center; border: 2px dashed var(--line); border-radius: var(--r-m); background: var(--s2); }
.sub-drop.over, .sub-drop:hover { border-color: var(--accent); }
.sub-drop span { display: grid; gap: 4px; } .sub-drop em { font-style: normal; font-weight: 700; color: var(--text); }
.sub-from { margin: 0; padding: 10px 12px; border-radius: var(--r-m); background: var(--s2); }
.sub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sub-rights { border: 1px solid var(--line); border-radius: var(--r-m); padding: 10px 12px; display: grid; gap: 6px; }
.sub-rights legend { font-weight: 700; padding: 0 4px; }
.sub-warn { display: grid; gap: 3px; padding: 10px 12px; border-radius: var(--r-m); border: 1px solid color-mix(in srgb, #e3a23a 60%, var(--line)); background: color-mix(in srgb, #e3a23a 12%, var(--s1)); font-size: 13px; }
.sub-done { text-align: center; padding: 20px 10px; display: grid; gap: 8px; justify-items: center; }
.sub-ok { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; background: #2fbf5b; color: #fff; }
.sub-mine h4 { margin: 14px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.sub-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; }
.sub-row span { flex: 1; min-width: 0; }
.sub-st { font-style: normal; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.sub-st.wait { background: color-mix(in srgb, #e3a23a 25%, var(--s2)); } .sub-st.ok { background: color-mix(in srgb, #2fbf5b 30%, var(--s2)); } .sub-st.no { background: color-mix(in srgb, #ff5f57 28%, var(--s2)); }
.beat-license { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; font-size: 13px; }
.lic { padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: 12px; }
.lic.yes { background: color-mix(in srgb, #2fbf5b 25%, var(--s2)); } .lic.no { background: color-mix(in srgb, #e3a23a 25%, var(--s2)); }
.lic-contact a { color: var(--text); }
@media (max-width: 620px) { .sub-grid { grid-template-columns: 1fr; } .sub-bubble { right: 12px; bottom: 12px; left: 12px; max-width: none; } }

/* Fonctions coupées dans l'admin */
body.no-submissions .sub-bubble, body.no-submissions [data-bib-propose] { display: none !important; }
body.no-challenges #chNew, body.no-challenges [data-ch-join] { display: none !important; }
body.no-preset-pub [data-hub-pub], body.no-preset-pub .preset-pub { display: none !important; }
body.no-contests #contestTabs, body.no-contests #contestDrawer { display: none !important; }
body.no-signup #accReg { display: none !important; }
/* Annonce de l'admin, en haut du site */
.site-announce { position: relative; z-index: 30; padding: 8px 16px; text-align: center; font-size: 14px; font-weight: 700; background: var(--accent); color: var(--on-accent); }
body.in-home .site-announce { position: relative; }

/* ---------- Jeux de rimes (page cachée #jeux) ---------- */
/* ---------- Arcade des jeux de rimes ---------- */
.g-hero { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 20px 22px; margin-bottom: 16px; border-radius: var(--r-m); border: 1px solid var(--line);
  background: radial-gradient(circle at 12% 20%, #ff5f5733, transparent 40%), radial-gradient(circle at 70% 90%, #a77be333, transparent 45%), radial-gradient(circle at 95% 10%, #34b3a633, transparent 40%), var(--s1); }
.g-hero-txt { display: flex; flex-direction: column; gap: 2px; } .g-hero-txt small { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.g-hero-txt b { font: 400 clamp(34px, 5vw, 52px)/1 var(--display); letter-spacing: .02em; } .g-hero-txt span { color: var(--muted); }
.games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.game-card { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; text-align: left; font: inherit; color: var(--text); cursor: pointer;
  background: linear-gradient(160deg, color-mix(in srgb, var(--gc) 22%, var(--s1)), var(--s1) 65%); border: 1px solid color-mix(in srgb, var(--gc) 45%, var(--line)); border-radius: var(--r-m);
  transition: transform .15s ease, box-shadow .15s ease; animation: gIn .4s ease-out both; animation-delay: var(--d, 0ms); }
.game-card:hover, .game-card:focus-visible { transform: translateY(-3px); box-shadow: 0 10px 28px -12px var(--gc); }
.game-card b { font: 400 26px/1.05 var(--display); letter-spacing: .02em; }
.game-ico { display: grid; place-items: center; width: 50px; height: 50px; font-size: 26px; border-radius: 14px; background: color-mix(in srgb, var(--gc) 30%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gc) 55%, transparent); }
.game-desc { flex: 1; color: var(--muted); font-size: 14px; }
.game-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin-top: 6px; }
.game-play { font-weight: 800; font-size: 13px; padding: 5px 12px; border-radius: 999px; background: var(--gc); color: #111; }
.game-foot small { font-weight: 700; color: var(--muted); }
@keyframes gIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.g-stage { position: relative; overflow: hidden; padding: 0 0 20px; border-radius: var(--r-m); border: 1px solid color-mix(in srgb, var(--gc) 45%, var(--line));
  background: radial-gradient(circle at 50% -10%, color-mix(in srgb, var(--gc) 26%, transparent), transparent 55%), var(--s1); }
.g-stage.shake { animation: gShake .35s; } @keyframes gShake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.gm-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid color-mix(in srgb, var(--gc) 30%, var(--line)); background: color-mix(in srgb, var(--gc) 10%, transparent); }
.g-back { padding: 6px 12px; font-size: 13px; background: transparent; border: 1px solid var(--line); color: var(--text); }
.g-title { flex: 1; display: flex; align-items: center; gap: 8px; font: 400 24px/1 var(--display); letter-spacing: .02em; } .g-title i { font-style: normal; font-size: 20px; }
.g-hud { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.g-pill { padding: 5px 11px; border-radius: 999px; background: var(--s2); font-size: 13px; color: var(--muted); white-space: nowrap; } .g-pill b { color: var(--text); font-size: 15px; }
.g-combo { background: var(--gc); color: #111; font-weight: 800; animation: gBump .3s; } @keyframes gBump { 50% { transform: scale(1.18); } }
.g-ring { position: relative; width: 52px; height: 52px; display: grid; place-items: center; }
.g-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); } .g-ring circle { fill: none; stroke-width: 4; }
.g-ring .t { stroke: var(--s3); } .g-ring .v { stroke: var(--gc); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p) * 100); transition: stroke-dashoffset .1s linear; }
.g-ring b { font: 400 22px/1 var(--display); } .g-ring.hurry .v { stroke: #ff5f57; } .g-ring.hurry b { color: #ff5f57; animation: gBump .5s infinite; }
.gm-body { padding: 16px 18px 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.g-sub { color: var(--muted); max-width: 620px; margin: 4px 0 10px; } .center { text-align: center; }
.g-loading { padding: 40px 0; color: var(--muted); }
.g-word-card { text-align: center; padding: 14px 30px 18px; margin: 6px 0 14px; border-radius: 18px; background: color-mix(in srgb, var(--gc) 14%, var(--s2)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--gc) 40%, transparent), 0 14px 40px -20px var(--gc); animation: gIn .35s ease-out; }
.g-word-card small { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.g-word-card b { display: block; margin-top: 4px; font: 400 clamp(40px, 8vw, 72px)/1 var(--display); letter-spacing: .03em; text-transform: uppercase; color: var(--gc); text-shadow: 0 0 24px color-mix(in srgb, var(--gc) 45%, transparent); }
.g-word-card.mystery b { animation: gBump 1.2s infinite; }
.game-input { display: flex; gap: 8px; width: 100%; max-width: 520px; } .game-input input { flex: 1; min-width: 0; font-size: 18px; padding: 12px 14px; border-radius: 12px; }
.game-input input:focus { outline: 2px solid var(--gc); outline-offset: 1px; } .game-input button, .g-stage .row button:not(.ghost), .g-line2 button { background: var(--gc); border-color: var(--gc); color: #111; font-weight: 800; }
.game-msg { min-height: 1.4em; margin: 8px 0; font-weight: 800; } .game-msg.ok { color: #3ccf6a; } .game-msg.ko { color: #ff7a72; }
.game-found { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 6px; max-width: 680px; }
.game-found span { padding: 5px 11px; border-radius: 999px; background: var(--s2); font-weight: 700; animation: gIn .25s ease-out; }
.game-found span.rich { background: color-mix(in srgb, var(--gc) 35%, var(--s2)); box-shadow: 0 0 0 1px var(--gc); }
.g-pop { position: absolute; top: 34%; z-index: 3; pointer-events: none; font: 400 44px/1 var(--display); color: var(--gc); text-shadow: 0 2px 0 #0008; animation: gPop 1s ease-out forwards; }
.g-pop.rich { color: #ffd166; font-size: 56px; } @keyframes gPop { from { opacity: 0; transform: translateY(10px) scale(.6); } 20% { opacity: 1; transform: scale(1.15); } to { opacity: 0; transform: translateY(-70px); } }
.g-confetti { position: fixed; inset: 0; z-index: 9999; pointer-events: none; }
.g-steps { display: flex; gap: 5px; margin-bottom: 8px; } .g-steps i { width: 22px; height: 6px; border-radius: 3px; background: var(--s3); } .g-steps i.done { background: color-mix(in srgb, var(--gc) 60%, var(--s3)); } .g-steps i.now { background: var(--gc); }
.game-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 560px; }
.game-options button { display: flex; align-items: center; gap: 10px; padding: 16px; font-size: 19px; font-weight: 800; text-align: left; border-radius: 14px; background: var(--s2); border: 1px solid var(--line); color: var(--text); transition: transform .1s; }
.game-options button:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--gc); }
.game-options kbd { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; font: 800 13px/1 var(--font, inherit); background: color-mix(in srgb, var(--gc) 30%, transparent); color: var(--text); }
.game-options button.good { background: #2fbf5b; color: #fff; border-color: #2fbf5b; animation: gBump .3s; } .game-options button.bad { background: color-mix(in srgb, #ff5f57 45%, var(--s2)); }
.game-end { text-align: center; padding: 18px 0 4px; width: 100%; } .game-end small { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.game-big { font: 400 clamp(70px, 14vw, 120px)/1 var(--display); color: var(--gc); text-shadow: 0 0 40px color-mix(in srgb, var(--gc) 50%, transparent); animation: gBump .5s; }
.game-big.p0, .game-big.p1 { font-size: clamp(44px, 9vw, 80px); }
.roulette-word { margin: 12px auto 14px; text-align: center; font: 400 clamp(50px, 10vw, 120px)/1 var(--display); letter-spacing: .02em; text-transform: uppercase; color: var(--gc); text-shadow: 0 0 40px color-mix(in srgb, var(--gc) 50%, transparent); }
.roulette-word.pop { animation: rpop .35s ease-out; } @keyframes rpop { from { transform: scale(.6) rotate(-4deg); opacity: 0; } to { transform: none; opacity: 1; } }
.g-beats { display: flex; gap: 6px; margin: 0 0 16px; } .g-beats i { width: 30px; height: 30px; border-radius: 8px; background: var(--s2); border: 1px solid var(--line); transition: background .08s; }
.g-beats i.on { background: var(--gc); border-color: var(--gc); box-shadow: 0 0 14px -2px var(--gc); }
.g-rec-zone { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; width: 100%; max-width: 620px; margin-top: 18px; padding: 14px 16px; border-radius: 14px; border: 1px dashed color-mix(in srgb, var(--gc) 55%, var(--line)); background: var(--s2); text-align: left; }
.g-rec-zone > div:first-child { display: flex; flex-direction: column; gap: 2px; flex: 1 1 240px; }
.g-rec { display: flex; align-items: center; gap: 10px; }
.g-rec-btn { display: inline-flex; align-items: center; gap: 8px; background: #ff3b3b !important; border-color: #ff3b3b !important; color: #fff !important; font-weight: 800; border-radius: 999px; }
.g-rec-btn i { width: 10px; height: 10px; border-radius: 50%; background: #fff; } .g-rec-btn.on i { border-radius: 2px; animation: gBlink 1s infinite; } @keyframes gBlink { 50% { opacity: .2; } }
.g-rec-time { font: 400 22px/1 var(--display); min-width: 46px; }
.g-rec-play { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; } .g-rec-play:empty { display: none; } .g-rec-play audio { flex: 1; min-width: 220px; height: 38px; }
.g-dl { text-decoration: none; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line); color: var(--text); font-weight: 700; }
.g-setup { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.g-players { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; margin-bottom: 8px; }
.g-players label { display: flex; flex-direction: column; gap: 6px; font-weight: 800; padding: 12px; border-radius: 14px; background: var(--s2); }
.g-players label.p0 { box-shadow: 0 0 0 2px #3987e5; } .g-players label.p1 { box-shadow: 0 0 0 2px #ff5f57; } .g-players input { width: 160px; }
.g-vs { font: 400 40px/1 var(--display); color: var(--gc); }
.p0 { --pc: #3987e5; } .p1 { --pc: #ff5f57; } .g-pill .p0, .g-pill .p1, .game-big.p0, .game-big.p1 { color: var(--pc); }
.g-turn { font: 400 30px/1 var(--display); padding: 8px 20px; border-radius: 999px; margin-bottom: 10px; background: color-mix(in srgb, var(--pc) 22%, var(--s2)); box-shadow: 0 0 0 2px var(--pc); animation: gBump .3s; } .g-turn b { color: var(--pc); }
.game-found span.p0, .game-found span.p1 { box-shadow: inset 0 0 0 1.5px var(--pc); } .g-pop.p0, .g-pop.p1 { color: var(--pc); }
.g-lines { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 560px; }
.g-lines div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 10px; background: var(--s2); animation: gIn .25s; } .g-lines em { font-style: normal; color: var(--gc); letter-spacing: 2px; }
.g-lines.static { margin: 6px auto 4px; text-align: left; } .g-lines.static div { justify-content: flex-start; }
.g-punch { width: 100%; max-width: 680px; display: flex; flex-direction: column; align-items: stretch; }
.g-line1 { font: 400 clamp(26px, 4.5vw, 40px)/1.1 var(--display); letter-spacing: .01em; margin: 6px 0 12px; text-align: center; }
.g-line2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .g-line2 span { font: 400 26px/1 var(--display); color: var(--gc); } .g-line2 input { flex: 1; min-width: 200px; font-size: 18px; padding: 12px 14px; border-radius: 12px; }
.g-stars { color: #ffd166; letter-spacing: 2px; } .g-stars i { font-style: normal; color: var(--s3); }
.g-final { text-align: center; font-style: italic; color: var(--muted); margin: 4px 0 10px; }
.g-wall { width: 100%; max-width: 680px; margin: 22px auto 0; padding: 0 18px; box-sizing: content-box; }
.g-wall-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.g-wall .seg { display: flex; gap: 4px; } .g-wall .seg button { padding: 5px 12px; font-size: 13px; background: var(--s2); border: 1px solid var(--line); color: var(--muted); } .g-wall .seg button.on { background: var(--gc); color: #111; border-color: var(--gc); }
.g-punch-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 8px; border-radius: 12px; background: var(--s2); border-left: 3px solid var(--gc); }
.g-punch-card p { margin: 0; color: var(--muted); } .g-punch-card p b { color: var(--text); } .g-punch-card > div { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.g-fire { padding: 5px 12px; border-radius: 999px; background: var(--s1); border: 1px solid var(--line); color: var(--text); font-weight: 800; } .g-fire.on { background: color-mix(in srgb, #ff7a2f 35%, var(--s1)); border-color: #ff7a2f; }
.g-board { width: 100%; max-width: 480px; margin: 18px auto 0; padding: 14px 16px; border-radius: 14px; background: var(--s2); text-align: left; }
.g-board ol { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.g-board li { display: flex; align-items: center; gap: 10px; } .g-board li span { width: 28px; text-align: center; font-weight: 800; } .g-board li b { flex: 1; } .g-board li em { font-style: normal; color: var(--muted); font-size: 13px; }
.g-tap { width: 190px; height: 190px; margin: 10px 0 16px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #111; border: none;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--gc) 60%, #fff), var(--gc)); box-shadow: 0 12px 40px -12px var(--gc), inset 0 -6px 0 #0003; cursor: pointer; touch-action: manipulation; }
.g-tap b { font: 400 58px/1 var(--display); } .g-tap small { font-weight: 800; opacity: .7; } .g-tap.hit { animation: gTap .15s; } @keyframes gTap { 50% { transform: scale(.93); } } .g-tap:disabled { opacity: .6; }
.g-mute { white-space: nowrap; }
@media (max-width: 620px) {
  .game-options { grid-template-columns: 1fr; } .gm-top { padding: 8px 10px; } .g-title { font-size: 20px; flex-basis: calc(100% - 90px); } .g-hud { width: 100%; justify-content: flex-end; }
  .gm-body { padding: 12px 12px 0; } .g-word-card { padding: 12px 18px 14px; } .g-tap { width: 160px; height: 160px; } .g-beats i { width: 26px; height: 26px; } .g-wall { padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) { .game-card, .g-word-card, .g-pop, .g-stage.shake, .game-big, .roulette-word.pop, .g-ring.hurry b, .g-word-card.mystery b { animation: none !important; } }

/* Bulle beatmaker : une carte dans l'accueil, sous les boutons (plus de superposition) */
.sub-bubble { position: static; display: none; max-width: 1080px; margin: 22px auto 40px; padding: 0 16px; align-items: center; gap: 14px; opacity: 1; transform: none; }
body.in-home .sub-bubble:not(.hidden) { display: flex; }
.sub-bubble .sub-msg { order: 0; flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; border-radius: 16px 16px 16px 4px; }
.sub-bubble .sub-msg b { flex: none; } .sub-bubble .sub-msg span { flex: 1 1 240px; }
.sub-bubble .sub-x { position: static; order: 2; flex: none; }
@media (max-width: 620px) { .sub-bubble { left: auto; right: auto; bottom: auto; margin: 16px auto 28px; } .sub-bubble .sub-ava { display: none; } }
/* Jeux : même police condensée que les titres du site (après les raccourcis font:) */
.g-hero-txt b, .game-card b, .g-title, .g-pill b, .g-ring b, .g-word-card b, .game-big, .roulette-word, .g-vs, .g-turn, .g-line1, .g-line2 span, .g-tap b, .g-pop, .g-rec-time { font-family: var(--display); font-weight: var(--title-heavy, 800); font-stretch: var(--title-stretch, 75%); text-transform: uppercase; }
.g-line1 { text-transform: none; }
html[lang="zh"] :where(.g-hero-txt b, .game-card b, .g-title, .g-word-card b, .game-big, .roulette-word, .g-turn, .g-line1) { font-stretch: normal; font-weight: 700; }

/* ---------- Vumètre LUFS du master ---------- */
.lufs-meter { display: inline-flex; align-items: center; gap: 8px; padding: 3px 9px; height: 28px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-s); color: var(--text); font-variant-numeric: tabular-nums; cursor: pointer; }
.lufs-meter:hover { border-color: var(--muted); }
.lufs-meter .lm-bar { position: relative; width: 96px; height: 8px; background: var(--s3); border-radius: 4px; overflow: hidden; }
.lufs-meter .lm-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #2fbf71, #d7c44a 75%, #ff5a5a); transition: width .1s linear; }
.lufs-meter .lm-bar u { position: absolute; top: -1px; bottom: -1px; width: 2px; margin-left: -1px; background: #fff; }
.lufs-meter .lm-bar b { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: #ffd23f; box-shadow: 0 0 4px #ffd23f; }
.lufs-meter .lm-v { display: inline-flex; align-items: baseline; gap: 3px; }
.lufs-meter .lm-v small, .lufs-meter .lm-u { font-size: 9px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.lufs-meter .lm-v b { font-size: 12px; min-width: 32px; text-align: right; }
.lufs-meter .lm-i b { color: #ffd23f; }
.lufs-meter.near { border-color: #2fbf71; box-shadow: 0 0 0 1px #2fbf7155; }
.lufs-meter.hot { border-color: #ff5a5a; }
.lufs-meter.hot .lm-v:nth-last-of-type(1) b { color: #ff5a5a; }
@media (max-width: 1250px) { .lufs-meter .lm-bar { width: 56px; } .lufs-meter .lm-v:nth-of-type(2) { display: none; } }
@media (max-width: 900px) { .lufs-meter { display: none; } }

/* ---------- Courbe de volume des clips ---------- */
.clip .env-wrap { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.clip .env-ov { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.clip .env-ov polyline { fill: none; stroke: #ffd23f; stroke-width: 1.6; vector-effect: non-scaling-stroke; opacity: .75; }
.clip .env-pt { position: absolute; width: 9px; height: 9px; margin: -5px 0 0 -5px; border-radius: 50%; background: #ffd23f; border: 1.5px solid #111; opacity: 0; }
.daw.env-mode .clip .env-wrap { pointer-events: auto; cursor: crosshair; }
.daw.env-mode .clip .env-ov polyline { opacity: 1; stroke-width: 2; }
.daw.env-mode .clip .env-pt { opacity: 1; cursor: grab; }
.daw.env-mode .clip .env-pt:hover { transform: scale(1.35); }
.daw.env-mode .clip .gain-h { display: none; }
.daw.env-mode .clip { cursor: crosshair; }
.clip .env-tip { position: absolute; z-index: 5; transform: translate(-50%, -150%); padding: 1px 5px; border-radius: 4px; background: #111; color: #ffd23f; font-size: 11px; white-space: nowrap; pointer-events: none; }
#btnEnv.on { color: #111; background: #ffd23f; border-color: #ffd23f; }

/* ---------- Onglet Analyse : rack ---------- */
.ana-rack { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 8px 2px 4px; }
.ana-unit { position: relative; background: linear-gradient(180deg, #19191b, #121214); border: 1px solid #2c2c30; border-radius: 6px; padding: 0 10px 10px; box-shadow: inset 0 1px 0 #ffffff0d, 0 2px 6px #0006; min-width: 0; }
.ana-unit::before, .ana-unit::after { content: ''; position: absolute; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: #3a3a40; box-shadow: inset 0 1px 1px #000; }
.ana-unit::before { left: 5px; } .ana-unit::after { right: 5px; }
.ana-unit > header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 8px 6px 6px; margin: 0 -2px 8px; border-bottom: 1px solid #2a2a2e; }
.ana-unit > header b { font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: .05em; text-transform: uppercase; }
.ana-led { width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); margin-left: 6px; }
.ana-spec { grid-column: 1 / -1; }
.ana-ctl { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.ana-ctl select { font-size: 12px; padding: 2px 6px; }
.ana-ctl button { font-size: 12px; padding: 3px 9px; }
.ana-canvas { position: relative; height: 230px; background: #0b0b0d; border: 1px solid #222226; border-radius: 4px; overflow: hidden; }
.ana-canvas canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
.ana-idle { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 13px; pointer-events: none; }
.ana-idle[hidden] { display: none; }
.ana-read { position: absolute; top: 6px; transform: translateX(-50%); padding: 2px 7px; border-radius: 4px; background: #000c; color: #fff; font-size: 11px; white-space: nowrap; pointer-events: none; }
.ana-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; color: var(--muted); }
.ana-legend span { display: inline-flex; align-items: center; gap: 5px; } .ana-legend [hidden] { display: none; }
.ana-legend i { display: inline-block; width: 16px; height: 0; border-top: 2px solid; }
.lg-live { border-color: var(--c) !important; } .lg-avg { border-color: #fff !important; } .lg-pk { border-color: #ffffff59 !important; border-top-width: 1px !important; }
.lg-ov { border-color: #d2d2dc !important; border-top-style: dashed !important; } .lg-mask { height: 9px !important; border: 0 !important; background: #ff4646a0; }
.ana-bands { display: flex; gap: 6px; align-items: flex-end; height: 150px; }
.ana-band { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; height: 100%; }
.ab-col { position: relative; flex: 1; width: 100%; max-width: 30px; background: #0b0b0d; border: 1px solid #222226; border-radius: 3px; }
.ab-col i { position: absolute; bottom: 0; border-radius: 2px 2px 0 0; transition: height .4s ease; }
.ab-me { left: 3px; right: 3px; background: linear-gradient(0deg, color-mix(in srgb, var(--c) 55%, transparent), var(--c)); }
.ab-ov { left: 0; right: 0; background: #ffffff1c; border-top: 2px dashed #d2d2dc; }
.ana-band b { font-size: 11px; font-variant-numeric: tabular-nums; } .ana-band small { font-size: 9px; color: var(--muted); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ana-stereo { display: flex; gap: 12px; align-items: center; }
.ana-stereo canvas { width: 150px; height: 150px; flex: none; background: #0b0b0d; border: 1px solid #222226; border-radius: 50%; }
.ana-st-read { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.ana-st-read small { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; }
.ana-st-read b { font-size: 18px; font-variant-numeric: tabular-nums; }
.ana-corr { position: relative; height: 10px; border-radius: 5px; background: linear-gradient(90deg, #ff5a5a, #d7c44a 50%, #2fbf71); opacity: .85; }
.ana-corr i { position: absolute; top: -3px; bottom: -3px; width: 4px; margin-left: -2px; background: #fff; border-radius: 2px; box-shadow: 0 0 6px #000; transition: left .15s; }
.ana-corr-scale { display: flex; justify-content: space-between; font-size: 9px; color: var(--muted); }
.ana-level { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ana-level > div { background: #0b0b0d; border: 1px solid #222226; border-radius: 4px; padding: 5px 8px; }
.ana-level small { display: block; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.ana-level b { font-size: 20px; font-variant-numeric: tabular-nums; } .ana-level b.hot { color: #ff5a5a; }
.ana-hist { display: block; width: 100%; height: 54px; margin-top: 8px; background: #0b0b0d; border: 1px solid #222226; border-radius: 4px; }
.ana-hist-l { font-size: 10px; }
.ana-hints { grid-column: 1 / -1; }
.ana-hints ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; }
@media (max-width: 1100px) { .ana-rack { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .ana-rack { grid-template-columns: 1fr; } }

/* ---------- Onglet Mixer (version d'essai) ---------- */
.mx-wrap { display: flex; gap: 10px; padding: 8px 2px 4px; align-items: stretch; min-width: 0; }
.mx-row { display: flex; gap: 6px; overflow-x: auto; min-width: 0; padding-bottom: 4px; }
.mx-row:first-child { flex: 1; }
.mx-side { flex: none; padding-left: 10px; border-left: 1px dashed #333; }
.mx-fam { display: flex; gap: 4px; padding: 4px; border-radius: 6px; background: color-mix(in srgb, var(--c) 9%, #0e0e10); border-top: 2px solid var(--c); }
.mx-groups { --c: #777; background: #111114; }
.mx-strip { position: relative; width: 84px; flex: none; display: flex; flex-direction: column; gap: 6px; padding: 6px 6px 7px; border-radius: 5px; background: linear-gradient(180deg, #1c1c1f, #141416); border: 1px solid #2a2a2e; box-shadow: inset 0 1px 0 #ffffff0a; }
.mx-strip.sel { border-color: var(--c); box-shadow: 0 0 0 1px var(--c), inset 0 1px 0 #ffffff0a; }
.mx-strip.muted .mx-body, .mx-strip.muted .mx-val { opacity: .4; }
.mx-name { cursor: pointer; border-left: 3px solid var(--c); padding-left: 5px; min-width: 0; }
.mx-name b { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-name small { display: block; font-size: 9px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-ins { display: flex; flex-direction: column; gap: 2px; min-height: 66px; }
.mx-ins button, .mx-ins span { display: block; width: 100%; padding: 1px 4px; font-size: 9.5px; text-align: left; border-radius: 3px; background: #0b0b0d; border: 1px solid #26262a; color: #d8d8d8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-ins button:hover { border-color: var(--c); color: #fff; }
.mx-ins button::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: var(--c); vertical-align: middle; }
.mx-ins em { font-size: 9.5px; color: var(--muted); font-style: normal; padding-left: 2px; }
.mx-pan { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.mx-pan input { width: 100%; height: 14px; accent-color: var(--c); }
.mx-pan small { font-size: 9px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mx-body { position: relative; display: flex; gap: 4px; height: 170px; justify-content: center; }
.mx-scale { position: relative; width: 16px; font-size: 8px; color: #8a8a8a; font-variant-numeric: tabular-nums; }
.mx-scale span { position: absolute; right: 0; transform: translateY(50%); }
.mx-fader { position: relative; width: 22px; cursor: ns-resize; touch-action: none; }
.mx-fader::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; border-radius: 2px; background: #050506; box-shadow: inset 0 1px 2px #000, 0 0 0 1px #2a2a2e; }
.mx-cap { position: absolute; left: 0; right: 0; height: 30px; margin-bottom: -15px; border-radius: 3px; background: linear-gradient(180deg, #4a4a50, #2b2b30 45%, #1a1a1e 50%, #2e2e33); border: 1px solid #55555c; box-shadow: 0 3px 6px #000a; }
.mx-cap::after { content: ''; position: absolute; left: 2px; right: 2px; top: 50%; height: 2px; margin-top: -1px; background: var(--c); }
.mx-fader:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; border-radius: 3px; }
.mx-meter { position: relative; display: flex; gap: 2px; width: 12px; background: #050506; border-radius: 2px; padding: 1px; box-shadow: 0 0 0 1px #2a2a2e; }
.mx-meter i { flex: 1; align-self: stretch; transform-origin: bottom; transform: scaleY(0); background: linear-gradient(0deg, #2fbf71 0%, #2fbf71 70%, #d7c44a 85%, #ff5a5a 96%); background-size: 100% 168px; background-position: bottom; will-change: transform; }
.mx-meter u { position: absolute; left: 1px; width: 4px; height: 2px; background: #fff; bottom: 0; }
.mx-meter u[data-pr] { left: 7px; }
.mx-meter u.clip { background: #ff5a5a; box-shadow: 0 0 4px #ff5a5a; }
.mx-gr { position: relative; width: 4px; background: #050506; box-shadow: 0 0 0 1px #2a2a2e; border-radius: 2px; overflow: hidden; }
.mx-gr i { position: absolute; left: 0; right: 0; top: 0; height: 100%; transform-origin: top; transform: scaleY(0); background: #ffb03b; will-change: transform; }
.mx-val { display: flex; align-items: baseline; justify-content: center; gap: 3px; background: #0b0b0d; border: 1px solid #26262a; border-radius: 3px; padding: 1px 0; }
.mx-val b { font-size: 12px; font-variant-numeric: tabular-nums; } .mx-val small { font-size: 9px; color: var(--muted); }
.mx-btns { display: flex; gap: 2px; }
.mx-btns button { flex: 1; padding: 2px 0; font-size: 10px; font-weight: 800; border-radius: 3px; background: #26262a; color: #bbb; border: 0; }
.mx-btns .m-on { background: #3a7bff; color: #fff; } .mx-btns .s-on { background: #ffd23f; color: #111; } .mx-btns .b-on { background: #ff5a5a; color: #fff; }
.mx-group .mx-body { height: 254px; }
.mx-master { width: 96px; background: linear-gradient(180deg, #24211a, #151410); border-color: color-mix(in srgb, var(--f-master) 50%, #2a2a2e); }
.mx-master .mx-ins { min-height: 0; }
.mx-master .mx-ins span { border-color: color-mix(in srgb, var(--f-master) 30%, #26262a); }
.mx-master .mx-body { flex: 1; height: auto; min-height: 120px; }
.mx-master .mx-meter { width: 22px; }
.mx-master .mx-meter u[data-pr] { left: 12px; width: 9px; } .mx-master .mx-meter u[data-pl] { width: 9px; }
.mx-lufs { display: grid; grid-template-columns: auto 1fr; gap: 0 6px; align-items: baseline; background: #0b0b0d; border: 1px solid #26262a; border-radius: 3px; padding: 3px 5px; }
.mx-lufs small { font-size: 8.5px; color: var(--muted); text-transform: uppercase; } .mx-lufs b { font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.mx-lufs b[data-mx-i] { color: #ffd23f; }
/* Mixer : toutes les tranches à la même hauteur, la liste d'effets ne pousse plus le fader */
.mx-strip { height: 420px; }
.mx-ins { height: 92px; min-height: 0; overflow: hidden; }
.mx-body, .mx-group .mx-body { flex: 1; height: auto; min-height: 0; }
.mx-group { width: 70px; }
.mx-master .mx-ins { height: auto; }
/* Écrans moyens : les molettes rapides tiennent sur une ligne (défilement horizontal) au lieu de manger la hauteur du panneau */
@media (max-width: 1500px) and (min-width: 761px) {
  .insp-bar .macro-knobs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; min-width: 0; flex: 1 1 0; scrollbar-width: thin; }
  .insp-bar .knob-group { flex: none; }
}

/* Le menu des presets du master passe au-dessus de la règle de la timeline */
.master-bar:has(.mb-pop:not(.hidden)), .master-bar:has(#masterMenu:not(.hidden)) { z-index: 60; }
/* Mixer : les tranches occupent toute la hauteur du panneau */
.mx-strip { height: max(330px, calc(var(--insp-h) - 72px)); }

/* ---------- Barre du panneau du bas : la piste au-dessus des onglets, molettes sur une seule ligne ---------- */
.insp-bar { flex-wrap: nowrap; align-items: center; gap: 14px; }
.insp-head { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.insp-id { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 300px; }
.insp-id .insp-track { white-space: nowrap; }
.insp-id .insp-now { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.insp-id .fx-off { flex: none; padding: 2px 8px 2px 5px; font-size: 11px; }
.insp-head .insp-right { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
.insp-head .insp-right:empty { display: none; }
.insp-head .insp-right button { padding: 3px 9px; font-size: 12px; }
.insp-bar .macro-knobs { flex: 1 1 0; min-width: 0; flex-wrap: nowrap; overflow: visible; gap: 6px; border: 0; padding: 0; justify-content: flex-end; }
.insp-bar .knob-group { flex: 1 1 auto; min-width: 0; max-width: max-content; padding: 3px 4px 2px; }
.insp-bar .kg-row { gap: 2px; }
.insp-bar .macro-knobs .knob { width: auto; min-width: 0; flex: 1 1 0; max-width: 74px; padding: 0 1px; }
.insp-bar .macro-knobs .knob svg { width: 32px; height: 32px; }
.insp-bar .macro-knobs .knob .k-label { font-size: 9px; letter-spacing: -.01em; line-height: 1.05; white-space: normal; text-align: center; max-width: 100%; min-height: 19px; display: flex; align-items: flex-end; justify-content: center; }
@media (max-width: 1500px) and (min-width: 761px) {
  .insp-bar .macro-knobs { overflow: visible; }
  .insp-bar .insp-tabs button { font-size: 14px; padding: 4px 10px; }
  .insp-id .insp-now { max-width: 90px; }
  .insp-bar .macro-knobs .knob svg { width: 28px; height: 28px; }
  .insp-bar .macro-knobs .knob .k-label { font-size: 8.5px; }
}
/* Petits écrans : la barre repasse sur plusieurs lignes */
@media (max-width: 1100px) { .insp-bar { flex-wrap: wrap; } .insp-bar .macro-knobs { flex-basis: 100%; justify-content: flex-start; } }
/* Une molette n'est jamais plus étroite que le mot le plus long de son nom (pas de chevauchement) */
.insp-bar .macro-knobs .knob { flex: 1 1 auto; min-width: min-content; }
.insp-bar .knob-group { min-width: min-content; }
.insp-bar .kg-row { gap: 4px; }

/* Premium offert au lancement : l'étoile reste, en vert « offert » */
/* Premium coupé par l'admin : aucune trace du Premium (pas de tuile, pas d'étoile, pas de cadre doré), tout marche pour tout le monde */
body.premium-free .pstar, body.premium-free #homePremium, body.premium-free [data-hub-premium] { display: none !important; }
body.premium-free .premium-btn, body.premium-free .preset-cats [data-cat="artists"], body.premium-free .preset-cats [data-cat="voices"] { border: 1px solid var(--line) !important; }
body.premium-free .premium-btn.on { background: var(--accent); color: var(--on-accent); }

/* ---------- Façades des effets (fx-ui.js) : repères des plugins pro, sans marques ---------- */
.fx-face { --ff-bg: #17181b; --ff-panel: #0d0e10; --ff-ink: #e8e8e8; --ff-dim: #3a3d44; --ff-acc: #46c2ff; --ff-cap: #24262b; --ff-ptr: #fff; --ff-edge: #2c2f36;
  margin: 8px 0 10px; border-radius: 8px; padding: 10px 12px 12px; background: var(--ff-bg); color: var(--ff-ink); border: 1px solid var(--ff-edge); box-shadow: inset 0 1px 0 #ffffff12, 0 3px 10px #0007; }
.skin-vintage { --ff-bg: linear-gradient(180deg, #ece4d2, #d9cfb8); --ff-panel: #f3e6b0; --ff-ink: #1d1a14; --ff-dim: #9b927e; --ff-acc: #c0392b; --ff-cap: #151515; --ff-ptr: #e9e9e9; --ff-edge: #b9ae94; }
.skin-gold { --ff-bg: linear-gradient(180deg, #1b1a17, #0f0e0c); --ff-panel: #070706; --ff-ink: #f1e2b8; --ff-dim: #4a4434; --ff-acc: #d6b25e; --ff-cap: #2a261c; --ff-ptr: #f6dc96; --ff-edge: #5c5237; }
.skin-modern { --ff-bg: linear-gradient(180deg, #1d2026, #15171b); --ff-panel: #0b0c0f; --ff-acc: #46c2ff; }
.skin-neon { --ff-bg: #0c0c0e; --ff-panel: #050506; --ff-acc: #ff8a00; --ff-dim: #2c2c33; --ff-edge: #ff8a0055; }
.skin-space { --ff-bg: linear-gradient(160deg, #1b1840, #0e1530); --ff-panel: #090b1c; --ff-acc: #9b8cff; --ff-dim: #2f3166; --ff-edge: #3d3a7a; }
.skin-tape { --ff-bg: linear-gradient(180deg, #d9c49b, #bfa676); --ff-panel: #2a2118; --ff-ink: #22190d; --ff-dim: #8c7650; --ff-acc: #b3471d; --ff-cap: #3a2c1a; --ff-ptr: #f3e0b8; --ff-edge: #9a8258; }
.skin-warm { --ff-bg: linear-gradient(180deg, #3a1f17, #24130e); --ff-panel: #120906; --ff-ink: #ffe3d2; --ff-dim: #5b3426; --ff-acc: #ff6a3d; --ff-cap: #1a0d09; --ff-edge: #6e3a29; }
.skin-tune { --ff-bg: linear-gradient(180deg, #1f2c3d, #142030); --ff-panel: #0a121c; --ff-acc: #5fa8ff; --ff-dim: #2a3d55; --ff-edge: #33506f; }
.fx-face .ff-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.fx-face .ff-name { font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: .04em; text-transform: uppercase; }
.fx-face .ff-fam { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; opacity: .65; }
.fx-face .ff-led { width: 9px; height: 9px; border-radius: 50%; background: #3b1010; box-shadow: inset 0 1px 2px #000; }
.fx-face .ff-led.on { background: #ff3b30; box-shadow: 0 0 8px #ff3b30, inset 0 1px 1px #fff6; }
.fx-face .ff-seg { display: inline-flex; border: 1px solid var(--ff-dim); border-radius: 5px; overflow: hidden; margin-left: auto; }
.fx-face .ff-seg + .ff-seg { margin-left: 0; }
.fx-face .ff-seg button { background: transparent; color: var(--ff-ink); border: 0; border-radius: 0; padding: 3px 9px; font-size: 11px; font-weight: 700; opacity: .75; }
.fx-face .ff-seg button.on { background: var(--ff-acc); color: #111; opacity: 1; }
.fx-face .ff-body { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.fx-face .ff-show { position: relative; flex: 1 1 260px; min-width: 220px; height: 120px; border-radius: 6px; background: var(--ff-panel); border: 1px solid var(--ff-edge); box-shadow: inset 0 2px 6px #000a; overflow: hidden; }
.fx-face .ff-vu { background: radial-gradient(ellipse at 50% 120%, #fff6cf, #f1dc8f 70%, #d8bf6a); }
.fx-face .ff-show canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-face .ff-eq { flex-basis: 100%; height: 170px; }
.fx-face .ff-eq .ff-eqcv { color: var(--ff-acc); --c-line: #3a3d44; height: 170px; }
.fx-face .ff-nodes { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.fx-face .ff-node circle { fill: var(--ff-acc); fill-opacity: .9; stroke: #0b0c0f; stroke-width: 2; cursor: grab; }
.fx-face .ff-node.cut circle { fill: #9aa3ad; }
.fx-face .ff-node text { font-size: 9px; font-weight: 800; text-anchor: middle; fill: #0b0c0f; pointer-events: none; }
.fx-face .ff-node:hover circle { r: 10; }
.fx-face .ff-knobs { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: flex-end; }
.fk { display: flex; flex-direction: column; align-items: center; gap: 1px; cursor: ns-resize; touch-action: none; user-select: none; min-width: 56px; }
.fk svg { display: block; }
.fk .fk-track { fill: none; stroke: var(--ff-dim); stroke-width: 4; stroke-linecap: round; }
.fk .fk-val { fill: none; stroke: var(--ff-acc); stroke-width: 4; stroke-linecap: round; }
.fk .fk-cap { fill: var(--ff-cap); stroke: #0006; stroke-width: 1; filter: drop-shadow(0 2px 2px #0008); }
.fk .fk-ptr { stroke: var(--ff-ptr); stroke-width: 2.5; stroke-linecap: round; }
.fk b { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; text-align: center; max-width: 84px; line-height: 1.1; }
.fk output { font-size: 11px; font-variant-numeric: tabular-nums; opacity: .85; }
.fk.fk-small b { font-size: 9px; opacity: .85; }
.fk:focus-visible { outline: 2px solid var(--ff-acc); outline-offset: 3px; border-radius: 6px; }
.fk.drag .fk-val { stroke-width: 5; }
.pp-more { margin-top: 4px; }
.pp-more > summary { cursor: pointer; font-size: 12px; color: var(--muted); padding: 4px 0; }
.pp-more[open] > summary { margin-bottom: 6px; }
.rack-title { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.rack-auto, .pp-auto { font-weight: 800; }
.rack-auto { padding: 2px 9px; font-size: 11px; }

/* Presets par style et presets de groupe */
.style-chips { display: flex; flex-direction: column; gap: 5px; margin: 6px 0 8px; }
.style-chips .sc-row { display: flex; flex-wrap: wrap; gap: 5px; }
.style-chips .chip { padding: 4px 10px; font-size: 12px; font-weight: 700; border-radius: 999px; background: var(--s2); border: 1px solid var(--line); color: var(--text); }
.style-chips .sc-top .chip { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.style-chips .chip.on { background: var(--accent); color: var(--on-accent, #fff); border-color: var(--accent); }
.style-chips [data-style-all] { align-self: flex-start; }
.group-banner { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 6px 0; padding: 7px 10px; border-radius: 6px; border: 1px solid var(--c); background: color-mix(in srgb, var(--c) 14%, var(--s1)); font-size: 13px; }
.g-head .g-fx { font-weight: 900; font-size: 10px; letter-spacing: .02em; }

/* ---------- Fenêtre d'un clip (double-clic) ---------- */
.clip-dlg { width: min(920px, 94vw); max-width: none; padding: 0; }
.clip-dlg .cd { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; }
.cd-head { display: flex; align-items: center; gap: 10px; }
.cd-head .cd-dot { width: 12px; height: 12px; border-radius: 3px; background: var(--c); flex: none; }
.cd-head input { flex: 1; font-size: 18px; font-weight: 800; background: transparent; border: 1px solid transparent; padding: 4px 6px; color: var(--text); }
.cd-head input:hover, .cd-head input:focus { border-color: var(--line); }
.cd-x { font-size: 22px; line-height: 1; padding: 2px 10px; }
.cd-wave { width: 100%; height: 90px; border-radius: 6px; background: #0b0b0d; border: 1px solid var(--line); --c: inherit; }
.cd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cd-grid section { background: var(--s1); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.cd-grid h4 { margin: 0 0 8px; font-family: var(--display); font-size: 14px; letter-spacing: .05em; text-transform: uppercase; }
.cd-info { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; font-size: 13px; }
.cd-info dt { color: var(--muted); } .cd-info dd { margin: 0; font-variant-numeric: tabular-nums; min-width: 0; }
.cd-file { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-r { display: grid; grid-template-columns: 110px 1fr 70px; align-items: center; gap: 8px; font-size: 13px; margin: 4px 0; }
.cd-r input { accent-color: var(--c); } .cd-r output { text-align: right; font-variant-numeric: tabular-nums; }
.cd-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.cd-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin-top: 6px; }
.cd-seg button { border: 0; border-radius: 0; background: transparent; color: var(--muted); padding: 5px 12px; font-weight: 700; font-size: 12px; }
.cd-seg button.on { background: var(--c); color: #fff; }
.cd-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.cd-acts .danger { color: #ff6b6b; border-color: #ff6b6b66; }
@media (max-width: 700px) { .cd-grid { grid-template-columns: 1fr; } }

/* Catégories de presets : elles passent à la ligne (Par style a été ajouté) */
.preset-cats { flex-wrap: wrap; row-gap: 4px; }
#presetsBox .preset-top, #presetsBox .preset-cats, #presetsBox .preset-save { width: auto; min-width: 0; max-width: 100%; box-sizing: border-box; }
#presetsBox .preset-save { display: flex; gap: 6px; }
#presetsBox .preset-save input { flex: 1 1 0; min-width: 0; }
#presetsBox .preset-save button { flex: none; white-space: nowrap; }

/* ♥ des presets : les presets aimés passent en tête de leur liste */
.preset-card { position: relative; }
.preset-card .preset-fav { position: absolute; top: 4px; right: 4px; z-index: 2; width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 80%, transparent); color: var(--muted); font-size: 13px; line-height: 1; display: grid; place-items: center; }
.preset-card .preset-fav:hover { color: #ff4d6d; border-color: #ff4d6d; }
.preset-card .preset-fav.on { color: #fff; background: #ff4d6d; border-color: #ff4d6d; }
.preset-card .preset-fav:disabled { opacity: .35; }
.preset-card.liked { box-shadow: inset 0 0 0 1px #ff4d6d66; }
.preset-card .preset-pub, .preset-card .preset-del { z-index: 3; }
.hub-fav { border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 999px; padding: 2px 10px; font-weight: 800; }
.hub-fav.on { background: #ff4d6d; border-color: #ff4d6d; color: #fff; }
.preset-card:has(.preset-del) .preset-fav { right: 50px; }
.hub-card h3 .hub-fav { margin-left: 8px; font-size: 12px; vertical-align: middle; }
.preset-card .preset-main { padding-right: 34px; }
.preset-card:has(.preset-del) .preset-main { padding-right: 78px; }

/* ---------- Page Random, maquette A : tout sur un écran (seul l'historique défile) ---------- */
.random-page.rb-a { max-width: 1480px; padding: 14px 20px 14px; }
.rb-a .rb-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; height: calc(100dvh - var(--top-h, 56px) - 28px); min-height: 520px; }
.rb-a .panel { margin: 0; min-height: 0; }
.rb-a .rb-left { display: flex; flex-direction: column; gap: 10px; text-align: left; padding: 14px; }
.rb-a .rb-left .tabs { margin: 0; flex: none; }
.rb-a .rb-left .finder { flex: none; gap: 8px; }
.rb-a .rb-left .rappers:not(.hidden) { max-height: 30vh; overflow: auto; }
.rb-a #rbArt { flex: 1 1 auto; min-height: 160px; max-height: none; aspect-ratio: auto; height: auto; }
.rb-a #rbArt iframe { height: 100%; }
.rb-a .ctl-row { flex: none; justify-content: flex-start; }
.rb-a .ctl-row #rbLike, .rb-a .ctl-row #rbFav { display: none; } /* likes et favoris : en grand dans la colonne de droite */
.rb-a .rb-keys { margin-left: auto; white-space: nowrap; }
.rb-a .rb-right { display: flex; flex-direction: column; gap: 10px; padding: 14px; text-align: left; overflow: hidden; }
.rb-a .rb-head h2 { margin: 0; font-size: 24px; line-height: 1.1; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rb-a .rb-head p { margin: 4px 0 0; }
.rb-a .rb-right .license-note { margin: 0; font-size: 12px; }
.rb-a .rb-info { grid-template-columns: 1fr 1fr; }
.rb-a .rb-info b { font-size: 34px; }
.rb-a .rb-info-note:empty, .rb-a #rbError:empty { display: none; }
.rb-a #rbOpen { width: 100%; justify-content: center; font-size: 34px; padding: 14px; gap: 12px; }
.rb-a #rbOpen small { font-family: var(--font); font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; opacity: .9; }
.rb-a .rb-actions { grid-template-columns: 1fr 1fr; margin: 0; }
.rb-a .rb-actions .add-big { font-size: 14px; padding: 10px; }
.rb-a .rb-hist { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); padding-top: 8px; }
.rb-a .rb-hist .hist-head { margin: 0 0 6px; padding: 0; }
.rb-a .rb-hist .hist-head h3 { margin: 0; }
.rb-a .rb-hist .hist-list { flex: 1 1 auto; min-height: 0; overflow: auto; }
/* Écrans étroits : tout s'empile, la page défile normalement */
@media (max-width: 980px) {
  .rb-a .rb-layout { grid-template-columns: 1fr; height: auto; }
  .rb-a #rbArt { aspect-ratio: 16 / 9; flex: none; }
  .rb-a .rb-hist .hist-list { max-height: 50vh; }
}
@media (max-height: 640px) and (min-width: 981px) { .rb-a .rb-layout { height: auto; } .rb-a #rbArt { aspect-ratio: 16 / 9; flex: none; } }
/* En-tête : la barre ne dépasse plus à droite entre 1280 et 1500 px (le bouton de compte sortait de 5 px) */
@media (max-width: 1500px) { .topbar { gap: 10px; } nav button { padding-left: 5px; padding-right: 5px; } }
/* Random (maquette A) : historique en lignes compactes, hauteur au pixel près */
.rb-a .rb-layout { height: calc(100dvh - var(--top-h, 56px) - 32px); }
.rb-a .rb-hist .hist-list .hist-row { min-height: 0; padding: 6px 8px; gap: 8px; }
.rb-a .rb-hist .hist-list { gap: 1px; }
.rb-a .rb-hist .hist-list { align-content: start; grid-auto-rows: max-content; }
/* Menu du haut : sur deux lignes tant qu il ne tient pas sur une (il tient à partir de ~1540 px) */
@media (min-width: 621px) and (max-width: 1540px) { nav { flex-wrap: wrap; min-width: 0; flex: 1 1 auto; } }
@media (min-width: 1381px) and (max-width: 1540px) { nav button { font-size: 13px; padding-left: 4px; padding-right: 4px; letter-spacing: 0; } }

/* ---------- Transcription du rap (Écriture) ---------- */
.dict-btn { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; }
.dict-btn.on { background: #e11d2e; color: #fff; border-color: #e11d2e; box-shadow: 0 0 0 4px #e11d2e33; }
.dict-btn:disabled { opacity: .45; }
.dict-fix { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); white-space: nowrap; cursor: pointer; }
.dict-fix input { accent-color: #2fbf71; }
.dict-live { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 12px; margin: 6px 0; border-radius: 8px; border: 1px solid #e11d2e66; background: #e11d2e14; font-size: 14px; }
.dict-live #dictLiveText { font-style: italic; color: var(--text); flex: 1 1 200px; }
.dict-live small { font-size: 11px; }
.dict-dot { width: 9px; height: 9px; border-radius: 50%; background: #e11d2e; animation: dictPulse 1.1s ease-in-out infinite; }
@keyframes dictPulse { 50% { opacity: .25; } }
.dict-fixes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.dict-fix-item { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 8px; border-radius: 999px; border: 1px solid #2fbf7166; background: #2fbf7114; font-size: 12px; }
.dict-fix-item b { color: #2fbf71; }
.dict-fix-item button { padding: 0 6px; background: transparent; border: 0; color: var(--muted); font-size: 14px; line-height: 1; }
@media (max-width: 620px) { .dict-fix { font-size: 11px; } .dict-btn span { display: none; } }