/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════
   Espace artiste (22/10/2026) : liste /artistes, page /artiste/{slug}, mon espace artiste, lecteur d'extraits,
   section « Avec » de la page d'un événement, programmation (organisateur). Chargé après pages.css (variables --nt-*).
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════ */

.ar-verified { color: #3b82f6; font-size: .9em; margin-left: 2px; }
.ar-initial { font-size: 2.4rem; font-weight: 800; color: #fff; }

/* ── Photo ronde (programmation, listes) ── */
.ar-avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; background: var(--nt-grad); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; }
.ar-avatar img { width: 100%; height: 100%; object-fit: cover; }
.nt-thumb.ar-round { border-radius: 50%; }

/* ── Page d'un artiste : contenu ── */
.ar-status { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; font-size: .88rem; margin-bottom: 12px; }
.ar-status i { font-size: 1.15rem; line-height: 1.2; }
.ar-status.warn { background: #fef3c7; color: #92400e; }
.ar-status.bad { background: #fee2e2; color: #991b1b; }
.ar-manage { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 14px; border-radius: 16px; background: var(--nt-tint); border: 1px solid #e9d5ff; color: #4c1d95; text-decoration: none; }
.ar-manage > i:first-child { width: 40px; height: 40px; border-radius: 12px; background: var(--nt-grad); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; flex: 0 0 auto; }
.ar-manage span { display: flex; flex-direction: column; min-width: 0; }
.ar-manage small { color: #6b7280; font-size: .78rem; }
.ar-manage:hover { color: #4c1d95; border-color: #c4b5fd; }
.ar-bio { white-space: pre-line; color: #374151; margin: 0; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.ar-bio.open { display: block; -webkit-line-clamp: unset; }
.ar-link-btn { background: none; border: 0; padding: 6px 0 0; color: #6d28d9; font-weight: 700; font-size: .88rem; }
.ar-tracks { display: flex; flex-direction: column; gap: 8px; }

/* ── Mon espace artiste ── */
.ar-reason { padding: 0 14px 12px; font-size: .82rem; color: #991b1b; }
.ar-reason.muted { color: var(--nt-muted); }
.ar-stats { padding: 0 14px 14px; }
.ar-stat-tracks { background: #faf7ff; border-radius: 14px; padding: 12px; }
.ar-stat-head { font-weight: 800; font-size: .85rem; margin-bottom: 8px; color: var(--nt-ink); }
.ar-stat-track { font-size: .84rem; margin-bottom: 8px; }
.ar-stat-track .nt-bar { margin-top: 4px; }

/* ── Formulaire de page artiste ── */
.ar-form-page .form-label { font-weight: 700; font-size: .88rem; color: #374151; }
.ar-form-page .form-control { min-height: 46px; }
.ar-check { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--nt-line); border-radius: 14px; background: #fff; cursor: pointer; }
.ar-check .form-check-input { width: 1.3em; height: 1.3em; margin-top: .1em; flex: 0 0 auto; }
.ar-check span { display: flex; flex-direction: column; font-size: .9rem; color: var(--nt-ink); }
.ar-check small { color: var(--nt-muted); font-size: .8rem; }
.ar-upload { position: relative; border: 2px dashed #ddd6fe; border-radius: 16px; background: #faf7ff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ar-upload-photo { width: 160px; height: 160px; border-radius: 50%; margin: 0 auto; }
.ar-upload-cover { aspect-ratio: 1200 / 630; width: 100%; }
.ar-upload img { width: 100%; height: 100%; object-fit: cover; }
.ar-upload-ph { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #7c3aed; font-weight: 700; font-size: .84rem; text-align: center; padding: 8px; }
.ar-upload-ph i { font-size: 1.6rem; }
.ar-upload-remove { position: absolute; top: 8px; right: 8px; z-index: 2; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(220, 38, 38, .92); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.ar-upload-photo .ar-upload-remove { top: 14px; right: 14px; }
.ar-track-form { border-top: 1px solid var(--nt-line); padding-top: 14px; }
.ar-track-form h3 { font-size: 1rem; font-weight: 800; color: var(--nt-ink); margin-bottom: 10px; }
.ar-file { position: relative; display: flex; align-items: center; gap: 10px; padding: 14px; border: 2px dashed #c4b5fd; border-radius: 14px; background: #faf7ff; color: #6d28d9; font-weight: 700; font-size: .9rem; cursor: pointer; overflow: hidden; }
.ar-file i { font-size: 1.5rem; flex: 0 0 auto; }
.ar-file span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-icon-btn { width: 38px; height: 38px; border-radius: 10px; border: 1.5px solid var(--nt-line); background: #fff; color: #4b5563; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ar-icon-btn:hover:not(:disabled) { border-color: #c4b5fd; color: #6d28d9; }
.ar-icon-btn.danger { color: #dc2626; }
.ar-icon-btn.danger:hover:not(:disabled) { border-color: #fca5a5; color: #b91c1c; }
.ar-icon-btn:disabled { opacity: .35; }

/* ── Lecteur d'extraits (état posé par js/nafa-artist-player.js : data-nap-state, --nap-p) ── */
.nap-track { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--nt-line); border-radius: 14px; background: #fff; }
.nap-track[data-nap-state] { border-color: #c4b5fd; background: #faf7ff; }
.nap-btn, .nap-mini { position: relative; border: 0; border-radius: 50%; background: var(--nt-grad); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; box-shadow: 0 4px 12px rgba(124, 58, 237, .28); }
.nap-btn { width: 44px; height: 44px; font-size: 1.35rem; }
.nap-mini { width: 36px; height: 36px; font-size: 1.15rem; }
.nap-i-pause, .nap-i-load { display: none; }
[data-nap-state="playing"] .nap-i-play, [data-nap-state="loading"] .nap-i-play { display: none; }
[data-nap-state="playing"] .nap-i-pause { display: inline; }
[data-nap-state="loading"] .nap-i-load { display: inline-block; width: 1rem; height: 1rem; border: 2px solid rgba(255, 255, 255, .5); border-top-color: #fff; border-radius: 50%; animation: nap-spin .8s linear infinite; }
@keyframes nap-spin { to { transform: rotate(360deg); } }
.nap-mini[data-nap-state="playing"] { box-shadow: 0 0 0 4px rgba(167, 139, 250, .35); }
.nap-cover { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; }
.nap-meta { flex: 1 1 auto; min-width: 0; }
.nap-title { font-weight: 700; font-size: .92rem; color: var(--nt-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nap-sub { font-size: .76rem; color: var(--nt-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nap-dot { margin: 0 5px; }
.nap-progress { height: 4px; border-radius: 99px; background: #ede9fe; margin-top: 6px; overflow: hidden; }
.nap-progress > div { height: 100%; width: calc(var(--nap-p, 0) * 100%); background: linear-gradient(90deg, #7c3aed, #db2777); border-radius: 99px; transition: width .25s linear; }

/* ── Page d'un événement : section « Avec » ── */
.ev-lineup { margin-top: 1.5rem; }
.ev-lineup h4 { margin-bottom: .75rem; }
.ev-lineup-list { display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 640px) { .ev-lineup-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ev-lineup-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--nt-line); border-radius: 16px; background: #fff; }
.ev-lineup-photo { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; background: var(--nt-grad); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 1.2rem; text-decoration: none; }
.ev-lineup-photo img { width: 100%; height: 100%; object-fit: cover; }
.ev-lineup-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ev-lineup-name { font-weight: 800; color: var(--nt-ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-lineup-name:hover { color: #6d28d9; }
.ev-lineup-text small { color: var(--nt-muted); font-size: .78rem; }

/* ── Programmation (organisateur) ── */
.lu-empty { display: flex; gap: 10px; align-items: center; padding: 14px; border: 1px dashed #ddd6fe; border-radius: 14px; color: var(--nt-muted); font-size: .88rem; }
.lu-empty i { font-size: 1.4rem; color: #c4b5fd; }
.lu-list, .lu-results { display: flex; flex-direction: column; gap: 8px; }
.lu-results { margin-top: 8px; max-height: 360px; overflow-y: auto; }
.lu-item, .lu-result { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--nt-line); border-radius: 14px; background: #fff; }
.lu-result { background: #fcfbff; }
.lu-pos { width: 24px; text-align: center; font-weight: 800; color: #a78bfa; flex: 0 0 auto; }
.lu-text { flex: 1 1 auto; min-width: 0; }
.lu-name { font-weight: 700; color: var(--nt-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lu-hint { display: block; font-size: .76rem; color: var(--nt-muted); }
.lu-text .nt-pill { margin-top: 2px; }
.lu-btns { display: flex; gap: 4px; flex: 0 0 auto; }
@media (max-width: 400px) {
    .lu-btns .ar-icon-btn { width: 32px; height: 32px; }
    .lu-pos { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════
   v2 (22/10/2026) — façon Spotify : lecteur global (barre du bas), page artiste large, liste /artistes, clips YouTube
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Égaliseur (morceau en cours) ── */
.nap-eq { display: none; align-items: flex-end; gap: 2px; width: 14px; height: 14px; margin-right: 6px; vertical-align: -1px; flex: 0 0 auto; }
.nap-eq i { display: block; width: 3px; height: 40%; border-radius: 1px; background: #7c3aed; animation: nap-eq .9s ease-in-out infinite; }
.nap-eq i:nth-child(2) { animation-delay: -.3s; }
.nap-eq i:nth-child(3) { animation-delay: -.6s; }
[data-nap-state="playing"] .nap-eq, [data-nap-state="loading"] .nap-eq, .nap-eq.on { display: inline-flex; }
[data-nap-state="loading"] .nap-eq i { animation-play-state: paused; }
@keyframes nap-eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }
@media (prefers-reduced-motion: reduce) {
    .nap-eq i { animation: none; }
    .nap-eq i:nth-child(1) { height: 60%; } .nap-eq i:nth-child(2) { height: 100%; } .nap-eq i:nth-child(3) { height: 45%; }
}
.nap-track[data-nap-state] .nap-title { color: #7c3aed; }

/* ── Lecteur global : barre du bas ── */
:root { --napb-h: 64px; }
@media (min-width: 768px) { :root { --napb-h: 76px; } }
.napb { position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); z-index: 1045; height: var(--napb-h); border-radius: 14px; background: linear-gradient(90deg, #1f1235 0%, #2e1065 100%); color: #fff; box-shadow: 0 12px 34px rgba(20, 8, 40, .45); animation: napbIn .25s ease-out; }
@keyframes napbIn { from { transform: translateY(110%); opacity: 0; } to { transform: none; opacity: 1; } }
.napb-inner { height: 100%; display: flex; align-items: center; gap: 10px; padding: 0 6px 0 10px; }
.napb-track { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; }
.napb-cover { width: 44px; height: 44px; border-radius: 8px; overflow: hidden; flex: 0 0 auto; background: rgba(255, 255, 255, .1); display: flex; align-items: center; justify-content: center; color: #c4b5fd; }
.napb-cover img { width: 100%; height: 100%; object-fit: cover; }
.napb-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.napb-title { display: flex; align-items: center; min-width: 0; font-weight: 700; font-size: .9rem; }
.napb-title-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.napb .nap-eq i { background: #c4b5fd; }
.napb-artist { font-size: .78rem; color: rgba(255, 255, 255, .7); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.napb-artist:hover { color: #fff; text-decoration: underline; }
.napb-center { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.napb-controls { display: flex; align-items: center; gap: 4px; }
.napb-btn { width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; color: rgba(255, 255, 255, .82); display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; flex: 0 0 auto; }
.napb-btn:hover:not(:disabled) { color: #fff; background: rgba(255, 255, 255, .08); }
.napb-btn:disabled { opacity: .3; }
.napb-play { width: 42px; height: 42px; border: 0; border-radius: 50%; background: #fff; color: #1f1235; display: inline-flex; align-items: center; justify-content: center; font-size: 1.55rem; flex: 0 0 auto; transition: transform .15s; }
.napb-play i { line-height: 1; }
.napb-play .bi-play-fill { margin-left: 2px; }
.napb-play:hover { transform: scale(1.06); }
.napb-spin { width: 18px; height: 18px; border: 2px solid rgba(31, 18, 53, .25); border-top-color: #1f1235; border-radius: 50%; animation: nap-spin .8s linear infinite; }
.napb-time-row { display: none; align-items: center; gap: 8px; width: 100%; }
.napb-time { font-size: .72rem; color: rgba(255, 255, 255, .65); min-width: 32px; text-align: center; font-variant-numeric: tabular-nums; }
.napb-right { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.napb-queue { display: none; font-size: .78rem; color: rgba(255, 255, 255, .65); white-space: nowrap; }
.napb-close { font-size: 1rem; }
/* Progression (clic = déplacer la lecture) ; --nap-p posé par le script */
.napb-progress { cursor: pointer; display: flex; align-items: center; outline: none; }
.napb-progress > div { position: relative; width: 100%; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .18); overflow: hidden; transition: height .12s; }
.napb-progress > div::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--nap-p, 0) * 100%); border-radius: 99px; background: linear-gradient(90deg, #a78bfa, #f472b6); transition: width .25s linear; }
.napb-progress:hover > div, .napb-progress:focus-visible > div { height: 6px; }
.napb-progress-top { position: absolute; left: 12px; right: 12px; bottom: 0; height: 12px; align-items: flex-end; padding-bottom: 3px; }
.napb-progress-top > div { height: 3px; }
.napb-progress-mid { flex: 1 1 auto; height: 16px; }
@media (max-width: 380px) { .napb-controls .napb-btn:first-child { display: none; } }
@media (min-width: 768px) {
    .napb { left: 0; right: 0; bottom: 0; border-radius: 0; height: calc(var(--napb-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: linear-gradient(90deg, #1a0f2e 0%, #2a1150 50%, #1a0f2e 100%); border-top: 1px solid rgba(255, 255, 255, .06); }
    .napb-inner { padding: 0 20px; gap: 16px; }
    .napb-track { flex: 0 1 30%; }
    .napb-cover { width: 54px; height: 54px; }
    .napb-center { flex: 1 1 40%; max-width: 620px; }
    .napb-controls { gap: 14px; }
    .napb-time-row { display: flex; }
    .napb-progress-top { display: none; }
    .napb-right { flex: 0 1 30%; justify-content: flex-end; }
    .napb-queue { display: inline-flex; align-items: center; }
}
/* Place réservée à la barre (classe posée sur <body> par js/nafa-artist-player.js) ; « Besoin d'aide ? » remonte au-dessus */
body.nap-has-bar { padding-bottom: calc(var(--napb-h) + 16px + env(safe-area-inset-bottom, 0px)); }
body.nap-has-bar #backTop { bottom: calc(var(--napb-h) + 20px + env(safe-area-inset-bottom, 0px)); }
body.nap-has-bar .nax-fab { bottom: calc(var(--napb-h) + 76px + env(safe-area-inset-bottom, 0px)); }
body.nap-has-bar .nax-nudge { bottom: calc(var(--napb-h) + 142px + env(safe-area-inset-bottom, 0px)); }
body.nap-has-bar .livenow-bar { bottom: calc(var(--napb-h) + 20px + env(safe-area-inset-bottom, 0px)); }
body.nap-has-bar .nt-sticky-actions { bottom: calc(var(--napb-h) + 12px + env(safe-area-inset-bottom, 0px)); }

/* ── Page d'un événement : « Écouter la programmation » ── */
.ev-lineup-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: .75rem; }
.ev-lineup .ev-lineup-head h4 { margin: 0; }
.ev-lineup-play { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 16px 4px 4px; border: 0; border-radius: 999px; background: #f3edff; color: #5b21b6; font-weight: 800; font-size: .88rem; transition: background .15s; }
.ev-lineup-play:hover, .ev-lineup-play.on { background: #e9ddff; }
.ev-lineup-play-ic { width: 32px; height: 32px; border-radius: 50%; background: var(--nt-grad); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; box-shadow: 0 4px 12px rgba(124, 58, 237, .3); }

/* ── Formulaire : clips YouTube ── */
.ar-clips-edit { display: flex; flex-direction: column; gap: 8px; }
.ar-clip-row { display: flex; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--nt-line); border-radius: 14px; background: #fff; }
.ar-clip-thumb { position: relative; flex: 0 0 auto; width: 120px; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; display: block; }
.ar-clip-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ar-clip-thumb i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 1.7rem; text-shadow: 0 2px 8px rgba(0, 0, 0, .6); }
.ar-clip-info { flex: 1 1 auto; min-width: 0; }
.ar-clip-name { font-weight: 700; font-size: .9rem; color: var(--nt-ink); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@media (max-width: 400px) { .ar-clip-thumb { width: 96px; } }

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════
   Pages artistes — refonte responsive (22/10/2026). UNE seule couche (les anciennes v2/v3/v4 ont été fusionnées
   ici) : téléphone d'abord (360–440 px), puis tablette (≥ 640 / 768 px) et ordinateur (≥ 992 / 1200 px).
   Liste /artistes, page /artiste/{slug}, bandeau « Artistes à découvrir » de l'accueil, bouton Suivre des cartes.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════ */
:root {
    --ar-line: #e4d8fb;
    --ar-shadow: 0 6px 18px rgba(76, 29, 149, .09);
    --ar-shadow-h: 0 16px 34px rgba(109, 40, 217, .18);
    --ar-grad-ph: linear-gradient(135deg, #4c1d95 0%, #7c3aed 55%, #db2777 100%);
    /* Ombre forte du bas des photos : le nom reste lisible (et masque le texte incrusté dans certaines images) */
    --ar-shade: linear-gradient(180deg, rgba(20, 8, 40, .28) 0%, rgba(20, 8, 40, 0) 22%, rgba(20, 8, 40, .5) 50%, rgba(20, 8, 40, .94) 80%);
    --ar-gut: 16px;
}
@media (min-width: 768px) { :root { --ar-gut: 24px; } }
@media (min-width: 1200px) { :root { --ar-gut: 28px; } }

/* Photo absente : dégradé + petite icône discrète (plus d'initiales géantes) */
.ar-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: inherit; background: var(--ar-grad-ph); color: rgba(255, 255, 255, .7); font-size: 1.3rem; }

.arl-wrap, .arp-wrap { max-width: 1680px; margin: 0 auto; padding: 0 var(--ar-gut); }

/* ── Titres de section, rangées horizontales ── */
.arp-sec > h2, .arl-row-head h2 { font-size: 1.2rem; font-weight: 900; letter-spacing: -.02em; color: var(--nt-ink); margin: 0 0 10px; }
@media (min-width: 768px) { .arp-sec > h2, .arl-row-head h2 { font-size: 1.5rem; margin-bottom: 14px; } }
.arl-row-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.arl-row-head h2 { margin: 0; }
@media (min-width: 768px) { .arl-row-head { margin-bottom: 14px; } .arl-row-head h2 { margin: 0; } }
.arl-row-arrows { display: none; gap: 6px; }
.arl-row-arrows button { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--ar-line); background: #fff; color: var(--nt-ink); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(76, 29, 149, .08); }
.arl-row-arrows button:hover { border-color: #c4b5fd; color: #6d28d9; }
@media (min-width: 768px) { .arl-row-arrows { display: flex; } }
/* La rangée déborde exactement de la marge de la page (aucun défilement horizontal de la page elle-même) */
.arl-scroller { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 calc(-1 * var(--ar-gut)); padding: 4px var(--ar-gut) 12px; scroll-padding-left: var(--ar-gut); }
.arl-scroller::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .arl-scroller { gap: 16px; } }

/* ── Bouton compact « + Suivre » / « ✓ Abonné » des cartes (zone tactile agrandie à 42 px) ── */
.ar-fbtn { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 34px; margin: 0; padding: 0 14px; border: 1.5px solid transparent; border-radius: 999px; background: linear-gradient(90deg, #7c3aed, #db2777); color: #fff; font-weight: 800; font-size: .8rem; line-height: 1; white-space: nowrap; box-shadow: 0 5px 12px rgba(124, 58, 237, .26); transition: transform .15s, box-shadow .15s, filter .15s; }
.ar-fbtn::after { content: ""; position: absolute; inset: -4px -2px; }
.ar-fbtn i { font-size: .95rem; line-height: 1; }
.ar-fbtn:hover:not(:disabled) { filter: brightness(1.07); transform: translateY(-1px); }
.ar-fbtn.on { background: #fff; color: #6d28d9; border-color: #c4b5fd; box-shadow: none; }
.ar-fbtn.on:hover:not(:disabled) { border-color: #7c3aed; filter: none; }
.ar-fbtn:disabled { opacity: .75; }
.ar-fbtn-spin { width: 13px; height: 13px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: nap-spin .8s linear infinite; }
.ar-fbtn.light.on { background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .75); backdrop-filter: blur(4px); }

/* ═══ Liste /artistes ═══ */
.arl { background: linear-gradient(180deg, #f3ecff 0, #faf7ff 480px); padding-bottom: 96px; }

/* Bandeau : court sur téléphone (titre, une ligne, recherche, une rangée de boutons) */
.arl-hero { position: relative; overflow: hidden; color: #fff; background: radial-gradient(circle at 88% 0%, rgba(244, 114, 182, .5), transparent 50%), linear-gradient(135deg, #2e1065 0%, #6d28d9 60%, #db2777 100%); }
.arl-hero-deco i { position: absolute; color: #fff; opacity: .07; line-height: 1; pointer-events: none; }
.arl-hero-deco i:nth-child(1) { font-size: 7rem; right: -14px; top: -16px; transform: rotate(14deg); }
.arl-hero-deco i:nth-child(2) { font-size: 6rem; left: -30px; bottom: -36px; }
.arl-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding-top: 18px; padding-bottom: 16px; }
.arl-hero h1 { margin: 0; font-size: 2rem; font-weight: 900; letter-spacing: -.03em; line-height: 1.05; color: #fff; }
.arl-hero p { margin: 4px 0 0; color: rgba(255, 255, 255, .86); font-size: .92rem; line-height: 1.35; }
.arl-search { display: flex; width: 100%; background: #fff; border-color: transparent; border-radius: 14px; box-shadow: 0 10px 24px rgba(20, 8, 40, .22); }
.arl-search input { height: 46px; }
.arl-hero-cta { display: flex; align-items: center; gap: 16px; flex-wrap: nowrap; min-width: 0; }
.arl-btn-play { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 18px 0 14px; border: 0; border-radius: 999px; background: #fff; color: #4c1d95; font-weight: 800; font-size: .9rem; white-space: nowrap; box-shadow: 0 8px 20px rgba(20, 8, 40, .25); transition: transform .15s; }
.arl-btn-play i { font-size: 1.35rem; line-height: 1; }
.arl-btn-play:hover { transform: scale(1.03); }
.arl-btn-create { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; color: rgba(255, 255, 255, .92); font-weight: 700; font-size: .88rem; text-decoration: none; white-space: nowrap; }
.arl-btn-create i { font-size: 1.05rem; }
.arl-btn-create:hover { color: #fff; text-decoration: underline; }
@media (max-width: 374px) { .arl-xs-hide { display: none; } }
@media (min-width: 768px) {
    .arl-hero-inner { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); grid-template-areas: "text ." "search cta"; column-gap: 24px; row-gap: 14px; padding-top: 40px; padding-bottom: 34px; }
    .arl-hero-text { grid-area: text; }
    .arl-search { grid-area: search; }
    .arl-hero-cta { grid-area: cta; justify-self: end; }
    .arl-hero h1 { font-size: clamp(2.6rem, 5vw, 3.6rem); }
    .arl-hero p { font-size: 1rem; }
    .arl-search input { height: 50px; }
    .arl-hero-deco i:nth-child(1) { font-size: 10rem; right: 4%; }
}

/* Puces de genres, collées sous le bandeau */
.arl-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 12px calc(-1 * var(--ar-gut)) 0; padding: 2px var(--ar-gut) 4px; }
.arl-chips::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .arl-chips { flex-wrap: wrap; overflow: visible; margin: 18px 0 0; padding: 2px 0 4px; } }
.arl-chip { flex: 0 0 auto; min-height: 40px; padding: 6px 16px; border-radius: 999px; border: 1.5px solid #e4dcf7; background: #fff; color: var(--nt-ink); font-weight: 700; font-size: .86rem; white-space: nowrap; transition: border-color .15s, background .15s; }
.arl-chip:hover { border-color: #c4b5fd; }
.arl-chip.on { background: var(--nt-grad); border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(124, 58, 237, .3); }

.arl-sec { margin-top: 22px; }
@media (min-width: 768px) { .arl-sec { margin-top: 34px; } }
.arl-link { display: inline-flex; align-items: center; min-height: 40px; border: 0; background: none; padding: 0; color: #6d28d9; font-weight: 800; font-size: .88rem; white-space: nowrap; }
.arl-link i { font-size: 1.1rem; }
.arl-count { font-size: .84rem; font-weight: 600; color: var(--nt-muted); white-space: nowrap; }

/* À la une : cartes photo 4/5 (~150 px sur téléphone) */
.arl-feat { position: relative; flex: 0 0 150px; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: var(--ar-grad-ph); color: #fff; scroll-snap-align: start; box-shadow: 0 10px 24px rgba(31, 18, 53, .18); }
@media (min-width: 576px) { .arl-feat { flex-basis: 190px; border-radius: 18px; } }
@media (min-width: 1200px) { .arl-feat { flex-basis: 220px; } }
.arl-feat-link { position: absolute; inset: 0; display: block; color: #fff; text-decoration: none; }
.arl-feat-link:hover { color: #fff; }
.arl-feat-link > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; transition: transform .45s; }
.arl-feat:hover .arl-feat-link > img { transform: scale(1.05); }
.arl-feat-ph { position: absolute; inset: 0; display: flex; justify-content: center; padding-top: 26%; font-size: 2.2rem; color: rgba(255, 255, 255, .35); }
.arl-feat-shade { position: absolute; inset: 0; background: var(--ar-shade); }
.arl-feat-badge { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px 2px 4px; border-radius: 999px; background: rgba(255, 255, 255, .95); color: #1d4ed8; font-size: .64rem; font-weight: 800; line-height: 1.45; }
.arl-feat-badge i { color: #3b82f6; font-size: .8rem; }
.arl-feat-text { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.arl-feat.has-follow .arl-feat-text { bottom: 52px; }
.arl-feat-text b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 1rem; font-weight: 900; line-height: 1.15; letter-spacing: -.01em; overflow-wrap: break-word; }
.arl-feat-text small { font-size: .74rem; color: rgba(255, 255, 255, .82); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arl-feat-live { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; margin-top: 4px; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .18); font-size: .66rem; font-weight: 800; white-space: nowrap; }
.arl-feat .ar-fbtn { position: absolute; left: 10px; bottom: 10px; }
@media (min-width: 576px) {
    .arl-feat-text { left: 12px; right: 12px; }
    .arl-feat-text b { font-size: 1.15rem; }
    .arl-feat .ar-fbtn { left: 12px; bottom: 12px; }
    .arl-feat.has-follow .arl-feat-text { bottom: 56px; }
}
/* ▶ décoratif en haut à droite (survol à la souris seulement : ne gêne ni le badge ni le nom) */
.arl-play-fab { position: absolute; top: 8px; right: 8px; z-index: 1; width: 40px; height: 40px; border-radius: 50%; background: var(--nt-grad); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; box-shadow: 0 8px 20px rgba(20, 8, 40, .35); opacity: 0; transform: translateY(-6px); transition: opacity .2s, transform .2s; }
.arl-play-fab i { margin-left: 2px; line-height: 1; }
.arl-feat:hover .arl-play-fab { opacity: 1; transform: none; }

/* Top des extraits */
.arl-top { display: grid; grid-template-columns: minmax(0, 1fr); padding: 6px; border: 1px solid var(--ar-line); border-radius: 18px; background: #fff; box-shadow: var(--ar-shadow); }
@media (min-width: 992px) { .arl-top { grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(5, auto); column-gap: 18px; padding: 10px 14px; } }
.arl-top-row { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 56px; padding: 6px; border-radius: 12px; cursor: pointer; outline: none; transition: background .15s; }
.arl-top-row:hover, .arl-top-row:focus-visible { background: rgba(124, 58, 237, .06); }
.arl-top-row[data-nap-state] { background: rgba(124, 58, 237, .09); }
.arl-top-row[data-nap-state] .arl-top-title { color: #7c3aed; }
.arl-top-rank { flex: 0 0 22px; text-align: center; font-weight: 900; font-size: .95rem; color: #a1a1aa; font-variant-numeric: tabular-nums; }
.arl-top-rank.podium { font-size: 1.1rem; background: var(--nt-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.arl-top-cover { position: relative; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: var(--nt-tint); display: flex; align-items: center; justify-content: center; color: #a78bfa; }
.arl-top-cover img { width: 100%; height: 100%; object-fit: cover; }
.arl-top-ic { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(20, 8, 40, .45); color: #fff; font-size: 1.4rem; opacity: 0; transition: opacity .15s; }
.arl-top-row:hover .arl-top-ic, .arl-top-row[data-nap-state] .arl-top-ic { opacity: 1; }
@media (hover: none) { .arl-top-ic { opacity: .85; background: rgba(20, 8, 40, .3); } }
.arl-top-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; line-height: 1.3; }
.arl-top-title { max-width: 100%; font-weight: 800; font-size: .9rem; color: var(--nt-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arl-top-artist { max-width: 100%; font-size: .78rem; color: var(--nt-muted); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arl-top-artist:hover { color: #6d28d9; text-decoration: underline; }
.arl-top-plays { flex: 0 0 auto; font-size: .76rem; font-weight: 700; color: var(--nt-muted); white-space: nowrap; }
@media (min-width: 768px) {
    .arl-top-row { gap: 12px; padding: 8px; }
    .arl-top-rank { flex-basis: 26px; }
    .arl-top-cover { width: 52px; height: 52px; border-radius: 10px; }
    .arl-top-title { font-size: .95rem; }
    .arl-top-artist { font-size: .82rem; }
}

/* Tous les artistes — téléphone (< 640 px) : LISTE façon Spotify dans une carte blanche */
.arl-grid { display: flex; flex-direction: column; padding: 4px 0; border: 1px solid var(--ar-line); border-radius: 18px; background: #fff; box-shadow: var(--ar-shadow); }
.arl-card { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 12px; }
.arl-card + .arl-card { border-top: 1px solid #f0eafb; }
.arl-card-link { flex: 1 1 auto; min-width: 0; min-height: 56px; display: flex; align-items: center; gap: 12px; color: var(--nt-ink); text-decoration: none; }
.arl-card-link:hover { color: var(--nt-ink); }
.arl-card-link:hover .arl-card-name { color: #6d28d9; }
.arl-card-photo { position: relative; flex: 0 0 auto; width: 56px; height: 56px; padding: 2px; border-radius: 50%; background: linear-gradient(135deg, #a855f7, #ec4899 55%, #f59e0b); }
.arl-card-photo img, .arl-card-photo .ar-ph { display: flex; width: 100%; height: 100%; border-radius: 50%; border: 2px solid #fff; object-fit: cover; }
.arl-card-photo .ar-ph { font-size: 1.05rem; }
.arl-card-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.arl-card-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-weight: 800; font-size: .95rem; line-height: 1.25; overflow-wrap: break-word; transition: color .15s; }
.arl-card-name .ar-verified { margin-left: 4px; font-size: .85em; }
.arl-card-sub { font-size: .8rem; color: var(--nt-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arl-card-stats { margin-top: 1px; font-size: .74rem; font-weight: 600; color: #8b7aa8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arl-card > .ar-fbtn { flex: 0 0 auto; padding: 0 12px; }
.arl-card-skel .arl-card-photo { background: #f1ecfb; animation: arl-pulse 1.2s ease-in-out infinite; }
.arl-card-skel .arl-card-info { gap: 6px; }
.arl-skel-line { display: block; width: 70%; height: 12px; border-radius: 6px; background: #f1ecfb; animation: arl-pulse 1.2s ease-in-out infinite; }
.arl-skel-line.short { width: 45%; }
@keyframes arl-pulse { 50% { opacity: .55; } }
/* À partir de 640 px : grille de cartes (photo plus petite qu'avant, pas de zéros) */
@media (min-width: 640px) {
    .arl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
    .arl-card { flex-direction: column; gap: 10px; padding: 16px 12px 14px; border: 1px solid var(--ar-line); border-radius: 18px; background: #fff; box-shadow: var(--ar-shadow); text-align: center; transition: box-shadow .2s, transform .2s, border-color .2s; }
    .arl-card + .arl-card { border-top: 1px solid var(--ar-line); }
    .arl-card:hover { border-color: #c4b5fd; box-shadow: var(--ar-shadow-h); transform: translateY(-3px); }
    .arl-card-link { flex: 0 0 auto; width: 100%; flex-direction: column; gap: 10px; }
    .arl-card-photo { width: min(112px, 80%); height: auto; aspect-ratio: 1 / 1; padding: 3px; }
    .arl-card-photo img, .arl-card-photo .ar-ph { border-width: 3px; }
    .arl-card-photo .ar-ph { font-size: 1.6rem; }
    .arl-card-info { width: 100%; align-items: center; }
    .arl-card-skel .arl-card-info { align-items: center; }
    .arl-card > .ar-fbtn { margin-top: auto; padding: 0 16px; }
}
@media (min-width: 1200px) { .arl-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px; } .arl-card-photo { width: min(128px, 80%); } }

/* « Vous êtes artiste ? » : une phrase + un bouton */
.arl-cta { display: flex; align-items: center; gap: 12px; margin-top: 28px; padding: 14px 16px; border-radius: 18px; background: linear-gradient(135deg, #1f1235, #4c1d95); color: #fff; box-shadow: 0 12px 26px rgba(31, 18, 53, .18); }
.arl-cta-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: var(--nt-grad); display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.arl-cta-text { flex: 1 1 auto; min-width: 0; font-size: .92rem; font-weight: 800; line-height: 1.3; }
.arl-cta-btn { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: #fff; color: #4c1d95; font-weight: 800; font-size: .85rem; text-decoration: none; white-space: nowrap; }
.arl-cta-btn:hover { color: #4c1d95; background: #faf5ff; }
@media (max-width: 399px) { .arl-cta { flex-wrap: wrap; } .arl-cta-text { flex-basis: calc(100% - 52px); } .arl-cta-btn { margin-left: 52px; } }
@media (min-width: 768px) { .arl-cta { margin-top: 40px; padding: 18px 22px; } .arl-cta-text { font-size: 1rem; } }

/* ═══ Page d'un artiste ═══ */
.arp-skel-hero { height: 280px; background: linear-gradient(135deg, #2e1065, #6d28d9 60%, #db2777); opacity: .85; }
@media (min-width: 768px) { .arp-skel-hero { height: 380px; } }
/* Squelette de la page artiste : titre + lignes de titres grises animées */
.arp-skel-body { display: flex; flex-direction: column; gap: 14px; padding-top: 24px; padding-bottom: 40px; }
.arp-skel-title { width: 40%; height: 20px; }
.arp-skel-row { display: flex; align-items: center; gap: 12px; }
.arp-skel-sq { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 8px; background: #f1ecfb; animation: arl-pulse 1.2s ease-in-out infinite; }
.arp-skel-txt { flex: 1; display: flex; flex-direction: column; gap: 6px; }

/* En-tête */
.arp-hero { position: relative; overflow: hidden; background: #1f1235; color: #fff; }
.arp-hero-bg { position: absolute; inset: 0; background: var(--nt-grad); background-size: cover; background-position: center 30%; }
/* Couverture : 720 px sur téléphone, 960 px à partir de 768 px (variables posées par ImageUrls.ResponsiveBg) */
.arp-hero-bg { background-image: var(--bg-sm, var(--nt-grad)); }
@media (min-width: 768px) { .arp-hero-bg { background-image: var(--bg-lg, var(--bg-sm, var(--nt-grad))); } }
.arp-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 8, 40, .2) 0%, rgba(20, 8, 40, .55) 45%, rgba(20, 8, 40, .95) 100%); }
.arp-hero-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding-top: 56px; padding-bottom: 22px; }
.arp-back { position: absolute; top: 12px; left: var(--ar-gut); width: 40px; height: 40px; border-radius: 50%; background: rgba(0, 0, 0, .35); backdrop-filter: blur(6px); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; text-decoration: none; }
.arp-back:hover { background: rgba(0, 0, 0, .55); color: #fff; }
.arp-photo { width: 128px; height: 128px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; background: var(--nt-grad); border: 4px solid rgba(255, 255, 255, .16); box-shadow: 0 18px 50px rgba(0, 0, 0, .5); display: flex; align-items: center; justify-content: center; }
.arp-photo img { width: 100%; height: 100%; object-fit: cover; }
.arp-hero-text { min-width: 0; max-width: 100%; }
.arp-verified { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 700; }
.arp-verified i { color: #3b82f6; background: #fff; border-radius: 50%; font-size: 1.1rem; line-height: 1; }
.arp-kicker { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: rgba(255, 255, 255, .8); }
.arp-hero h1 { margin: 4px 0 6px; font-size: clamp(1.9rem, 8.5vw, 2.6rem); font-weight: 900; letter-spacing: -.03em; line-height: 1.05; color: #fff; overflow-wrap: break-word; text-shadow: 0 4px 24px rgba(0, 0, 0, .3); }
.arp-hero-sub { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 6px; }
.arp-hero-sub span { display: inline-flex; align-items: center; gap: 5px; background: rgba(255, 255, 255, .14); border-radius: 999px; padding: 3px 11px; font-size: .8rem; font-weight: 600; }
.arp-hero-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; font-size: .86rem; color: rgba(255, 255, 255, .78); }
.arp-hero-stats b { color: #fff; }
.arp-sep { opacity: .6; }
.arp-hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; margin-top: 14px; }
.arp-listen, .arp-follow-big { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 999px; font-weight: 800; font-size: .98rem; white-space: nowrap; transition: transform .15s, box-shadow .15s, filter .15s, background .15s; }
.arp-listen { border: 0; background: #fff; color: #4c1d95; box-shadow: 0 10px 24px rgba(0, 0, 0, .25); }
.arp-listen i { font-size: 1.4rem; line-height: 1; }
.arp-listen:hover { transform: scale(1.03); }
.arp-follow-big { border: 2px solid transparent; background: linear-gradient(90deg, #7c3aed 0%, #c026d3 55%, #db2777 100%); color: #fff; padding: 0 26px; box-shadow: 0 10px 28px rgba(219, 39, 119, .45); }
.arp-follow-big i { font-size: 1.15rem; line-height: 1; }
.arp-follow-big:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); color: #fff; }
.arp-follow-big.on { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .85); box-shadow: none; }
.arp-follow-big:disabled { opacity: .8; }
.arp-fans { font-size: .92rem; color: rgba(255, 255, 255, .85); white-space: nowrap; }
.arp-fans b { color: #fff; font-size: 1.02rem; }
.arp-hero-icon { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .12); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.arp-hero-icon:hover { background: rgba(255, 255, 255, .22); }
@media (max-width: 380px) { .arp-listen, .arp-follow-big { padding: 0 18px; } }
@media (min-width: 768px) {
    .arp-hero-inner { flex-direction: row; align-items: flex-end; text-align: left; gap: 30px; min-height: 380px; padding-top: 90px; padding-bottom: 32px; }
    .arp-back { top: 20px; }
    .arp-photo { width: 220px; height: 220px; }
    .arp-hero h1 { font-size: clamp(3rem, 6.4vw, 5.6rem); margin: 6px 0 12px; }
    .arp-hero h1.long { font-size: clamp(2.4rem, 4.6vw, 4rem); }
    .arp-hero-sub, .arp-hero-stats, .arp-hero-actions { justify-content: flex-start; }
    .arp-hero-stats { font-size: .95rem; }
    .arp-hero-actions { margin-top: 20px; }
    .arp-listen, .arp-follow-big { min-height: 50px; font-size: 1rem; }
}

/* Barre collante (téléphone) : photo, nom, Suivre ; affichée par js/nafa-artist-player.js (data-show) */
.arp-sticky { position: fixed; left: 0; right: 0; top: 0; z-index: 1035; display: flex; align-items: center; gap: 10px; padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px; background: rgba(31, 18, 53, .97); color: #fff; box-shadow: 0 8px 24px rgba(20, 8, 40, .35); transform: translateY(-110%); visibility: hidden; transition: transform .25s ease, visibility .25s; }
.arp-sticky[data-show] { transform: none; visibility: visible; }
@media (min-width: 992px) { .arp-sticky { display: none; } }
.arp-sticky-photo { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; background: var(--nt-grad); display: flex; align-items: center; justify-content: center; }
.arp-sticky-photo img { width: 100%; height: 100%; object-fit: cover; }
.arp-sticky-photo .ar-initial { font-size: 1.1rem; }
.arp-sticky-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.arp-sticky-text b { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arp-sticky-text small { font-size: .74rem; color: rgba(255, 255, 255, .7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arp-sticky-play { width: 40px; height: 40px; flex: 0 0 auto; border: 0; border-radius: 50%; background: #fff; color: #4c1d95; display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; }
.arp-sticky-follow { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; min-height: 40px; padding: 0 16px; border: 1.5px solid transparent; border-radius: 999px; background: linear-gradient(90deg, #7c3aed, #db2777); color: #fff; font-weight: 800; font-size: .86rem; white-space: nowrap; }
.arp-sticky-follow.on { background: transparent; border-color: rgba(255, 255, 255, .8); }

/* Corps : une colonne sur téléphone (titres, concerts, bio, clips, liens), deux colonnes sur ordinateur */
.arp-body { background: linear-gradient(180deg, #efe7fd 0, #f6f1ff 220px, #faf7ff 100%); padding-bottom: 96px; }
.arp-hint { margin: 12px 0 0; font-size: .82rem; color: var(--nt-muted); }
.arp-body .ar-manage { margin: 16px 0 0; }
.arp-body .ar-status { margin: 16px 0 0; }
.arp-grid { display: flex; flex-direction: column; }
.arp-main, .arp-side { display: contents; }
.arp-o-tracks { order: 1; } .arp-o-events { order: 2; } .arp-o-bio { order: 3; } .arp-o-videos, .arp-o-clips { order: 4; } .arp-o-links { order: 5; }
/* Aucun extrait mais des clips : Clips juste sous l'en-tête (téléphone et colonne principale sur ordinateur) */
.arp-grid.clips-first .arp-o-videos, .arp-grid.clips-first .arp-o-clips { order: 0; }
#arp-videos, #arp-clips { scroll-margin-top: 80px; }
#arp-videos h2:focus, #arp-clips h2:focus { outline: none; }
@media (min-width: 992px) {
    .arp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 36px; align-items: start; }
    .arp-main, .arp-side { display: flex; flex-direction: column; min-width: 0; }
}
.arp-sec { margin: 20px 0 4px; }
@media (min-width: 768px) { .arp-sec { margin-top: 28px; } }
.arp-card { background: #fff; border: 1px solid var(--ar-line); border-radius: 18px; padding: 14px; box-shadow: var(--ar-shadow); }
@media (min-width: 768px) { .arp-card { padding: 16px; border-radius: 20px; } }
.arp-sec.arp-card > h2 { font-size: 1.08rem; margin-bottom: 10px; }
.arp-empty { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 14px; border: 1px dashed #d8c8fb; border-radius: 14px; background: #fff; color: var(--nt-muted); font-size: .88rem; }
.arp-empty i { font-size: 1.2rem; color: #a78bfa; flex: 0 0 auto; }
.arp-note { margin: 8px 0 0; font-size: .78rem; color: var(--nt-muted); }
.arp-add-track { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border: 1.5px dashed #c4b5fd; border-radius: 999px; background: #fff; color: #6d28d9; font-weight: 800; font-size: .88rem; text-decoration: none; }
.arp-add-track:hover { border-color: #7c3aed; color: #5b21b6; }

/* Titres populaires */
.arp-tracks { display: flex; flex-direction: column; gap: 2px; padding: 6px; border: 1px solid var(--ar-line); border-radius: 18px; background: #fff; box-shadow: var(--ar-shadow); }
.arp-tr-head, .arp-tr { display: grid; grid-template-columns: 24px 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.arp-tr-head { display: none; }
.arp-tr { position: relative; width: 100%; min-height: 56px; padding: 6px 8px; border: 0; border-radius: 12px; background: transparent; color: var(--nt-ink); text-align: left; transition: background .15s; overflow: hidden; }
.arp-tr:hover { background: rgba(124, 58, 237, .06); }
.arp-tr[data-nap-state] { background: rgba(124, 58, 237, .09); }
.arp-tr[data-nap-state] .arp-tr-title { color: #7c3aed; }
.arp-tr::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: linear-gradient(90deg, #7c3aed, #db2777); transition: width .25s linear; }
.arp-tr[data-nap-state]::after { width: calc(var(--nap-p, 0) * 100%); }
.arp-tr-num { display: flex; align-items: center; justify-content: center; width: 24px; height: 28px; font-weight: 700; color: var(--nt-muted); font-variant-numeric: tabular-nums; }
.arp-tr-num .nap-eq { margin: 0; }
.arp-tr-hover, .arp-tr-paused { display: none; font-size: 1.35rem; line-height: 1; }
.arp-tr-hover { color: var(--nt-ink); }
.arp-tr-paused { color: #7c3aed; }
@media (hover: hover) {
    .arp-tr:hover .arp-tr-n { display: none; }
    .arp-tr:hover .arp-tr-hover { display: inline; }
}
.arp-tr[data-nap-state] .arp-tr-n, .arp-tr[data-nap-state] .arp-tr-hover { display: none !important; }
.arp-tr[data-nap-state="paused"] .arp-tr-paused { display: inline; }
.arp-tr-cover { width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: var(--nt-tint); display: flex; align-items: center; justify-content: center; color: #a78bfa; box-shadow: 0 4px 10px rgba(31, 18, 53, .12); }
.arp-tr-cover img { width: 100%; height: 100%; object-fit: cover; }
.arp-tr-meta { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.arp-tr-title { max-width: 100%; font-weight: 700; font-size: .94rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arp-tr-sub { max-width: 100%; font-size: .78rem; color: var(--nt-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arp-tr-dur { font-size: .82rem; color: var(--nt-muted); font-variant-numeric: tabular-nums; text-align: right; }
.arp-c-album, .arp-c-plays { display: none; }
@media (min-width: 768px) {
    .arp-tracks { padding: 12px 10px 8px; }
    .arp-tr-head, .arp-tr { grid-template-columns: 32px 48px minmax(0, 1.5fr) minmax(0, 1fr) 84px 52px; gap: 14px; }
    .arp-tr { padding: 8px 10px; }
    .arp-tr-cover { width: 48px; height: 48px; }
    .arp-tr-num { width: 28px; }
    .arp-tr-head { display: grid; padding: 0 10px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--nt-line); font-size: .74rem; font-weight: 700; color: var(--nt-muted); text-transform: uppercase; letter-spacing: .06em; }
    .arp-tr-head > span:first-child { text-align: center; }
    .arp-tr-head > span:nth-child(5), .arp-tr-head > span:last-child { text-align: right; }
    .arp-c-album, .arp-c-plays { display: block; }
    .arp-tr-sub { display: none; }
    .arp-tr-album { font-size: .86rem; color: var(--nt-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .arp-tr-plays { font-size: .86rem; color: var(--nt-muted); text-align: right; font-variant-numeric: tabular-nums; }
}

/* Concerts à venir */
.arp-events { display: flex; flex-direction: column; gap: 10px; }
.arp-ev { display: flex; align-items: stretch; gap: 12px; padding: 10px; border: 1px solid var(--nt-line); border-radius: 16px; background: #fff; color: var(--nt-ink); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.arp-ev:hover { border-color: #c4b5fd; box-shadow: 0 10px 22px rgba(109, 40, 217, .12); color: var(--nt-ink); transform: translateY(-1px); }
.arp-ev-date { flex: 0 0 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 0; border-radius: 12px; background: var(--nt-grad); color: #fff; text-transform: uppercase; line-height: 1.05; }
.arp-ev-date small { font-size: .64rem; font-weight: 700; opacity: .9; }
.arp-ev-date b { font-size: 1.55rem; font-weight: 900; }
.arp-ev-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.arp-ev-title { font-weight: 800; font-size: .93rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.arp-ev-meta { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: .78rem; color: var(--nt-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arp-ev-foot { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* Prix : « À PARTIR DE » en petit + montant en grand dégradé (même style que les cartes d'événements) */
.arp-ev-price { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; white-space: nowrap; }
.arp-ev-price small { font-size: .6rem; font-weight: 800; letter-spacing: .09em; color: #8b84a3; text-transform: uppercase; }
.arp-ev-price b { margin-top: 2px; font-size: 1.08rem; font-weight: 900; background: linear-gradient(90deg, #6d28d9, #db2777); -webkit-background-clip: text; background-clip: text; color: transparent; }
.arp-ev-price b.arp-ev-price-see { font-size: .85rem; }
.arp-ev-buy { font-size: .8rem; font-weight: 800; color: #fff; background: var(--nt-grad); border-radius: 999px; padding: 6px 14px; white-space: nowrap; box-shadow: 0 4px 12px rgba(124, 58, 237, .28); }
.arp-ev-img { flex: 0 0 72px; width: 72px; object-fit: cover; border-radius: 10px; }

/* Biographie : photo ronde 64 px à côté du titre, une ligne de puces (sans zéros), texte dessous */
.arp-bio { padding: 16px; border: 1px solid var(--ar-line); border-radius: 18px; background: #fff; box-shadow: var(--ar-shadow); }
.arp-bio-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.arp-bio-photo { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; box-shadow: 0 6px 14px rgba(31, 18, 53, .16); }
.arp-bio-photo img { width: 100%; height: 100%; object-fit: cover; }
.arp-bio-title { min-width: 0; }
.arp-bio-title h2 { margin: 0 0 6px; font-size: 1.15rem; font-weight: 900; letter-spacing: -.02em; color: var(--nt-ink); }
.arp-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.arp-facts li { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: #f5f0ff; color: #4c1d95; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.arp-facts li i { color: #7c3aed; font-size: .8rem; }
.arp-facts li.verified { background: #eff6ff; color: #1d4ed8; }
.arp-facts li.verified i { color: #3b82f6; }
.arp-bio-text p { margin: 0 0 .8em; white-space: pre-line; color: #2d2440; font-size: .95rem; line-height: 1.65; overflow-wrap: break-word; }
.arp-bio-text p:last-child { margin-bottom: 0; }
.arp-bio-text.clamped { max-height: 13.2em; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent); mask-image: linear-gradient(180deg, #000 62%, transparent); }
.arp-bio-more { display: inline-flex; align-items: center; min-height: 40px; margin-top: 10px; padding: 0 16px; border: 1.5px solid #d8c8fb; border-radius: 999px; background: #f7f2ff; color: #6d28d9; font-weight: 800; font-size: .86rem; }
.arp-bio-more:hover { border-color: #7c3aed; }
@media (min-width: 768px) {
    .arp-bio { padding: 22px; border-radius: 20px; }
    .arp-bio-head { gap: 16px; margin-bottom: 14px; }
    .arp-bio-photo { width: 80px; height: 80px; }
    .arp-bio-title h2 { font-size: 1.4rem; }
    .arp-bio-text p { font-size: 1rem; }
}
.arp-bio-invite { display: flex; align-items: center; gap: 12px; padding: 14px; border: 2px dashed #c4b5fd; border-radius: 18px; background: #faf7ff; color: #4c1d95; text-decoration: none; }
.arp-bio-invite:hover { color: #4c1d95; border-color: #7c3aed; }
.arp-bio-invite > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.arp-bio-invite small { color: #6b7280; font-size: .8rem; }
.arp-bio-invite-ic { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 12px; background: var(--nt-grad); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; }

/* Clips YouTube : défilement horizontal de miniatures sur téléphone, grille à 2 colonnes ensuite */
.arp-clips { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 calc(-1 * var(--ar-gut)); padding: 2px var(--ar-gut) 8px; scroll-padding-left: var(--ar-gut); }
.arp-clips::-webkit-scrollbar { display: none; }
.arp-clip { flex: 0 0 85%; min-width: 0; scroll-snap-align: start; }
.arp-clip:only-child { flex-basis: 100%; }
@media (min-width: 576px) { .arp-clips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; overflow: visible; margin: 0; padding: 0; } }
.arp-clip-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 10px 24px rgba(31, 18, 53, .18); }
.arp-clip-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.arp-clip-cover { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #000; cursor: pointer; }
.arp-clip-cover img { width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: transform .4s, opacity .2s; }
.arp-clip-cover:hover img { transform: scale(1.04); opacity: 1; }
.arp-clip-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%; background: rgba(20, 8, 40, .62); backdrop-filter: blur(4px); border: 2px solid rgba(255, 255, 255, .85); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; transition: background .2s, border-color .2s, transform .2s; }
.arp-clip-play i { margin-left: 3px; line-height: 1; }
.arp-clip-cover:hover .arp-clip-play { background: #ff0000; border-color: #ff0000; transform: translate(-50%, -50%) scale(1.08); }
@media (min-width: 768px) { .arp-clip-play { width: 64px; height: 64px; font-size: 2.1rem; } }
.arp-clip-title { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; font-weight: 700; font-size: .9rem; color: var(--nt-ink); }
.arp-clip-title i { color: #ff0000; font-size: 1.05rem; line-height: 1.3; }
.arp-clip-title span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Liens : plateformes d'écoute + réseaux réunis, boutons compacts avec l'icône de chaque plateforme */
.arp-links { display: flex; flex-wrap: wrap; gap: 8px; }
.arp-lnk { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px 0 6px; border: 1.5px solid var(--nt-line); border-radius: 999px; background: #fff; color: var(--nt-ink); font-weight: 700; font-size: .85rem; text-decoration: none; white-space: nowrap; transition: border-color .15s, transform .15s; }
.arp-lnk:hover { border-color: #c4b5fd; color: var(--nt-ink); transform: translateY(-1px); }
.arp-lnk i { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #6d28d9; color: #fff; font-size: .95rem; }
.arp-lnk.youtube i { background: #ff0000; }
.arp-lnk.audiomack i { background: #ffa200; }
.arp-lnk.boomplay i { background: #0d1726; }
.arp-lnk.facebook i { background: #1877f2; }
.arp-lnk.instagram i { background: linear-gradient(45deg, #f58529, #dd2a7b 55%, #8134af); }
.arp-lnk.tiktok i { background: #111; }

/* « Les fans aiment aussi » : cartes photo portrait (photo plein cadre, dégradé sombre, nom + genre, « Suivre » clair) */
.arp-similar { margin-top: 26px; }
.arp-similar-ico { color: #ec4899; font-size: .8em; margin-right: 8px; vertical-align: .05em; }
.arl-sim { position: relative; flex: 0 0 140px; height: 185px; min-width: 0; border-radius: 16px; overflow: hidden; isolation: isolate; background: var(--ar-grad-ph); box-shadow: 0 10px 24px rgba(31, 18, 53, .18); scroll-snap-align: start; transition: transform .2s, box-shadow .2s; }
.arl-sim:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(109, 40, 217, .28); }
.arl-sim-link, .arl-sim-link:hover { position: absolute; inset: 0; display: block; color: #fff; text-decoration: none; }
.arl-sim-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform .45s ease; }
.arl-sim-img.ar-ph { font-size: 2.2rem; }
.arl-sim:hover .arl-sim-img, .arl-sim:active .arl-sim-img { transform: scale(1.07); }
.arl-sim-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 6, 32, 0) 30%, rgba(15, 6, 32, .55) 58%, rgba(15, 6, 32, .94) 100%); }
.arl-sim-txt { position: absolute; left: 10px; right: 10px; bottom: 50px; display: flex; flex-direction: column; gap: 2px; text-shadow: 0 1px 4px rgba(0, 0, 0, .45); }
.arl-sim.no-follow .arl-sim-txt { bottom: 12px; }
.arl-sim-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-weight: 800; font-size: .9rem; line-height: 1.22; overflow-wrap: break-word; }
.arl-sim-name .ar-verified { color: #60a5fa; margin-left: 4px; }
.arl-sim-sub { font-size: .74rem; font-weight: 600; color: rgba(255, 255, 255, .82); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arl-sim > .ar-fbtn { position: absolute; left: 10px; bottom: 10px; min-height: 30px; padding: 0 12px; font-size: .76rem; }
@media (min-width: 768px) {
    .arl-sim { flex-basis: 180px; height: 240px; border-radius: 18px; }
    .arl-sim-txt { left: 12px; right: 12px; bottom: 54px; }
    .arl-sim.no-follow .arl-sim-txt { bottom: 14px; }
    .arl-sim-name { font-size: 1rem; }
    .arl-sim-sub { font-size: .8rem; }
    .arl-sim > .ar-fbtn { left: 12px; bottom: 12px; min-height: 32px; }
}

/* ═══ Accueil : bandeau « Artistes à découvrir » (pleine largeur, sombre, juste après les catégories) ═══ */
.home-artists { position: relative; overflow: hidden; margin-top: 24px; padding: 22px 0 18px; color: #fff; background: radial-gradient(circle at 92% 0%, rgba(236, 72, 153, .45), transparent 45%), radial-gradient(circle at 0% 100%, rgba(124, 58, 237, .45), transparent 50%), linear-gradient(135deg, #14072b 0%, #2e1065 45%, #6d28d9 82%, #db2777 120%); }
@media (min-width: 768px) { .home-artists { margin-top: 48px; padding: 40px 0 30px; } }
.home-artists-deco i { position: absolute; color: #fff; opacity: .06; line-height: 1; pointer-events: none; }
.home-artists-deco i:nth-child(1) { font-size: 8rem; right: -12px; top: -24px; transform: rotate(14deg); }
.home-artists-deco i:nth-child(2) { font-size: 7rem; left: -34px; bottom: -44px; }
.home-artists-inner { position: relative; z-index: 1; }
.home-artists-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 14px; }
.home-artists-titles { min-width: 0; }
.home-artists-titles h2 { margin: 0; font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.45rem; line-height: 1.15; letter-spacing: -.02em; color: #fff; }
.home-artists-titles p { margin: 4px 0 0; font-size: .88rem; color: rgba(255, 255, 255, .78); }
.home-artists-tools { display: flex; align-items: center; gap: 16px; }
.home-artists-listen { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 18px 0 12px; border: 0; border-radius: 999px; background: #fff; color: #4c1d95; font-weight: 800; font-size: .9rem; white-space: nowrap; box-shadow: 0 8px 20px rgba(0, 0, 0, .25); transition: transform .15s; }
.home-artists-listen i { font-size: 1.35rem; line-height: 1; }
.home-artists-listen:hover { transform: scale(1.04); }
.home-artists-all { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; color: #fff; font-weight: 700; font-size: .88rem; text-decoration: none; white-space: nowrap; }
.home-artists-all:hover { color: #fff; text-decoration: underline; }
.home-artists .arl-row-arrows button { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); color: #fff; box-shadow: none; }
.home-artists .arl-row-arrows button:hover { background: rgba(255, 255, 255, .22); color: #fff; }
@media (max-width: 575px) { .home-artists-tools { width: 100%; } }
@media (min-width: 768px) {
    .home-artists-titles h2 { font-size: 2rem; }
    .home-artists-titles p { font-size: .98rem; }
    .home-artists-head { margin-bottom: 20px; }
}
/* La rangée déborde exactement de la marge du .container */
.home-artists-row { gap: 12px; margin: 0 calc(var(--bs-gutter-x, 1.5rem) * -.5); padding: 4px calc(var(--bs-gutter-x, 1.5rem) * .5) 8px; scroll-padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5); }
@media (min-width: 768px) { .home-artists-row { gap: 16px; } }

/* Carte portrait (~140×175 sur téléphone) : nom + genre sur la photo, ▶ en bas à droite, Suivre dessous */
.home-artist { flex: 0 0 140px; display: flex; flex-direction: column; gap: 8px; min-width: 0; scroll-snap-align: start; }
@media (min-width: 768px) { .home-artist { flex-basis: 170px; } }
@media (min-width: 1200px) { .home-artist { flex-basis: 176px; } }
.home-artist-media { position: relative; }
.home-artist-photo { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; background: var(--ar-grad-ph); color: #fff; text-decoration: none; box-shadow: 0 12px 26px rgba(0, 0, 0, .35); transition: box-shadow .2s; }
.home-artist-photo:hover { color: #fff; }
.home-artist-skel { background: rgba(255, 255, 255, .12); box-shadow: none; animation: arl-pulse 1.2s ease-in-out infinite; }
.home-artist-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; transition: transform .45s; }
.home-artist-ph { position: absolute; inset: 0; display: flex; justify-content: center; padding-top: 30%; font-size: 2rem; color: rgba(255, 255, 255, .35); }
.home-artist-shade { position: absolute; inset: 0; background: var(--ar-shade); }
.home-artist-live { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: rgba(20, 8, 40, .55); backdrop-filter: blur(4px); font-size: .66rem; font-weight: 800; white-space: nowrap; }
.home-artist-text { position: absolute; left: 10px; right: 52px; bottom: 10px; display: flex; flex-direction: column; min-width: 0; }
.home-artist-text b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: .95rem; font-weight: 900; line-height: 1.15; overflow-wrap: break-word; }
.home-artist-text b .ar-verified { margin-left: 3px; }
.home-artist-text small { font-size: .74rem; color: rgba(255, 255, 255, .8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-artist .nap-eq { margin-right: 5px; }
.home-artist .nap-eq i { background: #f9a8d4; }
.home-artist-play { position: absolute; right: 8px; bottom: 8px; z-index: 2; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--nt-grad); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; box-shadow: 0 8px 18px rgba(0, 0, 0, .35); transition: transform .15s, box-shadow .2s; }
.home-artist-play .nap-i-play { margin-left: 2px; }
.home-artist-play:hover { transform: scale(1.07); }
.home-artist[data-nap-state] .home-artist-play { box-shadow: 0 0 0 4px rgba(244, 114, 182, .45), 0 8px 18px rgba(0, 0, 0, .35); }
.home-artist[data-nap-state] .home-artist-photo { box-shadow: 0 0 0 3px #f472b6, 0 12px 26px rgba(0, 0, 0, .35); }
.home-artist > .ar-fbtn { align-self: stretch; }
@media (min-width: 768px) {
    .home-artist-text { left: 12px; bottom: 12px; right: 56px; }
    .home-artist-text b { font-size: 1.05rem; }
    .home-artist-play { width: 44px; height: 44px; right: 10px; bottom: 10px; font-size: 1.5rem; }
}
@media (hover: hover) { .home-artist-photo:hover img { transform: scale(1.05); } }

/* ── Accueil : corrections téléphone (23/10) ── */
/* Cartes d'événements : plus de grand vide entre la date et le prix, titre sur 2 lignes */
.home-ev-track { align-items: stretch; }
.home-ev-track .event-slide { align-self: stretch; display: flex; }
.home-ev-track .event-card-v { height: auto; width: 100%; display: flex; flex-direction: column; }
.home-ev-track .event-card-v .ec-footer { margin-top: auto; }
/* Même contenu sur toutes les cartes de la rangée (barre de ventes et « intéressés » sur la page de l'événement) */
.home-ev-track .ec-progress-wrap, .home-ev-track .ec-social { display: none; }
.home-ev-track .ec-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.home-ev-track .ec-body h4 { -webkit-line-clamp: 2; min-height: 2.6em; }
/* Cartes d'artistes : ▶ en haut à droite, le nom prend toute la largeur */
.home-artist-play, .home-artist-play:hover { top: 8px; bottom: auto; right: 8px; }
.home-artist-text { right: 10px; }
.home-artist-live { max-width: calc(100% - 64px); overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 768px) { .home-artist-play, .home-artist-play:hover { top: 10px; bottom: auto; right: 10px; } }
/* Boutons flottants plus discrets sur téléphone */
@media (max-width: 576px) {
    .nax-fab { width: 46px; height: 46px; min-width: 46px; right: 12px; }
    .nax-fab i { font-size: 1.15rem; }
    #backTop { width: 38px; height: 38px; right: 16px; }
}

/* ── Listes d'artistes : bouton « Suivre » en contour, plus léger (23/10) ── */
.ar-fbtn { background: #fff; color: #6d28d9; border-color: #7c3aed; box-shadow: none; min-height: 32px; padding: 0 12px; }
.ar-fbtn:hover:not(:disabled) { background: #f5f0ff; filter: none; }
.ar-fbtn.on { background: #ede9fe; color: #5b21b6; border-color: #ede9fe; }
.ar-fbtn.on:hover:not(:disabled) { border-color: #c4b5fd; }
.ar-fbtn.light { background: rgba(20, 8, 40, .25); color: #fff; border-color: rgba(255, 255, 255, .8); backdrop-filter: blur(4px); }
.ar-fbtn.light:hover:not(:disabled) { background: rgba(255, 255, 255, .18); }
.ar-fbtn.light.on { background: #fff; color: #5b21b6; border-color: #fff; }
/* Top des extraits : « Voir les 10 » */
.arl-top-more { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 42px; margin-top: 8px; border: 0; border-radius: 14px; background: transparent; color: #6d28d9; font-weight: 800; font-size: .88rem; }
.arl-top-more:hover { background: rgba(124, 58, 237, .06); }
/* Boutons flottants masqués pendant qu'on descend */
.nax-fab, #backTop { transition: transform .25s ease, opacity .25s ease; }
body.nt-scroll-down .nax-fab, body.nt-scroll-down #backTop { transform: translateY(140%); opacity: 0; pointer-events: none; }

/* ── Formulaire artiste : vérification « c'est moi », e-mail, biographie par l'IA (23/10) ── */
.ar-verify-box { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: #f5f0ff; border: 1.5px solid #c4b5fd; color: #4c1d95; font-size: .88rem; line-height: 1.45; }
.ar-verify-box i { font-size: 1.15rem; line-height: 1.2; color: #7c3aed; flex: 0 0 auto; }
.ar-verify-box.ok { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.ar-verify-box.ok i { color: #059669; }
.nt-form-section.ar-links-required { border: 2px solid #c4b5fd; box-shadow: 0 0 0 4px rgba(124, 58, 237, .08); }
.nt-form-section.ar-links-missing { border-color: #a78bfa; }
.ar-bio-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ar-ai-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1.5px solid #c4b5fd; background: linear-gradient(135deg, #f5f0ff, #fdf2f8); color: #6d28d9; font-weight: 800; font-size: .85rem; }
.ar-ai-toggle:hover, .ar-ai-toggle.on { border-color: #7c3aed; background: #ede9fe; }
.ar-ai-panel { margin-bottom: 10px; padding: 14px; border-radius: 16px; border: 1.5px solid #ddd6fe; background: #faf7ff; }
.ar-ai-panel .form-label { font-weight: 600; font-size: .86rem; color: #4c1d95; }
.ar-ai-panel textarea.form-control { min-height: 110px; }
.ar-ai-loading { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; color: #6d28d9; font-weight: 700; }
.ar-ai-result { margin-top: 6px; padding: 12px; border-radius: 14px; background: #fff; border: 1px solid #e9e5f5; }
.ar-ai-result-title { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: .88rem; color: #6d28d9; margin-bottom: 8px; }
.ar-ai-bio { white-space: pre-line; font-size: .9rem; line-height: 1.55; color: var(--nt-ink); max-height: 320px; overflow-y: auto; }
.ar-ai-missing { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: #fffbeb; color: #92400e; font-size: .84rem; }
.ar-ai-missing ul { margin: 6px 0 0; padding-left: 1.2rem; }
.ar-ai-actions { display: flex; gap: 8px; margin-top: 12px; }
.ar-ai-actions .btn { flex: 1 1 0; min-height: 44px; }
.ar-ai-note { margin-top: 10px; font-size: .78rem; color: var(--nt-muted); }
@media (max-width: 400px) { .ar-ai-actions { flex-direction: column; } }

/* ── Page artiste : concerts avec la photo de l'événement en bandeau (23/10) ── */
.arp-ev { flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
.arp-ev-media { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--nt-grad); }
.arp-ev-img { position: absolute; inset: 0; width: 100%; height: 100%; flex: none; object-fit: cover; border-radius: 0; }
.arp-ev-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 8, 40, .35) 0%, rgba(20, 8, 40, 0) 45%); }
.arp-ev-media .arp-ev-date { position: absolute; top: 10px; right: 10px; left: auto; z-index: 1; width: 46px; padding: 5px 0; box-shadow: 0 6px 16px rgba(20, 8, 40, .35); }
.arp-ev-media .arp-ev-date b { font-size: 1.3rem; }
.arp-ev-body { padding: 12px 14px 14px; }
@media (min-width: 576px) and (max-width: 991px) { .arp-events { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Formulaire artiste : toute la zone photo / couverture est cliquable pour choisir l'image */
.ar-upload .file-input { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; cursor: pointer; font-size: 0; }
.ar-upload .ar-upload-remove { z-index: 3; }

/* Extraits vidéo (30 s d'un clip YouTube) : badge sur la miniature, lien vers le clip entier */
.arp-clip-badge { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: linear-gradient(90deg, #7c3aed, #db2777); color: #fff; font-size: .74rem; font-weight: 800; box-shadow: 0 4px 12px rgba(20, 8, 40, .35); }
.arp-clip-full { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: .8rem; font-weight: 700; color: #6d28d9; text-decoration: none; }
.arp-clip-full:hover { color: #5b21b6; text-decoration: underline; }

/* Page d'un événement : « Autres concerts de {Nom} » (rangée défilante de cartes compactes) */
.ev-more { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 1.25rem; }
.ev-more-head { display: flex; align-items: center; gap: 10px; margin-bottom: .6rem; }
.ev-more-head h4 { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 1.05rem; line-height: 1.3; }
.ev-more-head h4 a { color: #6d28d9; text-decoration: none; }
.ev-more-head h4 a:hover { text-decoration: underline; }
.ev-more-photo { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: var(--nt-grad); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; text-decoration: none; }
.ev-more-photo img { width: 100%; height: 100%; object-fit: cover; }
.ev-more-arrows { display: none; gap: 6px; flex: 0 0 auto; }
@media (min-width: 768px) { .ev-more-arrows { display: flex; } }
.ev-more-arrows button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--nt-line); background: #fff; color: #4c1d95; display: inline-flex; align-items: center; justify-content: center; }
.ev-more-arrows button:hover { border-color: #c4b5fd; background: #f5f0ff; }
.ev-more-row { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px 2px 10px; }
.ev-more-row::-webkit-scrollbar { display: none; }
.ev-more-row .ev-more-card { flex: 0 0 74%; max-width: 260px; min-width: 0; scroll-snap-align: start; }
@media (min-width: 576px) { .ev-more-row .ev-more-card { flex-basis: 240px; } }
.ev-more-card .arp-ev-title { min-height: 2.6em; }
.ev-more-card .arp-ev-body { padding: 10px 12px 12px; }
/* Date et ville en premier et en gras : ce qui distingue un concert d'un autre du même artiste */
.ev-more-when, .ev-more-where { display: block; margin-top: 4px; font-size: .8rem; color: #4b5563; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-more-when { margin-top: 6px; }
.ev-more-when i, .ev-more-where i { margin-right: 6px; color: #7c3aed; }
.ev-more-when b { color: #1a0b2e; font-weight: 800; text-transform: capitalize; }
.ev-more-where b { color: #6d28d9; font-weight: 800; }

/* Formulaire artiste : choix « Clip entier » / « Extrait vidéo (30 s) », badge d'un extrait dans la liste */
.ar-clip-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ar-clip-kind-btn { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 10px 12px; border: 1.5px solid var(--nt-line); border-radius: 14px; background: #fff; color: var(--nt-ink); text-align: left; transition: border-color .15s, background .15s, box-shadow .15s; }
.ar-clip-kind-btn > i { flex: 0 0 auto; font-size: 1.3rem; color: #a78bfa; }
.ar-clip-kind-btn span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ar-clip-kind-btn b { font-size: .88rem; }
.ar-clip-kind-btn small { font-size: .74rem; color: var(--nt-muted); }
.ar-clip-kind-btn:hover { border-color: #c4b5fd; }
.ar-clip-kind-btn.on { border-color: #7c3aed; background: #f5f0ff; box-shadow: 0 0 0 3px rgba(124, 58, 237, .12); }
.ar-clip-kind-btn.on > i { color: #7c3aed; }
.ar-clip-kind { display: inline-flex; align-items: center; gap: 5px; margin: 2px 0 4px; padding: 2px 9px; border-radius: 999px; background: #f3e8ff; color: #6d28d9; font-size: .74rem; font-weight: 800; }

/* ── Cartes d'événements : libellés mis en forme (24/10) ── */
.event-card-v .ec-category { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: #f3e8ff; color: #6d28d9; font-size: .66rem; font-weight: 800; letter-spacing: .07em; }
.event-card-v .ec-body h4 { margin: 8px 0 8px; font-size: 1rem; font-weight: 800; color: #1a0b2e; line-height: 1.3; letter-spacing: -.01em; }
.event-card-v .ec-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin-bottom: 12px; }
.event-card-v .ec-meta span { display: flex; align-items: center; gap: 7px; max-width: 100%; font-size: .8rem; color: #4b5563; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event-card-v .ec-meta .ec-meta-date { font-weight: 700; color: #1f2937; }
.event-card-v .ec-meta i { flex: 0 0 auto; color: #7c3aed; font-size: .88rem; }
.event-card-v .ec-footer { padding-top: 12px; border-top: 1px solid #f1ecfb; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.event-card-v .ec-price { display: flex; flex-direction: column; line-height: 1.1; }
.event-card-v .ec-price .label { font-size: .62rem; font-weight: 800; letter-spacing: .09em; color: #8b84a3; text-transform: uppercase; }
.event-card-v .ec-price .amount { margin-top: 3px; font-size: 1.2rem; font-weight: 900; background: linear-gradient(90deg, #6d28d9, #db2777); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; }
.event-card-v .ec-price .amount.free { background: none; color: #059669; }
.event-card-v .ec-reserve-btn { flex: 0 0 auto; padding: 9px 16px; border-radius: 999px; background: linear-gradient(90deg, #7c3aed, #db2777); color: #fff; font-size: .8rem; font-weight: 800; white-space: nowrap; box-shadow: 0 6px 16px rgba(124, 58, 237, .28); }
.event-card-v:hover .ec-reserve-btn { filter: brightness(1.06); }
.event-card-v .ec-reserve-btn.disabled { background: #eceaf2; color: #8b84a3; box-shadow: none; }
.home-artist-lastword { white-space: nowrap; }

/* ── Cartes d'événements : grande image qui donne envie (24/10) ── */
/* Image au format 4/3 (≈ 60 % de la carte). Image horizontale : remplit tout le cadre (rognée, jamais déformée) ;
   affiche verticale/carrée (flyer avec texte) : entière sur le fond flou. */
.event-card-v .ec-img, .home-ev-track .event-slide .ec-img { height: auto; aspect-ratio: 4 / 3; }
.event-card-v .ec-img img.ec-wide { object-fit: cover; }
.event-card-v .ec-category-img { position: absolute; top: 10px; left: 42px; z-index: 3; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: #5b21b6; font-size: .62rem; font-weight: 800; letter-spacing: .07em; box-shadow: 0 4px 12px rgba(20, 8, 40, .18); }
.event-card-v .ec-body { padding: 12px 14px 14px; }
.event-card-v .ec-body h4 { margin: 0 0 6px; font-size: .98rem; -webkit-line-clamp: 2; }
.event-card-v .ec-meta { flex-direction: row; margin-bottom: 10px; }
.event-card-v .ec-meta .ec-meta-line { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; font-size: .78rem; color: #6b7280; white-space: nowrap; }
.event-card-v .ec-meta .ec-meta-date { flex: 0 0 auto; font-weight: 700; color: #1f2937; }
.event-card-v .ec-meta .ec-meta-sep { flex: 0 0 auto; opacity: .6; }
.event-card-v .ec-meta .ec-meta-venue { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.event-card-v .ec-footer { padding-top: 10px; }
.event-card-v .ec-price .label { font-size: .58rem; }
.event-card-v .ec-price .amount { font-size: 1.1rem; }
.event-card-v .ec-reserve-btn { padding: 8px 14px; font-size: .78rem; }