/* =====================================================================
   L1L SQUAD — Styles
   Thème CLAIR par défaut (fond blanc, très lisible).
   Thème sombre disponible avec le bouton ☾ en haut (mémorisé).
   Palette : bleu (--a), violet (--b), rose (--c).
   ===================================================================== */
:root{
  --bg:#f6f7fb;--bg2:#ffffff;--card:#ffffff;--card2:#f1f3fa;--line:#e3e7f2;--line2:#cfd6ea;
  --text:#0c1330;--text2:#2b3557;--muted:#5d6789;--a:#4a63ff;--b:#8b5cf6;--c:#ec4899;
  --ok:#11a36a;--warn:#c27a00;--err:#e0364b;
  --bar:rgba(255,255,255,.86);--grad:linear-gradient(120deg,var(--a),var(--b) 50%,var(--c));
  --grad-soft:linear-gradient(120deg,#eef1ff,#f4efff 50%,#fff0f7);
  --shadow-sm:0 1px 2px rgba(16,24,64,.06),0 2px 8px rgba(16,24,64,.05);
  --shadow:0 12px 40px -12px rgba(40,50,140,.22);
  --nav-h:64px;--player-h:0px;--radius:18px;--safe-b:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#060914;--bg2:#0b0f1f;--card:#0d1224;--card2:#131a33;--line:#1c2650;--line2:#2a3770;
  --text:#eef2ff;--text2:#c9d1f0;--muted:#8a96c4;--a:#7b97ff;--b:#a98bfa;--c:#ff5aaf;
  --bar:rgba(6,9,20,.86);--grad-soft:linear-gradient(120deg,#121a3a,#1a1438 50%,#2a1230);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);--shadow:0 20px 50px -20px rgba(0,0,0,.7);
  color-scheme:dark;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:'DM Sans',system-ui,sans-serif;font-size:16px;line-height:1.6;overflow-x:hidden;
  padding-bottom:calc(var(--nav-h) + var(--player-h) + var(--safe-b) + 16px);min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--a);outline-offset:2px;border-radius:6px}
::selection{background:var(--b);color:#fff}

/* ---------- Typo ---------- */
.eyebrow{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--a);font-weight:700}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--text2);font-size:17px;line-height:1.7;max-width:620px}
.muted{color:var(--muted)}
.display{font-family:'Anton',Impact,sans-serif;font-weight:400;letter-spacing:1px;line-height:.95}
h3{font-family:'Anton',Impact,sans-serif;font-weight:400;letter-spacing:1px}

/* ---------- Header ---------- */
.top{position:sticky;top:0;z-index:20;background:var(--bar);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);
  border-bottom:1px solid var(--line);padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px}
.top-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:10px}
.logo{font-family:'Anton',Impact,sans-serif;letter-spacing:3px;font-size:20px;text-decoration:none;display:flex;align-items:center;gap:10px;margin-right:auto}
.logo .dot{width:12px;height:12px;background:var(--grad);transform:rotate(45deg);border-radius:2px}
.topnav{display:none;gap:2px}
.topnav a{font-size:14px;font-weight:500;text-decoration:none;color:var(--text2);padding:8px 13px;border-radius:999px;transition:.2s}
.topnav a:hover{background:var(--card2)}
.topnav a.on{color:#fff;background:var(--text)}
:root[data-theme="dark"] .topnav a.on{color:var(--bg)}
.tools{display:flex;align-items:center;gap:6px}
.pillbtn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--line2);background:var(--card);
  font-family:'Space Mono',monospace;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;text-decoration:none;color:var(--text);transition:.2s;white-space:nowrap}
