/* ==========================================================
   Prodige2rue — écoute swipe (ecoute.html uniquement)
   Style Pass P2R Crew : mêmes couleurs et polices que crew.css.
   ========================================================== */
:root{--ink:#151412;--paper:#fffdf7;--bone:#f3efe6;--muted:#6f695f;--green:#1fd26a;--green-ink:#0b7a3b;--plaque:#1f3f8f;
  --disp:'Anton',Impact,'Arial Narrow Bold',sans-serif;--txt:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',sans-serif;--vcr:'VT323','Courier New',monospace;
  --nav-h:64px;--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--ink);color:var(--paper);font-family:var(--txt);-webkit-font-smoothing:antialiased;overscroll-behavior:none}
body{overflow:hidden}
[hidden]{display:none!important}
button{font:inherit}
:focus-visible{outline:3px solid var(--green);outline-offset:3px}

/* ---------- Cadre : une colonne plein écran ---------- */
/* --vvh / --vvt : zone visible réelle, pour que le panneau des avis reste au-dessus du clavier mobile */
.ec-app{position:fixed;top:var(--vvt,0px);left:50%;width:100%;max-width:520px;height:var(--vvh,100%);transform:translateX(-50%);display:flex;flex-direction:column;background:var(--ink);overflow:hidden}

/* ---------- En-tête ---------- */
.ec-top{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:calc(var(--safe-t) + 14px) 14px 0;pointer-events:none}
.ec-top > *{pointer-events:auto}
.ec-brand{font-family:var(--disp);font-size:18px;letter-spacing:.04em;color:var(--ink);background:var(--green);border:2px solid var(--ink);border-radius:9px;padding:2px 9px;
  transform:rotate(-5deg);box-shadow:3px 3px 0 var(--paper);text-decoration:none}
.ec-tabs{display:flex;gap:16px}
.ec-tab{background:none;border:0;border-bottom:4px solid transparent;padding:8px 0 3px;margin:0;cursor:pointer;font-family:var(--disp);font-size:18px;letter-spacing:.04em;
  text-transform:uppercase;color:#bdb6a8;min-height:44px}
.ec-tab[aria-current="page"]{color:var(--paper);border-bottom-color:var(--green)}
.ec-top__sp{width:52px}
.ec-top.has-3 .ec-top__sp{display:none}   /* onglet Favoris affiché : on libère la place */

/* ---------- Vidéo de fond (réglée dans l'admin) + filtre sombre ---------- */
.ec-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--ink) center/cover no-repeat;pointer-events:none}
.ec-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(var(--blur,0px));transform:scale(1.08)}
.ec-bg__veil{position:absolute;inset:0;background:rgba(21,20,18,var(--veil,.6))}

