/* Bug Chromium/WebKit connu : l'attribut `hidden` (display:none via la feuille
   UA) ne s'applique pas aux éléments <svg> inline (portée SVG, hors du
   sélecteur UA `[hidden]` qui ne couvre que le namespace HTML). Sans ce
   correctif, deux <svg> togglées via .hidden (ex: icônes play/pause) peuvent
   s'afficher SUPERPOSÉES au lieu de se remplacer. */
svg[hidden] { display: none !important; }

/* ── Icones animees (remplacent les emojis, cf. templates/partials/icons.html.twig) ── */
.icon { display: inline-block; vertical-align: -0.15em; flex: none; animation: icon-pop .35s cubic-bezier(.34,1.56,.64,1) both; }
.icon-sm { width: .85em; height: .85em; }
.icon-lg { width: 1.4em; height: 1.4em; }
.icon-xl { width: 2em; height: 2em; }
@keyframes icon-pop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* icones "vivantes" : boucle continue et discrete */
.icon-fire { animation: icon-pop .35s cubic-bezier(.34,1.56,.64,1) both, icon-flicker 1.6s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes icon-flicker { 0%,100% { transform: scale(1) rotate(-1deg); } 50% { transform: scale(1.08) rotate(1deg); } }

.icon-bell { transform-origin: 50% 0%; }
.icon-bell:hover, .header-icon-btn:hover .icon-bell { animation: icon-ring .5s ease-in-out; }
@keyframes icon-ring { 0%,100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } }

.icon-heart.is-active, .icon-heart:hover { animation: icon-pop .35s cubic-bezier(.34,1.56,.64,1) both, icon-heartbeat 1.1s ease-in-out infinite; color: #f87171; }
@keyframes icon-heartbeat { 0%,100% { transform: scale(1); } 25% { transform: scale(1.18); } 40% { transform: scale(1); } 60% { transform: scale(1.12); } }

.icon-dot.icon-live { animation: icon-pop .35s both, icon-live-pulse 1.4s ease-in-out infinite; }
@keyframes icon-live-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.icon-star.icon-twinkle { animation: icon-pop .35s both, icon-twinkle 2.2s ease-in-out infinite; }
@keyframes icon-twinkle { 0%,100% { transform: scale(1) rotate(0deg); opacity: 1; } 50% { transform: scale(1.15) rotate(8deg); opacity: .8; } }

.icon-music-note.icon-playing { animation: icon-pop .35s both, icon-bounce 1s ease-in-out infinite; }
@keyframes icon-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

/* icones cliquables : reaction douce au survol/tap, coherente avec les boutons existants */
button .icon, a .icon, .son-action-btn .icon, .header-icon-btn .icon { transition: transform .15s ease; }
button:hover .icon, a:hover .icon, .son-action-btn:hover .icon { transform: scale(1.12); }
button:active .icon, a:active .icon { transform: scale(.92); }

/* ── Coquille mobile : en-tête + nav du bas, responsive PWA ─────────────── */
* { box-sizing: border-box; }
body { max-width: 480px; margin: 0 auto; position: relative; background: var(--bg-deep); overflow-x: hidden; }
.app-content { padding-bottom: 76px; min-height: 100vh; }

.app-header { padding: 12px 18px; }
.app-header-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.app-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; flex: none; }
.app-logo-img { height: 32px; width: 32px; border-radius: 50%; object-fit: cover; flex: none; }
.app-logo-name { font-size: 17px; font-weight: 900; letter-spacing: .2px; background: linear-gradient(135deg, var(--accent-app), var(--accent-pink)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; white-space: nowrap; }
.artiste-chip { flex: none; font-size: 10.5px; font-weight: 700; color: var(--accent-app); background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.3); padding: 5px 10px; border-radius: 20px; white-space: nowrap; }

