:root{--muted:#b8b2d1;--edge:#ffffff20}
html,body{overflow:auto;height:auto;min-height:100%}.stage{min-height:100dvh;height:auto;padding:32px clamp(22px,4vw,72px);background:radial-gradient(ellipse at 50% 0%,#352668 0%,transparent 55%),#0b0b19;overflow:hidden}.screen{min-height:calc(100dvh - 64px)}.screen.on{animation:arrive .35s ease-out}.orb{opacity:.13}.o2{background:#8463ff}.menu-header,.header-actions,.collection-label,.menu-footer,.save-row,.song-tools{display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{color:white;text-decoration:none;font-size:29px;font-weight:800;letter-spacing:-1.5px}.brand span{color:#bca6ff}.brand i{display:block;font-style:normal;font-size:9px;letter-spacing:3px;margin-top:4px;color:var(--muted)}.header-actions{gap:26px}.connection{font-size:12px;color:var(--muted)}.connection::before{content:'';display:inline-block;width:7px;height:7px;background:#a3f4cb;border-radius:50%;margin-right:8px}.quiet{border:1px solid var(--edge);background:#ffffff08;color:white;border-radius:12px;min-height:44px;padding:11px 20px;font:600 14px Outfit,system-ui;cursor:pointer;transition:background .2s,transform .2s}.quiet:hover{background:#ffffff18;transform:translateY(-2px)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #d5c5ff;outline-offset:4px}.menu-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin:35px 0 24px}.eyebrow{color:#bca6ff;font-weight:700;font-size:11px;letter-spacing:3px}h1{font-family:Outfit,system-ui;font-size:clamp(40px,4.6vw,72px);letter-spacing:-2.5px;line-height:1.03;margin:16px 0 0;font-weight:800}h1 em{font-style:normal;color:#bc9dff}.menu-heading p,.detail-copy p,.editor-heading p{color:var(--muted);font-size:16px;line-height:1.7}.collection-label{font-size:11px;letter-spacing:2px;color:var(--muted);font-weight:700}.styles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:5px 0 20px}.style-card{position:relative;text-align:left;color:white;border:1px solid #ffffff28;padding:0;overflow:hidden;min-height:340px;border-radius:22px;cursor:pointer;font-family:inherit;transition:transform .25s,box-shadow .25s;background:#27234d}.style-card:hover{transform:translateY(-8px);box-shadow:0 18px 50px #0008}.art{position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse at 50% 20%,#7b6fef,transparent 70%),linear-gradient(135deg,#233288,#4d2185)}.art::before{content:'';position:absolute;width:250px;height:250px;border:1px solid #ffffff30;border-radius:50%;top:12%;left:calc(50% - 125px);box-shadow:0 0 0 25px #ffffff06,0 0 0 55px #ffffff04}.art svg{position:absolute;width:70%;height:70%;left:15%;top:0;filter:drop-shadow(0 10px 26px #0004)}.art.rock{background:radial-gradient(ellipse at 50% 20%,#ff875c,transparent 70%),linear-gradient(140deg,#a42545,#411323)}.art.mix{background:radial-gradient(ellipse at 50% 20%,#61d4b7,transparent 70%),linear-gradient(140deg,#116d71,#102f45)}.style-card::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 35%,#0b0b19e8)}.card-badge{position:absolute;top:20px;left:20px;z-index:1;background:#0b0b1940;border:1px solid #ffffff30;border-radius:20px;padding:7px 12px;font-size:10px;letter-spacing:1px}.card-copy{position:absolute;bottom:25px;left:26px;right:26px;z-index:1}.card-copy h2{font-size:44px;letter-spacing:-1.8px;margin:0 0 6px}.card-copy p{color:#e1dced;font-size:14px;margin:0;max-width:85%;line-height:1.5}.card-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:22px;font-size:12px;color:#e1dced}.card-arrow{width:35px;height:35px;border:1px solid #ffffff50;border-radius:50%;display:grid;place-items:center;font-size:18px}.menu-footer{border-top:1px solid var(--edge);padding-top:22px;color:var(--muted);font-size:11px;margin-top:auto}.menu-footer b{color:#c6adff;margin-right:6px}.step-line{padding:0 13px;color:#6b6283}.detail-layout{display:grid;grid-template-columns:minmax(230px,360px) 1fr;align-items:center;gap:60px;margin:24px 0}.detail-cover{position:relative;height:350px;overflow:hidden;border-radius:24px}.detail-cover .art svg{height:95%;top:4%}.detail-actions{display:flex;gap:16px;margin-top:30px;flex-wrap:wrap}.btn{font:700 16px Outfit,system-ui;min-height:52px;padding:14px 26px;background:#c3a6ff;color:#1b1132;box-shadow:0 8px 24px #9b66ff25}.btn:hover:not(:disabled){background:#dac9ff}.hint{font-size:13px!important}.song-preview{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.song-tile{padding:18px;border:1px solid var(--edge);border-radius:14px;background:#ffffff04}.song-tile small{display:block;margin-top:5px;color:var(--muted)}.editor-heading h1{font-size:44px}.editor-layout{display:grid;grid-template-columns:220px 1fr;gap:32px;margin-top:12px}#list-nav{display:flex;flex-direction:column;gap:10px}#list-nav button{text-align:left}#list-nav button[aria-current=true]{background:#b598ff25;border-color:#bc9dff}.form-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}.wide{grid-column:1/-1}label{display:flex;flex-direction:column;gap:8px;font-size:13px;color:#d5cde6}input,select{min-height:46px;border:1px solid #ffffff25;background:#171626;color:white;border-radius:10px;padding:10px 14px;font:inherit;width:100%}.song-tools{margin:24px 0 14px}.song-tools label{flex:1}.song-tools span{font-size:13px;color:var(--muted)}#song-picker{max-height:340px;overflow:auto;border:1px solid var(--edge);border-radius:12px}.song-option{flex-direction:row;align-items:center;padding:14px;gap:14px;border-bottom:1px solid #ffffff0d;cursor:pointer;min-height:64px}.song-option:has(input:checked){background:#b598ff12}.song-option input{width:20px;min-height:20px;accent-color:#bc9dff}.song-option small{display:block;color:var(--muted);margin-top:4px}.save-row{margin-top:20px}.save-row p{font-size:14px;color:#d5c5ff}.notice{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);z-index:10;padding:16px 24px;border:1px solid #bca6ff;background:#27213c;border-radius:14px;max-width:90vw}.lobby{gap:32px}.code{font-size:clamp(60px,9vw,128px)}.players:empty::after{content:'La scène attend ses premières voix…';color:var(--muted);border:1px dashed #ffffff30;border-radius:20px;padding:40px;font-size:20px}.top{gap:16px}.empty{padding:30px;color:var(--muted)}@keyframes arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(min-width:1600px){.styles{gap:32px}.style-card{min-height:430px}.menu-heading{margin:50px 0 40px}}
@media(max-width:900px){.menu-heading p{display:none}.styles{gap:14px}.style-card{min-height:300px}.card-copy{left:18px;right:18px}.card-copy h2{font-size:34px}.menu-footer{align-items:flex-start}.menu-footer>span:last-child{display:none}.editor-layout{grid-template-columns:170px 1fr}.lobby{flex-direction:column;align-items:stretch}.lobby>div:first-child{flex:auto!important}.detail-layout{gap:25px}.song-preview{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.stage{padding:22px 18px}.screen{min-height:calc(100dvh - 44px)}.connection{display:none}.styles{grid-template-columns:1fr}.style-card{min-height:300px}.menu-heading{margin:20px 0}.menu-footer{line-height:2}.step-line{padding:0 4px}.detail-layout,.editor-layout{grid-template-columns:1fr;gap:20px}.detail-cover{height:230px}.detail-copy h1{font-size:48px}.song-preview{grid-template-columns:1fr}#list-nav{flex-direction:row;flex-wrap:wrap}.form-fields{grid-template-columns:1fr}.top .label{font-size:11px}.save-row{align-items:stretch;flex-direction:column}.editor-heading h1{font-size:36px}.line{font-size:24px}.bar{font-size:14px;padding:14px}.answer{font-size:44px}#s-reveal>div:nth-child(2){flex-direction:column;align-items:stretch!important}#rev-ranking{flex:auto!important}#intro-title{font-size:44px!important}#s-lobby>div:last-child{gap:20px;flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Motion direction: quick feedback, soft arrivals, a single focal cover. */
:root{--motion-quick:140ms;--motion-normal:260ms;--motion-settle:560ms;--ease-out:cubic-bezier(.16,1,.3,1)}
.motion-ready .screen.on{animation:none}
.stage .orb{animation:none}
.style-card{isolation:isolate;transform-origin:50% 70%;transition:transform var(--motion-normal) var(--ease-out),box-shadow var(--motion-normal),border-color var(--motion-quick)}
.style-card .art svg{transition:transform var(--motion-settle) var(--ease-out);transform-origin:center}
.style-card .art::before{transition:transform 700ms var(--ease-out),opacity var(--motion-normal)}
.style-card .card-copy{transition:transform var(--motion-normal) var(--ease-out)}
.style-card .card-arrow{transition:background var(--motion-quick),color var(--motion-quick),transform var(--motion-normal) var(--ease-out)}
.style-card:focus-visible{border-color:#e5dcff;box-shadow:0 18px 50px #0008,0 0 32px #a58cff30;transform:translateY(-5px)}
.style-card:focus-visible .art svg{transform:translateY(-5px) scale(1.055)}
.style-card:focus-visible .card-arrow{background:#f1eaff;color:#26133f;transform:rotate(45deg)}
@media(hover:hover) and (pointer:fine){
 .style-card:hover{border-color:#ffffff85;transform:translateY(-7px) scale(1.012);box-shadow:0 22px 55px #0008,0 0 30px #a58cff18}
 .style-card:hover .art svg{transform:translateY(-5px) scale(1.055)}
 .style-card:hover .art::before{transform:scale(1.12);opacity:.8}
 .style-card:hover .card-copy{transform:translateY(-3px)}
 .style-card:hover .card-arrow{background:#f1eaff;color:#26133f;transform:rotate(45deg)}
}
.style-card:active{transform:translateY(-2px) scale(.985);transition-duration:90ms}
.btn,.quiet{transition:background var(--motion-quick),transform var(--motion-quick),box-shadow var(--motion-quick)}
.btn:active:not(:disabled),.quiet:active{transform:scale(.97)}
.song-option{transition:background var(--motion-quick)}
.song-option:focus-within{background:#b598ff20;outline:2px solid #bc9dff;outline-offset:-2px}
.motion-cover{position:fixed;pointer-events:none;overflow:hidden;border-radius:22px;z-index:30;transform-origin:top left;box-shadow:0 22px 70px #0005}
@media(prefers-reduced-motion:reduce){
 .style-card,.style-card:hover,.style-card:focus-visible,.style-card:active,.style-card .art svg,.style-card:hover .art svg,.style-card:focus-visible .art svg,.style-card:hover .art::before,.style-card:hover .card-copy,.style-card:hover .card-arrow,.style-card:focus-visible .card-arrow,.btn:active:not(:disabled),.quiet:active{transform:none!important}
 .motion-cover{display:none}
}
/* Direction artistique : scène de concert, pochettes illustrées et surfaces prune. */
:root{--muted:#c6bbd0;--edge:#ffffff24;--sun:#dbf98a;--cyan:#c5afff;--soft:#c6bbd0}
.stage{background:radial-gradient(ellipse at 75% 0%,#39203f 0%,transparent 60%),#120e19;padding:30px clamp(20px,5vw,90px)}
.menu-heading{margin:30px 0 28px}.menu-heading h1{font-size:clamp(44px,5vw,76px);letter-spacing:-3px}.menu-heading h1 em{color:#d8fa6e}.menu-heading p{max-width:290px}.brand span{color:#d8fa6e}.brand{letter-spacing:-1px}.eyebrow{color:#e6a2d1}.styles{gap:24px;grid-template-columns:repeat(3,minmax(0,1fr))}.style-card{min-height:390px;border-radius:18px;border-color:#ffffff22;background:#21192b}.style-card:hover,.style-card:focus-visible{border-color:#d8fa6e;box-shadow:0 16px 60px #0006}.art{background:#271738!important}.art::before{display:none}.universe-illustration{width:100%;height:100%;object-fit:cover;object-position:65% center;transition:transform .7s cubic-bezier(.2,.8,.2,1)}.style-card:hover .universe-illustration,.style-card:focus-visible .universe-illustration{transform:scale(1.07)}.style-card::after{background:linear-gradient(0deg,#100b1af5 0%,#100b1a85 30%,transparent 65%)}.card-copy{bottom:26px;left:26px;right:26px}.card-copy h2{font-size:48px;letter-spacing:-2px}.card-copy p{color:#e8deef}.card-badge{backdrop-filter:blur(12px);font-size:10px;background:#120e1960}.card-arrow{background:#d8fa6e;color:#1c1820;border:0;width:40px;height:40px}.card-bottom{margin-top:20px}.btn{background:#d8fa6e;color:#1a2010;box-shadow:none;border-radius:12px}.btn:hover:not(:disabled){background:#e7ffb0}.quiet{border-radius:10px}.menu-footer{padding-top:22px;font-size:12px}.menu-footer b{color:#d8fa6e}.detail-cover{height:390px}.detail-copy h1{font-size:clamp(50px,6vw,88px)}.song-tile{background:#21192b;border-radius:12px}.song-option:has(input:checked){background:#d8fa6e12}.song-option input{accent-color:#d8fa6e}#list-nav button[aria-current=true]{border-color:#d8fa6e;background:#d8fa6e12}.notice{background:#292033;border-color:#d8fa6e}.player,.rank{background:#21192b;border:1px solid #ffffff22;border-radius:16px}.avatar,.rank .pos{background:#d8fa6e;color:#171b10}.code{color:#d8fa6e;text-shadow:none}.bar{border-radius:16px;background:#21192b}.fill{background:linear-gradient(90deg,#c5afff,#d8fa6e)}
@media(min-width:1600px){.style-card{min-height:480px}}
@media(max-width:900px){.style-card{min-height:340px}.card-copy h2{font-size:36px}.card-copy{left:18px;right:18px}}
@media(max-width:600px){.style-card{min-height:330px}.menu-heading h1{letter-spacing:-2px}.detail-cover{height:270px}.menu-footer{font-size:11px}}