/* ---------- Fil : un son par écran ---------- */
.ec-feed{position:relative;z-index:1;flex:1;min-height:0;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ec-feed::-webkit-scrollbar{display:none}
.ec-slide{--c:#ffd43b;position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;background:transparent;user-select:none;-webkit-tap-highlight-color:transparent}
.ec-scan{position:absolute;inset:0;z-index:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px)}

/* Incrustations VHS */
.ec-osd{position:absolute;z-index:2;top:calc(var(--safe-t) + 70px);font-family:var(--vcr);font-size:24px;line-height:1;letter-spacing:.04em;text-shadow:2px 2px 0 rgba(0,0,0,.6);pointer-events:none}
.ec-osd--state{left:18px;color:var(--green)}
.ec-osd--ch{right:18px;color:var(--paper)}

/* Scène : pochette XXL au centre, spectre dessous (zone libre entre l'en-tête et les infos du son) */
.ec-stage{position:absolute;z-index:1;left:0;right:0;top:calc(var(--safe-t) + 100px);bottom:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;pointer-events:none}
.ec-cover{--s:min(230px,calc(100vw - 170px));position:relative;flex:none;width:var(--s);height:var(--s);display:grid;place-items:center;overflow:hidden;border:3px solid var(--ink);border-radius:14px;
  background:hsl(var(--h,140) 70% 58%);box-shadow:8px 8px 0 var(--green),0 0 0 3px var(--paper);transform:rotate(-2deg) scale(var(--beat,1));transition:transform .09s linear;will-change:transform}
.ec-cover__ini{font-family:var(--disp);font-size:64px;line-height:1;color:var(--ink)}
.ec-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ec-spec{display:flex;align-items:center;gap:3px;height:48px}
.ec-spec span{width:6px;height:var(--h);border-radius:2px;background:repeating-linear-gradient(to top,var(--green) 0 4px,transparent 4px 6px);transform:scaleY(.18);transition:transform .08s linear}

/* En lecture sans analyseur (iPhone, navigateurs anciens) : mouvement simulé.
   Avec analyseur (.has-live), le JS pilote --beat et les barres sur la vraie musique. */
.ec-slide.is-playing .ec-cover{animation:ecThump .52s cubic-bezier(.2,.8,.3,1) infinite}
.ec-slide.is-playing .ec-spec span{animation:ecBar .8s ease-in-out infinite;animation-delay:var(--d)}
.ec-app.has-live .ec-slide .ec-cover,.ec-app.has-live .ec-slide .ec-spec span{animation:none}
@keyframes ecThump{0%,100%{transform:rotate(-2deg) scale(1)}14%{transform:rotate(-2deg) scale(1.035)}}
@keyframes ecBar{0%,100%{transform:scaleY(.22)}50%{transform:scaleY(1)}}
@keyframes ecReel{to{transform:rotate(360deg)}}

/* Pause : bouton lecture sur la pochette */
.ec-paused{position:absolute;z-index:2;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:var(--paper);color:var(--ink);
  border:3px solid var(--ink);box-shadow:4px 4px 0 var(--green);display:grid;place-items:center;pointer-events:none;opacity:0;transform:scale(.7);transition:opacity .15s,transform .15s}
.ec-paused svg{width:34px;height:34px;margin-left:4px}
.ec-slide.is-paused .ec-paused{opacity:1;transform:scale(1)}

/* Infos du son */
.ec-info{position:absolute;z-index:4;left:16px;right:92px;bottom:18px;display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.ec-new{border:3px solid var(--green);color:var(--green);font-family:var(--disp);font-size:15px;letter-spacing:.12em;text-transform:uppercase;padding:1px 9px;border-radius:6px;
  transform:rotate(-6deg);margin-bottom:4px}
.ec-artist{font-family:var(--disp);font-size:32px;line-height:1.02;text-transform:uppercase;color:var(--paper);text-decoration:none;max-width:100%;overflow-wrap:anywhere}
.ec-artist:hover{text-decoration:underline;text-decoration-thickness:3px}
/* Badges de l'artiste : certifié (bleu, attribué par P2R) et PRO (vert, Pass Pro) */
.ec-cert{display:inline-block;width:.74em;height:.74em;vertical-align:-.07em;margin-left:.1em}
.ec-pro{display:inline-block;vertical-align:.2em;margin-left:.14em;padding:.14em .42em .1em;border:2px solid var(--ink);border-radius:7px;background:var(--green);color:var(--ink);
  font-size:.5em;line-height:1;letter-spacing:.06em;transform:rotate(-4deg)}
.ec-title{font-size:16px;font-weight:600;max-width:100%;overflow-wrap:anywhere}
.ec-tags{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-top:4px}
.ec-plaque{background:var(--plaque);color:#fff;border:1.5px solid #13295f;border-radius:6px;padding:5px 12px;font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  box-shadow:inset 0 0 0 2px var(--plaque),inset 0 0 0 4px #fff}
.ec-genre{background:var(--c);color:var(--ink);border:2px solid var(--ink);border-radius:8px;padding:2px 10px;font-weight:800;font-size:13px;box-shadow:2px 2px 0 var(--paper);transform:rotate(-3deg)}

/* Colonne d'actions */
.ec-rail{position:absolute;z-index:5;right:12px;bottom:18px;width:64px;display:flex;flex-direction:column;align-items:center;gap:12px}
.ec-av{position:relative;width:56px;height:66px}
.ec-av__pic{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;border:3px solid var(--paper);background:var(--c);overflow:hidden;font-family:var(--disp);
  font-size:18px;color:var(--ink);text-decoration:none}
.ec-av__pic img{display:block;width:100%;height:100%;object-fit:cover}
.ec-follow{position:absolute;left:50%;top:36px;width:44px;height:44px;margin-left:-22px;padding:0;border:0;background:none;display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.ec-follow::before{content:"";position:absolute;width:24px;height:24px;border-radius:50%;background:var(--green);border:2px solid var(--ink);box-sizing:border-box}
.ec-follow svg{position:relative;width:14px;height:14px}
.ec-follow .i-check{display:none}
.ec-follow[aria-pressed="true"]::before{background:var(--paper)}
.ec-follow[aria-pressed="true"] .i-plus{display:none}
.ec-follow[aria-pressed="true"] .i-check{display:block}
.ec-act{display:flex;flex-direction:column;align-items:center;gap:4px}
.ec-btn{width:48px;height:48px;border-radius:50%;border:2px solid var(--ink);background:var(--paper);color:var(--ink);box-shadow:3px 3px 0 var(--green);display:grid;place-items:center;
  padding:0;cursor:pointer;transition:background .15s,box-shadow .15s}
.ec-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--green)}
.ec-btn svg{width:24px;height:24px}
.ec-btn[aria-pressed="true"] svg{fill:currentColor}
.ec-btn--like[aria-pressed="true"]{background:var(--green);box-shadow:3px 3px 0 var(--paper)}
.ec-btn--fav[aria-pressed="true"]{background:var(--plaque);color:#fff;box-shadow:3px 3px 0 var(--paper)}
.ec-btn.pop{animation:ecPop .35s ease}
@keyframes ecPop{40%{transform:scale(1.25)}}
.ec-lbl{font-size:12px;font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.7)}

/* Disque du son (pochette), tourne pendant la lecture */
.ec-disc{display:grid;place-items:center;width:52px;height:52px;margin-top:2px;border-radius:50%;background:repeating-radial-gradient(circle,#2b2826 0 2px,#1c1a18 2px 4px);
  border:3px solid var(--ink);box-shadow:0 0 0 2px var(--paper)}
.ec-disc > span{position:relative;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;overflow:hidden;background:hsl(var(--h,140) 70% 62%);
  font-family:var(--disp);font-size:11px;color:var(--ink)}
.ec-disc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ec-slide.is-playing .ec-disc{animation:ecReel 5s linear infinite}

/* Double appui : cœur qui jaillit */
.ec-burst{position:absolute;z-index:6;width:96px;height:96px;margin:-48px 0 0 -48px;color:var(--green);pointer-events:none;animation:ecBurst .8s ease-out forwards}
.ec-burst svg{width:100%;height:100%;fill:currentColor;stroke:var(--ink);stroke-width:1.5;filter:drop-shadow(3px 3px 0 var(--ink))}
@keyframes ecBurst{0%{transform:scale(.3) rotate(-12deg);opacity:0}25%{transform:scale(1.1) rotate(-8deg);opacity:1}60%{transform:scale(1) rotate(-8deg);opacity:1}
  100%{transform:translateY(-60px) scale(.9) rotate(-8deg);opacity:0}}

/* Messages (chargement, vide, erreur) */
.ec-msg{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:32px;text-align:center;color:rgba(255,253,247,.8)}
.ec-msg strong{font-family:var(--disp);font-weight:400;font-size:30px;line-height:1;text-transform:uppercase;color:var(--paper)}

/* ---------- Barre de progression (au-dessus de la navbar) ---------- */
.ec-bar{position:relative;flex:none;height:14px;margin:-7px 0;z-index:8;cursor:pointer;touch-action:none}
.ec-bar::before{content:"";position:absolute;left:0;right:0;top:5px;height:4px;background:#3a3835}
.ec-bar__fill{position:absolute;left:0;top:5px;height:4px;width:0;background:var(--green)}

/* ---------- Navbar ---------- */
.ec-nav{position:relative;z-index:7;flex:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));height:calc(var(--nav-h) + var(--safe-b));padding-bottom:var(--safe-b);
  background:var(--bone);border-top:3px solid var(--ink)}
.ec-nav__it{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;margin:0;padding:0;background:none;border:0;cursor:pointer;color:var(--ink);
  text-decoration:none;font-family:var(--txt);font-size:11px;font-weight:800}
.ec-nav__ic{height:28px;min-width:44px;display:grid;place-items:center;border-radius:14px}
.ec-nav__ic svg{width:22px;height:22px}
.ec-nav__it[aria-current="page"] .ec-nav__ic{background:var(--green);border:2px solid var(--ink)}
.ec-nav__it[aria-current="page"] .ec-nav__ic svg{width:20px;height:20px}

/* ---------- Écran de lancement ---------- */
.ec-start{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;text-align:center;
  background:rgba(21,20,18,.8)}
.ec-start__btn{display:inline-flex;align-items:center;gap:12px;padding:16px 26px;border:3px solid var(--ink);border-radius:16px;background:var(--green);color:var(--ink);
  font-family:var(--disp);font-size:26px;letter-spacing:.04em;text-transform:uppercase;box-shadow:5px 5px 0 var(--paper);transform:rotate(-2deg);cursor:pointer}
.ec-start__btn:active{transform:rotate(-2deg) translate(3px,3px);box-shadow:2px 2px 0 var(--paper)}
.ec-start__txt{margin:0;font-family:var(--vcr);font-size:22px;color:var(--paper)}

/* ---------- Panneau connexion ---------- */
.ec-scrim{position:absolute;inset:0;z-index:40;width:100%;padding:0;border:0;background:rgba(10,10,10,.6);cursor:pointer}
.ec-sheet{position:absolute;left:0;right:0;bottom:0;z-index:41;display:flex;flex-direction:column;gap:12px;padding:10px 20px calc(24px + var(--safe-b));background:var(--bone);color:var(--ink);
  border-top:3px solid var(--ink);border-radius:20px 20px 0 0}
.ec-sheet__grip{align-self:center;width:44px;height:5px;border-radius:3px;background:var(--ink)}
.ec-sheet h2{margin:6px 0 0;font-family:var(--disp);font-weight:400;font-size:30px;line-height:1;text-transform:uppercase}
.ec-sheet p{margin:0;font-size:15px;line-height:1.5;color:var(--muted)}
.ec-sheet__ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.ec-cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;border:2px solid var(--ink);border-radius:12px;background:var(--green);color:var(--ink);
  font-family:var(--disp);font-size:18px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;box-shadow:3px 3px 0 var(--ink);cursor:pointer}
.ec-cta:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.ec-cta--paper{background:var(--paper)}
.ec-msg .ec-cta{box-shadow:3px 3px 0 var(--paper)}

/* Le panneau connexion passe toujours au-dessus du panneau des avis */
#login .ec-scrim{z-index:60}
#login .ec-sheet{z-index:61}
.ec-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Panneau des avis ---------- */
.ec-sheet.ec-avis{top:18%;padding:10px 0 0;gap:0}
.ec-avis .ec-sheet__grip{margin-bottom:6px}
.ec-avis__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 12px 12px 20px;border-bottom:2px dashed var(--ink)}
.ec-avis__hd{min-width:0}
.ec-sheet .ec-avis__head h2{margin:0;display:flex;align-items:baseline;gap:10px;font-size:28px}
#avisCount{font-family:var(--vcr);font-size:24px;color:var(--green-ink)}
.ec-sheet .ec-avis__sub{margin:4px 0 0;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ec-x{flex:none;width:44px;height:44px;border-radius:50%;border:2px solid var(--ink);background:var(--paper);color:var(--ink);box-shadow:2px 2px 0 var(--ink);display:grid;place-items:center;padding:0;cursor:pointer}
.ec-x svg{width:18px;height:18px}
.ec-avis__list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 10px 20px 20px;display:flex;flex-direction:column;gap:18px}
.ec-sheet .ec-avis__empty{margin:auto 0;padding:24px 8px;text-align:center;font-size:15px;color:var(--muted)}
.ec-avis__empty strong{display:block;margin-bottom:4px;font-family:var(--disp);font-weight:400;font-size:24px;text-transform:uppercase;color:var(--ink)}

/* Un avis */
.ec-c{display:grid;grid-template-columns:40px minmax(0,1fr) 44px;gap:0 12px;align-items:start}
.ec-c--reply{grid-template-columns:32px minmax(0,1fr) 44px;gap:0 10px}
.ec-c.is-pinned{padding:10px 0 10px 10px;background:var(--paper);border:2px solid var(--ink);border-radius:14px;box-shadow:3px 3px 0 var(--green);margin-right:6px}
.ec-c__av{position:relative;width:40px;height:40px;border-radius:50%;border:2px solid var(--ink);background:hsl(var(--h,140) 70% 62%);display:grid;place-items:center;overflow:hidden;
  font-family:var(--disp);font-size:14px;color:var(--ink)}
.ec-c--reply .ec-c__av{width:32px;height:32px;font-size:12px}
.ec-c__av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ec-c__main{min-width:0;display:flex;flex-direction:column;gap:3px}
.ec-c__meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}
.ec-c__name{font-weight:800;font-size:14px}
.ec-c__badge{padding:1px 6px;border:2px solid var(--ink);border-radius:5px;background:var(--green);font-family:var(--disp);font-size:11px;letter-spacing:.08em;text-transform:uppercase;transform:rotate(-3deg)}
.ec-c__pin{font-size:12px;font-weight:800;color:var(--green-ink)}
.ec-c__age{font-size:12px;color:var(--muted)}
.ec-sheet .ec-c__body{margin:0;font-size:15px;line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.ec-c__acts{display:flex;flex-wrap:wrap;gap:0 16px}
.ec-link{min-height:32px;margin:0;padding:6px 0;border:0;background:none;cursor:pointer;font-family:var(--txt);font-size:13px;font-weight:800;color:var(--muted)}
.ec-link:hover{color:var(--ink)}
.ec-c__more{color:var(--ink)}
.ec-c__replies{display:flex;flex-direction:column;gap:14px;margin-top:10px}
.ec-c__side{display:flex;flex-direction:column;align-items:center}
.ec-c__like,.ec-c__menu{width:44px;height:40px;padding:0;border:0;background:none;color:var(--ink);display:grid;place-items:center;cursor:pointer}
.ec-c__like svg,.ec-c__menu svg{width:20px;height:20px}
.ec-c__like[aria-pressed="true"] svg{fill:var(--green)}
.ec-c__like.pop{animation:ecPop .35s ease}
.ec-c__n{min-height:14px;font-size:12px;font-weight:800;line-height:1}

/* Saisie */
.ec-avis__foot{display:flex;flex-direction:column;gap:8px;padding:10px 14px calc(12px + var(--safe-b));border-top:2px solid var(--ink);background:var(--bone)}
.ec-reply{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-left:6px;font-size:13px;font-weight:800;color:var(--muted)}
.ec-reply button{width:44px;height:32px;padding:0;border:0;background:none;color:var(--ink);display:grid;place-items:center;cursor:pointer}
.ec-reply svg{width:14px;height:14px}
.ec-compose{display:flex;align-items:center;gap:10px}
.ec-compose input{flex:1;min-width:0;height:46px;padding:0 16px;border:2px solid var(--ink);border-radius:23px;background:var(--paper);color:var(--ink);font-family:var(--txt);font-size:16px}
.ec-compose input::placeholder{color:#8a8377}
.ec-compose__n{font-family:var(--vcr);font-size:18px;color:var(--muted)}
.ec-compose__n:empty{display:none}
.ec-compose__n.is-low{color:#c92a2a}
.ec-send{flex:none;width:46px;height:46px;border-radius:50%;border:2px solid var(--ink);background:var(--green);color:var(--ink);box-shadow:2px 2px 0 var(--ink);display:grid;place-items:center;padding:0;cursor:pointer}
.ec-send:disabled{background:#d9d3c7;box-shadow:none;cursor:default}
.ec-send svg{width:20px;height:20px}
.ec-avis__login{align-self:stretch;font-size:16px}

/* Menu d'un avis (épingler, signaler, supprimer) */
.ec-menu{position:absolute;inset:0;z-index:5;display:flex;align-items:flex-end;background:rgba(21,20,18,.45);border-radius:18px 18px 0 0}
.ec-menu__box{width:100%;display:flex;flex-direction:column;gap:8px;padding:12px 14px calc(14px + var(--safe-b));background:var(--paper);border-top:3px solid var(--ink);border-radius:18px 18px 0 0}
.ec-sheet .ec-menu__q{margin:4px 4px 6px;font-weight:800;font-size:15px;color:var(--ink)}
.ec-menu__it{min-height:48px;padding:0 16px;border:2px solid var(--ink);border-radius:12px;background:var(--bone);color:var(--ink);font-family:var(--txt);font-size:15px;font-weight:800;text-align:left;cursor:pointer}
.ec-menu__it.is-danger{background:#c92a2a;color:#fff}

/* ---------- Big Up : bouton dans la colonne d'actions et panneau d'envoi ---------- */
/* Sticker « BIG UP » penché, avec une pièce dorée « $ » accrochée au coin */
.ec-bigup{position:relative;width:52px;height:46px;margin:4px 0 1px;padding:0;border:2px solid var(--ink);border-radius:12px;background:var(--green);color:var(--ink);
  box-shadow:3px 3px 0 var(--paper);transform:rotate(-7deg);display:grid;place-items:center;cursor:pointer;font-family:var(--disp);font-size:15px;line-height:.95;letter-spacing:.04em;text-align:center}
.ec-bigup:active{transform:rotate(-7deg) translate(2px,2px);box-shadow:1px 1px 0 var(--paper)}
.ec-bigup i{position:absolute;right:-11px;top:-11px;width:24px;height:24px;border-radius:50%;background:#ffd43b;border:2px solid var(--ink);display:grid;place-items:center;
  font-family:var(--disp);font-style:normal;font-size:15px;line-height:1;letter-spacing:0;transform:rotate(16deg)}
.ec-bigup.pop{animation:ecBuPop .45s ease}
@keyframes ecBuPop{35%{transform:rotate(-13deg) scale(1.25)}70%{transform:rotate(-4deg) scale(.96)}}
.ec-act--bigup .ec-lbl{color:var(--green)}
/* « +2 BIG UP » qui s'envole après un envoi */
.ec-buburst{position:absolute;z-index:6;padding:3px 12px;border:2px solid var(--ink);border-radius:10px;background:var(--green);color:var(--ink);box-shadow:3px 3px 0 var(--paper);
  font-family:var(--disp);font-size:22px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;pointer-events:none;animation:ecBuUp 1.2s ease-out forwards}
@keyframes ecBuUp{0%{transform:translate(-100%,0) rotate(-6deg) scale(.6);opacity:0}18%{transform:translate(-100%,-8px) rotate(-6deg) scale(1.05);opacity:1}
  70%{opacity:1}100%{transform:translate(-100%,-110px) rotate(-6deg);opacity:0}}

/* Panneau d'envoi */
.ec-sheet .ec-bu__to b{color:var(--ink)}
.ec-bu__amts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:4px}
.ec-bu__amt{min-height:66px;margin:0;padding:6px 4px;border:2px solid var(--ink);border-radius:14px;background:var(--paper);color:var(--ink);box-shadow:3px 3px 0 var(--ink);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-family:var(--disp);font-size:28px;line-height:1;transition:background .15s,transform .15s}
.ec-bu__amt small{font-family:var(--txt);font-size:11px;font-weight:800}
.ec-bu__amt[aria-pressed="true"]{background:var(--green);transform:rotate(-2deg) scale(1.04)}
.ec-bu__amt:disabled{opacity:.38;box-shadow:none;cursor:default}
.ec-sheet .ec-bu__bal{font-weight:800;color:var(--ink)}
.ec-sheet .ec-bu__err{padding:8px 12px;border:2px solid #c92a2a;border-radius:10px;background:#fff0f0;color:#c92a2a;font-weight:700;font-size:14px}
.ec-sheet .ec-bu__note{font-size:13px}
.ec-cta:disabled{opacity:.5;box-shadow:none;cursor:default}

/* ---------- Message éphémère ---------- */
.ec-toast{position:absolute;left:50%;top:calc(var(--safe-t) + 112px);z-index:70;max-width:calc(100% - 40px);padding:8px 14px;border:2px solid var(--ink);border-radius:10px;
  background:var(--paper);color:var(--ink);box-shadow:3px 3px 0 var(--green);font-weight:800;font-size:14px;text-align:center;pointer-events:none;opacity:0;
  transform:translate(-50%,-10px) rotate(-2deg);transition:opacity .2s,transform .2s}
.ec-toast.is-on{opacity:1;transform:translate(-50%,0) rotate(-2deg)}

/* ---------- Ordinateur : colonne centrée + flèches ---------- */
.ec-arrows{display:none}
@media (min-width:760px) and (hover:hover){
  body{background:#0e0d0c}
  .ec-app{border-left:2px solid #2c2a27;border-right:2px solid #2c2a27}
  .ec-arrows{position:fixed;z-index:10;left:calc(50% + 290px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px}
  .ec-arrow{width:52px;height:52px;border-radius:50%;border:2px solid var(--ink);background:var(--paper);color:var(--ink);box-shadow:3px 3px 0 var(--green);display:grid;place-items:center;padding:0;cursor:pointer}
  .ec-arrow svg{width:24px;height:24px}
  .ec-arrow:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--green)}
}

/* ---------- Petits écrans (hauteur) ---------- */
@media (max-height:700px){
  .ec-osd{top:calc(var(--safe-t) + 62px);font-size:20px}
  .ec-stage{top:calc(var(--safe-t) + 88px);bottom:188px;gap:12px}
  .ec-cover{--s:min(165px,calc(100vw - 170px))}
  .ec-cover__ini{font-size:48px}
  .ec-spec{height:34px}
  .ec-paused{width:68px;height:68px;margin:-34px 0 0 -34px}
  .ec-rail{gap:8px}
  .ec-disc{width:44px;height:44px}
  .ec-disc > span{width:26px;height:26px}
  .ec-btn{width:44px;height:44px}
  .ec-btn svg{width:22px;height:22px}
  .ec-artist{font-size:26px}
  .ec-bigup{width:48px;height:42px;font-size:14px;margin:3px 0 0}
  .ec-bigup i{width:22px;height:22px;font-size:14px;right:-10px;top:-10px}
  .ec-bu__amt{min-height:58px;font-size:25px}
}
/* Très petits écrans : on retire le disque et les étiquettes fixes pour que la colonne tienne sous l'en-tête */
@media (max-height:620px){
  .ec-rail{gap:6px}
  .ec-disc{display:none}
  .ec-act{gap:2px}
  .ec-lbl{font-size:11px}
  .ec-osd--ch{display:none}
}
@media (max-height:540px){
  .ec-av{width:48px;height:58px}
  .ec-av__pic{width:48px;height:48px}
  .ec-follow{top:30px}
  .ec-btn{width:40px;height:40px}
  .ec-btn svg{width:20px;height:20px}
  .ec-bigup{width:44px;height:38px;font-size:13px}
}

@media (max-width:400px){
  .ec-tabs{gap:12px}
  .ec-tab{font-size:16px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .ec-feed{scroll-behavior:auto}
}