.app-header-icons { display: flex; align-items: center; gap: 8px; }
.header-icon-btn { position: relative; font-size: 16px; text-decoration: none; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.05); }
.header-icon-badge { position: absolute; top: -3px; right: -3px; background: #f87171; color: #fff; font-size: 9px; font-weight: 700; min-width: 15px; height: 15px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 3px; }

.onair-widget { position: fixed; left: 8px; right: 8px; bottom: 76px; max-width: 464px; margin: 0 auto; z-index: 50; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.4); overflow: hidden; }
.onair-head { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: none; border: none; color: var(--text); font-size: .8rem; font-weight: 700; cursor: pointer; }
.onair-close { color: var(--muted); font-weight: 400; padding: 0 4px; }
.onair-body { padding: 0 12px 10px; font-size: .75rem; color: var(--muted); }

.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; max-width: 480px; margin: 0 auto; z-index: 40; display: flex; align-items: center; justify-content: space-around; background: var(--bg-deep); border-top: 1px solid var(--border); height: 64px; padding-bottom: env(safe-area-inset-bottom, 0); }
.nav-item { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; color: var(--muted); text-decoration: none; }
.nav-item svg { stroke: var(--muted); }
.nav-item span { font-size: 9.5px; font-weight: 600; }
.nav-item.active { color: var(--accent-app); }
.nav-item.active svg { stroke: var(--accent-app); }

@media (min-width: 560px) {
    body { max-width: 100%; }
    .app-content { max-width: 480px; margin: 0 auto; }
    .bottom-nav { max-width: 480px; box-shadow: 0 -4px 24px rgba(0,0,0,.3); border-left: 1px solid var(--border); border-right: 1px solid var(--border); border-radius: 16px 16px 0 0; }
}

