@font-face{font-family:"Lilita One";src:url(fonts/LilitaOne-Regular.ttf);font-display:swap}
@font-face{font-family:"Nunito";src:url(fonts/Nunito.ttf);font-weight:200 1000;font-display:swap}
@font-face{font-family:"Baloo 2";src:url(fonts/Baloo2.ttf);font-weight:400 800;font-display:swap}
@font-face{font-family:"Chewy";src:url(fonts/Chewy-Regular.ttf);font-display:swap}
@font-face{font-family:"Luckiest Guy";src:url(fonts/LuckiestGuy-Regular.ttf);font-display:swap}
@font-face{font-family:"Bangers";src:url(fonts/Bangers-Regular.ttf);font-display:swap}
@font-face{font-family:"Pacifico";src:url(fonts/Pacifico-Regular.ttf);font-display:swap}
:root{
  --navy:#2b3f6b;--navy-d:#1b2848;--ink:#1a2444;--sun:#ffc41a;--sun-d:#f39a0a;--pink:#f2707c;
  --paper:#fffaf0;--line:#1b2848;--muted:#5b6788;--ok:#2f9e5b;--bad:#d63c4b;--sky:#6ed6ff;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:600 17px/1.5 Nunito,system-ui,sans-serif;color:var(--ink);background:var(--navy);
  background-image:radial-gradient(circle at 12px 12px,rgba(255,255,255,.07) 2.5px,transparent 3px);background-size:34px 34px;min-height:100vh}
h1,h2,h3{font-family:"Lilita One",Nunito,sans-serif;font-weight:400;line-height:1.15;margin:0;letter-spacing:.3px}
h1{font-size:clamp(1.8rem,4vw,2.5rem);color:var(--sun);text-shadow:0 3px 0 var(--navy-d)}
h2{font-size:1.35rem;margin:1.4rem 0 .7rem}h2:first-child{margin-top:0}
h3{font-size:1.2rem}
a{color:var(--sun);font-weight:800}
main{max-width:1120px;margin:0 auto;padding:22px 16px 70px}
.muted{color:var(--muted);font-size:.93rem}
.pagehead .muted{color:#cdd8f5}.pagehead a:not(.btn){color:var(--sun)}
.warn{color:var(--sun-d)}
.top{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;justify-content:space-between;padding:8px 18px;background:var(--navy-d);border-bottom:4px solid var(--sun)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;font-family:"Lilita One";font-weight:400;font-size:1.4rem;line-height:1}
.brand img{height:62px;width:auto;transition:transform .2s}.brand:hover img{transform:rotate(-6deg) scale(1.06)}
.brand small{display:block;font:800 .72rem Nunito;color:var(--sun);letter-spacing:.5px;margin-top:3px}
.top nav{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.top nav a,.top nav .linklike{color:#fff;text-decoration:none;padding:7px 13px;border-radius:999px;font-weight:800;font-size:.95rem}
.top nav a:hover,.top nav a.on{background:var(--sun);color:var(--ink)}
.top nav form{margin:0}
.linklike{background:none;border:0;font:inherit;font-weight:800;color:var(--pink);cursor:pointer;padding:6px 0;text-decoration:underline}
.top nav .linklike{color:#ffb3ba;text-decoration:none}
.card{background:var(--paper);border:3px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 7px 0 var(--navy-d)}
.card.narrow{max-width:620px}
.pagehead{display:flex;flex-wrap:wrap;gap:12px;align-items:end;justify-content:space-between;margin:8px 0 22px}
.pagehead p{margin:.3rem 0 0}
.flash{padding:12px 18px;border-radius:16px;border:3px solid var(--line);margin-bottom:16px;font-weight:800;background:#d9f7e3}
.flash.error{background:#ffe0e3}
.flash.ok::before{content:"🎉 "}.flash.error::before{content:"🙈 "}
label{display:block;font-weight:800;margin:0 0 14px}
label small{font-weight:600;color:var(--muted)}
input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{display:block;width:100%;margin-top:5px;padding:11px 14px;font:700 1rem Nunito,sans-serif;color:var(--ink);background:#fff;border:3px solid var(--line);border-radius:14px}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible,.drop:focus-within,.chip input:focus-visible+span{outline:4px solid var(--sky);outline-offset:2px}
textarea{resize:vertical}
input.code{font-size:1.7rem;letter-spacing:.35em;text-align:center;font-variant-numeric:tabular-nums}
label.check{display:flex;gap:10px;align-items:flex-start;font-weight:700}
label.check input{width:22px;height:22px;margin-top:2px;accent-color:var(--navy);flex:none}
fieldset{border:0;padding:0;margin:0 0 14px}legend{font-weight:800;padding:0;margin-bottom:6px}
.btn{display:inline-block;font:400 1.05rem "Lilita One",sans-serif;letter-spacing:.4px;color:var(--ink);background:var(--sun);border:3px solid var(--line);border-radius:999px;padding:10px 22px;cursor:pointer;text-decoration:none;box-shadow:0 5px 0 var(--line);transition:transform .08s,box-shadow .08s}
.btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--line)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--line)}
.btn.big{font-size:1.25rem;padding:13px 28px}
.btn.small{font-size:.92rem;padding:7px 15px;box-shadow:0 3px 0 var(--line)}
.btn.danger{background:var(--pink);color:#fff}.btn.ghost{background:#fff}
.btn[disabled]{opacity:.55;cursor:progress;transform:none}
.mini{display:grid;place-items:center;width:42px;height:42px;font-size:1.05rem;background:#fff;border:3px solid var(--line);border-radius:13px;cursor:pointer;text-decoration:none;color:var(--ink);box-shadow:0 3px 0 var(--line)}
.mini:hover{background:var(--sun)}.mini.danger:hover{background:var(--pink)}
/* connexion */
body.auth main{display:grid;place-items:center;min-height:100vh;padding-top:30px}
body.auth .flash{width:min(430px,100%)}
.authcard{width:min(430px,100%);text-align:center;padding-top:0}
.authcard h1{color:var(--navy);text-shadow:none;font-size:1.9rem;margin-bottom:14px}
.authcard form{text-align:left;margin-top:8px}.authcard .btn{width:100%;margin-top:4px}
.authlogo{width:210px;height:auto;margin:-70px auto 6px;display:block;filter:drop-shadow(0 6px 0 rgba(27,40,72,.25));animation:bob 3.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px) rotate(-2deg)}}
/* musiques */
.tracklist{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.track{display:grid;grid-template-columns:118px 1fr auto;gap:18px;align-items:center;padding:14px}
.track.off{background:#e6e8ef}.track.off .thumb{filter:grayscale(1);opacity:.7}
.thumb{width:118px;height:118px;border-radius:14px;border:3px solid var(--line);display:block;background:var(--navy)}
.info{min-width:0}.info h3{overflow-wrap:anywhere}.info p{margin:2px 0 8px;color:var(--muted);font-size:.95rem}
.info audio{width:100%;max-width:440px;height:38px}
.actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end;max-width:150px}.actions form{margin:0}
.empty{text-align:center}.empty img{width:170px}.empty h2{margin-top:.4rem}
/* formulaire */
.formgrid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:22px;align-items:start}
.formgrid.even{grid-template-columns:1fr 1fr}
.step{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--pink);color:#fff;border:3px solid var(--line);font-size:1.1rem;margin-right:6px;vertical-align:middle}
.drop{position:relative;display:grid;justify-items:center;gap:2px;text-align:center;padding:18px 14px;border:3px dashed var(--navy);border-radius:18px;background:#fff;cursor:pointer;transition:background .15s,transform .15s}
.drop:hover,.drop.over{background:#fff3c9;transform:scale(1.01)}
.drop.has{border-style:solid;background:#e3f8ea}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.drop .big{font-size:2rem;line-height:1}.drop .dtitle{font-family:"Lilita One";font-weight:400;font-size:1.15rem}
.drop .picked{font-weight:800;color:var(--ok);overflow-wrap:anywhere}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{margin:0;cursor:pointer}.chip input{position:absolute;opacity:0}
.chip span{display:flex;align-items:center;gap:7px;padding:7px 15px;background:#fff;border:3px solid var(--line);border-radius:999px;font-size:1.05rem}
.chip input:checked+span{background:var(--sun);box-shadow:0 3px 0 var(--line)}
.chip i{width:18px;height:18px;border-radius:50%;border:2px solid var(--line)}
.font-lilita span{font-family:"Lilita One";font-weight:400}.font-baloo span{font-family:"Baloo 2";font-weight:800}
.font-chewy span{font-family:Chewy;font-weight:400}.font-luckiest span{font-family:"Luckiest Guy";font-weight:400}
.font-bangers span{font-family:Bangers;font-weight:400;letter-spacing:1px}.font-pacifico span{font-family:Pacifico;font-weight:400}
.previewcard{position:sticky;top:16px;text-align:center}.previewcard h2{text-align:left}
.preview{aspect-ratio:1;background:var(--navy) url(logo-radio-512.png) center/45% no-repeat;border:3px solid var(--line);border-radius:18px;overflow:hidden}
.preview img{width:100%;height:100%;display:block;object-fit:cover}.preview img:not([src]){display:none}
.preview.busy{opacity:.6}
.progress{height:20px;border:3px solid var(--line);border-radius:999px;overflow:hidden;background:#fff;margin:12px 0}
.progress div{height:100%;width:0;background:repeating-linear-gradient(45deg,var(--sun),var(--sun) 12px,var(--sun-d) 12px,var(--sun-d) 24px);transition:width .2s}
.formerror{color:var(--bad);font-weight:800}
.previewcard .btn{width:100%}
/* comptes */
.userlist{list-style:none;margin:0;padding:0}.userlist li{padding:14px 0;border-top:3px dotted #cfd5e6}.userlist li:first-child{border-top:0;padding-top:0}
.who{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:1.1rem}
.tag{font-size:.78rem;font-weight:800;padding:3px 11px;border-radius:999px;background:#dfe6fb;border:2px solid var(--line)}
.tag.gold{background:var(--sun)}.tag.green{background:#bff0cf}.tag.grey{background:#eee}
details{margin-top:8px}summary{cursor:pointer;font-weight:800;color:var(--navy)}
.manage{display:grid;gap:12px;margin-top:12px;padding:14px;background:#fff;border:3px solid var(--line);border-radius:16px}
.inline{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin:0}.inline label{margin:0;flex:1 1 180px}.inline form{margin:0}
.steps{padding-left:1.2rem}.steps li{margin-bottom:8px}
.qr{display:block;margin:10px 0;border:3px solid var(--line);border-radius:14px;width:190px;height:190px;image-rendering:pixelated}
code{background:#fff;border:2px solid var(--line);border-radius:8px;padding:2px 8px;font-size:.9rem;overflow-wrap:anywhere}
@media (max-width:820px){
  .formgrid,.formgrid.even{grid-template-columns:1fr}.previewcard{position:static}
  .track{grid-template-columns:84px 1fr}.thumb{width:84px;height:84px}
  .actions{grid-column:1/-1;max-width:none;justify-content:flex-start}
  .brand span{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}