.pillbtn:hover{border-color:var(--a)}
.pillbtn.icon{width:36px;padding:0;justify-content:center;font-size:15px}
.lang{display:inline-flex;border:1px solid var(--line2);border-radius:999px;padding:3px;background:var(--card);height:36px}
.lang button{font-family:'Space Mono',monospace;font-size:11px;font-weight:700;padding:0 9px;border-radius:999px;color:var(--muted)}
.lang button.on{background:var(--text);color:var(--bg2)}
.acct .av{width:20px;height:20px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-size:10px;color:#fff}
@media (min-width:980px){.topnav{display:flex;margin-right:12px}}
@media (max-width:420px){.acct .lbl{display:none}.acct{width:36px;padding:0;justify-content:center}}
.banner{background:var(--grad);color:#fff;text-align:center;font-family:'Space Mono',monospace;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:8px 12px}
.banner:empty{display:none}

/* ---------- Layout ---------- */
main{max-width:1180px;margin:0 auto;padding:0 18px}
.view{display:none}
.view.on{display:block;animation:in .4s cubic-bezier(.2,.7,.2,1)}
@keyframes in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
section.block{margin-top:72px}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:48px 0 24px}
.sec-head h2{font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:clamp(40px,8vw,72px);letter-spacing:1px;line-height:.95}
.sec-head .eyebrow{display:block;margin-bottom:10px}
.sec-head .lead{margin-top:12px}

/* ---------- Hero ---------- */
.hero{display:grid;gap:36px;align-items:center;padding:48px 0 12px}
@media (min-width:900px){.hero{grid-template-columns:1.1fr .9fr;padding:72px 0 24px}}
.hero h1{font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:clamp(88px,20vw,190px);line-height:.85;margin:16px 0 22px;letter-spacing:-1px}
.hero h1 .l2{display:block;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.stats{display:flex;gap:28px;margin-top:34px;flex-wrap:wrap}
.stat b{display:block;font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:44px;line-height:1}
.stat span{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;transform:rotate(-3deg)}
.mosaic a{position:relative;aspect-ratio:1;border-radius:20px;overflow:hidden;text-decoration:none;box-shadow:var(--shadow);transition:.3s}
.mosaic a:nth-child(3n+2){transform:translateY(22px)}
.mosaic a:hover{transform:scale(1.04) rotate(2deg);z-index:2}
.mosaic a:nth-child(3n+2):hover{transform:translateY(22px) scale(1.04) rotate(2deg)}
.mosaic .ph,.mcard .ph{position:absolute;inset:0;display:grid;place-items:center;font-family:'Anton',Impact,sans-serif;color:rgba(255,255,255,.95);font-size:46px}
.mosaic img,.mcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mosaic .nm{position:absolute;left:10px;bottom:8px;color:#fff;font-family:'Space Mono',monospace;font-size:10px;font-weight:700;letter-spacing:1px;text-shadow:0 1px 6px rgba(0,0,0,.4)}
@media (max-width:899px){.mosaic{max-width:440px;margin:10px auto 30px}}

/* Bandeau défilant */
.marquee{margin:56px -18px 0;background:var(--text);color:var(--bg2);overflow:hidden;white-space:nowrap;padding:18px 0;transform:rotate(-1deg)}
:root[data-theme="dark"] .marquee{background:var(--grad);color:#fff}
.marquee div{display:inline-block;animation:mq 45s linear infinite;font-family:'Anton',Impact,sans-serif;font-size:26px;letter-spacing:2px}
.marquee span{margin:0 22px}.marquee em{font-style:normal;color:var(--c);margin-right:6px}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- Le collectif ---------- */
.about{display:grid;gap:18px}
@media (min-width:900px){.about{grid-template-columns:1.25fr 1fr}}
.story{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-sm)}
.story p{color:var(--text2);font-size:17px;line-height:1.8;white-space:pre-line}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fact{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm)}
.fact small{display:block;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.fact b{font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:28px;line-height:1.1;letter-spacing:.5px;word-break:break-word}
.fact.wide{grid-column:1/-1;background:var(--grad);color:#fff;border:0}
.fact.wide small{color:rgba(255,255,255,.8)}
.values{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.value{background:var(--grad-soft);border:1px solid var(--line);color:var(--text);padding:8px 14px;border-radius:999px;font-weight:500;font-size:14px}

.services{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.service{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm);transition:.25s;text-decoration:none;color:inherit;display:block}
.service:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.service .ic{width:52px;height:52px;border-radius:16px;background:var(--grad);display:grid;place-items:center;color:#fff;margin-bottom:18px}
.service .ic svg{width:24px;height:24px}
.service h3{font-size:26px;margin-bottom:6px}
.service p{color:var(--muted)}

.cta-band{margin-top:72px;background:var(--grad);border-radius:28px;padding:44px 28px;color:#fff;display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;position:relative;overflow:hidden}
.cta-band::after{content:"L1L";position:absolute;right:-10px;bottom:-60px;font-family:'Anton',Impact,sans-serif;font-size:220px;opacity:.12;line-height:1}
.cta-band h3{font-size:clamp(34px,6vw,54px);line-height:1}
.cta-band p{opacity:.9;margin-top:8px;max-width:520px}
.cta-band .btn{background:#fff;color:#0c1330;box-shadow:none;position:relative;z-index:1}

/* ---------- Boutons & puces ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'Space Mono',monospace;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;
  color:#fff;background:var(--grad);background-size:160% 160%;padding:15px 24px;text-decoration:none;border-radius:999px;transition:.25s;box-shadow:0 10px 28px -10px rgba(110,90,255,.6)}
.btn:hover{background-position:100% 0;transform:translateY(-1px)}
.btn:disabled{opacity:.5;pointer-events:none}
.btn.ghost{background:var(--card);color:var(--text);box-shadow:inset 0 0 0 1.5px var(--line2)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--a)}
.btn.dark{background:var(--text);color:var(--bg2);box-shadow:none}
.btn.sm{padding:9px 14px;font-size:10px}
.btn.danger{background:transparent;color:var(--err);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--err) 45%,transparent)}
.chip{display:inline-flex;align-items:center;gap:6px;font-family:'Space Mono',monospace;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;background:var(--card2);padding:5px 10px;border-radius:999px;color:var(--text2);white-space:nowrap;text-decoration:none}
.chip.ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent)}
.chip.warn{color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent)}
.chip.err{color:var(--err);background:color-mix(in srgb,var(--err) 12%,transparent)}
.chip.acc{color:var(--a);background:color-mix(in srgb,var(--a) 12%,transparent)}
a.chip:hover{background:var(--text);color:var(--bg2)}
.link{font-family:'Space Mono',monospace;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--a);text-decoration:none}
.link:hover{text-decoration:underline}

/* ---------- Cartes membres ---------- */
.squad{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
@media (min-width:760px){.squad{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}}
.mcard{position:relative;display:block;aspect-ratio:4/5;border-radius:22px;overflow:hidden;text-decoration:none;color:#fff;box-shadow:var(--shadow-sm);transition:.3s}
.mcard:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.mcard .ph{font-size:96px}
.mcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(5,8,25,.75))}
.mcard .info{position:absolute;left:16px;right:16px;bottom:14px;z-index:1}
.mcard .num{position:absolute;top:14px;left:16px;z-index:1;font-family:'Space Mono',monospace;font-size:11px;font-weight:700;background:rgba(255,255,255,.22);backdrop-filter:blur(6px);padding:3px 8px;border-radius:999px}
.mcard .name{font-family:'Anton',Impact,sans-serif;font-size:26px;letter-spacing:1px;line-height:1;word-break:break-word}
.mcard .name small{display:block;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:2px;opacity:.85;margin-bottom:4px}
.mcard .spec{font-size:13px;opacity:.9;margin-top:6px}

/* ---------- Profil ---------- */
.back{display:inline-flex;gap:8px;margin:22px 0 0;font-family:'Space Mono',monospace;font-size:11px;font-weight:700;letter-spacing:1.5px;color:var(--muted);text-decoration:none;text-transform:uppercase}
.back:hover{color:var(--text)}
.pcover{position:relative;margin-top:16px;border-radius:28px;height:200px;overflow:hidden}
@media (min-width:760px){.pcover{height:260px}}
.pcover::after{content:attr(data-name);position:absolute;right:20px;bottom:-30px;font-family:'Anton',Impact,sans-serif;font-size:clamp(90px,18vw,200px);color:rgba(255,255,255,.18);line-height:1;white-space:nowrap}
.phead{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap;margin:-70px 0 0 22px;position:relative;z-index:1}
.phead .ptext{flex:1;min-width:260px;padding-top:80px}
@media (max-width:640px){.phead .ptext{padding-top:4px}}
.avatar{width:58px;height:58px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-family:'Anton',Impact,sans-serif;font-size:24px;color:#fff;overflow:hidden;flex:none}
.avatar img{width:100%;height:100%;object-fit:cover}
.phead .avatar{width:140px;height:140px;font-size:60px;border:6px solid var(--bg);box-shadow:var(--shadow)}
.phead h1{font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:clamp(46px,10vw,88px);line-height:.9;word-break:break-word}
.phead h1 span{color:var(--a)}
.phead .sub-l{color:var(--text2);font-size:17px;margin-top:6px}
.socials{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.pgrid{display:grid;gap:16px;margin-top:30px}
@media (min-width:900px){.pgrid{grid-template-columns:1.4fr 1fr}}
.bio{white-space:pre-line}
.infos{display:grid;gap:10px}
.info-row{display:flex;gap:14px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.info-row .ic{width:36px;height:36px;border-radius:10px;background:var(--grad-soft);display:grid;place-items:center;flex:none;font-size:16px}
.info-row small{display:block;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.info-row b{font-weight:500}
.sub{font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:32px;letter-spacing:1px;margin:44px 0 14px;display:flex;align-items:center;gap:10px}
.sub small{font-family:'Space Mono',monospace;font-size:12px;color:var(--muted)}

/* ---------- Beats ---------- */
.filters{display:grid;gap:8px;grid-template-columns:1fr 1fr;margin-bottom:16px;padding:12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow-sm)}
.filters .search{grid-column:1/-1}
@media (min-width:860px){.filters{grid-template-columns:2fr repeat(4,1fr) auto}.filters .search{grid-column:auto}}
.bpm-range{display:flex;gap:6px}.bpm-range input{min-width:0}
.count{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:2px;color:var(--muted);text-transform:uppercase;margin:0 0 10px}
.beats{display:flex;flex-direction:column;gap:10px}
.beat{display:grid;grid-template-columns:64px 1fr auto;gap:16px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px 10px 10px;transition:.2s;box-shadow:var(--shadow-sm)}
.beat:hover{border-color:var(--line2);box-shadow:var(--shadow)}
.beat.playing{border-color:var(--a);box-shadow:0 0 0 1.5px var(--a),var(--shadow)}
.cover{position:relative;width:64px;height:64px;border-radius:12px;overflow:hidden;background:var(--grad);flex:none}
.cover img{width:100%;height:100%;object-fit:cover}
.cover .ini{position:absolute;inset:0;display:grid;place-items:center;font-family:'Anton',Impact,sans-serif;font-size:22px;color:rgba(255,255,255,.95);letter-spacing:1px}
.cover .pp{position:absolute;inset:0;display:grid;place-items:center;background:rgba(8,12,35,.4);color:#fff;opacity:0;transition:.2s}
.beat:hover .cover .pp,.beat.playing .cover .pp,.cover .pp:focus-visible{opacity:1}
@media (hover:none){.cover .pp{opacity:1;background:rgba(8,12,35,.25)}}
.pp svg{width:24px;height:24px}
.b-main{min-width:0}
.b-title{font-family:'Anton',Impact,sans-serif;font-size:21px;letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.15}
.b-by{font-size:14px;color:var(--muted)}
.b-by a{color:var(--a);text-decoration:none;font-weight:500}
.b-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.b-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.b-price{font-size:13px;color:var(--muted)}
.b-price b{color:var(--text);font-size:16px}
@media (max-width:520px){.beat{grid-template-columns:56px 1fr}.beat .cover{width:56px;height:56px}.b-side{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}.b-meta .chip:nth-child(n+4){display:none}}

/* ---------- États vides ---------- */
.empty{border:2px dashed var(--line2);border-radius:var(--radius);padding:48px 22px;text-align:center;color:var(--muted);background:var(--card)}
.empty .ico{width:56px;height:56px;margin:0 auto 14px;border-radius:18px;background:var(--grad-soft);display:grid;place-items:center;font-size:24px}
.empty b{display:block;font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:26px;letter-spacing:1px;color:var(--text);margin-bottom:4px}

/* ---------- Crédits ---------- */
.credits{display:grid;gap:12px}
@media (min-width:860px){.credits{grid-template-columns:1fr 1fr}}
.credit{display:flex;flex-direction:column;gap:12px;padding:16px 18px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);color:inherit;box-shadow:var(--shadow-sm);transition:.2s}
.credit:hover{border-color:var(--line2);box-shadow:var(--shadow)}
.credit-head{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center}
.credit .s a{color:var(--a);text-decoration:none;font-weight:500}
.sp-embed{width:100%;height:152px;border:0;border-radius:12px;display:block;background:var(--card2)}
.yt-thumb{position:relative;display:block;border-radius:12px;overflow:hidden;aspect-ratio:16/9}
.yt-thumb img{width:100%;height:100%;object-fit:cover}
.yt-thumb span{position:absolute;inset:0;display:grid;place-items:center;font-size:42px;color:#fff;background:rgba(0,0,0,.25)}
.credit .yr{font-family:'Anton',Impact,sans-serif;font-size:28px;color:var(--a)}
.credit .t{font-weight:700}
.credit .s{font-size:14px;color:var(--muted)}

/* ---------- Licences ---------- */
.tiers{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.tier{position:relative;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:26px 22px;display:flex;flex-direction:column;gap:12px;transition:.25s;box-shadow:var(--shadow-sm)}
.tier:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.tier.hot{background:var(--text);color:var(--bg2);border-color:var(--text)}
.tier.hot ul{color:color-mix(in srgb,var(--bg2) 80%,transparent)}
.tier .badge{position:absolute;top:-12px;right:18px;background:var(--grad);color:#fff;font-family:'Space Mono',monospace;font-size:10px;font-weight:700;letter-spacing:2px;padding:5px 12px;border-radius:999px;text-transform:uppercase}
.tier h3{font-size:24px}
.tier .pr{font-family:'Anton',Impact,sans-serif;font-size:52px;line-height:1}
.tier .pr small{font-family:'Space Mono',monospace;font-size:11px;opacity:.7;margin-left:4px}
.tier ul{list-style:none;display:grid;gap:8px;font-size:15px;color:var(--text2)}
.tier li{display:flex;gap:10px}
.tier li::before{content:"✓";color:var(--b);font-weight:700}
.note{margin-top:20px;padding:18px 20px;background:var(--grad-soft);border:1px solid var(--line);border-radius:var(--radius);color:var(--text2);font-size:15px}
.note a{color:var(--a);font-weight:500}

/* ---------- Contact ---------- */
.contacts{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.ct{display:flex;align-items:center;gap:16px;text-decoration:none;color:inherit;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;transition:.2s;box-shadow:var(--shadow-sm)}
a.ct:hover{border-color:var(--a);transform:translateY(-2px);box-shadow:var(--shadow)}
.ct .ic{width:48px;height:48px;border-radius:14px;background:var(--grad);display:grid;place-items:center;color:#fff;font-size:20px;flex:none}
.ct small{display:block;font-family:'Space Mono',monospace;color:var(--muted);font-size:10px;letter-spacing:2px;text-transform:uppercase}
.ct span{font-weight:700;word-break:break-all}

/* ---------- Barre d'onglets mobile ---------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--bar);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);
  border-top:1px solid var(--line);display:flex;justify-content:space-around;padding:6px 4px calc(6px + var(--safe-b));height:calc(var(--nav-h) + var(--safe-b))}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none;color:var(--muted);font-size:10.5px;font-weight:500;border-radius:12px;transition:.2s}
.tabbar svg{width:22px;height:22px}
.tabbar a.on{color:var(--a)}
.tabbar a.on svg{stroke-width:2.3}
@media (min-width:980px){:root{--nav-h:0px}.tabbar{display:none}}

/* ---------- Lecteur audio ---------- */
.player{position:fixed;left:8px;right:8px;bottom:calc(var(--nav-h) + var(--safe-b) + 8px);z-index:25;background:var(--text);color:var(--bg2);
  border-radius:18px;box-shadow:0 20px 50px -12px rgba(10,15,50,.5);display:none;grid-template-columns:46px 1fr auto;gap:12px;align-items:center;padding:8px 12px 12px 8px;max-width:1180px;margin:0 auto;overflow:hidden}
:root[data-theme="dark"] .player{background:var(--card2);color:var(--text);border:1px solid var(--line2)}
.player.on{display:grid;animation:up .35s cubic-bezier(.2,.7,.2,1)}
@keyframes up{from{transform:translateY(30px);opacity:0}}
.player .cover{width:46px;height:46px;border-radius:10px}
.player .cover .ini{font-size:15px}
.p-info{min-width:0}
.p-title{font-family:'Anton',Impact,sans-serif;letter-spacing:.5px;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-by{font-size:12.5px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-by a{color:inherit;text-decoration:underline}
.p-ctrl{display:flex;align-items:center;gap:2px}
.p-ctrl button{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;color:inherit}
.p-ctrl button:hover{background:rgba(255,255,255,.12)}
.p-ctrl svg{width:18px;height:18px}
.p-ctrl .main{background:var(--grad);color:#fff;width:44px;height:44px}
.p-time{font-family:'Space Mono',monospace;font-size:11px;opacity:.7;min-width:80px;text-align:right;display:none}
.p-bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.15);cursor:pointer}
.p-bar i{display:block;height:100%;width:0;background:var(--grad)}
.p-buy{display:none!important}
@media (min-width:700px){.p-time{display:inline-block}.p-buy{display:inline-flex!important}.player{grid-template-columns:46px 1fr auto auto auto;left:16px;right:16px}}
@media (min-width:980px){.player{bottom:16px}}

/* ---------- Modale ---------- */
.modal{position:fixed;inset:0;z-index:50;display:none;align-items:flex-end;justify-content:center;background:rgba(10,14,40,.45);backdrop-filter:blur(6px)}
.modal.on{display:flex;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.sheet{width:100%;max-width:540px;max-height:92vh;overflow:auto;background:var(--bg2);border-radius:24px 24px 0 0;padding:24px 20px calc(22px + var(--safe-b));animation:up .3s cubic-bezier(.2,.7,.2,1)}
@media (min-width:600px){.modal{align-items:center;padding:20px}.sheet{border-radius:24px}}
.sheet-head{display:flex;gap:14px;align-items:center;margin-bottom:18px}
.sheet-head h3{font-size:28px;line-height:1}
.x{margin-left:auto;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--card2);flex:none}
.lic-opt{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:15px;border:1.5px solid var(--line);border-radius:14px;margin-bottom:8px;cursor:pointer;transition:.15s;background:var(--card)}
.lic-opt:hover{border-color:var(--line2)}
.lic-opt:has(input:checked){border-color:var(--a);background:color-mix(in srgb,var(--a) 6%,var(--card))}
.lic-opt input{accent-color:var(--a);width:18px;height:18px}
.lic-opt b{font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:19px;letter-spacing:.5px}
.lic-opt small{display:block;color:var(--muted);font-size:13px}
.lic-opt .p{font-family:'Anton',Impact,sans-serif;font-size:24px}

/* ---------- Formulaires ---------- */
.field{display:flex;flex-direction:column;gap:6px}
.field>span,.lbl{font-family:'Space Mono',monospace;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.field>span em{color:var(--c);font-style:normal}
.in{width:100%;background:var(--card);border:1.5px solid var(--line2);color:var(--text);border-radius:12px;padding:12px 13px;font:inherit;font-size:15px;transition:.15s;appearance:none;-webkit-appearance:none}
select.in{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:30px}
.in:focus{outline:none;border-color:var(--a);box-shadow:0 0 0 4px color-mix(in srgb,var(--a) 18%,transparent)}
textarea.in{min-height:110px;resize:vertical;line-height:1.6}
.filters .in{padding:10px 12px;font-size:14px}
.form{display:grid;gap:14px}
.row2{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.row3{display:grid;gap:12px;grid-template-columns:repeat(3,1fr)}
@media (max-width:560px){.row3{grid-template-columns:1fr 1fr}.row2.stack{grid-template-columns:1fr}}
.drop{position:relative;display:flex;align-items:center;gap:12px;border:1.5px dashed var(--line2);border-radius:14px;padding:14px;background:var(--card);cursor:pointer;transition:.15s}
.drop:hover,.drop.over{border-color:var(--a);background:var(--card2)}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop .ic{width:40px;height:40px;border-radius:12px;background:var(--card2);display:grid;place-items:center;flex:none;font-size:16px}
.drop b{display:block;font-size:14px;font-weight:700}
.drop small{color:var(--muted);font-size:12.5px;word-break:break-all}
.drop.has{border-style:solid;border-color:color-mix(in srgb,var(--ok) 50%,transparent)}
.drop.has .ic{background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok)}
.lic-grid{display:grid;gap:8px}
.lic-row{display:grid;grid-template-columns:auto 1fr 110px;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.lic-row input[type=checkbox]{accent-color:var(--a);width:18px;height:18px}
.lic-row .in{padding:8px 10px;text-align:right}
.seg{display:inline-flex;border:1.5px solid var(--line2);border-radius:999px;padding:3px;gap:2px;flex-wrap:wrap;background:var(--card)}
.seg label{cursor:pointer}.seg input{display:none}
.seg span{display:block;font-family:'Space Mono',monospace;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:8px 12px;border-radius:999px;color:var(--muted)}
.seg input:checked+span{background:var(--text);color:var(--bg2)}
.form-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:6px}
.err-msg{color:var(--err);font-size:14px;font-weight:500}
.hint{font-size:13.5px;color:var(--muted)}
.hint code{font-family:'Space Mono',monospace;font-size:12px;color:var(--text);background:var(--card2);padding:1px 6px;border-radius:4px}
.fr-en{display:grid;gap:12px;grid-template-columns:1fr 1fr}
@media (max-width:700px){.fr-en{grid-template-columns:1fr}}
.flag{font-style:normal;background:var(--card2);color:var(--text);padding:1px 6px;border-radius:4px;margin-left:4px;font-size:9px}

/* ---------- Espace membre / admin ---------- */
.auth-box{max-width:440px;margin:50px auto 0;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:30px 24px;box-shadow:var(--shadow)}
.auth-box h2{font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:42px;letter-spacing:1px;line-height:1;margin:10px 0 6px}
.dash-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:34px 0 18px}
.dash-head h2{font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:clamp(32px,7vw,52px);letter-spacing:1px;line-height:1}
.dash-head h2 span{color:var(--a)}
.dash-head .grow{flex:1;min-width:0}
.tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:18px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{font-size:14px;font-weight:500;padding:9px 15px;border-radius:999px;background:var(--card);border:1px solid var(--line);color:var(--text2);white-space:nowrap}
.tabs button.on{background:var(--text);color:var(--bg2);border-color:var(--text)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:18px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-sm)}
.kpi b{display:block;font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:32px;line-height:1.1}
.kpi span{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase}
.list{display:flex;flex-direction:column;gap:8px}
.item{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;box-shadow:var(--shadow-sm)}
.item .t{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .s{font-size:13px;color:var(--muted);display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:3px}
.item .acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.item.dim{opacity:.6}
@media (max-width:620px){.item{grid-template-columns:auto 1fr}.item .acts{grid-column:1/-1;justify-content:flex-start}}
.card-box{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm)}
.card-box h3{font-size:24px}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.toolbar .grow{flex:1;min-width:160px}

/* ---------- Divers ---------- */
.toasts{position:fixed;top:calc(74px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);z-index:60;display:grid;gap:8px;width:min(92vw,420px)}
.toast{background:var(--text);color:var(--bg2);border-radius:14px;padding:12px 16px;font-size:14px;font-weight:500;box-shadow:0 20px 40px -10px rgba(0,0,0,.35);animation:in .25s;border-left:4px solid var(--ok)}
.toast.err{border-left-color:var(--err)}
.spin{width:24px;height:24px;border:3px solid var(--line2);border-top-color:var(--a);border-radius:50%;animation:sp .7s linear infinite;margin:40px auto}
@keyframes sp{to{transform:rotate(360deg)}}
footer{max-width:1180px;margin:80px auto 0;padding:28px 18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase}
footer a{text-decoration:none}footer a:hover{color:var(--text)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* =====================================================================
   Page perso des membres (couleurs, bannière, menu, liens) + éditeur
   ===================================================================== */
.pcover.img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pcover.img::after{display:none}
.pmenu{position:sticky;top:calc(64px + env(safe-area-inset-top,0px));z-index:5;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:26px 0 0;padding:8px;
  background:var(--bar);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:999px;width:max-content;max-width:100%}
.pmenu::-webkit-scrollbar{display:none}
.pmenu button{font-size:14px;font-weight:700;padding:9px 16px;border-radius:999px;color:var(--text2);white-space:nowrap}
.pmenu button:hover{background:var(--grad);color:#fff}
.psec{scroll-margin-top:140px}
.plinks{display:grid;gap:10px;max-width:640px}
.plink{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-radius:16px;background:var(--card);border:1.5px solid var(--line);
  text-decoration:none;color:var(--text);font-weight:700;transition:.2s;box-shadow:var(--shadow-sm)}
.plink:hover{background:var(--grad);color:#fff;border-color:transparent;transform:translateY(-2px)}
.plink i{font-style:normal;opacity:.7}

/* Éditeur « Ma page » */
.page-edit{display:grid;gap:18px;align-items:start}
@media (min-width:1100px){.page-edit{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.preview-wrap{position:sticky;top:80px}}
.swatches{display:flex;flex-wrap:wrap;gap:10px}
.sw{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer}
.sw input{display:none}
.sw i{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-style:normal;font-size:20px;color:var(--muted);transition:.15s;box-shadow:var(--shadow-sm)}
.sw-custom{background:var(--card2);border:1.5px dashed var(--line2)}
.sw small{font-size:11px;color:var(--muted)}
.sw input:checked+i{outline:3px solid var(--text);outline-offset:3px}
.custom-cols{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
.custom-cols[hidden]{display:none}
.colpick{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}
.colpick input{width:44px;height:36px;border:1.5px solid var(--line2);border-radius:10px;padding:2px;background:var(--card);cursor:pointer}
.sec-list{display:grid;gap:6px}
.sec-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.sec-row label{display:flex;align-items:center;gap:10px;font-weight:500;cursor:pointer}
.sec-row input{accent-color:var(--a);width:18px;height:18px}
.links-ed{display:grid;gap:8px}
.preview{border:1px solid var(--line2);border-radius:20px;padding:14px;background:var(--bg);color:var(--text);max-height:78vh;overflow:auto;box-shadow:var(--shadow)}
.preview>*{zoom:.62}
.preview .pmenu{position:static}
.preview a,.preview button{pointer-events:none}
.force-dark{--bg:#060914;--bg2:#0b0f1f;--card:#0d1224;--card2:#131a33;--line:#1c2650;--line2:#2a3770;--text:#eef2ff;--text2:#c9d1f0;--muted:#8a96c4;--bar:rgba(6,9,20,.86)}
.force-light{--bg:#f6f7fb;--bg2:#fff;--card:#fff;--card2:#f1f3fa;--line:#e3e7f2;--line2:#cfd6ea;--text:#0c1330;--text2:#2b3557;--muted:#5d6789;--bar:rgba(255,255,255,.86)}

/* =====================================================================
   V4 — Finition visuelle : fond en dégradés, animations, reliefs
   ===================================================================== */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(60vw 50vh at 8% -5%,color-mix(in srgb,var(--a) 16%,transparent),transparent 70%),
             radial-gradient(50vw 45vh at 100% 20%,color-mix(in srgb,var(--c) 13%,transparent),transparent 70%),
             radial-gradient(60vw 50vh at 40% 110%,color-mix(in srgb,var(--b) 14%,transparent),transparent 70%)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:radial-gradient(color-mix(in srgb,var(--text) 9%,transparent) 1px,transparent 1px);background-size:22px 22px;
  mask-image:linear-gradient(180deg,#000,transparent 55%);-webkit-mask-image:linear-gradient(180deg,#000,transparent 55%)}

/* Logo */
.logo .dot{animation:pulse 2.6s ease-in-out infinite;box-shadow:0 0 0 0 color-mix(in srgb,var(--b) 60%,transparent)}
@keyframes pulse{50%{box-shadow:0 0 0 8px transparent;transform:rotate(225deg)}}

/* Hero */
.hero{position:relative}
.hero::before{content:"";position:absolute;left:-10%;top:0;width:60%;height:90%;z-index:-1;border-radius:50%;filter:blur(80px);opacity:.32;
  background:conic-gradient(from 0deg,var(--a),var(--b),var(--c),var(--a));animation:spin 18s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hero h1{color:transparent;-webkit-text-stroke:2.5px var(--text);text-shadow:none}
.hero h1 .l2{-webkit-text-stroke:0;background-size:220% 100%;animation:slide 7s ease-in-out infinite alternate;filter:drop-shadow(0 14px 30px color-mix(in srgb,var(--b) 35%,transparent))}
@keyframes slide{to{background-position:100% 0}}
.hero .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:440px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px 12px;min-width:0;box-shadow:var(--shadow-sm)}
.stat span{font-size:9px;letter-spacing:1.5px}
.hero .eyebrow{border-radius:16px;line-height:1.5}

/* Mosaïque & cartes membres : motif + lettre en contour quand il n'y a pas de photo */
.mosaic a{animation:float 6s ease-in-out infinite}
.mosaic a:nth-child(2n){animation-delay:-2s}.mosaic a:nth-child(3n){animation-delay:-4s}
@keyframes float{50%{translate:0 -8px}}
.mosaic a::before,.mcard::before{content:"";position:absolute;inset:0;z-index:0;opacity:.35;mix-blend-mode:overlay;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 3px,transparent 3px 11px);
  mask-image:linear-gradient(0deg,#000 0,transparent 60%);-webkit-mask-image:linear-gradient(0deg,#000 0,transparent 60%)}
.mosaic .ph,.mcard .ph{color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.95);z-index:1}
.mcard .ph{font-size:150px;-webkit-text-stroke:3px rgba(255,255,255,.95);transition:.5s cubic-bezier(.2,.7,.2,1)}
.mcard:hover .ph{transform:scale(1.12) rotate(-4deg);color:rgba(255,255,255,.95)}
.mcard img{transition:.6s cubic-bezier(.2,.7,.2,1)}
.mcard:hover img{transform:scale(1.07)}
.mcard .info::after{content:"→";position:absolute;right:0;bottom:2px;width:34px;height:34px;border-radius:50%;background:#fff;color:#0c1330;display:grid;place-items:center;font-weight:700;
  opacity:0;transform:translateX(-8px);transition:.3s}
.mcard:hover .info::after{opacity:1;transform:none}
.mcard{border-radius:26px}

/* Bandeau */
.marquee span:nth-child(even){color:transparent;-webkit-text-stroke:1.2px currentColor;-webkit-text-stroke-color:var(--bg2)}
:root[data-theme="dark"] .marquee span:nth-child(even){-webkit-text-stroke-color:#fff}

/* Titres de section */
.sec-head h2{position:relative;display:inline-block;padding-bottom:14px}
.sec-head h2::after{content:"";position:absolute;left:0;bottom:0;width:72px;height:6px;border-radius:6px;background:var(--grad)}

/* Cartes : bord dégradé et relief au survol */
.service,.tier,.fact,.story,.ct,.kpi,.panel{position:relative;border-radius:24px}
.service::after,.tier:not(.hot)::after,.ct::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;background:var(--grad);opacity:0;transition:.3s;pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.service:hover::after,.tier:hover::after,a.ct:hover::after{opacity:1}
.service .ic{transition:.35s cubic-bezier(.3,1.6,.5,1);box-shadow:0 10px 24px -8px color-mix(in srgb,var(--b) 70%,transparent)}
.service:hover .ic{transform:translateY(-4px) rotate(-8deg) scale(1.08)}
.fact.wide{overflow:hidden}
.fact.wide::after{content:"";position:absolute;right:-30px;top:-30px;width:150px;height:150px;border-radius:50%;border:26px solid rgba(255,255,255,.16)}
.tier.hot{background:linear-gradient(160deg,#0c1330,#2a1a5e 60%,#5b1f6b);color:#fff;border-color:transparent;box-shadow:0 24px 50px -20px color-mix(in srgb,var(--b) 70%,transparent);transform:translateY(-6px)}
.tier.hot ul{color:rgba(255,255,255,.82)}
.tier.hot:hover{transform:translateY(-10px)}
.tier .pr{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.tier.hot .pr{background:linear-gradient(120deg,#fff,#ffd0ea);-webkit-background-clip:text;background-clip:text}

/* Boutons : reflet */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transition:none}
.btn:hover::after{left:130%;transition:left .7s}
.btn.ghost::after,.btn.danger::after{display:none}

/* Beats */
.beat{border-radius:20px}
.beat .cover{box-shadow:0 8px 18px -8px rgba(20,30,90,.45)}
.beat.playing{background:linear-gradient(90deg,color-mix(in srgb,var(--a) 8%,var(--card)),var(--card))}

/* États vides : égaliseur animé */
.empty{border-radius:26px;background:linear-gradient(180deg,var(--card),color-mix(in srgb,var(--card) 60%,transparent))}
.empty::after{content:"";display:block;width:64px;height:22px;margin:18px auto 0;opacity:.7;
  background:linear-gradient(var(--a),var(--a)) 0 100%/8px 40%,linear-gradient(var(--b),var(--b)) 14px 100%/8px 100%,linear-gradient(var(--c),var(--c)) 28px 100%/8px 60%,linear-gradient(var(--b),var(--b)) 42px 100%/8px 85%,linear-gradient(var(--a),var(--a)) 56px 100%/8px 50%;
  background-repeat:no-repeat;animation:eqb 1.2s ease-in-out infinite alternate}
@keyframes eqb{to{background-size:8px 90%,8px 45%,8px 100%,8px 40%,8px 95%}}

/* Bloc d'appel */
.cta-band{background-size:180% 180%;animation:slide 9s ease-in-out infinite alternate;box-shadow:0 30px 60px -28px color-mix(in srgb,var(--b) 80%,transparent)}

/* Pied de page : grand nom */
.bigmark{max-width:1180px;margin:70px auto -40px;padding:0 18px;font-family:'Anton',Impact,sans-serif;font-size:clamp(70px,17vw,230px);line-height:.85;letter-spacing:2px;white-space:nowrap;overflow:hidden;
  color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--text) 16%,transparent);user-select:none;text-align:center}
footer{margin-top:40px}

/* Barre d'onglets flottante (mobile) */
@media (max-width:979px){
  .tabbar{left:10px;right:10px;bottom:calc(10px + var(--safe-b));height:var(--nav-h);padding:6px;border:1px solid var(--line);border-radius:24px;box-shadow:0 16px 40px -12px rgba(20,30,90,.35)}
  .tabbar a.on{background:var(--grad);color:#fff}
  .player{bottom:calc(var(--nav-h) + var(--safe-b) + 20px);left:10px;right:10px}
  body{padding-bottom:calc(var(--nav-h) + var(--player-h) + var(--safe-b) + 36px)}
}
.topnav a.on{background:var(--grad);color:#fff!important}

/* Apparition au défilement */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
.rv.rv-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}
.mcard .ph{place-items:start center;padding-top:16%}
@media (max-width:759px){.mcard .ph{font-size:104px;-webkit-text-stroke-width:2.5px}.mcard .name{font-size:22px}}
.crfilter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.crfilter button{font-size:14px;font-weight:600;padding:9px 15px;border-radius:999px;background:var(--card);border:1px solid var(--line);color:var(--text2);box-shadow:var(--shadow-sm);transition:.2s}
.crfilter button small{font-family:'Space Mono',monospace;font-size:11px;opacity:.6;margin-left:4px}
.crfilter button.on,.crfilter button:hover{background:var(--grad);color:#fff;border-color:transparent}
.more-wrap{display:flex;justify-content:center;margin-top:18px}
/* Paiement / page merci */
.pay-badges{text-align:center;font-size:12px;color:var(--muted);margin-top:12px}
.merci{max-width:620px;margin:50px auto 0;text-align:center}
.merci .lead{margin:10px auto 24px}
.merci h1{font-size:clamp(56px,12vw,96px);margin:8px 0}
.merci-ok{width:76px;height:76px;margin:0 auto 14px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:36px;box-shadow:0 16px 40px -12px color-mix(in srgb,var(--b) 70%,transparent);animation:pop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{from{transform:scale(.3);opacity:0}}
.dl-list{display:grid;gap:10px;text-align:left}
.dl{display:flex;align-items:center;gap:14px;text-align:left;padding:16px 18px;border-radius:18px;background:var(--card);border:1.5px solid var(--line);text-decoration:none;color:inherit;font:inherit;cursor:pointer;box-shadow:var(--shadow-sm);transition:.2s;width:100%}
.dl:hover{border-color:var(--a);transform:translateY(-2px)}
.dl .ic{width:44px;height:44px;border-radius:12px;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:20px;flex:none}
.dl b{display:block}.dl small{color:var(--muted)}
.order-meta{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin:18px 0;font-size:14px;color:var(--muted)}
/* J'écoute en ce moment */
.ecoute{display:grid;gap:12px}
@media (min-width:900px){.ecoute{grid-template-columns:repeat(3,1fr)}}
.ec-card{border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm)}
.ec-plain{height:152px;border-radius:14px;padding:18px;display:flex;flex-direction:column;justify-content:space-between;color:#fff}
.ec-plain b{font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:30px;letter-spacing:1px;line-height:1}
.ec-plain .chip{align-self:flex-start;background:rgba(255,255,255,.25);color:#fff}
.eq-mini{display:inline-flex;gap:3px;align-items:flex-end;height:22px}
.eq-mini i{width:4px;background:var(--grad);border-radius:2px;animation:eqm 1s ease-in-out infinite}
.eq-mini i:nth-child(2){animation-delay:-.35s}.eq-mini i:nth-child(3){animation-delay:-.7s}
@keyframes eqm{0%,100%{height:30%}50%{height:100%}}

/* =====================================================================
   Fonds animés & curseurs des pages membres
   ===================================================================== */
.pbg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;border-radius:inherit}
.pbg.fixed{position:fixed;z-index:-1;border-radius:0}
.pbg canvas{width:100%;height:100%;display:block}
#v-profil a,#v-profil button,.preview a{cursor:var(--cur,pointer)}
.preview{position:relative;isolation:isolate}
.preview>.pbg{zoom:1}
.preview>*:not(.pbg){position:relative;z-index:1}
.preview .pmenu{position:relative}
/* Aurore */
.pbg-aurore i{position:absolute;width:55vmax;height:55vmax;border-radius:50%;filter:blur(70px);opacity:.42;mix-blend-mode:normal;animation:aur 16s ease-in-out infinite alternate}
.pbg-aurore i:nth-child(1){background:var(--ca);left:-15%;top:-20%}
.pbg-aurore i:nth-child(2){background:var(--cb);right:-20%;top:10%;animation-duration:20s;animation-delay:-5s}
.pbg-aurore i:nth-child(3){background:var(--cc);left:20%;bottom:-30%;animation-duration:24s;animation-delay:-9s}
@keyframes aur{50%{transform:translate(12%,8%) scale(1.15)}100%{transform:translate(-8%,14%) scale(.9)}}
.preview .pbg-aurore i{width:70%;height:70%}
/* Grille néon (synthwave) */
.pbg-grille .sun{position:absolute;left:50%;top:18%;width:38vmin;height:38vmin;transform:translateX(-50%);border-radius:50%;opacity:.55;
  background:linear-gradient(180deg,var(--cc),var(--ca));-webkit-mask:repeating-linear-gradient(180deg,#000 0 14px,transparent 14px 20px);mask:repeating-linear-gradient(180deg,#000 0 14px,transparent 14px 20px)}
.pbg-grille .floor{position:absolute;left:-50%;right:-50%;bottom:-10%;height:65%;transform:perspective(380px) rotateX(62deg);transform-origin:bottom;opacity:.5;
  background-image:linear-gradient(var(--cb) 2px,transparent 2px),linear-gradient(90deg,var(--cb) 2px,transparent 2px);background-size:60px 60px;animation:gridmove 2.4s linear infinite;
  -webkit-mask:linear-gradient(0deg,#000 30%,transparent);mask:linear-gradient(0deg,#000 30%,transparent)}
@keyframes gridmove{to{background-position:0 60px}}
/* Vagues */
.pbg-vagues .wv{position:absolute;left:0;bottom:0;width:200%;height:45%;display:flex;animation:wave 18s linear infinite}
.pbg-vagues .wv svg{width:50%;height:100%}
.pbg-vagues .w2{animation-duration:26s;animation-direction:reverse;height:38%}
.pbg-vagues .w3{animation-duration:34s;height:30%}
@keyframes wave{to{transform:translateX(-50%)}}
/* Égaliseur */
.pbg-equaliseur .bars{position:absolute;left:0;right:0;bottom:0;height:55%;display:flex;align-items:flex-end;gap:6px;padding:0 6px;opacity:.35}
.pbg-equaliseur .bars i{flex:1;border-radius:6px 6px 0 0;background:linear-gradient(0deg,var(--ca),var(--cb) 60%,var(--cc));animation:eqbg 1.2s ease-in-out infinite alternate;height:20%}
@keyframes eqbg{0%{height:12%}35%{height:70%}70%{height:35%}100%{height:95%}}
/* Traînée */
.trail-dot{position:fixed;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;pointer-events:none;z-index:9999;animation:trail .65s ease-out forwards;box-shadow:0 0 12px currentColor}
@keyframes trail{to{transform:scale(.1) translateY(14px);opacity:0}}
/* Éditeur : choix fond / curseur */
.opt-grid{display:flex;flex-wrap:wrap;gap:8px}
.opt input{display:none}
.opt span{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:12px;border:1.5px solid var(--line2);background:var(--card);font-size:14px;font-weight:500;cursor:pointer;transition:.15s}
.opt input:checked+span{border-color:var(--a);background:color-mix(in srgb,var(--a) 10%,var(--card));box-shadow:0 0 0 1px var(--a)}
.opt-ico{width:20px;height:20px;border-radius:6px;background:var(--grad);display:inline-block}
.opt-ico.fx-aucun{background:var(--card2);border:1px dashed var(--line2)}
.opt-ico.fx-aurore{background:radial-gradient(circle at 30% 30%,var(--a),transparent 60%),radial-gradient(circle at 70% 70%,var(--c),transparent 60%),var(--card2)}
.opt-ico.fx-particules{background:radial-gradient(circle,var(--a) 2px,transparent 3px) 0 0/7px 7px,var(--card2)}
.opt-ico.fx-etoiles{background:radial-gradient(circle,#fff 1px,transparent 2px) 0 0/6px 6px,#141a3a}
.opt-ico.fx-grille{background:linear-gradient(var(--b) 1px,transparent 1px) 0 0/5px 5px,linear-gradient(90deg,var(--b) 1px,transparent 1px) 0 0/5px 5px,var(--card2)}
.opt-ico.fx-vagues{background:radial-gradient(120% 60% at 50% 100%,var(--a) 50%,transparent 52%),var(--card2)}
.opt-ico.fx-equaliseur{background:linear-gradient(90deg,var(--a) 25%,transparent 25% 37%,var(--b) 37% 62%,transparent 62% 75%,var(--c) 75%) bottom/100% 70% no-repeat,var(--card2)}
.opt-ico.fx-pluie{background:var(--card2)}
.opt-ico.fx-pluie::after{content:"♪";display:grid;place-items:center;height:100%;font-size:13px;color:var(--a)}
@media (prefers-reduced-motion:reduce){.pbg *{animation:none!important}}
.pbg-grille .sun{opacity:.35}
.preview .pbg-grille .sun{width:32%;height:auto;aspect-ratio:1}

/* ----- Nouveaux fonds ----- */
/* Pulse : ondes depuis le centre */
.pbg-pulse span{position:absolute;left:50%;top:50%;width:20vmax;height:20vmax;margin:-10vmax 0 0 -10vmax;border-radius:50%;border:3px solid var(--ca);opacity:0;animation:pulse-ring 4.8s cubic-bezier(.2,.6,.3,1) infinite}
.pbg-pulse span:nth-child(2){border-color:var(--cb);animation-delay:1.2s}.pbg-pulse span:nth-child(3){border-color:var(--cc);animation-delay:2.4s}.pbg-pulse span:nth-child(4){animation-delay:3.6s}
.pbg-pulse b{position:absolute;left:50%;top:50%;width:14vmax;height:14vmax;margin:-7vmax 0 0 -7vmax;border-radius:50%;background:radial-gradient(circle,var(--cb),transparent 70%);opacity:.35;filter:blur(20px);animation:pulse-core 1.2s ease-in-out infinite}
@keyframes pulse-ring{0%{transform:scale(.2);opacity:.7}100%{transform:scale(5);opacity:0}}
@keyframes pulse-core{50%{transform:scale(1.25);opacity:.55}}
/* Art glow : cône de couleurs qui tourne */
.pbg-glow .cone{position:absolute;left:50%;top:50%;width:150vmax;height:150vmax;margin:-75vmax 0 0 -75vmax;background:conic-gradient(from 0deg,var(--ca),var(--cb),var(--cc),var(--ca));filter:blur(110px);opacity:.38;animation:spin 22s linear infinite}
.pbg-glow i{position:absolute;width:40vmax;height:40vmax;border-radius:50%;filter:blur(80px);opacity:.35;background:var(--cc);left:5%;top:55%;animation:aur 14s ease-in-out infinite alternate}
.pbg-glow i+i{background:var(--ca);left:60%;top:0;animation-duration:18s}
/* Sous l'eau : bleu profond + rayons de lumière */
.pbg-sousmarin{background:linear-gradient(180deg,color-mix(in srgb,var(--ca) 35%,#03122b),#020a1a 70%)}
.pbg-sousmarin .rays{position:absolute;inset:-20% -10% 20%;opacity:.25;background:repeating-linear-gradient(100deg,transparent 0 60px,rgba(255,255,255,.55) 60px 75px,transparent 75px 150px);filter:blur(14px);transform-origin:top;animation:rays 9s ease-in-out infinite alternate;
  -webkit-mask:linear-gradient(180deg,#000,transparent 80%);mask:linear-gradient(180deg,#000,transparent 80%)}
@keyframes rays{to{transform:skewX(8deg) translateX(4%)}}
.pbg-sousmarin canvas{position:absolute;inset:0}
/* Espace : nébuleuse */
.pbg-espace{background:radial-gradient(ellipse at center,#0b1030,#02030b 75%)}
.pbg-espace .nebula{position:absolute;inset:-10%;opacity:.45;filter:blur(60px);animation:aur 30s ease-in-out infinite alternate;
  background:radial-gradient(35% 30% at 30% 35%,var(--ca),transparent 70%),radial-gradient(30% 25% at 70% 65%,var(--cc),transparent 70%),radial-gradient(25% 20% at 60% 30%,var(--cb),transparent 70%)}
.pbg-espace canvas{position:absolute;inset:0}
/* Orage, fumée, flammes, étoiles : base sombre */
.pbg-orage{background:linear-gradient(180deg,#0a0d1c,#151a30 60%,#0b0e1d)}
.pbg-fumee{background:radial-gradient(ellipse at bottom,#1a1c2c,#07080f 70%)}
.pbg-flammes{background:linear-gradient(0deg,color-mix(in srgb,var(--ca) 22%,#0a0505),#050308 60%)}
.pbg-filantes,.pbg-etoiles{background:radial-gradient(ellipse at top,#121838,#04050d 70%)}

/* ----- Le fond prend tout l'écran : cartes en verre dépoli ----- */
body.has-fx::before,body.has-fx::after{display:none}
body.has-fx .pbg.fixed{opacity:1}
body.has-fx .top{background:color-mix(in srgb,var(--bg) 55%,transparent)}
body.has-fx footer,body.has-fx .bigmark{position:relative}
.fx-glass .story,.fx-glass .info-row,.fx-glass .beat,.fx-glass .credit,.fx-glass .empty,.fx-glass .plink,.fx-glass .pmenu,.fx-glass .ec-card,.fx-glass .chip{
  background:color-mix(in srgb,var(--card) 58%,transparent)!important;backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);border-color:color-mix(in srgb,var(--line2) 70%,transparent)}
.fx-glass .pcover{box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.fx-glass .phead h1{text-shadow:0 4px 30px rgba(0,0,0,.35)}
.pbg-flammes{background:linear-gradient(0deg,color-mix(in srgb,var(--ca) 45%,#140404),color-mix(in srgb,var(--cb) 12%,#070308) 55%,#050308)}
.pbg-flammes::after{content:"";position:absolute;left:0;right:0;bottom:0;height:35%;background:radial-gradient(60% 100% at 50% 100%,color-mix(in srgb,var(--cc) 55%,transparent),transparent 70%);animation:flick 1.8s ease-in-out infinite alternate}
@keyframes flick{50%{opacity:.7}100%{opacity:1;transform:scaleY(1.08)}}
.pbg-fumee canvas{filter:blur(6px)}
.pbg-flammes{background:linear-gradient(0deg,#3a0c03,#160505 50%,#070306)}
.pbg-flammes::after{background:radial-gradient(60% 100% at 50% 100%,rgba(255,110,30,.55),transparent 70%)}