.auth-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.auth-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 28px; width: 100%; max-width: 360px; }
.auth-logo { font-size: 1.4rem; font-weight: 700; text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px; }
.auth-logo-img { height: 40px; width: 40px; border-radius: 50%; object-fit: cover; }
.auth-sub { color: var(--muted); text-align: center; margin: 4px 0 20px; font-size: .85rem; }
.auth-card label { display: block; font-size: .78rem; color: var(--muted); margin: 12px 0 4px; }
.auth-card input { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-deep); color: var(--text); }
.auth-card button { width: 100%; margin-top: 20px; padding: 12px; border: none; border-radius: 8px; background: linear-gradient(135deg, var(--accent-app), var(--accent-purple)); color: #fff; font-weight: 600; cursor: pointer; }
.auth-error { background: rgba(239,68,68,.15); color: #fca5a5; border-radius: 8px; padding: 8px 12px; font-size: .82rem; margin-bottom: 12px; }
.auth-hint { text-align: center; color: var(--muted); font-size: .72rem; margin-top: 16px; }

.topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.topbar-logo { font-weight: 700; }
.topbar-user { font-size: .82rem; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.topbar-user a { color: var(--muted); text-decoration: none; }

.page { padding: 20px; }
.page-sub { color: var(--muted); font-size: .85rem; }
.page-sub strong { color: var(--accent-app); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin-top: 16px; }
.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 10px; }
.card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.card h3 { font-size: .88rem; margin: 8px 0 2px; }
.card p { font-size: .76rem; color: var(--muted); margin: 0; }
.card .prix { color: var(--accent-app); font-weight: 600; }

.topbar-nav { display: flex; gap: 16px; font-size: .85rem; overflow-x: auto; white-space: nowrap; }
.topbar-nav a { color: var(--text); text-decoration: none; }
.topbar-nav a:hover { color: var(--accent-app); }
.badge { background: var(--accent-app); color: #fff; border-radius: 999px; font-size: .65rem; padding: 1px 6px; margin-left: 4px; }

.section-block { margin-top: 26px; }
.section-block h2 { font-size: 1rem; margin-bottom: 8px; }

.actions-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0; }
.btn-primary { background: linear-gradient(135deg, var(--accent-app), var(--accent-purple)); color: #fff; border: none; border-radius: 8px; padding: 10px 16px; font-weight: 600; cursor: pointer; text-decoration: none; }
.btn-outline { background: transparent; color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 10px 16px; cursor: pointer; text-decoration: none; }

.flash { padding: 10px 16px; text-align: center; font-size: .85rem; }
.flash-success { background: rgba(16,185,129,.15); color: #6ee7b7; }

.profil-form { max-width: 420px; }
.profil-form label { display: block; font-size: .78rem; color: var(--muted); margin: 12px 0 4px; }
.profil-form input, .profil-form select, .profil-form textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-deep); color: var(--text); font-family: inherit; }
.profil-form button { margin-top: 18px; padding: 10px 18px; border: none; border-radius: 8px; background: var(--accent-app); color: #fff; cursor: pointer; }

.prix-breakdown { margin-top: 10px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; }
.prix-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 6px 0; font-size: .8rem; color: var(--muted); border-bottom: 1px solid var(--border); }
.prix-row > span:first-child { text-align: center; }
.prix-row strong { color: var(--text); font-weight: 700; }
.prix-row:last-child { border-bottom: none; }
.prix-row-plus strong { color: var(--accent-purple); }
.prix-row-total { font-weight: 800; }
.prix-row-total span, .prix-row-total strong { color: var(--text); font-size: .85rem; }
.prix-row-minus strong { color: #f87171; }
.prix-row-gain { border-top: 2px solid var(--accent-app); margin-top: 4px; padding-top: 10px; }
.prix-row-gain span { color: var(--text); font-weight: 700; }
.prix-row-gain strong { color: #10b981; font-size: 1rem; }
.prix-row-gain strong.prix-gain-negatif { color: #f87171; }

/* ── Upload : sélecteur de type, multi-piste, promo, BIG_FLOW, CGU ── */
.type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; margin: 6px 0 4px; }
.type-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-card); cursor: pointer; text-align: center; color: var(--muted); font-size: .78rem; }
.type-card svg { width: 20px; height: 20px; }
.type-card small { font-size: .65rem; color: var(--muted); }
.type-card.selected { border-color: var(--accent-app); color: var(--text); background: rgba(139,92,246,.12); }

.btn-secondary { margin-top: 10px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); cursor: pointer; font-size: .82rem; }

.track-entry { display: flex; align-items: center; gap: 8px; margin-top: 8px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
.track-num-badge { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-app); color: #fff; font-size: .72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.track-entry-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.track-entry-fields input { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-deep); color: var(--text); font-size: .82rem; }
.track-entry-row { display: flex; gap: 6px; }
.track-entry-row input[type="file"] { flex: 1; min-width: 0; padding: 6px; font-size: .72rem; }
.demo-sec-input { width: 90px !important; flex: none !important; }
.btn-remove-track { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-deep); color: #f87171; cursor: pointer; }
.btn-remove-track:disabled { opacity: .4; cursor: not-allowed; }

.toggle-row { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--text); margin: 14px 0 6px; cursor: pointer; }
.toggle-row input[type="checkbox"] { width: auto; }
.sub-block { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px 4px; margin-bottom: 10px; }

.bigflow-note { font-size: .72rem; color: var(--muted); margin: 0 0 8px; }

.cgu-block { margin-top: 18px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; }
.cgu-block summary { cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--text); }
.cgu-text { font-size: .75rem; color: var(--muted); margin-top: 8px; }
.cgu-text ul { padding-left: 18px; margin: 6px 0; }
.cgu-block .toggle-row { margin-top: 10px; margin-bottom: 0; }

