/* ==========================================================
   Prodige2rue — pages de compte, style Pass P2R Crew
   Utilisé par mon-espace.html et artiste.html. compte.css reste intact.
   ========================================================== */
:root{--ink:#151412;--paper:#fffdf7;--bone:#f3efe6;--muted:#6f695f;--green:#1fd26a;--green-ink:#0b7a3b;--orange:#ff922b;--red-ink:#c92a2a;--plaque:#1f3f8f;
  --disp:'Anton',Impact,'Arial Narrow Bold',sans-serif;--txt:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--bone);color:var(--ink);font-family:var(--txt);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}

/* En-tête */
.cw-header{position:sticky;top:0;z-index:50;background:var(--bone);border-bottom:2px solid var(--ink)}
.cw-header__in{display:flex;align-items:center;gap:16px;height:72px}
.cw-brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.cw-brand__mark{font-family:var(--disp);font-size:22px;letter-spacing:.04em;background:var(--green);border:2px solid var(--ink);border-radius:10px;padding:4px 10px;transform:rotate(-5deg);box-shadow:3px 3px 0 var(--ink)}
.cw-brand__name{font-weight:800;font-size:18px}
.cw-header__right{margin-left:auto;display:flex;align-items:center;gap:14px}
.cw-link{font-weight:700;font-size:15px;text-decoration:none}
.cw-link:hover{text-decoration:underline;text-underline-offset:3px}

/* Boutons */
.btn-sticker{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border:2px solid var(--ink);border-radius:12px;
  background:var(--green);color:var(--ink);font-family:var(--disp);font-size:17px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;box-shadow:3px 3px 0 var(--ink);
  cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s}
.btn-sticker:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.btn-sticker:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn-sticker:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.btn-sticker--paper{background:var(--paper)}
.btn-sticker--big{font-size:20px;padding:13px 22px;border-radius:14px}
.btn-sticker[disabled]{opacity:.55;cursor:default;transform:none}

/* Bandeau */
.cw-hero{margin:28px 0 24px;background:var(--ink);color:var(--paper);border-radius:22px;padding:30px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:30px;align-items:center}
.cw-hero h1{margin:0;font-family:var(--disp);font-weight:400;font-size:clamp(48px,7vw,84px);line-height:.9;text-transform:uppercase}
.cw-hero__sub{margin:12px 0 0;font-size:16px;color:rgba(255,253,247,.72);max-width:440px}

/* Carte de membre */
.m-pass{background:var(--paper);color:var(--ink);border:2px solid var(--paper);border-radius:18px;box-shadow:7px 7px 0 var(--green);overflow:hidden;transform:rotate(2deg)}
.band{display:grid;grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr);align-items:center;gap:10px;background:var(--ink);color:var(--paper);padding:11px 15px;
  font-family:var(--disp);font-size:15px;letter-spacing:.06em;text-transform:uppercase;border-bottom:2px solid var(--ink)}
.band > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.band > span:last-child{text-align:right}
.band b{font-weight:400;color:var(--green)}
.band > .hole{width:46px;height:10px;border-radius:10px;background:var(--bone);box-shadow:inset 0 2px 3px rgba(0,0,0,.45)}
.m-pass__body{padding:16px;display:flex;flex-direction:column;gap:12px}
.m-pass__id{display:flex;align-items:center;gap:12px;min-width:0}
.av{flex:none;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;border:3px solid var(--ink);background:hsl(var(--h,140) 80% 62%);
  font-family:var(--disp);font-size:22px;transform:rotate(-7deg);box-shadow:2px 2px 0 var(--ink)}
.m-pass__who{min-width:0}
.m-pass__name{margin:0;font-family:var(--disp);font-size:28px;line-height:1;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-pass__mail{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plaque{align-self:flex-start;display:inline-flex;flex-direction:column;align-items:center;padding:5px 12px 6px;border-radius:7px;background:var(--plaque);color:#fff;
  box-shadow:inset 0 0 0 2px var(--plaque),inset 0 0 0 4px #fff;border:1.5px solid #13295f}
.plaque small{font-size:9px;font-weight:600;letter-spacing:.14em;opacity:.8;line-height:1.2}
.plaque span{font-weight:800;font-size:14px;letter-spacing:.06em;text-transform:uppercase;line-height:1.15}
.stickers{display:flex;flex-wrap:wrap;gap:6px}
.st{display:inline-block;padding:3px 9px;border:2px solid var(--ink);border-radius:8px;background:var(--c,#fff);font-weight:800;font-size:12.5px;box-shadow:2px 2px 0 var(--ink);
  transform:rotate(var(--r,0deg));white-space:nowrap}
.st:nth-child(3n+1){--r:-3deg}.st:nth-child(3n+2){--r:2deg}.st:nth-child(3n){--r:-1deg}
.stickers__none{font-size:13px;color:var(--muted);font-style:italic}

/* Message */
.cw-msg{margin:0 0 20px;padding:10px 16px;border:2px solid var(--ink);border-radius:12px;box-shadow:3px 3px 0 var(--ink);font-family:var(--disp);font-size:18px;letter-spacing:.03em;
  text-transform:uppercase;display:inline-block;transform:rotate(-1deg)}
.cw-msg--ok{background:var(--green)}
.cw-msg--err{background:#ff8787}

/* Panneaux */
.panel{background:var(--paper);border:2px solid var(--ink);border-radius:20px;box-shadow:6px 6px 0 var(--ink);padding:24px;margin-bottom:28px}
.panel__head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.panel h2{margin:0;font-family:var(--disp);font-weight:400;font-size:clamp(32px,4vw,44px);line-height:.95;text-transform:uppercase}
.panel__sub{margin:6px 0 0;color:var(--muted);font-size:15px}
.dirty{padding:3px 10px;border:3px solid #c2410c;border-radius:8px;color:#c2410c;font-family:var(--disp);font-size:16px;letter-spacing:.06em;text-transform:uppercase;transform:rotate(-6deg);background:rgba(255,146,43,.1)}

.picker{display:flex;flex-wrap:wrap;gap:12px}
.g-toggle{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border:2px solid var(--ink);border-radius:12px;background:var(--paper);
  font-family:var(--disp);font-size:20px;letter-spacing:.03em;text-transform:uppercase;box-shadow:3px 3px 0 var(--ink);transform:rotate(var(--r,0deg));transition:background .15s,transform .15s}
.g-toggle:nth-child(3n+1){--r:-2deg}.g-toggle:nth-child(3n+2){--r:1.5deg}.g-toggle:nth-child(3n){--r:-.5deg}
.g-toggle:hover{transform:rotate(var(--r)) translateY(-2px)}
.g-toggle[aria-pressed="true"]{background:var(--c,#fff);transform:rotate(var(--r)) scale(1.06)}
.g-toggle[aria-pressed="true"]::before{content:"✓"}
.g-toggle:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.panel__foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px;padding-top:20px;border-top:2px dashed var(--ink)}
.panel__foot span{font-size:14px;color:var(--muted)}
.loading{color:var(--muted);font-size:15px}

/* Setlist */
.setlist{background:var(--ink);color:var(--paper);border-color:var(--ink);box-shadow:6px 6px 0 var(--green);padding:0;overflow:hidden}
.setlist .panel__head{padding:24px 24px 18px;margin:0;border-bottom:2px dashed rgba(255,253,247,.3)}
.setlist .panel__sub{color:rgba(255,253,247,.7)}
.setlist .btn-sticker{box-shadow:3px 3px 0 var(--paper)}
.set-list{list-style:none;margin:0;padding:10px 14px 16px}
.set-row{display:grid;grid-template-columns:48px 50px minmax(0,1fr) auto auto;align-items:center;gap:14px;width:100%;padding:11px 10px;border-radius:14px;box-sizing:border-box}
button.set-row{all:unset;box-sizing:border-box;display:grid;grid-template-columns:48px 50px minmax(0,1fr) auto auto;align-items:center;gap:14px;width:100%;padding:11px 10px;border-radius:14px;cursor:pointer;transition:background .15s}
button.set-row:hover{background:rgba(255,253,247,.07)}
button.set-row:focus-visible{outline:3px solid var(--green);outline-offset:0}
.set-row.is-playing{background:rgba(31,210,106,.14)}
.set-row__n{font-family:var(--disp);font-size:30px;line-height:1;color:rgba(255,253,247,.4)}
.set-row.is-playing .set-row__n{color:var(--green)}
.cover{position:relative;flex:none;width:50px;height:50px;display:grid;place-items:center;overflow:hidden;border:2px solid var(--paper);border-radius:11px;background:hsl(var(--h,140) 80% 62%);
  font-family:var(--disp);font-size:17px;color:var(--ink)}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.set-row__txt{min-width:0}
.set-row__txt strong{display:block;font-family:var(--disp);font-weight:400;font-size:23px;line-height:1.05;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.set-row__txt span{font-size:14px;color:rgba(255,253,247,.65)}
.dur{font-weight:800;font-size:13px;padding:2px 8px;border-radius:6px;background:var(--paper);color:var(--ink);font-variant-numeric:tabular-nums}
.set-row__btn{width:42px;height:42px;border-radius:50%;background:var(--green);color:var(--ink);border:2px solid var(--paper);display:grid;place-items:center}
.set-row .i-pause{display:none}
.set-row.is-playing .i-play{display:none}
.set-row.is-playing .i-pause{display:block}
.set-empty{margin:14px 10px 10px;padding:30px 16px;text-align:center;border:2px dashed rgba(255,253,247,.4);border-radius:16px;color:rgba(255,253,247,.72)}
.set-empty strong{display:block;font-family:var(--disp);font-weight:400;font-size:24px;text-transform:uppercase;color:var(--paper);margin-bottom:4px}

/* Lecteur */
.player{position:fixed;left:50%;bottom:16px;z-index:80;width:min(720px,calc(100% - 24px));transform:translate(-50%,140%);visibility:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1);
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:10px 14px 10px 10px;background:var(--paper);border:2px solid var(--ink);border-radius:18px;box-shadow:6px 6px 0 var(--ink)}
.player.is-on{transform:translate(-50%,0);visibility:visible}
.player .cover{width:52px;height:52px;border-color:var(--ink)}
.player__txt{min-width:0}
.player__title{font-family:var(--disp);font-size:21px;line-height:1.05;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player__artist{font-size:13.5px;font-weight:700;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player__error{font-size:12.5px;font-weight:700;color:var(--red-ink)}
.player__bar{position:relative;height:8px;margin-top:7px;border-radius:6px;background:#e7e1d4;cursor:pointer;touch-action:none}
.player__fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:6px;background:var(--green);border-right:2px solid var(--ink)}
.player__time{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:3px}
.player__ctrls{display:flex;align-items:center;gap:6px}
.p-btn{all:unset;cursor:pointer;width:40px;height:40px;border-radius:50%;display:grid;place-items:center}
.p-btn:hover{background:var(--bone)}
.p-btn:disabled{opacity:.35;cursor:default}
.p-btn--main{width:50px;height:50px;background:var(--green);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.p-btn--main:hover{background:var(--green)}
.p-btn .i-pause{display:none}
.player.is-playing .p-btn--main .i-play{display:none}
.player.is-playing .p-btn--main .i-pause{display:block}
body.has-player main{padding-bottom:120px}


/* ---------- Profil (étape 1) ---------- */
.av{position:relative;overflow:hidden}
.av img,.av svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
button.av{all:unset;box-sizing:border-box;flex:none;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;border:3px solid var(--ink);background:hsl(var(--h,140) 80% 62%);
  font-family:var(--disp);font-size:22px;transform:rotate(-7deg);box-shadow:2px 2px 0 var(--ink);cursor:pointer;position:relative;overflow:hidden}
button.av:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.av__cam{position:absolute;inset:0;display:grid;place-items:center;background:rgba(21,20,18,.55);color:#fff;opacity:0;transition:opacity .15s}
button.av:hover .av__cam,button.av:focus-visible .av__cam{opacity:1}
.m-pass__since{font-size:12.5px;font-weight:700;color:var(--muted)}

/* Onglets */
.tabs{display:flex;gap:10px;margin:0 0 22px;overflow-x:auto;padding:4px 4px 8px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{all:unset;flex:none;cursor:pointer;padding:9px 16px;border:2px solid var(--ink);border-radius:12px;background:var(--paper);font-family:var(--disp);font-size:19px;letter-spacing:.04em;
  text-transform:uppercase;box-shadow:3px 3px 0 var(--ink);transition:background .15s,transform .15s}
.tab:hover{transform:translateY(-1px)}
.tab[aria-selected="true"]{background:var(--ink);color:var(--paper);box-shadow:3px 3px 0 var(--green);transform:rotate(-2deg)}
.tab:focus-visible{outline:3px solid var(--green);outline-offset:3px}

/* Formulaires */
.form{display:grid;gap:16px;max-width:560px}
.form--row{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field--full{grid-column:1/-1}
.field label{font-weight:800;font-size:14.5px}
.field small{font-size:13px;color:var(--muted)}
.input{box-sizing:border-box;width:100%;padding:12px 14px;border:2px solid var(--ink);border-radius:12px;background:#fff;color:var(--ink);font-family:var(--txt);font-size:16px;margin:0}
.input:focus{outline:none;box-shadow:0 0 0 3px var(--green)}
.input[readonly]{background:var(--bone);color:var(--muted)}
.form-err{margin:0;padding:9px 12px;border:2px solid var(--red-ink);border-radius:10px;background:#fff0f0;color:var(--red-ink);font-weight:700;font-size:14px}
.form__actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

/* Photo */
.ph{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-bottom:26px;padding-bottom:24px;border-bottom:2px dashed var(--ink)}
.ph__preview{position:relative;flex:none;width:136px;height:136px;border-radius:50%;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);overflow:hidden;
  display:grid;place-items:center;background:hsl(var(--h,140) 80% 62%);font-family:var(--disp);font-size:48px;transform:rotate(-4deg)}
.ph__preview img,.ph__preview svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ph__note{margin:0;padding:8px 12px;border:2px dashed var(--ink);border-radius:10px;background:var(--bone);font-size:13px;font-weight:600;max-width:460px}
.ph__preview.is-pending{box-shadow:4px 4px 0 var(--green)}
.ph__side{display:flex;flex-direction:column;gap:12px;min-width:0}
.ph__btns{display:flex;gap:10px;flex-wrap:wrap}
.ph__help{margin:0;font-size:13px;color:var(--muted)}
.sr-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.btn-sticker--danger{background:var(--paper);color:var(--red-ink)}
.btn-sticker--danger:hover{background:#ff8787;color:var(--ink)}
.btn-sticker--red{background:#ff6b6b}

/* Zone de suppression */
.danger{border-color:var(--red-ink);box-shadow:6px 6px 0 var(--red-ink)}
.danger h2{color:var(--red-ink)}
.danger__list{margin:0 0 16px;padding-left:20px;font-size:14.5px}

/* Toast */
.toast{position:fixed;left:50%;top:86px;z-index:90;transform:translate(-50%,-12px) rotate(-1deg);opacity:0;pointer-events:none;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);
  padding:10px 16px;border-radius:12px;font-family:var(--disp);font-size:18px;letter-spacing:.03em;text-transform:uppercase;transition:opacity .2s,transform .2s;max-width:calc(100vw - 32px)}
.toast.is-on{opacity:1;transform:translate(-50%,0) rotate(-1deg)}
.toast--ok{background:var(--green)}
.toast--err{background:#ff8787}

@media (max-width:600px){
  .form--row{grid-template-columns:1fr}
  .ph{gap:18px}
  .ph__preview{width:112px;height:112px;font-size:40px}
  .tab{font-size:16px;padding:8px 12px}
  .dep-row{grid-template-columns:32px 44px minmax(0,1fr) auto}
  .dep-row .dur{display:none}
  .alert h2{font-size:22px}
}

/* ---------- Espace artiste et fiche ---------- */
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.pass-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.pass-row .plaque{min-width:0}
.stamp{flex:none;padding:2px 9px;border:3px solid currentColor;border-radius:8px;font-family:var(--disp);font-size:16px;letter-spacing:.07em;text-transform:uppercase;
  transform:rotate(-10deg);white-space:nowrap}
.stamp:empty{display:none}
.stamp--en_attente{color:#c2410c;background:rgba(255,146,43,.1)}
.stamp--valide{color:var(--green-ink);background:rgba(31,210,106,.08)}
.stamp--refuse{color:var(--red-ink);background:rgba(255,107,107,.1)}
.gauge{margin-top:4px}
.gauge__top{display:flex;justify-content:space-between;font-size:12.5px;font-weight:800;margin-bottom:5px}
.gauge__top b{font-family:var(--disp);font-weight:400;font-size:16px}
.gauge__bar{height:12px;border:2px solid var(--ink);border-radius:8px;overflow:hidden;background:repeating-linear-gradient(90deg,#ebe6da 0 10px,#f5f1e8 10px 13px)}
.gauge__bar span{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,var(--orange) 0 10px,#e8791a 10px 13px);transition:width .4s ease}
.gauge__note{margin-top:6px;font-size:11.5px;line-height:1.35;color:var(--muted)}
.gauge__bar.is-full span{background:repeating-linear-gradient(90deg,var(--green) 0 10px,#17b95b 10px 13px)}

.alert{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin:0 0 22px;padding:18px 22px;border:2px solid var(--ink);border-radius:18px;box-shadow:5px 5px 0 var(--ink)}
.alert h2{margin:0;font-family:var(--disp);font-weight:400;font-size:26px;line-height:1;text-transform:uppercase}
.alert p{margin:6px 0 0;font-weight:600}
.alert--todo{background:var(--orange)}
.alert--ko{background:#ffc9c9}

.ph__title{font-family:var(--disp);font-weight:400;font-size:20px;letter-spacing:.03em;text-transform:uppercase}
.bn{display:flex;flex-direction:column;gap:12px}
.bn__preview{position:relative;width:100%;max-width:760px;aspect-ratio:8/3;border:3px solid var(--ink);border-radius:16px;box-shadow:4px 4px 0 var(--ink);overflow:hidden;display:grid;place-items:center;
  background:repeating-linear-gradient(135deg,var(--c,#ffd43b) 0 22px,color-mix(in srgb,var(--c,#ffd43b) 82%,#000) 22px 44px)}
.bn__preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bn__preview svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.bn__auto{position:absolute;left:12px;bottom:12px;padding:3px 10px;border:2px solid var(--ink);border-radius:8px;background:var(--paper);font-weight:800;font-size:12.5px;box-shadow:2px 2px 0 var(--ink)}
.bn__preview.is-pending{box-shadow:4px 4px 0 var(--green)}
.bn__empty{max-width:80%;text-align:center;padding:8px 12px;border-radius:10px;background:rgba(255,253,247,.9);border:2px solid var(--ink);font-weight:700;font-size:13.5px}
.textarea{min-height:140px;resize:vertical;line-height:1.55}
select.input{appearance:auto;cursor:pointer}
#f-bio-min.ok{color:var(--green-ink);font-weight:800}
.links-head{display:flex;flex-direction:column;gap:2px;margin-top:10px;padding-top:18px;border-top:2px dashed var(--ink)}
.links-head b{font-family:var(--disp);font-weight:400;font-size:22px;text-transform:uppercase}
.links-head small{font-size:13px;color:var(--muted)}
.locked{background:#fff4e6;border-color:#c2410c;box-shadow:6px 6px 0 #c2410c}
.locked p{margin:0 0 16px}
.dep-row{grid-template-columns:48px 50px minmax(0,1fr) auto auto}
.dep-stamp{padding:2px 9px;border:3px solid currentColor;border-radius:8px;font-family:var(--disp);font-size:15px;letter-spacing:.06em;text-transform:uppercase;transform:rotate(-6deg);white-space:nowrap}
.dep-stamp--en_attente{color:var(--orange)}
.dep-stamp--valide{color:var(--green)}
.dep-stamp--refuse{color:#ff8787}

/* ---------- Espace auditeur : navigation et playlist (mon-espace.html, body.has-nav) ---------- */
/* Liens du site dans l'en-tête, sur ordinateur */
.cw-topnav{display:flex;align-items:center;gap:24px;margin-left:26px}
.cw-topnav .cw-link{padding:4px 0;border-bottom:2px solid transparent}
.cw-topnav .cw-link:hover{text-decoration:none;border-bottom-color:var(--ink)}
/* Barre du bas, sur mobile et tablette (la même que sur l'écoute) */
.cw-nav{display:none}

/* Ligne « Basée sur tes styles » au-dessus de la playlist */
.set-basis{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;padding:14px 24px;border-bottom:2px dashed rgba(255,253,247,.3)}
.set-basis__lbl{font-size:14px;font-weight:800;color:rgba(255,253,247,.72)}
.set-basis .stickers{flex:1 1 160px;min-width:0;gap:8px}
.set-basis .st{color:var(--ink);box-shadow:2px 2px 0 var(--paper)}
.set-basis .stickers__none{color:rgba(255,253,247,.6)}
.set-basis .btn-sticker{font-size:15px;padding:7px 12px;box-shadow:3px 3px 0 var(--green)}
/* Le haut des panneaux ne passe pas sous l'en-tête fixe quand la page défile jusqu'à eux */
#styles-panel,#playlist-panel{scroll-margin-top:90px}

@media (max-width:860px){
  .cw-hero{grid-template-columns:1fr;padding:24px 20px}
  .m-pass{transform:rotate(1deg)}
  .cw-topnav{display:none}
  .cw-nav{position:fixed;left:0;right:0;bottom:0;z-index:70;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    height:calc(64px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:var(--bone);border-top:3px solid var(--ink)}
  .cw-nav__it{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--ink);text-decoration:none;font-size:11px;font-weight:800}
  .cw-nav__ic{height:28px;min-width:44px;display:grid;place-items:center;border-radius:14px}
  .cw-nav__ic svg{width:22px;height:22px}
  .cw-nav__it[aria-current="page"] .cw-nav__ic{background:var(--green);border:2px solid var(--ink)}
  .cw-nav__it[aria-current="page"] .cw-nav__ic svg{width:20px;height:20px}
  /* Le contenu et le lecteur restent au-dessus de la barre */
  body.has-nav main{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  body.has-nav.has-player main{padding-bottom:calc(190px + env(safe-area-inset-bottom,0px))}
  body.has-nav .player{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:600px){
  .wrap{padding:0 16px}
  .cw-header__in{height:64px}
  .cw-brand__name,.cw-link--back{display:none}
  .panel{padding:20px 16px}
  .g-toggle{font-size:17px;padding:8px 12px}
  button.set-row,.set-row{grid-template-columns:32px 44px minmax(0,1fr) auto;gap:10px;padding:10px 4px}
  .set-row .dur{display:none}
  .set-row__n{font-size:24px}
  .cover{width:44px;height:44px}
  .set-row__txt strong{font-size:19px}
  .setlist .panel__head{padding:20px 16px 16px}
  .set-basis{padding:12px 16px}
  .player{bottom:10px;gap:10px;padding:8px 10px 8px 8px}
  .p-btn--prev,.p-btn--next{display:none}
}
/* ---------- Big Up : solde, recharge, historique (mon-espace.html) ---------- */
.bu-solde{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center;background:var(--ink);color:var(--paper);border-color:var(--ink);box-shadow:6px 6px 0 var(--green)}
.bu-solde h2{font-size:22px;letter-spacing:.06em;color:rgba(255,253,247,.7)}
.bu-solde__n{margin:8px 0 0;font-family:var(--disp);font-size:clamp(76px,13vw,128px);line-height:.88;color:var(--green);font-variant-numeric:tabular-nums}
.bu-solde__n small{font-size:.26em;letter-spacing:.05em;text-transform:uppercase;color:var(--paper)}
.bu-solde__side p{margin:0;font-size:15.5px;color:rgba(255,253,247,.78)}
.bu-solde__side .bu-solde__soon{margin-top:8px;font-weight:800;color:var(--paper)}
.bu-stamp{display:inline-block;margin-bottom:12px;padding:1px 9px;border:3px solid var(--orange);border-radius:8px;color:var(--orange);font-family:var(--disp);font-size:16px;letter-spacing:.08em;
  text-transform:uppercase;transform:rotate(-5deg)}

.bu-packs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.bu-pack{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;padding:16px 10px 14px;border:2px solid var(--ink);border-radius:16px;
  background:var(--paper);box-shadow:4px 4px 0 var(--ink);text-align:center;transition:background .15s,transform .15s,box-shadow .15s}
.bu-pack:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.bu-pack:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.bu-pack[aria-pressed="true"]{background:var(--green);transform:rotate(-1.5deg) scale(1.03)}
.bu-pack__n{font-family:var(--disp);font-size:clamp(40px,7vw,58px);line-height:.95}
.bu-pack__u{font-family:var(--disp);font-size:16px;letter-spacing:.06em;text-transform:uppercase}
.bu-pack__p{margin-top:8px;padding:2px 10px;border-radius:8px;background:var(--ink);color:var(--paper);font-weight:800;font-size:14.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.bu-check{display:flex;align-items:flex-start;gap:10px;margin:22px 0 0;font-weight:700;font-size:15px;cursor:pointer}
.bu-check input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--green);cursor:pointer}
#bu-err{margin-top:14px}
.bu-off{display:flex;align-items:center;gap:14px 18px;flex-wrap:wrap;padding:14px 16px;border:2px dashed var(--ink);border-radius:14px;background:var(--bone)}
.bu-off p{margin:0;flex:1 1 220px;font-weight:700}

.bu-hist{list-style:none;margin:0;padding:0}
.bu-hist li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 14px;align-items:baseline;padding:12px 0;border-top:2px dashed rgba(21,20,18,.25)}
.bu-hist li:first-child{border-top:0;padding-top:0}
.bu-hist li:last-child{padding-bottom:0}
.bu-hist__lbl{font-weight:800}
.bu-hist__amt{font-family:var(--disp);font-size:26px;line-height:1;text-align:right;font-variant-numeric:tabular-nums}
.bu-hist__amt.is-plus{color:var(--green-ink)}
.bu-hist__date,.bu-hist__after{font-size:13px;color:var(--muted)}
.bu-hist__after{text-align:right}
.bu-hist .bu-hist__empty{display:block;color:var(--muted);font-size:15px}

@media (max-width:600px){
  .bu-solde{grid-template-columns:1fr;gap:14px}
  .bu-packs{gap:8px}
  .bu-pack{padding:12px 4px 10px;border-radius:13px;box-shadow:3px 3px 0 var(--ink)}
  .bu-pack__u{font-size:13px}
  .bu-pack__p{font-size:12.5px;padding:2px 6px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- Pass Pro (onglet de artiste.html) et badges de l'artiste ---------- */
.bdg-cert{display:inline-block;width:.82em;height:.82em;vertical-align:-.1em;margin-left:.12em}
.bdg-pro{display:inline-block;vertical-align:.14em;margin-left:.22em;padding:.16em .45em .1em;border:2px solid var(--ink);border-radius:7px;background:var(--green);color:var(--ink);
  font-family:var(--disp);font-size:.56em;line-height:1;letter-spacing:.06em;text-transform:uppercase;transform:rotate(-4deg)}
.pp-price{font-size:clamp(60px,10vw,104px)}
.pp-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.pp-actions:empty{display:none}
.bu-solde .pp-actions .btn-sticker{box-shadow:3px 3px 0 var(--paper)}
.bu-solde #pp-err{margin-top:14px}
.pp-list{list-style:none;margin:0;padding:0}
.pp-list li{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-top:2px dashed rgba(21,20,18,.25)}
.pp-list li:first-child{border-top:0;padding-top:0}
.pp-list li:last-child{padding-bottom:0}
.pp-list__ic{flex:none;display:grid;place-items:center;width:30px;height:30px;border:2px solid var(--ink);border-radius:9px;background:var(--green);font-weight:800;font-size:16px;line-height:1;transform:rotate(-4deg)}
.pp-list__txt{min-width:0;font-size:15px;color:var(--muted)}
.pp-list__txt strong{display:block;margin-bottom:2px;font-size:17px;font-weight:800;color:var(--ink)}
.pp-list li.is-soon .pp-list__ic{background:var(--bone)}
.pp-tag{display:inline-block;margin-left:6px;padding:1px 8px;border:2px solid var(--muted);border-radius:7px;font-style:normal;font-size:12px;font-weight:800;color:var(--muted);vertical-align:2px}
.pp-list .pp-list__empty{display:block;color:var(--muted);font-size:15px}

/* ==========================================================
   Espace artiste façon application (artiste.html, body.ap)
   - sur téléphone : barre du haut compacte, rubriques sur une ligne juste en dessous, un écran à la fois grâce aux
     sous-onglets ; la barre du bas est celle du site (.cw-nav), la même que sur l'écoute et l'espace auditeur ;
   - sur ordinateur : la mise en page d'origine, avec les mêmes sous-onglets pour raccourcir les pages.
   ========================================================== */
.ap-off{display:none!important}
.ap-top,.ap-session{display:none}
/* Sous-onglets */
.ap-seg{display:inline-flex;max-width:100%;margin:0 0 22px;border:2px solid var(--ink);border-radius:12px;background:var(--paper);overflow:hidden}
.ap-seg[hidden]{display:none}
.ap-seg__b{all:unset;box-sizing:border-box;cursor:pointer;padding:9px 20px;border-left:2px solid var(--ink);font-weight:800;font-size:15px;text-align:center;white-space:nowrap}
.ap-seg__b:first-child{border-left:0}
.ap-seg__b:hover{background:var(--bone)}
.ap-seg__b[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.ap-seg__b:focus-visible{outline:3px solid var(--green);outline-offset:-4px}
/* Formulaire du profil : « Infos » et « Réseaux » sont deux vues du même formulaire */
[data-sub-active="infos"] .fp-links,[data-sub-active="reseaux"] .fp-infos{display:none}
[data-sub-active="reseaux"] .links-head{margin-top:0;padding-top:0;border-top:0}
[data-sub-active="reseaux"] .links-head b{font-family:var(--disp);font-weight:400;font-size:28px;line-height:1;text-transform:uppercase}

/* ---------- Onglet Stats (réservé au Pass Pro). Cartes sombres comme .st-chart de css/artiste-plus.css ---------- */
.ap-head{align-items:center}
.ap .st-per{white-space:nowrap}
#sp-period[hidden]{display:none}
#sp-body.is-wait{opacity:.55}
.sp-view{display:none}
[data-sub-active="apercu"] .sp-view[data-view="apercu"],[data-sub-active="sons"] .sp-view[data-view="sons"],
[data-sub-active="auditeurs"] .sp-view[data-view="auditeurs"],[data-sub-active="moments"] .sp-view[data-view="moments"]{display:block}
.ap-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:14px;border:2px solid var(--ink);border-radius:14px;background:var(--bone);overflow:hidden}
.sp-view > .ap-strip:first-child{margin-top:0}
.ap-strip span{display:flex;flex-direction:column;align-items:center;min-width:0;padding:10px 4px 9px;border-left:2px dashed rgba(21,20,18,.25);font-size:12.5px;font-weight:700;color:var(--muted);text-align:center}
.ap-strip span:first-child{border-left:0}
.ap-strip b{font-family:var(--disp);font-weight:400;font-size:28px;line-height:1.05;color:var(--ink)}
.ap-note{margin-top:12px}
.sp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:14px}
.sp-card{position:relative;min-width:0;margin-top:14px;padding:16px 16px 14px;border:2px solid var(--ink);border-radius:16px;background:var(--ink);color:var(--paper)}
.sp-grid .sp-card,.sp-view > .sp-card:first-child{margin-top:0}
.sp-card__head{display:flex;justify-content:space-between;align-items:baseline;gap:4px 12px;flex-wrap:wrap;margin-bottom:14px}
.sp-card__head b{font-family:var(--disp);font-weight:400;font-size:22px;line-height:1.05;text-transform:uppercase}
.sp-card__head span{font-size:13px;color:rgba(255,253,247,.7)}
.sp-empty{margin:14px 0 0;padding:18px 14px;border:2px dashed rgba(21,20,18,.35);border-radius:12px;font-size:14px;text-align:center;color:var(--muted)}
.sp-view > .sp-empty:first-child{margin-top:0}
.sp-card .sp-empty{margin:0;border-color:rgba(255,253,247,.35);color:rgba(255,253,247,.78)}
.sp-foot{margin:12px 0 0;font-size:12.5px;color:rgba(255,253,247,.62)}
/* Barres horizontales (villes, âges). Une seule grille pour toute la liste : les barres partent du même trait. */
.sp-hbars{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:fit-content(46%) minmax(0,1fr) auto;align-items:center;gap:11px 10px;font-size:14px}
.sp-hbars li{display:contents}
.sp-hbar__l{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-hbar__t{display:block;height:12px}
.sp-hbar__t i{display:block;height:100%;border-radius:0 4px 4px 0;background:var(--green)}
.sp-hbar__v{text-align:right;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.sp-hbar__v small{margin-left:4px;font-size:12px;font-weight:600;color:rgba(255,253,247,.62)}
/* Colonnes (écoutes par jour, heures, jour par jour, décrochage) : même trame « égaliseur » que .st-bar */
.sp-cols{display:flex;align-items:flex-end;gap:2px;height:120px;border-bottom:1px solid rgba(255,253,247,.22)}
.sp-col{flex:1;min-width:0;height:100%;display:flex;align-items:flex-end;justify-content:center}
.sp-col i{display:block;width:100%;max-width:24px;border-radius:3px 3px 0 0;background:repeating-linear-gradient(to top,var(--green) 0 6px,transparent 6px 8px)}
.sp-col.is-zero i{height:0}
.sp-col:hover i,.sp-col.is-on i{background:repeating-linear-gradient(to top,#8df5b8 0 6px,transparent 6px 8px)}
.sp-axis{display:flex;justify-content:space-between;margin-top:6px;font-size:12px;color:rgba(255,253,247,.62);font-variant-numeric:tabular-nums}
.sp-axis--h{display:grid;grid-template-columns:repeat(24,minmax(0,1fr))}
.sp-axis--h span{white-space:nowrap}
.sp-axis--h span:last-child{justify-self:end}
.sp-multi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 24px}
.sp-mini{min-width:0}
.sp-mini__head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:0 10px;margin-bottom:8px}
.sp-mini__head span{font-size:13.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-mini__head b{grid-row:span 2;font-family:var(--disp);font-weight:400;font-size:30px;line-height:1}
.sp-mini__head small{font-size:11.5px;color:rgba(255,253,247,.62);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-mini .sp-cols{height:64px}
/* Une carte par son */
.sp-son__t{display:block;font-family:var(--disp);font-weight:400;font-size:24px;line-height:1.1;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-son__st{display:inline-block;margin-top:2px;font-size:12px;font-weight:700;color:rgba(255,253,247,.62)}
.sp-nums{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:12px 0}
.sp-nums span{display:flex;flex-direction:column;min-width:0;padding:8px 10px 7px;border:1px solid rgba(255,253,247,.2);border-radius:10px;font-size:12px;font-weight:600;color:rgba(255,253,247,.7)}
.sp-nums b{font-family:var(--disp);font-weight:400;font-size:24px;line-height:1.05;color:var(--paper)}
.sp-son__bas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,280px);align-items:end;gap:12px 28px}
.sp-son__m{margin:0;font-size:13px;color:rgba(255,253,247,.7)}
.sp-son__k{margin:8px 0 0;font-size:14px;font-weight:700}
.sp-ret{min-width:0}
.sp-ret .sp-cols{height:84px;gap:6px}
.sp-ret .sp-axis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));text-align:center;font-size:11.5px}
/* Sans Pass Pro */
.ap-lock{max-width:460px;margin:8px auto;padding:26px 22px;border:2px solid var(--ink);border-radius:18px;background:var(--paper);box-shadow:5px 5px 0 var(--ink);text-align:center}
.ap-lock__ic{display:inline-grid;place-items:center;width:64px;height:64px;border:2px solid var(--ink);border-radius:18px;background:var(--green);box-shadow:3px 3px 0 var(--ink);transform:rotate(-5deg)}
.ap-lock__t{margin:16px 0 14px;font-family:var(--disp);font-size:30px;line-height:1;text-transform:uppercase}
.ap-lock ul{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:9px;text-align:left}
.ap-lock li{display:flex;align-items:flex-start;gap:10px;font-size:15px;font-weight:700}
.ap-lock li::before{content:"✓";flex:none;display:grid;place-items:center;width:22px;height:22px;border:2px solid var(--ink);border-radius:7px;background:var(--green);font-size:13px;font-weight:800;line-height:1}
.ap-lock__p{margin:0 0 16px;font-size:14px;color:var(--muted)}
.ap-lock__p b{font-family:var(--disp);font-weight:400;font-size:28px;color:var(--ink)}
/* Info au survol d'une colonne, et tableaux réservés aux lecteurs d'écran */
.sp-tip{position:fixed;z-index:90;left:0;top:0;transform:translate(-50%,-100%);pointer-events:none;padding:6px 10px;border:2px solid var(--ink);border-radius:9px;background:var(--paper);color:var(--ink);
  box-shadow:3px 3px 0 var(--green);font-size:13px;font-weight:800;white-space:nowrap}
.sp-tip[hidden]{display:none}
.sp-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

@media (max-width:860px){
  /* --- Barre du haut : qui je suis, ma fiche, mon compte --- */
  .ap .cw-header__in{display:none}
  .ap .ap-top{display:flex;align-items:center;gap:10px;height:56px;padding:0 14px}
  .ap-top__av{flex:none;display:grid;place-items:center;width:36px;height:36px;overflow:hidden;border:2px solid var(--ink);border-radius:50%;background:hsl(var(--h,140) 80% 62%);font-family:var(--disp);font-size:15px}
  .ap-top__av img,.ap-top__av svg{width:100%;height:100%;object-fit:cover;display:block}
  .ap-top__name{flex:1;min-width:0;font-family:var(--disp);font-size:24px;line-height:1.1;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ap-ic{all:unset;box-sizing:border-box;flex:none;cursor:pointer;display:grid;place-items:center;width:40px;height:40px;border:2px solid var(--ink);border-radius:11px;background:var(--paper);color:var(--ink);box-shadow:2px 2px 0 var(--ink)}
  .ap-ic:focus-visible{outline:3px solid var(--green);outline-offset:3px}
  .ap[data-tab="compte"] #ap-compte{background:var(--green)}
  /* --- Rubriques : une ligne sous la barre du haut, qui reste en place quand la page défile --- */
  .ap .tabs{order:-4;position:sticky;top:58px;z-index:45;gap:7px;margin:0 -14px;padding:9px 14px 8px;background:var(--bone)}
  .ap .tab{padding:6px 11px 5px;border-radius:10px;box-shadow:2px 2px 0 var(--ink);font-size:15.5px}
  .ap .tab[aria-selected="true"]{box-shadow:2px 2px 0 var(--green)}
  .ap #tab-compte{display:none}
  .ap .ap-session{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;padding-top:20px;border-top:2px dashed var(--ink)}
  /* --- Un écran à la fois : sous-onglets collés sous la barre du haut, la grande bannière ne reste que dans « Ma carte » --- */
  .ap main.wrap{display:flex;flex-direction:column;padding-left:14px;padding-right:14px}
  .ap main.wrap > *{flex:none;min-width:0}
  .ap .ap-seg{order:-3;display:flex;margin:2px 0 0}
  .ap .ap-seg[hidden]{display:none}
  .ap .ap-seg__b{flex:1;min-width:0;padding:9px 2px;font-size:13.5px;overflow:hidden;text-overflow:ellipsis}
  .ap .alert{order:-2;display:none;margin:12px 0 0;padding:12px 14px;border-radius:14px;box-shadow:3px 3px 0 var(--ink);gap:10px}
  .ap[data-tab="profil"] .alert:not([hidden]),.ap[data-tab="sons"] .alert:not([hidden]){display:flex}
  .ap .alert h2{font-size:20px}
  .ap .alert p{margin-top:4px;font-size:14px}
  .ap .cw-hero{order:-1;display:none}
  .ap[data-tab="profil"][data-sub="carte"] .cw-hero{display:flex;flex-direction:column-reverse;gap:18px;margin:16px 0 0;padding:0 4px;background:none;border-radius:0;color:var(--ink)}
  .ap .cw-hero h1,.ap .cw-hero__sub{display:none}
  .ap .cw-hero .hero-actions{margin-top:0}
  .ap .cw-hero .m-pass{border-color:var(--ink)}
  .ap [role="tabpanel"]{margin-top:8px}
  /* --- Des écrans plus compacts --- */
  .ap .panel{margin-bottom:14px;padding:16px 14px;border-radius:16px;box-shadow:4px 4px 0 var(--ink)}
  .ap .bu-solde{box-shadow:4px 4px 0 var(--green)}
  .ap .panel h2{font-size:28px}
  .ap .panel__head{margin-bottom:12px}
  .ap .panel__sub{margin-top:4px;font-size:13.5px}
  .ap .setlist .panel__head{padding:16px 14px 12px}
  .ap #sp{padding:0;border:0;border-radius:0;background:none;box-shadow:none}
  /* Le titre « Stats » est déjà dans la rangée des rubriques : il ne reste que le choix de la période, à droite */
  .ap .ap-head{justify-content:flex-end;margin-bottom:0}
  .ap .ap-head h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .ap .ap-head .st-period{margin-bottom:8px}
  .ap .st-period{flex-wrap:nowrap;gap:6px}
  .ap .st-per{min-height:34px;padding:5px 10px;border-radius:9px;font-size:12.5px}
  .ap .ap-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ap .ap-kpis .st-kpi{padding:10px 12px 9px;border-radius:13px}
  .ap .ap-kpis .st-kpi__l{font-size:12.5px}
  .ap .ap-kpis .st-kpi__v{font-size:34px}
  .ap .ap-kpis .st-kpi__s{font-size:11.5px}
  .ap-strip{margin-top:12px;border-radius:13px;background:var(--paper)}
  .ap-strip span{padding:8px 2px 7px;font-size:11.5px}
  .ap-strip b{font-size:24px}
  .sp-grid{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:12px}
  .sp-card{margin-top:12px;padding:13px 13px 11px;border-radius:14px}
  .sp-card__head{margin-bottom:10px}
  .sp-card__head b{font-size:19px}
  .sp-hbars{gap:6px 8px;font-size:13.5px}
  .sp-cols{height:104px}
  .sp-hbar__t{height:10px}
  .sp-foot{margin-top:6px}
  .sp-multi{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
  .sp-mini__head b{font-size:26px}
  .sp-mini .sp-cols{height:46px}
  .sp-nums{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:10px 0}
  .sp-nums span{padding:6px 8px 5px}
  .sp-nums b{font-size:22px}
  .sp-son__bas{grid-template-columns:minmax(0,1fr)}
  .ap-note{margin-top:8px;font-size:12px}
  .ap-lock{margin:14px 0 0;padding:22px 18px}
}

/* ---------- Stats : vue « Abonnés » (qui suit l'artiste). Même carte sombre que les autres vues. ---------- */
[data-sub-active="abonnes"] .sp-view[data-view="abonnes"]{display:block}
.ap-strip--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ap-strip--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sp-fans{list-style:none;margin:0;padding:0}
.sp-fan{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:12px;padding:9px 0;border-top:1px solid rgba(255,253,247,.14)}
.sp-fan:first-child{border-top:0;padding-top:0}
.sp-fan:last-child{padding-bottom:2px}
.sp-fan[hidden]{display:none}
.sp-fan__av{position:relative;display:grid;place-items:center;width:40px;height:40px;overflow:hidden;border:2px solid var(--paper);border-radius:50%;background:hsl(var(--h,140) 80% 62%);
  font-family:var(--disp);font-size:15px;color:var(--ink)}
.sp-fan__av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sp-fan__txt{min-width:0}
.sp-fan__txt b,.sp-fan__txt a{display:block;font-weight:800;font-size:15px;line-height:1.25;color:var(--paper);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-fan__txt a{text-decoration:underline;text-decoration-color:rgba(255,253,247,.4);text-underline-offset:3px}
.sp-fan__txt a:hover{text-decoration-color:var(--green)}
.sp-fan__txt small{display:block;font-size:12.5px;color:rgba(255,253,247,.65);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-fan__tags{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.sp-tag{padding:3px 8px;border-radius:7px;font-style:normal;font-weight:800;font-size:12px;line-height:1.2;white-space:nowrap;font-variant-numeric:tabular-nums}
.sp-tag--new{background:var(--green);color:var(--ink)}
.sp-tag--bu{background:#ffd43b;color:var(--ink)}
.sp-tag--art{border:1px solid rgba(255,253,247,.45);color:var(--paper)}
.sp-more{all:unset;box-sizing:border-box;display:block;width:100%;margin-top:12px;padding:9px 12px;border:2px solid rgba(255,253,247,.4);border-radius:10px;text-align:center;font-weight:800;font-size:14px;cursor:pointer}
.sp-more:hover{border-color:var(--green);color:var(--green)}
.sp-more:focus-visible{outline:3px solid var(--green);outline-offset:2px}
@media (max-width:860px){
  .ap .ap-seg--5 .ap-seg__b{font-size:12.5px;letter-spacing:-.01em}
  .sp-fan{grid-template-columns:36px minmax(0,1fr) auto;gap:10px;padding:7px 0}
  .sp-fan__av{width:36px;height:36px;font-size:14px}
  .sp-fan__txt b,.sp-fan__txt a{font-size:14.5px}
  .sp-fan__txt small{font-size:12px}
  .sp-fan__tags{flex-direction:column;align-items:flex-end;gap:3px}
  .sp-tag{padding:2px 7px;font-size:11.5px}
}
/* Écran très étroit : les cinq sous-onglets des Stats défilent de gauche à droite au lieu d'être coupés. */
@media (max-width:359px){
  .ap .ap-seg--5{overflow-x:auto;scrollbar-width:none}
  .ap .ap-seg--5::-webkit-scrollbar{display:none}
  .ap .ap-seg--5 .ap-seg__b{flex:none;padding:9px 11px;overflow:visible}
}

/* ==========================================================
   Pop-up « Comment marche le fil » (artiste.html) : l'algorithme du fil Découverte expliqué aux artistes, en 5 écrans.
   Bouton d'ouverture .al-open ; fenêtre .al (au centre sur ordinateur, en bas de l'écran sur téléphone).
   ========================================================== */
.al-open{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;padding:6px 13px 6px 7px;border:2px solid var(--ink);border-radius:999px;background:var(--paper);color:var(--ink);
  font-weight:800;font-size:13.5px;line-height:1.2;white-space:nowrap;box-shadow:2px 2px 0 var(--ink);cursor:pointer;transition:transform .15s,box-shadow .15s}
.al-open:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.al-open:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.al-open i{display:grid;place-items:center;width:22px;height:22px;border:2px solid var(--ink);border-radius:50%;background:var(--green);font-family:var(--disp);font-style:normal;font-size:14px;line-height:1}
.setlist .al-open{box-shadow:2px 2px 0 var(--green)}
.setlist .al-open:hover{box-shadow:3px 3px 0 var(--green)}
.al-row{margin:0 0 12px}
.al-row + .sp-card,.al-row + .sp-empty{margin-top:0}

.al{position:fixed;inset:0;z-index:120}
.al[hidden]{display:none}
.al__scrim{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;background:rgba(10,10,10,.62);cursor:pointer}
.al__card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);box-sizing:border-box;width:min(560px,calc(100% - 32px));max-height:calc(100% - 32px);display:flex;flex-direction:column;overflow:hidden;
  background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:22px;box-shadow:8px 8px 0 var(--green);outline:0}
.al__card .band{flex:none;padding-right:58px}
.al__x{all:unset;box-sizing:border-box;position:absolute;top:5px;right:10px;width:34px;height:34px;display:grid;place-items:center;border:2px solid var(--paper);border-radius:50%;color:var(--paper);cursor:pointer}
.al__x:hover{background:var(--paper);color:var(--ink)}
.al__x:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.al__body{flex:1;min-height:0;overflow:auto;padding:20px 24px 4px}
.al__kicker{margin:0 0 6px;font-family:var(--txt);font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--green-ink)}
/* Les 5 écrans sont empilés au même endroit : la fenêtre garde la même taille d'un écran à l'autre. */
.al__pages{display:grid}
.al__page{grid-area:1 / 1;min-width:0;visibility:hidden;opacity:0;transition:opacity .2s}
.al__page.is-on{visibility:visible;opacity:1}
.al__page h3{margin:0 0 16px;font-family:var(--disp);font-weight:400;font-size:34px;line-height:.98;text-transform:uppercase}
.al__page p{margin:0}
/* Écran 1 : les trois étapes */
.al-steps{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.al-steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start}
.al-n{display:grid;place-items:center;width:44px;height:44px;border:2px solid var(--ink);border-radius:12px;background:var(--green);box-shadow:3px 3px 0 var(--ink);font-family:var(--disp);font-size:26px;line-height:1;transform:rotate(-4deg)}
.al-steps li:nth-child(2) .al-n{background:#ffd43b;transform:rotate(3deg)}
.al-steps li:nth-child(3) .al-n{background:var(--orange);transform:rotate(-2deg)}
.al-steps b,.al-who b{display:block;font-size:16px;font-weight:800;line-height:1.25}
.al-steps p,.al-who span{display:block;margin-top:2px;font-size:14.5px;line-height:1.45;color:#3b3833}
/* Écrans 2 et 5 : listes « ça monte », « ça descend », « ça ne sert à rien » */
.al__page .al-tag{display:inline-block;margin:0 0 12px;padding:3px 10px 2px;border:2px solid var(--ink);border-radius:8px;background:var(--green);box-shadow:2px 2px 0 var(--ink);
  font-family:var(--disp);font-size:15px;letter-spacing:.05em;text-transform:uppercase;transform:rotate(-2deg)}
.al__page .al-tag--down{background:var(--orange)}
.al__page .al-tag--no{background:#ff8787}
.al-list{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:7px}
.al-list li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;font-size:15px;font-weight:700;line-height:1.4}
.al-list li::before{content:"↑";display:grid;place-items:center;width:22px;height:22px;border:2px solid var(--ink);border-radius:7px;background:var(--green);font-size:13px;font-weight:800;line-height:1}
.al-list--down li::before{content:"↓";background:var(--orange)}
.al-list--no li::before{content:"✕";background:#ff8787;font-size:11px}
.al-list small{display:block;font-size:13.5px;font-weight:400;color:#3b3833}
.al-note{margin-top:2px;padding-top:12px;border-top:2px dashed var(--ink);font-size:13.5px;line-height:1.45;color:var(--muted)}
.al-note--suite{padding-top:0;border-top:0}
.al-note b{color:var(--ink)}
/* Écran 3 : à qui le son est proposé */
.al-who{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.al-who li{padding-left:14px;border-left:4px solid var(--green)}
/* Écran 4 : un lot de 10 sons */
.al-lot{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px;margin:0 0 14px}
.al-lot span{aspect-ratio:1;border:2px solid var(--ink);border-radius:8px;background:var(--green)}
.al-lot .s,.al-key .s{background:#ffd43b}
.al-lot .e,.al-key .e{background:var(--plaque)}
.al-lot .h,.al-key .h{background:var(--paper);border-style:dashed}
.al-key{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:7px}
.al-key li{display:grid;grid-template-columns:18px 20px minmax(0,1fr);gap:8px;align-items:center;font-size:15px}
.al-key i{width:18px;height:18px;box-sizing:border-box;border:2px solid var(--ink);border-radius:5px;background:var(--green)}
.al-key b{font-family:var(--disp);font-weight:400;font-size:20px;line-height:1;text-align:center}
/* Écran 5 : Pass Pro et conseils */
.al-pro{margin:0 0 12px;padding:11px 14px;border:2px solid var(--ink);border-radius:14px;background:var(--bone);font-size:14.5px;line-height:1.45}
.al-pro b{font-weight:800}
.al-pro em{display:inline-block;margin-right:6px;padding:2px 7px 1px;border:2px solid var(--ink);border-radius:7px;background:var(--green);font-family:var(--disp);font-style:normal;font-size:13px;letter-spacing:.06em;transform:rotate(-4deg)}
/* Pied : où on en est, et les deux boutons */
.al__foot{flex:none;display:flex;align-items:center;gap:10px;padding:14px 24px 20px}
.al__dots{display:flex;align-items:center;gap:7px;margin-right:auto}
.al__dot{all:unset;box-sizing:border-box;width:12px;height:12px;border:2px solid var(--ink);border-radius:999px;background:var(--paper);cursor:pointer;transition:width .2s,background .2s}
.al__dot[aria-current="true"]{width:26px;background:var(--green)}
.al__dot:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.al__foot .btn-sticker{padding:9px 16px;white-space:nowrap}
#al-prev[hidden]{display:none}
@media (max-width:860px){
  .al__card{left:0;right:0;top:auto;bottom:0;transform:none;width:auto;max-height:94%;border-width:3px 0 0;border-radius:22px 22px 0 0;box-shadow:none}
  .al__body{padding:16px 18px 2px}
  .al__page h3{margin-bottom:14px;font-size:30px}
  .al__foot{padding:12px 18px calc(16px + env(safe-area-inset-bottom,0px))}
  .ap .setlist .panel__head{align-items:center}
}
@media (max-width:359px){
  .al__page h3{font-size:26px}
  .al-steps p,.al-who span{font-size:13.5px}
  .al-list li,.al-key li{font-size:14px}
  .al__foot{gap:8px}
  .al__dots{gap:5px}
  .al__dot[aria-current="true"]{width:20px}
  .al__foot .btn-sticker{padding:8px 10px;font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .al__page,.al__dot,.al-open{transition:none}
}

/* ==========================================================
   Espace auditeur façon application (mon-espace.html, body.ap.au)
   Il reprend la navigation de l'espace artiste (règles .ap ci-dessus) : barre du haut, rubriques, sous-onglets.
   Les règles .au ci-dessous ne concernent que l'espace auditeur :
   - d'abord les nouveaux éléments (en-tête de liste, artistes suivis, derniers mouvements), valables partout ;
   - puis, sous 860 px, les écrans compacts du téléphone.
   ========================================================== */
/* En-tête de liste : un titre, un bouton, et une ligne d'infos en dessous */
.au-sethead{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px 16px;padding:22px 24px 18px;border-bottom:2px dashed rgba(255,253,247,.3)}
.au-sethead h2{font-size:clamp(30px,4vw,40px)}
.au-sethead .btn-sticker{gap:7px;white-space:nowrap}
.au-sethead .btn-sticker[hidden]{display:none}
.au-sethead--paper{border-bottom-color:rgba(21,20,18,.25)}
.au-basis{grid-column:1/-1;display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;min-width:0}
.au-basis__lbl{flex:none;font-size:14px;font-weight:800;color:rgba(255,253,247,.72)}
.au-basis .stickers{gap:8px}
.au-basis .st{color:var(--ink);box-shadow:2px 2px 0 var(--paper)}
.au-basis .stickers__none{color:rgba(255,253,247,.6)}
#play-all .i-pause,#play-all.is-playing .i-play{display:none}
#play-all.is-playing .i-pause{display:block}
.au .set-empty .btn-sticker{margin-top:14px;color:var(--ink)}
/* Artistes suivis */
.au-arts{padding:0;overflow:hidden}
.au-artlist{list-style:none;margin:0;padding:6px 24px 10px}
.au-artlist li{border-top:2px dashed rgba(21,20,18,.2)}
.au-artlist li:first-child{border-top:0}
.au-art{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:14px;padding:12px 2px;color:var(--ink);text-decoration:none}
.au-art:hover{text-decoration:none}
.au-art:hover .au-art__go{background:var(--green)}
.au-art:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:12px}
.au-art__av{width:52px;height:52px;border-width:2px;font-family:var(--disp);font-size:18px}
.au-art__txt{min-width:0;display:flex;flex-direction:column}
.au-art__txt strong{display:flex;align-items:center;gap:7px;min-width:0;font-family:var(--disp);font-weight:400;font-size:24px;line-height:1.15;text-transform:uppercase}
.au-art__nom{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.au-art__txt>span{font-size:13.5px;font-weight:600;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.au-cert{flex:none;width:18px;height:18px}
.au-pro{flex:none;font-style:normal;padding:3px 6px 1px;border:2px solid var(--ink);border-radius:7px;background:var(--green);font-size:11px;letter-spacing:.06em;line-height:1;box-shadow:2px 2px 0 var(--ink);transform:rotate(-4deg)}
.au-art__go{display:grid;place-items:center;width:38px;height:38px;border:2px solid var(--ink);border-radius:10px;background:var(--paper);box-shadow:2px 2px 0 var(--ink)}
.au-art__empty{padding:26px 8px;text-align:center;color:var(--muted);font-size:15px}
.au-art__empty strong{display:block;margin-bottom:4px;font-family:var(--disp);font-weight:400;font-size:24px;line-height:1.1;text-transform:uppercase;color:var(--ink)}
.au-art__empty .btn-sticker{display:flex;width:max-content;margin:14px auto 0}
.au-note{margin:-12px 4px 24px;font-size:13.5px;color:var(--muted)}
.au-note b{color:var(--ink)}
.au-note[hidden]{display:none}
/* Big Up : le bouton « Recharger » sous le solde, puis les derniers mouvements */
.au-solde{grid-template-areas:"n side" "act side"}
.au-solde__n{grid-area:n}
.au-solde .pp-actions{grid-area:act;margin-top:0}
.au-solde .bu-solde__side{grid-area:side}
.au-solde .bu-solde__side b{color:var(--paper)}
.au-headrow{margin-bottom:12px}
.au-headrow h2{font-size:clamp(24px,3vw,30px)}
.au-more{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:14px;padding:10px;border:2px solid var(--ink);border-radius:11px;background:var(--bone);font-weight:800;font-size:14.5px}
.au-more:hover{background:#e9e3d6}
.au-more:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.au-more[hidden]{display:none}
/* Profil : la photo a son propre écran */
.au .ph{margin-bottom:0;padding-bottom:0;border-bottom:0}
.au-strip{margin:0 0 24px}

@media (max-width:860px){
  /* --- Playlist --- */
  .au .au-setlist{padding:0;box-shadow:4px 4px 0 var(--green)}
  .au .au-sethead{gap:10px;padding:12px 12px 12px 14px}
  .au .au-sethead h2{font-size:26px;letter-spacing:.02em}
  .au .au-sethead .btn-sticker{padding:9px 13px;font-size:16px}
  .au .au-basis{flex-wrap:nowrap;gap:10px}
  .au .au-basis__lbl{font-size:12.5px}
  .au .au-basis .stickers{flex-wrap:nowrap;gap:7px;min-width:0;overflow:hidden;padding:0 3px 3px 0}
  .au .au-basis .st{flex:none}
  .au .au-setlist .set-list{padding:6px 8px 8px}
  .au .au-setlist .set-row,.au .au-setlist button.set-row{grid-template-columns:28px 44px minmax(0,1fr) auto;gap:10px;padding:6px 6px}
  .au .au-setlist .set-row .dur,.au .au-setlist .set-row>span:empty{display:none}
  .au .au-setlist .set-row__n{font-size:22px}
  .au .au-setlist .cover{width:44px;height:44px;font-size:15px}
  .au .au-setlist .set-row__txt strong{font-size:19px}
  .au .au-setlist .set-row__txt span{font-size:12.5px}
  .au .au-setlist .set-row__btn{width:38px;height:38px}
  .au .set-empty{margin:10px 6px 8px;padding:22px 14px}
  /* Lecteur plus bas, pour laisser la place à la liste */
  .au .player{padding:8px 10px;gap:10px;border-radius:14px}
  .au .player .cover{width:42px;height:42px;font-size:14px}
  .au .player__title{font-size:18px}
  .au .player__artist{font-size:12px}
  /* --- Mes styles --- */
  .au .picker{gap:12px 10px}
  .au .panel__foot{margin-top:18px;padding-top:16px;gap:10px 14px}
  /* --- Big Up --- */
  .au .au-solde{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n act" "side side";align-items:end;gap:8px 12px;padding:16px}
  .au .au-solde h2{font-size:17px}
  .au .au-solde .bu-solde__n{margin-top:4px;font-size:84px}
  .au .au-solde .bu-solde__side p{font-size:13.5px}
  .au .au-solde .pp-actions{margin:0 0 6px}
  .au .au-solde{position:relative}
  .au .au-solde .bu-stamp{position:absolute;top:12px;right:14px;margin:0}
  .au .au-headrow{margin-bottom:10px}
  .au .au-headrow h2{font-size:22px}
  .au .bu-hist li{padding:9px 0}
  .au .bu-hist li:first-child{padding-top:0}
  .au .bu-hist li:last-child{padding-bottom:0}
  .au .bu-hist__amt{font-size:22px}
  .au .au-more{margin-top:12px;padding:9px;font-size:14px}
  .au .bu-packs{gap:10px}
  .au .bu-pack{padding:14px 6px 12px}
  .au .bu-pack__n{font-size:44px}
  .au .bu-pack__p{font-size:13px;padding:2px 8px}
  /* Quatre montants (pack d'essai compris) : ils restent sur une seule ligne */
  .au .bu-packs:has(.bu-pack:nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
  .au .bu-packs:has(.bu-pack:nth-child(4)) .bu-pack{padding:12px 2px 10px}
  .au .bu-packs:has(.bu-pack:nth-child(4)) .bu-pack__n{font-size:36px}
  .au .bu-packs:has(.bu-pack:nth-child(4)) .bu-pack__u{font-size:12px}
  .au .bu-packs:has(.bu-pack:nth-child(4)) .bu-pack__p{font-size:11.5px;padding:2px 5px}
  .au .bu-check{margin-top:16px;font-size:14.5px}
  .au-note{margin:-4px 4px 14px;font-size:13px}
  /* --- Profil et compte --- */
  .au[data-tab="profil"][data-sub="carte"] .cw-hero .m-pass{box-shadow:6px 6px 0 var(--green)}
  .au .cw-hero .hero-actions{gap:10px;flex-wrap:nowrap}
  .au .cw-hero .hero-actions .btn-sticker{gap:7px;padding:9px 13px;font-size:16px;white-space:nowrap}
  .au-strip{margin:6px 0 14px}
  .au-strip span{line-height:1.2}
  .au .ph{gap:16px}
  .au .ap-session{margin-top:18px;padding-top:16px}
  /* --- Artistes --- */
  .au .au-arts{padding:0}
  .au .au-artlist{padding:4px 12px 6px}
  .au .au-art{grid-template-columns:48px minmax(0,1fr) auto;gap:12px;padding:10px 2px}
  .au .au-art__av{width:48px;height:48px;font-size:17px}
  .au .au-art__txt strong{font-size:22px}
  .au .au-art__txt>span{font-size:13px}
  .au .au-art__go{width:36px;height:36px}
}