.upload-error { margin-top: 14px; background: rgba(239,68,68,.15); color: #fca5a5; border-radius: 8px; padding: 10px 12px; font-size: .82rem; }

#submit-btn:disabled { opacity: .5; cursor: not-allowed; }

.rank-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.rank-row { display: flex; align-items: center; gap: 10px; background: var(--bg-card); border-radius: 10px; padding: 8px 12px; text-decoration: none; color: var(--text); }
.rank-info { flex: 1; display: flex; flex-direction: column; }
.rank-info small { color: var(--muted); }

.tabs { display: flex; gap: 6px; overflow-x: auto; margin: 14px 0; border-bottom: 1px solid var(--border); }
.tab-btn { background: none; border: none; color: var(--muted); padding: 10px 12px; cursor: pointer; font-size: .82rem; white-space: nowrap; border-bottom: 2px solid transparent; }
.tab-btn.active { color: var(--accent-app); border-bottom-color: var(--accent-app); }

.upload-progress { background: var(--bg-deep); border-radius: 8px; height: 8px; overflow: hidden; margin-top: 10px; }
.upload-progress-fill { background: var(--accent-app); height: 100%; width: 0%; transition: width .2s; }

.page-back-link { display: inline-block; color: var(--muted); text-decoration: none; font-size: .82rem; font-weight: 600; margin-bottom: 10px; }

/* ══════════════════════════════════════════════════════════════════════════
   DASHBOARD (Espace Artiste) — port fidèle de artiste.page.html/scss (Ionic)
   ══════════════════════════════════════════════════════════════════════════ */

.music-banner { position: relative; overflow: hidden; background: linear-gradient(135deg, #1a0030 0%, #0d0d1f 60%, #1a0020 100%); padding: 26px 20px 20px; }
.banner-notes { position: absolute; inset: 0; pointer-events: none; }
.note { position: absolute; font-size: 1.2rem; opacity: 0; animation: noteFloat 5s ease-in-out infinite; }
.n1 { left: 8%; animation-delay: 0s; color: var(--accent-pink); }
.n2 { left: 75%; animation-delay: 1.4s; color: var(--accent-purple); }
.n3 { left: 30%; animation-delay: 2.8s; color: var(--accent-pink); font-size: .9rem; }
.n4 { left: 55%; animation-delay: .7s; color: var(--accent-blue); }
@keyframes noteFloat { 0% { opacity: 0; transform: translateY(40px) scale(.8); } 20% { opacity: .6; } 80% { opacity: .3; } 100% { opacity: 0; transform: translateY(-50px) scale(1.1); } }
.banner-eq { display: flex; align-items: flex-end; gap: 3px; height: 18px; margin-bottom: 8px; }
.banner-eq .b { width: 3px; border-radius: 2px; background: linear-gradient(to top, var(--accent-pink), var(--accent-purple)); animation: barBeat 1.2s ease-in-out infinite alternate; }
.banner-eq .b:nth-child(1) { height: 7px; animation-delay: 0s; }
.banner-eq .b:nth-child(2) { height: 14px; animation-delay: .2s; }
.banner-eq .b:nth-child(3) { height: 9px; animation-delay: .4s; }
.banner-eq .b:nth-child(4) { height: 16px; animation-delay: .1s; }
.banner-eq .b:nth-child(5) { height: 6px; animation-delay: .3s; }
.banner-eq .b:nth-child(6) { height: 11px; animation-delay: .5s; }
@keyframes barBeat { from { transform: scaleY(.3); opacity: .5; } to { transform: scaleY(1); opacity: 1; } }
.banner-content { position: relative; z-index: 1; }
.banner-sub { font-size: 10.5px; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: 1px; margin: 0 0 4px; }
.banner-title { font-size: 20px; font-weight: 800; color: #fff; margin: 0 0 14px; background: linear-gradient(135deg, #fff 60%, var(--accent-pink)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cta-btn { display: inline-flex; align-items: center; gap: 6px; padding: 12px 22px; border-radius: 12px; background: linear-gradient(135deg, var(--accent-pink), var(--accent-purple)); color: #fff; font-weight: 700; font-size: .9rem; text-decoration: none; }
.major-managed-banner { display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.25); border-radius: 12px; padding: 12px; color: rgba(255,255,255,.7); font-size: .84rem; }

.artist-identity { background: var(--bg-card); margin-bottom: 4px; }
.banniere-zone { position: relative; width: 100%; height: 130px; background: linear-gradient(135deg, #1a0030 0%, #0d0d2a 100%); overflow: hidden; }
.banniere-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 6px; color: rgba(255,255,255,.3); font-size: 11px; }
.artist-info-row { display: flex; align-items: flex-start; gap: 14px; padding: 0 14px 16px; margin-top: -28px; }
.poster-wrap { position: relative; flex: none; width: 68px; height: 68px; border-radius: 50%; border: 2.5px solid var(--bg-deep); overflow: hidden; background: var(--bg-sidebar); }
.poster-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.poster-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: rgba(255,255,255,.3); font-size: 26px; }
.artist-text { flex: 1; min-width: 0; padding-top: 30px; display: flex; flex-direction: column; gap: 3px; }
.artist-nom { font-size: 15px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.artist-bio { font-size: 12px; color: #888; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.artist-bio--empty { font-style: italic; color: #555; }
.edit-profil-btn { margin-top: 6px; background: none; border: 1px solid #333; border-radius: 20px; color: #aaa; font-size: 11px; padding: 3px 10px; display: inline-flex; align-items: center; gap: 4px; text-decoration: none; width: fit-content; }

.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 14px; }
.stats-grid-4 { grid-template-columns: repeat(2, 1fr); }
.stat-card { background: var(--bg-card); border-radius: 12px; padding: 12px 8px; text-align: center; border-left: 3px solid #333; }
.stat-card.vert { border-color: #2ecc71; }
.stat-card.jaune { border-color: #f39c12; }
.stat-card.bleu { border-color: #3498db; }
.stat-card.violet { border-color: #9b59b6; }
.stat-card.rose { border-color: var(--accent-pink); }
.stat-val { display: block; font-size: 17px; font-weight: 700; color: #fff; }
.stat-val small { font-size: 10px; font-weight: 400; color: #888; }
.stat-lbl { display: block; font-size: 10px; color: #888; margin-top: 2px; }

.section-title { color: #fff; font-size: 14.5px; font-weight: 700; padding: 16px 14px 6px; margin: 0; }

.titres-list { padding-bottom: 8px; }
.titre-card { display: flex; align-items: center; gap: 12px; background: var(--bg-card); margin: 0 12px 10px; border-radius: 12px; padding: 10px; }
.pochette { width: 52px; height: 52px; border-radius: 8px; background-size: cover; background-position: center; flex: none; }
.titre-info { flex: 1; min-width: 0; }
.titre-nom { display: block; color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.titre-meta { display: block; color: #888; font-size: 11px; margin: 2px 0 4px; text-transform: capitalize; }
.titre-chiffres { display: flex; gap: 9px; font-size: 11px; color: #aaa; flex-wrap: wrap; }
.titre-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.titre-edit-link { font-size: 11px; color: var(--accent-app); text-decoration: none; font-weight: 600; }
.badge-vert { background: rgba(46,204,113,.18); color: #2ecc71; }
.badge-jaune { background: rgba(243,156,18,.18); color: #f39c12; }
.badge-rouge { background: rgba(231,76,60,.18); color: #e74c3c; }

.empty-state { text-align: center; padding: 44px 22px 20px; color: #888; }
.empty-state-inline { text-align: center; padding: 20px; color: var(--muted); font-size: .85rem; }
.empty-vinyl { font-size: 50px; margin-bottom: 10px; display: inline-block; animation: vinylSpin 8s linear infinite; }
@keyframes vinylSpin { to { transform: rotate(360deg); } }
.empty-sub { font-size: 12.5px; color: #666; margin: 4px 0 18px; }
.empty-cta { display: inline-block; padding: 11px 22px; border-radius: 12px; background: linear-gradient(135deg, var(--accent-pink), var(--accent-purple)); color: #fff; font-weight: 700; font-size: .86rem; text-decoration: none; }

/* ══════════════════════════════════════════════════════════════════════════
   ARTISTE STUDIO — bandeau d'onglets + vues (port de artiste-studio.page)
   ══════════════════════════════════════════════════════════════════════════ */

.studio-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 16px 10px; }
.studio-title { font-size: 1.1rem; font-weight: 800; color: #fff; margin: 0; }
.studio-publish-btn { flex: none; background: linear-gradient(135deg, var(--accent-pink), var(--accent-purple)); color: #fff; font-size: .78rem; font-weight: 700; padding: 7px 14px; border-radius: 18px; text-decoration: none; white-space: nowrap; }
.studio-tabs { display: flex; gap: 6px; padding: 0 12px 12px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border); }
.studio-tabs::-webkit-scrollbar { display: none; }
.studio-tab { flex: none; padding: 8px 13px; border-radius: 18px; font-size: 12px; font-weight: 600; color: var(--muted); text-decoration: none; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); white-space: nowrap; }
.studio-tab.active { background: rgba(139,92,246,.15); border-color: rgba(139,92,246,.4); color: var(--accent-app); font-weight: 700; }
.studio-body { padding: 14px 0 20px; }
.studio-body .profil-form,
.studio-body .rank-list,
.studio-body .section-title,
.studio-body .page-sub,
.studio-body .fans-toolbar,
.studio-body .fans-period { padding-left: 14px; padding-right: 14px; }
.studio-body .fans-stats-row,
.studio-body .fans-chart-card,
.studio-body .billet-events,
.studio-body .rapports-grid,
.studio-body .demande-card,
.studio-body .wallet-card { margin-left: 14px; margin-right: 14px; }
.studio-form { max-width: none; }
.studio-fans-count { padding: 0 14px; }

.solde-hero { margin: 4px 14px 6px; padding: 22px 18px; border-radius: 16px; background: linear-gradient(135deg, rgba(139,92,246,.18), rgba(244,21,126,.1)); border: 1px solid rgba(139,92,246,.25); text-align: center; }
.solde-hero-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: rgba(255,255,255,.45); margin: 0 0 6px; }
.solde-hero-amount { font-size: 30px; font-weight: 900; color: #fff; margin: 0; }
.solde-hero-amount span { font-size: 14px; font-weight: 700; color: rgba(255,255,255,.55); }

.sons-list { display: flex; flex-direction: column; gap: 8px; padding: 0 14px; }
.son-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--bg-card); border-radius: 12px; padding: 10px; }
.son-card-main { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.son-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.son-dot-vert { background: #2ecc71; }
.son-dot-jaune { background: #f39c12; }
.son-dot-rouge { background: #e74c3c; }
.son-thumb { width: 46px; height: 46px; border-radius: 8px; background-size: cover; background-position: center; flex: none; }
.son-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.son-titre { font-size: 13.5px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.son-meta { font-size: 10.5px; color: #888; text-transform: capitalize; }
.son-chiffres { font-size: 10.5px; color: #aaa; }
.son-actions { display: flex; align-items: center; gap: 4px; flex: none; }
.son-actions form { margin: 0; }
.son-action-btn { width: 30px; height: 30px; border-radius: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: var(--text); display: flex; align-items: center; justify-content: center; font-size: 13px; text-decoration: none; cursor: pointer; }
.son-action-danger { color: #f87171; border-color: rgba(239,68,68,.25); }

.fan-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex: none; background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue)); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; }
.fan-avatar img { width: 100%; height: 100%; object-fit: cover; }

.fans-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0; flex-wrap: wrap; }
.fans-period { display: flex; gap: 6px; }
.chip { font-size: .75rem; padding: 5px 12px; border-radius: 20px; background: var(--bg-card); border: 1px solid var(--border); color: var(--muted); text-decoration: none; }
.chip-active { background: var(--accent-app); border-color: var(--accent-app); color: #fff; }
.fans-super-toggle { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--muted); }
#sort-select { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-deep); color: var(--text); font-size: .8rem; }

.fans-chart-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin-bottom: 10px; }
.fans-chart-title { font-size: .75rem; color: var(--muted); margin: 0 0 8px; display: flex; align-items: center; gap: 6px; }
.dot-online, .dot-offline { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-left: 6px; }
.dot-online { background: var(--accent-app); }
.dot-offline { background: var(--accent-pink); margin-left: 10px; }
.fans-chart-svg { width: 100%; height: 100px; display: block; }
.chart-line { fill: none; stroke-width: 2; }
.chart-line-online { stroke: var(--accent-app); }
.chart-line-offline { stroke: var(--accent-pink); }
.fans-chart-footer { display: flex; justify-content: space-between; font-size: .68rem; color: var(--muted); margin-top: 4px; }

.fans-stats-row { display: flex; gap: 10px; margin-bottom: 10px; }
.fans-stat { flex: 1; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 10px; text-align: center; }
.fans-stat strong { display: block; font-size: 1.1rem; color: var(--text); }
.fans-stat span { font-size: .7rem; color: var(--muted); }

.superfan-badge { font-size: .65rem; background: rgba(234,179,8,.15); color: #eab308; padding: 1px 6px; border-radius: 8px; margin-left: 6px; }

.current-image-preview { width: 100%; max-width: 160px; border-radius: 10px; overflow: hidden; margin-bottom: 8px; }
.current-image-preview img { width: 100%; display: block; }
.current-image-preview-wide { max-width: 100%; aspect-ratio: 16/6; }
.current-image-preview-wide img { width: 100%; height: 100%; object-fit: cover; }

.account-section { padding: 16px 14px 4px; }
.logout-btn { display: block; text-align: center; margin-top: 14px; padding: 12px; border-radius: 10px; background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.2); color: #f87171; font-weight: 700; font-size: .88rem; text-decoration: none; }

.billetterie-link { display: block; margin: 0 14px 16px; padding: 12px 14px; background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 10px; color: var(--text); text-decoration: none; font-size: .86rem; font-weight: 600; }

.btn-small { padding: 6px 12px; font-size: .75rem; }

.billet-events { display: flex; flex-direction: column; gap: 10px; }
.billet-event-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.billet-event-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.billet-event-lieu { font-size: .75rem; color: var(--muted); margin: 0 0 8px; }
.billet-paliers { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.billet-palier-row { display: flex; align-items: center; gap: 8px; font-size: .78rem; }
.palier-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.palier-nom { flex: 1; color: var(--text); }
.palier-vendus { color: var(--muted); }
.palier-revenu { color: var(--accent-app); font-weight: 700; min-width: 70px; text-align: right; }
.billet-event-foot { display: flex; justify-content: space-between; align-items: center; font-size: .75rem; color: var(--muted); padding-top: 6px; border-top: 1px solid var(--border); margin-top: 4px; }
.billet-event-foot strong { color: var(--text); }

.rapports-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.rapport-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.rapport-title { font-size: .78rem; font-weight: 700; color: var(--text); margin: 0 0 8px; }
.rapport-row { display: flex; justify-content: space-between; font-size: .78rem; padding: 5px 0; border-bottom: 1px solid var(--border); color: var(--muted); }
.rapport-row:last-child { border-bottom: none; }
.rapport-row strong { color: var(--text); }
.rapport-row small { color: var(--muted); font-weight: 400; }

.montant-positif { color: #10b981; font-weight: 700; font-size: .85rem; }
.montant-negatif { color: #f87171; font-weight: 700; font-size: .85rem; }

.promo-subtabs { flex-wrap: wrap; }

.wallet-card { background: linear-gradient(135deg, rgba(139,92,246,.15), rgba(236,72,153,.1)); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 10px; }
.wallet-label { font-size: .72rem; color: var(--muted); margin: 0; text-transform: uppercase; letter-spacing: .4px; }
.wallet-amount { font-size: 1.6rem; font-weight: 800; color: var(--text); margin: 4px 0; }
.wallet-sub { font-size: .75rem; color: var(--muted); margin: 0 0 10px; }

.modal-sheet { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: flex-end; justify-content: center; z-index: 200; }
.modal-sheet[hidden] { display: none; }
.modal-sheet-inner { background: var(--bg-deep); border-radius: 16px 16px 0 0; padding: 20px 16px 28px; width: 100%; max-width: 480px; max-height: 80vh; overflow-y: auto; }
.modal-sheet-inner h3 { margin: 0 0 10px; font-size: 1rem; color: var(--text); }

.demande-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }