* {
    box-sizing: border-box;
}

:root {
    --red: #ff202b;
    --red-dark: #c9000b;
    --black: #050505;
    --dark: #0b0b0d;
    --panel: #111114;
    --panel2: #17171b;
    --border: rgba(255,255,255,0.08);
    --white: #ffffff;
    --grey: #98989f;
    --green: #42e695;
    --yellow: #ffc857;
    --cyan: #4de7ff;
}

body {
    margin: 0;
    background: #050505;
    color: white;
    font-family: Inter, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 32px 32px;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

button {
    cursor: pointer;
}

/* TOPBAR — MOBILE */

.topbar {
    height: 70px;
    background: rgba(5,5,5,0.97);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    position: sticky;
    top: 0;
    z-index: 50;
}

.brand {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -1px;
}

.brand span { color: var(--red); }
.brand strong { color: white; }

.player-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    overflow-x: auto;
}

.mode-badge {
    padding: 6px 8px;
    border: 1px solid rgba(77,231,255,.55);
    color: var(--cyan);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.5px;
    transform: skew(-8deg);
    white-space: nowrap;
}

.player-stats div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.player-stats small {
    color: #77777d;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.player-stats b { font-size: 11px; }

/* LAYOUT */

.layout {
    display: flex;
    min-height: calc(100vh - 70px);
}

.sidebar {
    width: 60px;
    flex-shrink: 0;
    background: #080809;
    border-right: 1px solid rgba(255,32,43,.25);
    padding: 12px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sidebar-label {
    display: none;
}

.nav-btn {
    border: 1px solid transparent;
    background: transparent;
    color: #99999f;
    text-align: center;
    padding: 14px 6px;
    border-radius: 4px;
    margin-bottom: 2px;
    font-size: 0;
    font-weight: 600;
    transition: .2s;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-btn span { 
    width: 28px; 
    display: inline-block; 
    font-size: 20px;
    line-height: 1;
}

.nav-btn:hover {
    background: rgba(255,32,43,.09);
    color: white;
    border-color: rgba(255,32,43,.35);
}

.nav-btn.active {
    background: linear-gradient(90deg, var(--red), #a90009);
    color: white;
    border-color: #ff5b63;
}


/* MAIN CONTENT */

#content {
    flex: 1;
    padding: 18px;
    max-width: 100%;
    overflow-y: auto;
}

.page-title {
    margin-bottom: 18px;
}

.page-title h1 {
    margin: 0;
    font-size: 28px;
    letter-spacing: -1px;
}

.page-title p {
    color: var(--grey);
    margin-top: 6px;
    font-size: 12px;
}

/* CARDS */

.card {
    background: linear-gradient(145deg, #111114, #0c0c0e);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
}

.card-title {
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 14px;
}

/* DASHBOARD */

.hero {
    min-height: 220px;
    background:
        radial-gradient(circle at 80% 20%, rgba(255,32,43,.2), transparent 35%),
        linear-gradient(120deg, #111114, #070707);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 16px;
}

.hero .eyebrow {
    color: var(--red);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.hero h1 {
    font-family: Oswald, sans-serif;
    text-transform: uppercase;
    font-size: 32px;
    margin: 8px 0;
    max-width: 100%;
}

.hero p {
    color: #aaa;
    max-width: 100%;
    line-height: 1.5;
    font-size: 13px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.stat-card {
    background: #101012;
    border: 1px solid var(--border);
    padding: 14px;
    border-radius: 10px;
}

.stat-card small {
    color: #77777d;
    font-size: 10px;
    font-weight: 800;
}

.stat-card strong {
    display: block;
    font-size: 18px;
    margin-top: 6px;
}

.progress {
    height: 5px;
    background: #242428;
    border-radius: 10px;
    margin-top: 10px;
    overflow: hidden;
}

.progress div {
    height: 100%;
    background: var(--red);
    border-radius: inherit;
}

/* BUTTONS */

.primary-btn {
    border: none;
    background: var(--red);
    color: white;
    padding: 14px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
    transition: .2s;
    width: 100%;
    text-align: center;
}

.primary-btn:hover {
    background: #ff3c46;
}

.primary-btn:active {
    transform: scale(0.98);
}

.secondary-btn {
    border: 1px solid var(--border);
    background: #18181b;
    color: white;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    width: 100%;
    text-align: center;
}

.secondary-btn:hover {
    background: #222226;
}

.primary-btn:disabled,
.secondary-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}

/* STUDIO */

.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group.full {
    grid-column: auto;
}

.form-group label {
    font-size: 11px;
    color: #88888e;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .6px;
}

input,
select,
textarea {
    width: 100%;
    background: #08080a;
    color: white;
    border: 1px solid #29292d;
    border-radius: 8px;
    padding: 14px;
    outline: none;
    font-size: 16px;
    min-height: 44px;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--red);
}

textarea {
    min-height: 100px;
    resize: vertical;
}

.studio-actions {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* TRACKS */

.track-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.track-card {
    background: #101012;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.cover {
    height: 120px;
    background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.15), transparent 20%),
        linear-gradient(135deg, #2b0000, #090909);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Oswald;
    font-size: 20px;
    text-align: center;
    padding: 16px;
}

.track-info {
    padding: 12px;
}

.track-info h3 {
    margin: 0 0 4px;
    font-size: 13px;
}

.track-info p {
    color: #85858b;
    font-size: 10px;
    margin: 3px 0;
}

/* SOCIAL */

.social-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.post {
    background: #101012;
    border: 1px solid var(--border);
    padding: 14px;
    border-radius: 12px;
    margin-bottom: 10px;
}

.post-header {
    display: flex;
    justify-content: space-between;
}

.post-user {
    font-weight: 800;
    font-size: 12px;
}

.post-date {
    color: #666;
    font-size: 10px;
}

.post-text {
    color: #ddd;
    font-size: 12px;
    line-height: 1.4;
    margin: 10px 0;
}

.comment {
    color: #aaa;
    border-top: 1px solid var(--border);
    padding-top: 8px;
    margin-top: 8px;
    font-size: 10px;
}

.comment b {
    color: white;
}

/* SHOP */

.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.product-card {
    background: #101012;
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 12px;
}

.product-image {
    height: 110px;
    background: linear-gradient(135deg, #1c1c20, #090909);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    margin-bottom: 10px;
    overflow: hidden;
    position: relative;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .25s ease;
}

.product-card:hover .product-image img {
    transform: scale(1.06);
}

.product-card h3 {
    font-size: 12px;
    margin: 0 0 4px;
}

.product-card p {
    color: #777;
    font-size: 10px;
}

.price {
    font-weight: 900;
    margin: 8px 0;
    font-size: 13px;
}

/* EVENTS */

.event-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-direction: column;
}

.event-card h3 {
    margin: 0 0 4px;
    font-size: 13px;
}

.event-card p {
    color: #888;
    font-size: 11px;
    margin: 0;
}

.event-card button {
    width: 100%;
}

/* PROFILE */

.profile-header {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--red), #350005);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 900;
    flex-shrink: 0;
}

.badge {
    display: inline-block;
    background: #211416;
    color: #ff6068;
    padding: 4px 8px;
    border-radius: 16px;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

/* MODAL */

.modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 16px;
}

.modal.hidden {
    display: none;
}

.modal-box {
    width: min(600px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    background: #111114;
    border: 1px solid #29292d;
    border-radius: 14px;
    padding: 20px;
    position: relative;
}

.close-modal {
    position: absolute;
    top: 12px;
    right: 14px;
    background: transparent;
    border: none;
    color: #777;
    font-size: 28px;
    padding: 4px;
    line-height: 1;
}

/* TOAST */

#toast {
    position: fixed;
    bottom: 16px;
    left: 16px;
    right: 16px;
    background: #161619;
    border: 1px solid #303034;
    padding: 12px 16px;
    border-radius: 9px;
    opacity: 0;
    transform: translateY(15px);
    pointer-events: none;
    transition: .25s;
    z-index: 200;
    font-size: 13px;
}

#toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* EMPTY */

.eyebrow {
    color: var(--red);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.5px;
}


.empty {
    text-align: center;
    padding: 50px 16px;
    color: #666;
}

.empty strong {
    display: block;
    color: #aaa;
    margin-bottom: 6px;
}

.r {
    display: flex;
    gap: 8px;
    align-items: stretch;
    flex-direction: column;
}

.r select {
    flex: 1;
    min-width: auto;
}

.brand span {
    color: var(--red);
}

/* V6 — téléphone : zones sûres (encoche, barre du bas) */
body { padding-bottom: env(safe-area-inset-bottom, 0px); }
html { scroll-padding-top: env(safe-area-inset-top, 0px); background: #050505; }
.topbar { top: 0; padding-top: env(safe-area-inset-top, 0px); height: calc(70px + env(safe-area-inset-top, 0px)); }
#toast { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.layout { min-height: calc(100dvh - 70px); }
.sidebar { position: sticky; top: calc(70px + env(safe-area-inset-top, 0px)); height: calc(100dvh - 70px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
#content { min-width: 0; overflow-x: hidden; }
button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
table, pre { display: block; overflow-x: auto; max-width: 100%; }
img { max-width: 100%; }


/* V6 — retouches téléphone */
.player-stats .mode-badge { display: none; }
.brand { font-size: 18px; }
.topbar { gap: 10px; padding: 0 12px; }
.player-stats { gap: 10px; }
#content div[style*="flex-wrap"] > button { width: auto; flex: 1 1 auto; padding: 10px 12px; }
.shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.product-image { height: 80px; font-size: 32px; }

/* V6 — menu : icônes outline + état actif */
.nav-btn { border-radius: 12px; color: #7d7d84; transition: background .2s, color .2s, box-shadow .2s; }
.nav-btn span { display: flex; align-items: center; justify-content: center; }
.nav-btn svg { display: block; }
.nav-btn:hover { color: #fff; background: rgba(255,255,255,.05); border-color: transparent; }
.nav-btn.active { background: var(--red); color: #fff; border-color: transparent; box-shadow: 0 0 0 1px rgba(255,110,117,.55), 0 6px 20px rgba(255,32,43,.45); }

/* V6 — concerts */
.gig-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.gig-summary > div { background: linear-gradient(145deg, #141417, #0b0b0d); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.gig-summary small, .gig-stats small, .gig-title small { display: block; color: #6f6f76; font-size: 10px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }
.gig-summary b { display: block; font-size: 15px; margin-top: 4px; }
.gig-summary span { display: block; color: #8a8a90; font-size: 10px; margin-top: 2px; }

.gig-list { position: relative; }
.gig { display: flex; gap: 10px; opacity: 0; animation: gigIn .45s ease forwards; }
.gig-rail { width: 16px; flex-shrink: 0; position: relative; display: flex; justify-content: center; }
.gig-rail::before { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: linear-gradient(#2a2a2f, #1a1a1e); }
.gig:first-child .gig-rail::before { top: 22px; }
.gig:last-child .gig-rail::before { bottom: calc(100% - 22px); }
.gig-node { position: relative; margin-top: 16px; width: 12px; height: 12px; border-radius: 50%; background: #1d1d21; border: 2px solid #34343a; z-index: 1; }
.gig-open .gig-rail::before, .gig-spent .gig-rail::before { background: linear-gradient(var(--red), rgba(255,32,43,.25)); }
.gig-open .gig-node { background: var(--red); border-color: #ff8a90; box-shadow: 0 0 12px rgba(255,32,43,.8); animation: gigPulse 2.2s ease-in-out infinite; }
.gig-spent .gig-node { background: #3a0d10; border-color: var(--red); }

.gig-card { flex: 1; min-width: 0; margin-bottom: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--border); background: linear-gradient(150deg, #141417 0%, #0c0c0e 70%); position: relative; overflow: hidden; transition: transform .2s, border-color .2s; }
.gig-open .gig-card { border-color: rgba(255,32,43,.35); background: radial-gradient(circle at 100% 0%, rgba(255,32,43,.16), transparent 45%), linear-gradient(150deg, #16161a 0%, #0c0c0e 70%); }
.gig-open .gig-card:active { transform: scale(.99); }
.gig-locked .gig-card { opacity: .62; }

.gig-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.gig-icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: #1b1b1f; border: 1px solid #2a2a2f; color: #9a9aa1; }
.gig-open .gig-icon { background: rgba(255,32,43,.12); border-color: rgba(255,32,43,.4); color: #fff; }
.gig-title { flex: 1; min-width: 0; }
.gig-title h3 { margin: 2px 0 0; font-size: 15px; font-family: Oswald, Inter, sans-serif; letter-spacing: .3px; text-transform: uppercase; }
.gig-chip { flex-shrink: 0; font-size: 10px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; padding: 5px 7px; border-radius: 20px; background: #1d1d21; color: #8a8a90; border: 1px solid #2c2c31; }
.gig-chip.open { background: rgba(255,32,43,.15); color: #ff6b72; border-color: rgba(255,32,43,.45); }
.gig-chip.spent { background: #1d1d21; color: #d9d9de; }

.gig-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gig-stats > div { background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.05); border-radius: 9px; padding: 8px; min-width: 0; }
.gig-stats b { display: block; font-size: 11px; margin-top: 3px; overflow-wrap: anywhere; }

.gig-pips { display: flex; gap: 4px; margin-top: 12px; }
.gig-pips i { flex: 1; height: 5px; border-radius: 4px; background: #26262b; }
.gig-pips i.on { background: var(--red); box-shadow: 0 0 6px rgba(255,32,43,.55); }
.gig-renew { color: #8a8a90; font-size: 11px; margin: 8px 0 0; }
.gig-card .primary-btn { margin-top: 12px; }
.gig-lock { margin-top: 10px; padding-top: 8px; border-top: 1px dashed #2a2a2f; }
.gig-lock p { color: #9a9aa1; font-size: 11px; margin: 4px 0; }

@keyframes gigIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes gigPulse { 0%, 100% { box-shadow: 0 0 6px rgba(255,32,43,.6); } 50% { box-shadow: 0 0 16px rgba(255,32,43,1); } }
@media (prefers-reduced-motion: reduce) { .gig { animation: none; opacity: 1; } .gig-open .gig-node { animation: none; } }

/* V8 — carrière de 15 ans */
.career-progress { padding: 12px 14px; margin-bottom: 14px; }
.career-progress-head { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; font-weight: 800; letter-spacing: .3px; }
.career-progress-head strong { color: var(--yellow); white-space: nowrap; }
.career-progress .progress { margin-top: 8px; }
.career-last { border-color: rgba(255,200,87,.55); box-shadow: 0 0 18px rgba(255,200,87,.12); }
.career-last .progress div { background: var(--yellow); }
.career-end-hero h1 { color: var(--yellow); font-style: italic; font-family: Oswald, sans-serif; text-shadow: 0 0 10px rgba(255,200,87,.5); }
.career-title { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 14px; border: 1px solid rgba(255,200,87,.45); border-radius: 12px; background: rgba(255,200,87,.06); }
.career-title-icon { font-size: 40px; line-height: 1; }
.career-title small { display: block; color: #8a8a90; font-size: 10px; font-weight: 800; }
.career-title strong { display: block; font-family: Oswald, sans-serif; font-size: 26px; color: var(--yellow); line-height: 1.15; }
.career-title span { font-size: 12px; color: #aaa; }
.career-section { margin: 20px 0 10px; }
.career-note { font-size: 13px; color: #bbb; margin: 0 0 14px; }
.record-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-bottom: 16px; }
.record-card { background: #101012; border: 1px solid var(--border); border-radius: 10px; padding: 14px; min-width: 0; }
.record-card small { display: block; color: #77777d; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.record-card strong { display: block; font-size: 16px; margin-top: 6px; overflow-wrap: anywhere; }
.record-card span { display: block; font-size: 12px; color: #aaa; margin-top: 4px; }
.muted-rec { color: #666; font-style: normal; font-weight: 400; }
.title-crit { display: grid; grid-template-columns: 110px 1fr 34px; align-items: center; gap: 10px; font-size: 12px; margin: 6px 0; }
.title-crit .progress { margin-top: 0; }
.title-crit b { text-align: right; }
.career-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 30px; }
.career-actions button { flex: 1 1 200px; }
.career-actions .career-note { flex-basis: 100%; }

/* V8 — lifestyle & rencontres */
.ls-event { animation: lsIn .28s ease-out; }
.ls-kicker { font-size: 10px; font-weight: 900; letter-spacing: .8px; color: var(--cyan); margin-bottom: 8px; }
.ls-place { margin: 0; color: #aaa; font-size: 13px; }
.ls-event h2 { margin: 2px 0 10px; font-family: Oswald, sans-serif; font-size: 26px; color: var(--yellow); }
.ls-text { font-size: 15px; line-height: 1.45; margin: 0 0 10px; }
.ls-tier { font-size: 11px; white-space: nowrap; }
.ls-question { font-weight: 800; margin: 14px 0 6px; }
.ls-choices { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.ls-choice { display: flex; gap: 10px; align-items: flex-start; width: 100%; min-height: 48px; padding: 12px 14px; text-align: left; font: inherit; font-size: 14px; line-height: 1.35; color: #eee; background: #18181c; border: 1px solid #2e2e34; border-radius: 10px; cursor: pointer; transition: border-color .15s, transform .1s; }
.ls-choice b { color: var(--yellow); min-width: 16px; }
.ls-choice:active { transform: scale(.98); border-color: var(--yellow); }
.ls-badge { display: inline-block; padding: 6px 10px; border-radius: 8px; font-weight: 800; font-size: 13px; background: #1c1c21; border: 1px solid #333; margin-bottom: 12px; }
.ls-badge-feat, .ls-badge-studio { border-color: rgba(255,200,87,.6); color: var(--yellow); }
.ls-badge-relation, .ls-badge-contact { border-color: rgba(77,231,255,.5); color: var(--cyan); }
.ls-extra { font-size: 13px; color: #bbb; margin: 8px 0 0; }
.ls-panel .ls-axes { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px 14px; }
.ls-axis { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.ls-dots { display: flex; gap: 4px; }
.ls-dots i { width: 9px; height: 9px; border-radius: 50%; background: #2a2a2f; }
.ls-dots i.on { background: var(--yellow); }
.ls-dots i.soon { background: rgba(255,200,87,.3); }
.ls-hint { font-size: 11px; color: #888; margin: 10px 0 0; }
.ls-tag { font-size: 10px; color: var(--cyan); margin: 2px 0 4px; }
.contact-met { font-size: 10px; color: var(--cyan); margin: 4px 0; }
.contact-offer { font-size: 11px; color: var(--yellow); font-weight: 800; margin: 4px 0; }
@keyframes lsIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ls-event { animation: none; } }


/* V9 — corrections */

/* Libellés du menu : invisibles sur mobile mais lus par les lecteurs d'écran */
.nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; font-style: normal; }
.nav-btn { position: relative; }
.nav-btn:focus-visible, button:focus-visible, .ls-choice:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

/* Fenêtre d'événement : on doit choisir une réponse, pas de croix */
.modal.locked .close-modal { display: none; }

/* Zone de danger (page Profil) */
.danger-zone { margin-top: 16px; border-color: #3a1216; }
.danger-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px 16px; border-radius: 8px; background: #130809; border: 1px solid #5a1a20; color: #ff6b72; font-size: 13px; font-weight: 800; }
.danger-btn:hover { background: #1d0b0d; }

/* Tablette / ordinateur : le jeu n'était pensé que pour un téléphone */
@media (min-width: 900px) {
    .sidebar { width: 210px; align-items: stretch; padding: 16px 12px; }
    .nav-btn { width: 100%; height: 44px; justify-content: flex-start; gap: 12px; padding: 0 12px; font-size: 14px; }
    .nav-label { position: static; width: auto; height: auto; clip: auto; overflow: visible; }
    #content { padding: 28px 36px; }
    #content > * { max-width: 1100px; }
    .stats-grid { grid-template-columns: repeat(4, 1fr); }
    .shop-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
    .form-grid { grid-template-columns: 1fr 1fr; }
    .form-group.full { grid-column: 1 / -1; }
    .r { flex-direction: row; }
    .r .secondary-btn { width: auto; white-space: nowrap; }
    .social-grid { grid-template-columns: 2fr 1fr; align-items: start; }
    .event-card { flex-direction: row; align-items: center; }
    .event-card button { width: auto; min-width: 160px; }
    .studio-actions { flex-direction: row; justify-content: flex-end; }
    .studio-actions button { width: auto; }
    .player-stats { gap: 22px; }
    .player-stats small { font-size: 10px; }
    .player-stats b { font-size: 14px; }
    .player-stats .mode-badge { display: inline-block; }
    .hero .primary-btn { width: auto; }
}

/* =========================================================
   V9 — NOUVEAUTÉS : illustrations, certifications, avatar, studio
========================================================= */

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }

/* Le contenu ne crée plus de conteneur de défilement : les éléments « sticky » fonctionnent */
#content { overflow: visible; overflow-x: clip; }

.art { display: block; width: 100%; height: 100%; }

/* ---------- Boutique ---------- */
.product-image { height: 104px; padding: 4px; background: radial-gradient(circle at 50% 60%, #1c1c22, #0a0a0c 75%); }
.product-image .art { transition: transform .25s ease; }
.product-card:hover .product-image .art { transform: scale(1.06) rotate(-1deg); }
.product-card.is-locked .product-image .art { filter: grayscale(1) brightness(.55); }
.product-card.is-owned { border-color: rgba(66,230,149,.35); }
.owned-tag { position: absolute; top: 6px; right: 6px; background: var(--green); color: #04130b; font-size: 10px; font-weight: 900; padding: 3px 7px; border-radius: 20px; }

/* ---------- Discographie : certifications ---------- */
.cover-art { aspect-ratio: 1 / 1; background: #0b0b0d; padding: 6px; }
.track-card-btn { display: block; width: 100%; padding: 0; text-align: left; color: inherit; font: inherit; cursor: pointer; transition: transform .2s, border-color .2s; }
.track-card-btn:hover { transform: translateY(-3px); border-color: rgba(255,200,87,.45); }
.track-card-btn .cert { transition: transform .35s ease; }
.track-card-btn:hover .cert { transform: rotate(-3deg) scale(1.03); }

.cert-chip { display: inline-block; font-size: 10px; font-weight: 900; letter-spacing: .4px; text-transform: uppercase; padding: 3px 8px; border-radius: 20px; background: #1d1d21; color: #8a8a90; border: 1px solid #2c2c31; margin-bottom: 6px; }
.cert-chip-or { background: linear-gradient(135deg, #fff1b8, #f3c64f 45%, #b8860b); color: #2a1d00; border-color: #b8860b; }
.cert-chip-platine { background: linear-gradient(135deg, #fff, #dfe3ea 45%, #9ea4ae); color: #1d1f24; border-color: #9ea4ae; }
.cert-chip-diamant { background: linear-gradient(135deg, #fff, #bff4ff 45%, #6cc9e0); color: #06303a; border-color: #6cc9e0; box-shadow: 0 0 10px rgba(127,227,255,.45); }

.cert-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 18px; padding: 14px; border-radius: 14px; border: 1px solid var(--border); background: radial-gradient(circle at 50% 0%, rgba(255,200,87,.1), transparent 60%), linear-gradient(145deg, #121215, #0a0a0c); }
.cert-wall-item { text-align: center; }
.cert-wall-item .art { max-width: 92px; margin: 0 auto 6px; filter: drop-shadow(0 6px 14px rgba(0,0,0,.6)); }
.cert-wall-item.is-empty .art { filter: grayscale(1) brightness(.35); }
.cert-wall-item b { display: block; font-family: Oswald, sans-serif; font-size: 24px; line-height: 1; }
.cert-wall-item small { color: #8a8a90; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; }
.cert-wall-hint { grid-column: 1 / -1; margin: 4px 0 0; color: #77777d; font-size: 11px; text-align: center; }

.cert-hero { display: grid; grid-template-columns: 130px 1fr; gap: 16px; align-items: center; margin-bottom: 16px; }
.cert-hero-art .art { filter: drop-shadow(0 10px 22px rgba(0,0,0,.7)); }
.cert-hero-diamant .cert-hero-art .art { filter: drop-shadow(0 0 18px rgba(127,227,255,.45)); }
.cert-hero-or .cert-hero-art .art { filter: drop-shadow(0 0 16px rgba(255,200,87,.35)); }
.cert-hero h2 { margin: 0 0 4px; font-family: Oswald, sans-serif; font-size: 24px; text-transform: uppercase; line-height: 1.1; }
.cert-hero-sub { color: #999; font-size: 12px; margin: 0 0 10px; }
.cert-next small { display: block; color: #8a8a90; font-size: 11px; margin-top: 6px; }
.cert-next .progress { margin-top: 6px; }
.cert-hero-or .cert-next .progress div { background: linear-gradient(90deg, #b8860b, #f3c64f); }
.cert-hero-platine .cert-next .progress div { background: linear-gradient(90deg, #9ea4ae, #fff); }
.cert-hero-diamant .cert-next .progress div { background: linear-gradient(90deg, #6cc9e0, #eaffff); }

.result-head { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; }

/* ---------- Avatar ---------- */
.avatar-svg { display: block; border-radius: 50%; flex-shrink: 0; }
.player-stats .topbar-artist { flex-direction: row; align-items: center; gap: 8px; }
.topbar-artist .avatar-svg { box-shadow: 0 0 0 2px var(--yellow); }
.profile-avatar .avatar-svg { box-shadow: 0 0 0 3px var(--yellow), 0 10px 30px rgba(255,200,87,.2); }
.post-user { display: flex; align-items: center; gap: 8px; }

.avb { display: grid; grid-template-columns: 1fr; gap: 14px; }
.avb-preview { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px; border-radius: 14px; background: radial-gradient(circle at 50% 40%, rgba(255,32,43,.18), transparent 65%), #0b0b0d; border: 1px solid var(--border); }
.avb-preview .avb-big { width: 150px; height: 150px; box-shadow: 0 0 0 3px var(--yellow), 0 14px 40px rgba(0,0,0,.6); }
.avb-preview .secondary-btn { width: auto; }
.avb-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 10px; scrollbar-width: none; }
.avb-tabs button { flex-shrink: 0; border: 1px solid #2c2c31; background: #141417; color: #aaa; padding: 8px 12px; border-radius: 20px; font-size: 12px; font-weight: 800; }
.avb-tabs button.on { background: var(--red); border-color: var(--red); color: #fff; }
.avb-group { margin-bottom: 12px; }
.avb-group > label { display: block; font-size: 11px; color: #88888e; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 8px; }
.avb-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 8px; }
.avb-thumb { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px; border-radius: 10px; border: 1px solid #2c2c31; background: #141417; color: #ccc; font-size: 10px; font-weight: 700; }
.avb-thumb.on { border-color: var(--yellow); box-shadow: 0 0 0 1px var(--yellow); color: #fff; }
.avb-thumb.locked { opacity: .45; cursor: not-allowed; }
.avb-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.avb-swatch { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #0b0b0d; box-shadow: 0 0 0 1px #3a3a42; }
.avb-swatch.on { box-shadow: 0 0 0 2px var(--yellow); transform: scale(1.08); }
.avb-hint { color: #8a8a90; font-size: 11px; margin: 8px 0 0; }

/* ---------- Studio ---------- */
.studio-console { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.skill-meter { background: #101012; border: 1px solid var(--border); border-radius: 10px; padding: 10px; }
.skill-meter span { display: block; font-size: 10px; color: #77777d; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; }
.skill-meter b { font-family: Oswald, sans-serif; font-size: 22px; }
.skill-meter .progress { margin-top: 4px; }
.skill-meter.is-next { border-color: rgba(255,200,87,.45); }
.skill-meter.is-next .progress div { background: var(--yellow); }
.quick-cash { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.quick-cash button small { color: #8a8a90; font-weight: 700; margin-left: 4px; }

.studio-layout { display: grid; grid-template-columns: 1fr; gap: 14px; padding-bottom: 76px; }
.studio-steps { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.step-head { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.step-head > span { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--red); font-family: Oswald, sans-serif; font-size: 17px; font-weight: 700; box-shadow: 0 0 16px rgba(255,32,43,.45); }
.step-head h2 { margin: 0; font-family: Oswald, sans-serif; font-size: 20px; text-transform: uppercase; letter-spacing: .5px; }
.step-head p { margin: 2px 0 0; color: #8a8a90; font-size: 12px; }

.chip-group, .opt-group { margin-top: 14px; }
.chip-group legend, .opt-group legend { font-size: 11px; color: #88888e; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 8px; }
.chip-group legend small { text-transform: none; letter-spacing: 0; font-weight: 600; color: #6f6f76; margin-left: 6px; }
.chip-group { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-group legend { width: 100%; }
.chip { position: relative; }
.chip input, .opt-card input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-block; padding: 9px 13px; border-radius: 20px; border: 1px solid #2c2c31; background: #141417; color: #cfcfd6; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.chip span:hover { border-color: #55555f; }
.chip input:checked + span { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 4px 14px rgba(255,32,43,.35); }
.chip input:focus-visible + span, .opt-card input:focus-visible + .opt-body { outline: 2px solid var(--yellow); outline-offset: 2px; }
.chip-fit .chip.fit span::after { content: " ✓"; color: var(--green); font-weight: 900; }
.chip-fit .chip.fit input:checked + span::after { color: #fff; }

.opt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.opt-card { cursor: pointer; }
.opt-body { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid #2c2c31; background: #141417; transition: border-color .15s, background .15s; }
.opt-body b { font-size: 13px; }
.opt-body small { color: #8a8a90; font-size: 11px; }
.opt-body em { font-style: normal; color: var(--cyan); font-size: 11px; font-weight: 700; }
.opt-body strong { margin-top: auto; padding-top: 4px; font-size: 13px; }
.opt-card:hover .opt-body { border-color: #55555f; }
.opt-card input:checked + .opt-body { border-color: var(--red); background: radial-gradient(circle at 100% 0%, rgba(255,32,43,.2), transparent 60%), #17171b; box-shadow: 0 0 0 1px var(--red); }
.opt-card.too-expensive .opt-body strong { color: #ff6b72; }
.opt-card.too-expensive .opt-body { opacity: .6; }

.studio-recap { display: flex; flex-direction: column; gap: 12px; }
.recap-art { width: 120px; margin: 0 auto; }
.recap-quality small { display: block; font-size: 10px; color: #77777d; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; }
.recap-quality b { font-family: Oswald, sans-serif; font-size: 28px; }
.recap-range { position: relative; height: 8px; border-radius: 8px; margin-top: 6px; background: linear-gradient(90deg, #ff5b63, #ffc857 50%, #42e695); opacity: .9; }
.recap-range i { position: absolute; top: -3px; height: 14px; border-radius: 7px; border: 2px solid #fff; background: rgba(255,255,255,.18); box-shadow: 0 0 10px rgba(0,0,0,.6); }
.recap-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.recap-checks .ok { color: var(--green); }
.recap-checks .ko { color: #ff8a5b; }
.recap-lines { border-top: 1px dashed #2c2c31; padding-top: 10px; }
.recap-line { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: #aaa; padding: 3px 0; }
.recap-line b { color: #fff; white-space: nowrap; }
.recap-total { border-top: 1px solid #2c2c31; margin-top: 6px; padding-top: 8px; font-size: 14px; }
.recap-total b { color: var(--yellow); font-size: 16px; }
.recap-bad b { color: #ff5b63; }
.recap-note { color: #6f6f76; font-size: 11px; margin: 0; }

/* Barre fixe en bas sur téléphone */
.studio-bar { position: fixed; left: 60px; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(8,8,10,.94); backdrop-filter: blur(8px); border-top: 1px solid rgba(255,32,43,.35); }
.studio-bar span { font-size: 12px; color: #aaa; }
.studio-bar b { display: block; color: var(--yellow); font-size: 17px; font-family: Oswald, sans-serif; }
.studio-bar .primary-btn { width: auto; padding: 12px 18px; }

.studio-album { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.studio-album p { color: #aaa; font-size: 12px; margin: 4px 0; }

@media (min-width: 900px) {
    .studio-console { grid-template-columns: repeat(3, 1fr) 1.4fr; align-items: stretch; }
    .quick-cash { grid-column: auto; grid-template-columns: 1fr; }
    .studio-layout { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; padding-bottom: 0; }
    .studio-recap { position: sticky; top: 90px; }
    .studio-bar { display: none; }
    .opt-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .studio-album { flex-direction: row; align-items: center; justify-content: space-between; }
    .studio-album .primary-btn { width: auto; }
    .avb { grid-template-columns: 220px 1fr; align-items: start; }
    .avb-preview { position: sticky; top: 0; }
    .product-image { height: 130px; }
    .cert-hero { grid-template-columns: 170px 1fr; }
    .cert-wall .art { max-width: 110px; }
}
.form-group, .form-grid > *, .avb, .avb-panel, .avb-preview { min-width: 0; }
.art.cert, .cert-wall-item .art, .cert-hero-art .art, .recap-art .art, .result-art .art { height: auto; }
.player-stats b { white-space: nowrap; }
@media (max-width: 520px) {
    .topbar-artist.has-avatar > div { display: none; }
    .player-stats { gap: 9px; }
    .player-stats small { font-size: 10px; }
}

/* =========================================================
   V10 — Discographie compacte, Mon artiste, Rapstagram
========================================================= */

/* Discographie : cartes en ligne, petite plaque à gauche */
.track-card { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 12px; padding: 10px; }
.track-card .cover-art { aspect-ratio: 1 / 1; padding: 0; background: transparent; }
.track-card .track-info { padding: 0; min-width: 0; }
.track-card .track-info h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-card .cert-chip { margin-bottom: 4px; }
.track-card-btn:hover { transform: translateY(-2px); }
.track-card .track-info > div[style*="flex-direction:column"] { flex-direction: row !important; flex-wrap: wrap; }
.track-card .track-info > div[style*="flex-direction:column"] button { width: auto; flex: 1 1 auto; padding: 8px 10px; font-size: 11px; }
.cert-wall { padding: 10px 12px; gap: 6px; }
.cert-wall-item .art { max-width: 52px; margin-bottom: 4px; }
.cert-wall-item b { font-size: 18px; }
.cert-hero { grid-template-columns: 96px 1fr; }

/* Mini plaques (carte d'artiste, accueil) */
.mini-certs { display: flex; gap: 10px; margin: 10px 0; }
.mini-cert { display: flex; align-items: center; gap: 4px; }
.mini-cert .art { width: 30px; height: auto; filter: drop-shadow(0 3px 6px rgba(0,0,0,.6)); }
.mini-cert b { font-family: Oswald, sans-serif; font-size: 15px; }
.mini-cert.is-empty { opacity: .35; }

/* Accueil : aperçu de l'artiste */
.artist-teaser { width: 100%; display: flex; align-items: center; gap: 14px; margin-bottom: 16px; padding: 14px; border-radius: 16px; text-align: left; color: #fff; cursor: pointer; border: 1px solid rgba(255,200,87,.35); background: radial-gradient(circle at 0% 50%, rgba(255,200,87,.16), transparent 50%), linear-gradient(120deg, #141417, #0a0a0c); transition: transform .2s, border-color .2s; position: relative; overflow: hidden; }
.artist-teaser:hover { transform: translateY(-2px); border-color: var(--yellow); }
.artist-teaser-avatar .avatar-svg { box-shadow: 0 0 0 3px var(--yellow); }
.artist-teaser-body { flex: 1; min-width: 0; }
.artist-teaser-body small { display: block; color: var(--yellow); font-size: 10px; font-weight: 900; letter-spacing: 1.5px; }
.artist-teaser-body b { display: block; font-family: Oswald, sans-serif; font-size: 24px; font-style: italic; text-transform: uppercase; }
.artist-teaser-body .mini-certs { margin: 6px 0 0; }
.artist-teaser-car { width: 120px; flex-shrink: 0; display: none; }
.artist-teaser-go { font-size: 30px; color: var(--yellow); }

/* Page Mon artiste */
.artist-card { display: grid; grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 12px; padding: 22px 16px; border-radius: 18px; border: 1px solid rgba(255,200,87,.4); background: radial-gradient(circle at 50% 0%, rgba(255,32,43,.28), transparent 55%), radial-gradient(circle at 50% 100%, rgba(255,200,87,.12), transparent 60%), #0c0c0e; margin-bottom: 20px; }
.artist-card .artist-big { box-shadow: 0 0 0 4px var(--yellow), 0 18px 50px rgba(255,32,43,.35); }
.artist-card h2 { margin: 4px 0 0; font-family: Oswald, sans-serif; font-size: 38px; font-style: italic; text-transform: uppercase; color: var(--yellow); text-shadow: 0 0 14px rgba(255,200,87,.45); line-height: 1; }
.artist-handle { margin: 4px 0 12px; color: #8a8a90; font-size: 13px; }
.artist-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; width: 100%; }
.artist-stats div { background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 10px; padding: 8px; }
.artist-stats b { display: block; font-size: 15px; white-space: nowrap; }
.artist-stats small { color: #8a8a90; font-size: 10px; text-transform: uppercase; font-weight: 800; }
.artist-card .mini-certs { justify-content: center; }
.artist-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.artist-actions .secondary-btn { width: auto; }

.section-title { margin: 20px 0 10px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.section-title small { color: #6f6f76; font-weight: 600; font-size: 11px; }

.showcase-row { display: grid; grid-template-columns: 1fr; gap: 10px; }
.showcase-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.showcase { display: flex; flex-direction: column; text-align: left; padding: 0; overflow: hidden; border-radius: 12px; border: 1px solid var(--border); background: #101012; color: #fff; cursor: pointer; transition: border-color .2s, transform .2s; }
.showcase:hover { border-color: rgba(255,200,87,.5); transform: translateY(-2px); }
.showcase-art { height: 78px; display: grid; place-items: center; background: radial-gradient(circle at 50% 60%, #1c1c22, #0a0a0c 75%); }
.showcase-big .showcase-art { height: 150px; }
.showcase-plus { font-size: 26px; opacity: .35; filter: grayscale(1); }
.showcase-text { padding: 8px 10px 10px; min-width: 0; }
.showcase-text small { display: block; color: #8a8a90; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; }
.showcase-text b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.showcase-text span { display: block; color: #8a8a90; font-size: 11px; }
.showcase.is-empty { border-style: dashed; }
.showcase.is-empty b { color: #8a8a90; }

.cert-list { display: grid; grid-template-columns: 1fr; gap: 8px; }
.cert-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; border: 1px solid var(--border); background: #101012; color: #fff; text-align: left; cursor: pointer; }
.cert-row-art .art { width: 44px; height: auto; }
.cert-row b { display: block; font-size: 13px; }
.cert-row small { color: #8a8a90; font-size: 11px; }

.picker-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.picker-item { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 10px; border: 1px solid #2c2c31; background: #141417; color: #fff; text-align: left; cursor: pointer; }
.picker-item.on { border-color: var(--yellow); box-shadow: 0 0 0 1px var(--yellow); }
.picker-art { height: 70px; }
.picker-item b { font-size: 12px; }
.picker-item small { color: #8a8a90; font-size: 10px; }
.equipped-btn { color: var(--green); border-color: rgba(66,230,149,.4); }
.rent-tag { color: var(--green) !important; font-weight: 800; }


/* Rapstagram */
.ig-title p { font-weight: 800; color: #bbb; }
.ig-layout { display: grid; grid-template-columns: 1fr; gap: 14px; }
.ig-main { min-width: 0; max-width: 560px; width: 100%; margin: 0 auto; }
.ig-side { display: none; }
.ig-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid #2a2a2f; margin-bottom: 12px; }
.ig-tabs button { background: none; border: 0; color: #8a8a90; font-weight: 800; font-size: 13px; padding: 12px 4px; border-bottom: 2px solid transparent; }
.ig-tabs button.on { color: #fff; border-bottom-color: #fff; }
.badge-dot { display: inline-block; min-width: 18px; padding: 1px 5px; border-radius: 10px; background: var(--red); color: #fff; font-size: 10px; }
.ig-profile { padding: 4px 2px 14px; }
.ig-profile-top { display: flex; align-items: center; gap: 18px; }
.ig-avatar { box-shadow: 0 0 0 3px #0b0b0d, 0 0 0 5px var(--red); }
.ig-counts { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.ig-counts b { display: block; font-size: 17px; }
.ig-counts small { color: #8a8a90; font-size: 11px; }
.ig-name { margin: 10px 0 4px; font-size: 14px; }
.ig-name small { color: #8a8a90; }
.ig-bio { margin: 0 0 10px; font-size: 13px; color: #ddd; white-space: pre-line; }
.verified { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: #3b82f6; color: #fff; font-size: 9px; vertical-align: 1px; }
.composer { margin-bottom: 14px; }
.composer-head { display: flex; gap: 10px; align-items: flex-start; }
.composer-head textarea { min-height: 60px; }
.composer-types { display: flex; gap: 6px; overflow-x: auto; margin: 10px 0; scrollbar-width: none; }
.composer-types button { flex-shrink: 0; border: 1px solid #2c2c31; background: #141417; color: #ccc; border-radius: 20px; padding: 7px 11px; font-size: 12px; font-weight: 800; }
.composer-types button.on { background: #fff; color: #0b0b0d; border-color: #fff; }
.composer-types button:disabled { opacity: .35; }
.composer-preview { border-radius: 10px; overflow: hidden; }
.composer-preview:empty { display: none; }
.composer-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; }
.composer-foot small { color: #8a8a90; font-size: 12px; }
.composer-foot .primary-btn { width: auto; padding: 10px 22px; }
.post-img { display: block; width: 100%; height: auto; }
.ig-post { background: #0e0e10; border: 1px solid #1f1f24; border-radius: 12px; margin-bottom: 14px; overflow: hidden; }
.ig-post-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.ig-post-head > div { flex: 1; min-width: 0; }
.ig-post-head b { display: block; font-size: 13px; }
.ig-post-head small { color: #77777d; font-size: 11px; }
.follow-btn { border: 0; background: var(--red); color: #fff; font-size: 12px; font-weight: 800; padding: 6px 12px; border-radius: 8px; }
.follow-btn.on { background: #1f1f24; color: #ccc; }
.ig-post-img { user-select: none; }
.ig-actions { display: flex; gap: 16px; padding: 10px 12px 4px; }
.ig-actions button { background: none; border: 0; color: #fff; font-size: 16px; padding: 0; display: flex; align-items: center; gap: 6px; }
.ig-actions button span { font-size: 13px; font-weight: 800; }
.like-btn.on { color: #ff3040; }
.like-btn.on span { color: #fff; }
.ig-caption, .ig-comment { margin: 4px 12px; font-size: 13px; line-height: 1.4; }
.ig-comment { color: #bbb; }
.is-artist { color: var(--yellow); }
.ig-more { background: none; border: 0; color: #77777d; font-size: 12px; margin: 2px 12px 12px; padding: 0; }
.ig-post > :last-child { margin-bottom: 12px; }
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.ig-cell { position: relative; padding: 0; border: 0; background: #000; aspect-ratio: 1 / 1; overflow: hidden; cursor: pointer; }
.ig-cell .post-img { width: 100%; height: 100%; object-fit: cover; }
.ig-cell span { position: absolute; left: 6px; bottom: 5px; font-size: 11px; font-weight: 800; text-shadow: 0 1px 3px #000; }
.notif-list { padding: 6px 12px; }
.notif { display: flex; gap: 10px; align-items: center; font-size: 13px; margin: 0; padding: 10px 0; border-bottom: 1px solid #1f1f24; }
.notif span { font-size: 18px; }
.notif small { margin-left: auto; color: #6f6f76; font-size: 11px; white-space: nowrap; }
.comment-list { max-height: 45vh; overflow-y: auto; margin-bottom: 12px; }
.comment-line { font-size: 13px; margin: 8px 0; }
.quick-comments { display: flex; flex-direction: column; gap: 6px; }
.suggest { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.suggest span { flex: 1; min-width: 0; }
.suggest b { display: block; font-size: 13px; }
.suggest small { color: #8a8a90; font-size: 11px; }

@media (min-width: 900px) {
    .artist-card { grid-template-columns: 200px 1fr; justify-items: start; text-align: left; padding: 26px; }
    .artist-card .mini-certs, .artist-actions { justify-content: flex-start; }
    .artist-stats { grid-template-columns: repeat(4, 1fr); }
    .showcase-row { grid-template-columns: 1fr 1fr; }
    .showcase-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
    .cert-list { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
    .picker-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .artist-teaser-car { display: block; }
    .ig-layout { grid-template-columns: minmax(0, 560px) 300px; justify-content: center; }
    .ig-side { display: block; position: sticky; top: 90px; align-self: start; }
    .ig-side .ig-profile { background: #0e0e10; border: 1px solid #1f1f24; border-radius: 12px; padding: 14px; margin-bottom: 14px; }
    .ig-side .ig-avatar { width: 64px; height: 64px; }
}
.ig-layout { grid-template-columns: minmax(0, 1fr); }
.ig-layout > * { min-width: 0; }
@media (min-width: 900px) {
    .ig-layout { grid-template-columns: minmax(0, 560px) 300px; }
}
.composer-preview { max-width: 420px; margin: 0 auto; }
.quick-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 16px; }
.quick-actions button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: linear-gradient(145deg, #141417, #0c0c0e); color: #fff; font-weight: 800; font-size: 14px; text-align: left; }
.quick-actions button:hover { border-color: rgba(255,32,43,.5); }
.quick-actions span { font-size: 20px; }
.quick-actions small { color: #8a8a90; font-size: 11px; font-weight: 600; }
.artist-teaser-body .mini-certs { flex-wrap: wrap; gap: 6px; }
.artist-teaser-body .mini-cert .art { width: 24px; }
@media (min-width: 900px) { .quick-actions { grid-template-columns: repeat(4, 1fr); } }


/* =========================================================
   V10 — RAPSTAGRAM (publications de carrière, buzz, stats) + TUTORIEL
   ========================================================= */
:root {
    --red-hot: #ff4a55;
    --rose: #ff5c8a;
    --night: #1a1640;
    --text: #ffffff;
    --muted: #a3a3ad;
    --muted-2: #74747e;
    --surface: #111114;
    --surface-2: #17171b;
    --surface-3: #1f1f25;
    --line: rgba(255,255,255,0.08);
    --line-strong: rgba(255,255,255,0.14);
    --ease: cubic-bezier(.2,.8,.2,1);
}
@keyframes v9Pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes v9In { from { opacity: 0; transform: translateY(8px); } }

.rs-muted { color: var(--muted); font-size: 13px; }
.rs-kicker { font-size: 11px; font-weight: 900; letter-spacing: 1.5px; color: var(--red-hot); margin-bottom: 4px; }
.rs-create-card { padding: 14px; margin-bottom: 14px; }
.rs-create { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rs-create span { font-size: 11px; font-weight: 700; opacity: .8; }
.rs-sugg-title { margin-top: 12px; font-size: 12px; font-weight: 800; color: var(--muted); }
.rs-sugg { display: flex; gap: 6px; margin-top: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.rs-sugg::-webkit-scrollbar { display: none; }
.chip-btn { flex-shrink: 0; min-height: 34px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface-3); color: #fff; font: inherit; font-size: 12px; font-weight: 700; white-space: nowrap; }
.chip-btn:hover { border-color: rgba(255,32,43,.6); }
.rs-buzz { margin: 12px 0; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.rs-buzz-head { display: flex; justify-content: space-between; font-size: 13px; font-weight: 800; }
.rs-buzz-head b { color: var(--yellow); }
.rs-buzz .progress { margin: 8px 0 6px; }
.rs-buzz small { color: var(--muted-2); font-size: 11px; line-height: 1.4; display: block; }
.ig-actions .rs-share, .ig-actions .rs-follow { display: inline-flex; align-items: center; font-size: 13px; font-weight: 700; color: var(--muted); }
.rs-follow.pos { color: var(--green); }
.rs-follow.neg { color: var(--rose); }
.ig-post.is-flop { opacity: .88; }
.rs-news { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 12px; border-radius: 16px; background: rgba(255,255,255,.025); border: 1px solid var(--line); }
.rs-news p { margin: 0; font-size: 14px; line-height: 1.35; }
.rs-news small { color: var(--muted-2); font-size: 11px; }
.rs-news-ico { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; background: rgba(255,32,43,.12); border: 1px solid rgba(255,32,43,.3); }
.rs-totals { margin-bottom: 8px; }
.rs-best { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; color: #fff; font: inherit; margin-bottom: 10px; cursor: pointer; }
.rs-best-img { width: 84px; flex-shrink: 0; border-radius: 10px; overflow: hidden; line-height: 0; }
.rs-best-img svg { width: 100%; height: auto; display: block; }
.rs-best-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rs-best-body strong { overflow-wrap: anywhere; }
.rs-best-body small { color: var(--muted); font-size: 12px; }
.rs-rank { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: Oswald, sans-serif; font-size: 16px; font-weight: 700; background: linear-gradient(135deg, var(--red-dark), var(--red)); }
.rs-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.rs-type { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; padding: 12px; min-height: 92px; border-radius: 14px; font: inherit; color: #fff;
    background: linear-gradient(160deg, var(--surface-3), var(--surface)); border: 1px solid var(--line-strong); transition: border-color .2s, transform .12s var(--ease); }
.rs-type:hover { border-color: rgba(255,32,43,.5); }
.rs-type:active { transform: scale(.97); }
.rs-type.off { opacity: .45; cursor: not-allowed; }
.rs-type-ico { font-size: 22px; }
.rs-type strong { font-size: 14px; }
.rs-type small { color: var(--muted); font-size: 11px; line-height: 1.3; }
.rs-opts { display: grid; gap: 6px; margin: 12px 0; max-height: 30vh; overflow-y: auto; }
.rs-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 10px 12px; min-height: 48px; border-radius: 12px; font: inherit; color: #fff; background: var(--surface); border: 1px solid var(--line-strong); }
.rs-opt small { color: var(--muted); font-size: 12px; }
.rs-opt.selected { border-color: var(--red); background: rgba(255,32,43,.1); box-shadow: 0 0 0 1px var(--red); }
.rs-preview { margin: 10px 0 4px; border-radius: 12px; overflow: hidden; line-height: 0; border: 1px solid var(--line); }
.rs-preview svg { width: 100%; height: auto; display: block; }
.rs-label { display: block; margin: 12px 0 6px; font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.rs-composer textarea { width: 100%; min-height: 70px; padding: 12px; font: inherit; font-size: 15px; resize: vertical; color: #fff; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; }
.rs-back { background: none; border: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; padding: 0 0 8px; }
@media (min-width: 600px) { .rs-types { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .rs-types { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.nav-btn { position: relative; }
/* ===== Tutoriel dynamique ===== */
#tuto { display: none; }
#tuto.on { display: block; }
.tuto-spot { position: fixed; z-index: 300; pointer-events: none; border-radius: 14px; display: none;
    box-shadow: 0 0 0 9999px rgba(3,4,10,.62), 0 0 0 2px var(--red-hot), 0 0 24px 4px rgba(255,36,51,.55);
    transition: top .28s var(--ease), left .28s var(--ease), width .28s var(--ease), height .28s var(--ease); animation: tutoPulse 1.6s ease-in-out infinite; }
@keyframes tutoPulse { 0%,100% { box-shadow: 0 0 0 9999px rgba(3,4,10,.62), 0 0 0 2px var(--red-hot), 0 0 18px 2px rgba(255,36,51,.45); } 50% { box-shadow: 0 0 0 9999px rgba(3,4,10,.62), 0 0 0 3px var(--red-hot), 0 0 34px 8px rgba(255,36,51,.7); } }
#tuto.dim::before { content: ""; position: fixed; inset: 0; z-index: 299; background: rgba(3,4,10,.55); }
.tuto-bubble { position: fixed; z-index: 310; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); max-width: 440px; margin: 0 auto;
    padding: 14px 16px 12px; border-radius: 18px; background: linear-gradient(160deg, #1b1d2e, #10111b); border: 1px solid rgba(255,36,51,.45);
    box-shadow: 0 18px 50px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04) inset; animation: tutoIn .35s var(--ease) both; }
.tuto-bubble.top { bottom: auto; top: calc(12px + env(safe-area-inset-top, 0px)); }
@keyframes tutoIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.tuto-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.tuto-count { font-size: 10px; font-weight: 900; letter-spacing: 1.5px; color: var(--red-hot); }
.tuto-skip { background: none; border: none; color: var(--muted-2); font: inherit; font-size: 12px; font-weight: 700; padding: 6px 4px; min-height: 32px; cursor: pointer; }
.tuto-skip:hover { color: var(--text); }
.tuto-title { margin: 0 0 4px; font-family: Oswald, Inter, sans-serif; font-size: 20px; text-transform: uppercase; }
.tuto-text { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text); }
.tuto-actions { display: flex; gap: 8px; margin-top: 10px; }
.tuto-actions button { flex: 1; min-height: 42px; }
.tuto-progress { height: 3px; margin-top: 12px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.tuto-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--red), var(--red-hot)); transition: width .4s var(--ease); }
.tuto-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.tuto-stats div { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 10px; padding: 7px 6px; text-align: center; min-width: 0; }
.tuto-stats small { display: block; color: var(--muted-2); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.tuto-stats b { display: block; color: #fff; font-size: 13px; margin-top: 2px; overflow-wrap: anywhere; }
.tuto-done { position: fixed; z-index: 320; top: 38%; left: 50%; transform: translate(-50%, -50%); padding: 14px 24px; border-radius: 999px; white-space: nowrap;
    font-family: Oswald, Inter, sans-serif; font-size: 22px; letter-spacing: 1px; color: #fff; background: linear-gradient(135deg, var(--red), var(--red-hot));
    box-shadow: 0 0 40px rgba(255,36,51,.6); animation: tutoDone 1.6s var(--ease) both; pointer-events: none; }
.tuto-done.unlock { background: #0d0e17; border: 1px solid var(--red-hot); color: var(--text); font-size: 18px; }
@keyframes tutoDone { 0% { opacity: 0; transform: translate(-50%, -40%) scale(.8); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } 30% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -60%); } }
#tuto.intro::before, #tuto.finale::before { content: ""; position: fixed; inset: 0; z-index: 305; background: radial-gradient(circle at 50% 35%, rgba(255,36,51,.18), transparent 60%), rgba(3,4,10,.86); animation: tutoFade .4s both; }
#tuto.intro .tuto-bubble, #tuto.finale .tuto-bubble { top: 50%; bottom: auto; transform: translateY(-50%); background: none; border: none; box-shadow: none; text-align: center; animation: none; }
.tuto-intro { animation: tutoIn .5s var(--ease) both; }
.tuto-logo { font-family: Oswald, sans-serif; font-size: 42px; font-weight: 700; letter-spacing: 1px; margin-bottom: 14px; }
.tuto-logo span { color: var(--red-hot); }
.tuto-intro .tuto-text { color: var(--muted); font-size: 15px; margin: 6px auto 22px; max-width: 340px; }
.tuto-start { width: 100%; max-width: 320px; min-height: 52px; font-size: 16px; letter-spacing: 1px; }
.tuto-intro .tuto-skip { display: block; margin: 10px auto 0; }
.tuto-finale .f1 { font-family: Oswald, Inter, sans-serif; font-size: 30px; line-height: 1.15; margin: 0; animation: tutoIn .6s var(--ease) both; }
.tuto-finale .f2 { color: var(--muted); font-size: 17px; margin: 14px 0 0; animation: tutoIn .6s var(--ease) .7s both; }
#tuto.out { animation: tutoFade .5s reverse both; }
@keyframes tutoFade { from { opacity: 0; } }
.nav-btn.locked { opacity: .38; filter: grayscale(1); }
.nav-btn.locked:hover { background: transparent; }
.nav-lock { position: absolute; top: 4px; right: 6px; font-size: 10px; font-style: normal; filter: none; }
.nav-btn.just-unlocked { animation: navUnlock 1.6s var(--ease); }
@keyframes navUnlock { 0% { box-shadow: 0 0 0 0 rgba(255,36,51,.8); background: rgba(255,36,51,.35); } 100% { box-shadow: 0 0 0 14px rgba(255,36,51,0); } }
.guide details { border-top: 1px solid var(--line); padding: 10px 2px; }
.guide summary { cursor: pointer; font-weight: 800; font-size: 14px; list-style-position: inside; }
.guide details p { margin: 8px 0 2px; color: var(--muted); font-size: 13px; line-height: 1.5; }
@media (min-width: 900px) {
    .tuto-bubble { left: auto; right: 28px; bottom: 28px; margin: 0; width: 400px; }
    .tuto-bubble.top { top: 96px; }
    .nav-lock { top: 50%; right: 14px; transform: translateY(-50%); }
    body.nav-compact .nav-lock { top: 4px; right: 6px; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .tuto-spot, .tuto-done, .nav-btn.just-unlocked, .tuto-bubble { animation: none; } }


/* =========================================================
   ASSETS OFFICIELS — avatars, boutique, certifications
   ========================================================= */
.art-photo image, .cert-photo image { image-rendering: auto; }
.avatar-photo { border-radius: 50%; background: #0b0b0d; }
.avb-models .avb-lead { margin: 0 0 10px; color: var(--grey); font-style: italic; text-align: center; }
.model-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.model-card { position: relative; padding: 0; border: 2px solid rgba(255,255,255,.08); border-radius: 14px; overflow: hidden; background: #0b0b0d; cursor: pointer; line-height: 0;
    transition: transform .18s var(--ease), border-color .18s, box-shadow .18s; }
.model-card img { width: 100%; height: auto; aspect-ratio: 366 / 490; object-fit: contain; display: block; }
.model-card:hover { border-color: rgba(255,32,43,.45); }
.model-card.on { border-color: var(--red); box-shadow: 0 0 0 1px var(--red), 0 0 22px rgba(255,32,43,.55); animation: modelOn .5s var(--ease); }
@keyframes modelOn { 40% { transform: scale(1.03); } }
.model-check { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; display: none; align-items: center; justify-content: center;
    background: var(--red); color: #fff; font-size: 14px; font-weight: 900; line-height: 1; box-shadow: 0 0 12px rgba(255,32,43,.8); }
.model-card.on .model-check { display: flex; }
@media (min-width: 700px) { .model-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.avatar-card { position: relative; width: min(230px, 70vw); margin: 0 auto; border-radius: 16px; overflow: hidden; line-height: 0; box-shadow: 0 0 30px rgba(255,32,43,.35); border: 1px solid rgba(255,32,43,.4); }
.avatar-card-img { width: 100%; height: auto; display: block; }
.avatar-card-neck { position: absolute; left: 32%; width: 36%; top: 64%; mix-blend-mode: screen; pointer-events: none; }
.avatar-worn { position: absolute; left: 6px; right: 6px; bottom: 44px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; line-height: 0; }
.avatar-worn-item { width: 38px; height: 30px; border-radius: 8px; background: rgba(5,5,5,.78); border: 1px solid rgba(255,255,255,.14); padding: 2px; }
.avatar-worn-item svg { width: 100%; height: 100%; }

#certfx { display: none; }
#certfx.on { display: flex; position: fixed; inset: 0; z-index: 450; align-items: center; justify-content: center; padding: 16px; background: rgba(3,3,6,.82); animation: tutoFade .35s both; }
.certfx-box { position: relative; width: min(380px, 100%); padding: 22px 20px 20px; border-radius: 22px; text-align: center; overflow: hidden;
    background: radial-gradient(circle at 50% 30%, var(--fx-glow, rgba(255,200,87,.25)), transparent 60%), linear-gradient(170deg, #17171b, #070709);
    border: 1px solid var(--fx-line, rgba(255,200,87,.5)); box-shadow: 0 0 60px var(--fx-glow, rgba(255,200,87,.3)); animation: certIn .5s var(--ease) both; }
@keyframes certIn { from { opacity: 0; transform: scale(.88) translateY(14px); } }
.fx-or { --fx-glow: rgba(255,200,87,.35); --fx-line: rgba(255,200,87,.6); --fx-p: #ffd66b; }
.fx-platine, .fx-double { --fx-glow: rgba(210,220,235,.28); --fx-line: rgba(220,228,240,.55); --fx-p: #eef3fb; }
.fx-diamant { --fx-glow: rgba(150,215,255,.38); --fx-line: rgba(170,225,255,.7); --fx-p: #c9ecff; }
.certfx-rays { position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent 0 10deg, var(--fx-glow) 10deg 16deg, transparent 16deg 40deg, var(--fx-glow) 40deg 44deg, transparent 44deg 90deg);
    opacity: .5; animation: certSpin 14s linear infinite; pointer-events: none; }
@keyframes certSpin { to { transform: rotate(360deg); } }
.certfx-particles { position: absolute; left: 50%; top: 42%; width: 0; height: 0; pointer-events: none; }
.certfx-particles i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--fx-p); box-shadow: 0 0 8px var(--fx-p); opacity: 0;
    transform: rotate(var(--a)) translateY(0); animation: certBurst 1.6s var(--d) ease-out both; }
@keyframes certBurst { 15% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-170px); } }
.certfx-logo { position: relative; font-family: Oswald, sans-serif; font-size: 22px; font-weight: 700; letter-spacing: 1px; animation: certIn .5s .15s var(--ease) both; }
.certfx-logo span { color: var(--red); }
.certfx-disc { position: relative; width: 190px; margin: 10px auto 6px; line-height: 0; animation: certDisc 1.1s .25s var(--ease) both; }
.certfx-disc img, .certfx-disc svg { width: 100%; height: auto; border-radius: 8px; filter: drop-shadow(0 0 18px var(--fx-glow)); }
@keyframes certDisc { 0% { opacity: 0; transform: scale(.4) rotate(-25deg); } 70% { transform: scale(1.05) rotate(3deg); } 100% { opacity: 1; transform: none; } }
.fx-double .certfx-disc img { animation: certTwin 1.2s .3s var(--ease) both; }
@keyframes certTwin { 0% { clip-path: inset(0 100% 0 0); } 50% { clip-path: inset(0 50% 0 0); } 100% { clip-path: inset(0 0 0 0); } }
.certfx-disc::after { content: ""; position: absolute; inset: 0; border-radius: 8px; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
    background-size: 250% 100%; animation: certShine 2.2s 1.1s ease-in-out infinite; mix-blend-mode: overlay; pointer-events: none; }
@keyframes certShine { 0% { background-position: 120% 0; } 60%, 100% { background-position: -120% 0; } }
.fx-diamant .certfx-disc { animation: certDisc 1.1s .25s var(--ease) both, certAura 2.4s 1.3s ease-in-out infinite; }
@keyframes certAura { 50% { filter: drop-shadow(0 0 26px rgba(170,225,255,.9)); } }
.certfx-congrats { position: relative; margin: 8px 0 0; font-family: Oswald, sans-serif; font-size: 28px; letter-spacing: 1px; color: var(--fx-p); animation: certIn .5s .7s var(--ease) both; }
.certfx-sub { position: relative; margin: 2px 0 0; font-size: 11px; font-weight: 900; letter-spacing: 2px; color: var(--grey); animation: certIn .5s .8s var(--ease) both; }
.certfx-title { position: relative; margin: 10px 0 0; font-family: Oswald, sans-serif; font-size: 22px; text-transform: uppercase; overflow-wrap: anywhere; animation: certIn .5s .9s var(--ease) both; }
.certfx-level { position: relative; margin: 4px 0 0; font-size: 14px; font-weight: 900; letter-spacing: 1.5px; color: var(--fx-p); animation: certIn .5s 1s var(--ease) both; }
.certfx-streams { position: relative; margin: 2px 0 14px; color: var(--grey); font-size: 13px; animation: certIn .5s 1.05s var(--ease) both; }
.certfx-btn { position: relative; width: 100%; min-height: 48px; letter-spacing: 1px; animation: certIn .5s 1.15s var(--ease) both; }
@media (prefers-reduced-motion: reduce) { .certfx-box, .certfx-rays, .certfx-particles i, .certfx-disc, .certfx-disc::after, .model-card.on { animation: none !important; } .certfx-particles { display: none; } }

/* =========================================================
   V10 — CORRECTIONS UI : menu dépliant, tri boutique, contacts, carte artiste
   ========================================================= */
:root { --nav-w: 60px; }
body.nav-open { --nav-w: 164px; }
@media (min-width: 900px) {
    body.nav-open { --nav-w: 214px; }
    body.nav-compact { --nav-w: 72px; }
}
.sidebar { width: var(--nav-w) !important; transition: width .22s var(--ease); overflow-x: hidden; }
.studio-bar { left: var(--nav-w); }

/* Menu ouvert : icône + nom, sur téléphone comme sur ordinateur */
body.nav-open .sidebar { align-items: stretch; padding: 12px 10px; }
body.nav-open .nav-btn { width: 100%; height: 44px; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 12px; padding: 0 12px; font-size: 14px; }
body.nav-open .nav-label { position: static; width: auto; height: auto; clip: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Menu réduit : uniquement les icônes, centrées */
body.nav-compact .sidebar { align-items: center; padding: 12px 0; }
body.nav-compact .nav-btn { width: 44px; height: 44px; display: flex; justify-content: center; align-items: center; padding: 0; margin: 0 auto 2px; gap: 0; }
body.nav-compact .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.nav-toggle { display: flex; align-items: center; gap: 12px; height: 36px; margin: 0 auto 8px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03); color: #99999f; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; flex-shrink: 0; }
.nav-toggle span { font-size: 18px; line-height: 1; width: 20px; text-align: center; color: var(--red); }
.nav-toggle:hover { color: #fff; border-color: rgba(255,32,43,.45); }
body.nav-open .nav-toggle { width: 100%; }
body.nav-compact .nav-toggle { width: 44px; justify-content: center; padding: 0; }
.nav-toggle .nav-label { font-style: normal; }

/* Cadenas du tutoriel selon l'état du menu */
body.nav-open .nav-lock { top: 50%; right: 10px; transform: translateY(-50%); }
body.nav-compact .nav-lock { top: 2px; right: 2px; transform: none; }

/* Portrait du joueur : cercle net, centré dans son conteneur */
.topbar-artist { display: flex; align-items: center; justify-content: center; }
.topbar-artist .avatar-svg { display: block; flex: 0 0 auto; margin: 0 auto; border-radius: 50%; overflow: hidden; }

/* Boutique : tri par prix */
.shop-sort { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: -8px 0 16px; font-size: 12px; color: #8a8a92; }
.shop-sort button { min-height: 34px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: #111114; color: #cfcfd4; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.shop-sort button.on { background: var(--red); border-color: var(--red); color: #fff; }

/* Contacts : sections */
.contact-section { display: flex; align-items: center; gap: 8px; margin: 6px 0 12px; font-family: Oswald, sans-serif; font-size: 18px; text-transform: uppercase; letter-spacing: .5px; }
.contact-section span { font-family: Inter, sans-serif; font-size: 12px; font-weight: 800; color: #fff; background: rgba(255,32,43,.2); border: 1px solid rgba(255,32,43,.5); border-radius: 999px; padding: 2px 9px; }
.contact-section ~ .contact-section { margin-top: 26px; }

/* Carte « Mon artiste » : image recadrée dans son propre cadre, jamais plus large que sa colonne */
.artist-card-avatar { width: 100%; display: flex; justify-content: center; min-width: 0; }
.avatar-card { width: 100%; max-width: 230px; aspect-ratio: 300 / 351; }
.avatar-card-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.avatar-card-neck { top: 73%; }
.avatar-worn { bottom: 8px; }
.model-card img { aspect-ratio: 300 / 351; object-fit: cover; object-position: center top; }
@media (min-width: 900px) {
    .artist-card { grid-template-columns: 230px minmax(0, 1fr); align-items: center; }
    .artist-card-avatar { justify-content: flex-start; }
}
/* Studio : les boutons radio invisibles restent dans leur pastille (plus de défilement horizontal) */
.opt-card { position: relative; }
.chip input, .opt-card input { top: 0; left: 0; width: 1px; height: 1px; margin: 0; }

/* Lot A — clips, label, étapes */
.clip-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.clip-type { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; padding: 12px; border-radius: 14px; font: inherit; color: #fff; cursor: pointer;
    background: linear-gradient(160deg, #1f1f25, #111114); border: 1px solid rgba(255,255,255,.12); transition: border-color .2s, box-shadow .2s, transform .12s; }
.clip-type:hover { border-color: rgba(255,32,43,.5); }
.clip-type:active { transform: scale(.98); }
.clip-type.on { border-color: var(--red); box-shadow: 0 0 0 1px var(--red), 0 0 18px rgba(255,32,43,.35); }
.clip-type-ico { font-size: 22px; }
.clip-type strong { font-size: 15px; }
.clip-type small { color: #9a9aa2; font-size: 11px; line-height: 1.35; }
.clip-type b { margin-top: 4px; color: var(--yellow); font-size: 14px; }
.clip-options summary { cursor: pointer; font-weight: 800; font-size: 13px; color: #cfcfd4; padding: 6px 0; }
@media (min-width: 700px) { .clip-types { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.next-step { color: #8a8a92; font-size: 13px; margin: 8px 0 0; }
.nav-badge { position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px #080809, 0 0 10px var(--red); }
body.nav-open .nav-badge { top: 50%; right: 12px; transform: translateY(-50%); }
.label-offer { text-align: center; }
.label-logo { width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-family: Oswald, sans-serif; font-size: 22px; font-weight: 700;
    background: linear-gradient(135deg, #2a0710, var(--red)); box-shadow: 0 0 24px rgba(255,32,43,.45); }
.label-kicker { margin: 0; font-size: 11px; font-weight: 900; letter-spacing: 1.5px; color: var(--red); }
.label-offer h2 { margin: 6px 0; line-height: 1.2; }
.label-pitch { color: #9a9aa2; font-size: 13px; margin: 0 0 12px; }
.label-perks { text-align: left; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 12px; margin-bottom: 12px; }
.label-advance { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.08); }
.label-advance small { color: #9a9aa2; font-size: 12px; }
.label-advance b { color: var(--green); font-size: 20px; }
.label-perks-title { margin: 10px 0 6px; font-size: 12px; font-weight: 800; color: #cfcfd4; }
.label-perks ul { margin: 0; padding-left: 18px; color: #cfcfd4; font-size: 13px; line-height: 1.7; }
.perk-new { display: inline-block; font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: rgba(66,230,149,.15); color: var(--green); border: 1px solid rgba(66,230,149,.4); }
.label-later { color: #74747e; font-size: 12px; margin: 10px 0 0; }

.predilections { margin: 2px 0 6px; font-size: 11px; font-weight: 700; color: #ffc857; }
.stream-potential { text-align: center; margin: 16px 0 4px; line-height: 1.5; }
.stream-potential strong { font-size: 18px; color: var(--green); }
.stream-potential small { color: #8a8a92; font-size: 11px; }

/* Prédilections dans le Studio : simple indication */
.chip.pred > span { border-color: rgba(255,200,87,.75) !important; box-shadow: 0 0 10px rgba(255,200,87,.35); }
.chip.pred::after { content: attr(data-pred); position: absolute; top: -7px; right: -5px; font-size: 11px; line-height: 1; pointer-events: none; animation: predPulse 2.4s ease-in-out infinite; }
@keyframes predPulse { 50% { transform: scale(1.18); } }
.pred-hint { width: 100%; margin: 8px 0 0; font-size: 11px; line-height: 1.4; color: #ffc857; }
@media (prefers-reduced-motion: reduce) { .chip.pred::after { animation: none; } }

/* Étoiles de popularité : centrées, entières, toujours sur 5 */
.stars-image { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.stars-row { display: inline-flex; align-items: center; justify-content: center; gap: 1px; max-width: 100%; font-size: clamp(10px, 3.2vw, 20px); line-height: 1; letter-spacing: 0; white-space: nowrap; color: var(--yellow); text-shadow: 0 0 6px rgba(255,200,87,.35); }
.stars-row .off { color: rgba(255,255,255,.16); text-shadow: none; }
@media (min-width: 900px) { .stars-row { font-size: 20px; gap: 2px; } }

/* Portraits des artistes */
.product-image.artist-photo { position: relative; padding: 0; overflow: hidden; display: block; background: #0b0b0d; }
.artist-portrait { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.artist-stars { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; padding: 14px 4px 5px; background: linear-gradient(transparent, rgba(0,0,0,.85)); line-height: 1; }
.feat-thumb { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 7px; border: 1px solid rgba(255,32,43,.55); }


/* ===== Disque de diamant : apparition spectaculaire (~2,5 s, transform/opacity uniquement) ===== */
#certfx.fx-diamant::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 2;
    background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.95), rgba(190,235,255,.55) 35%, transparent 70%);
    animation: diamondFlash .8s .2s ease-out both; }
@keyframes diamondFlash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
.fx-diamant .certfx-disc { animation: diamondPop 1.1s .25s cubic-bezier(.2,1.4,.4,1) both, certAura 2.4s 1.4s ease-in-out infinite; will-change: transform, opacity; }
@keyframes diamondPop { 0% { opacity: 0; transform: scale(.15) rotate(-35deg); } 45% { opacity: 1; transform: scale(1.18) rotate(6deg); } 65% { transform: scale(.94) rotate(-2deg); } 82% { transform: scale(1.04); } 100% { opacity: 1; transform: none; } }
.fx-diamant .certfx-disc::before { content: ""; position: absolute; inset: -22%; z-index: -1; border-radius: 50%;
    background: radial-gradient(circle, rgba(190,235,255,.75), rgba(120,200,255,.25) 45%, transparent 70%); animation: diamondHalo 1.6s .6s ease-in-out infinite; will-change: transform, opacity; }
@keyframes diamondHalo { 0%, 100% { opacity: .55; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.12); } }
.fx-diamant .certfx-disc::after { background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.95) 48%, rgba(200,240,255,.7) 52%, transparent 70%);
    background-size: 260% 100%; mix-blend-mode: screen; animation: certShine 1.3s .9s ease-in-out infinite; }
.certfx-sparkles { position: absolute; left: 50%; top: 42%; width: 0; height: 0; z-index: 1; pointer-events: none; }
.certfx-sparkles i { position: absolute; font-style: normal; font-size: 16px; color: #e8f8ff; text-shadow: 0 0 8px #bfeaff, 0 0 16px #8fd4ff;
    transform: translate(var(--x), var(--y)) scale(0); opacity: 0; animation: sparkle 1.5s var(--d) ease-in-out infinite; will-change: transform, opacity; }
.certfx-sparkles i:nth-child(3n) { font-size: 11px; }
.certfx-sparkles i:nth-child(4n) { font-size: 20px; }
@keyframes sparkle { 0% { opacity: 0; transform: translate(var(--x), var(--y)) scale(0) rotate(0); } 35% { opacity: 1; transform: translate(var(--x), var(--y)) scale(1.1) rotate(45deg); } 70%, 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(0) rotate(90deg); } }
.fx-diamant .certfx-congrats { text-shadow: 0 0 18px rgba(170,225,255,.85); }
@media (prefers-reduced-motion: reduce) { #certfx.fx-diamant::after, .certfx-sparkles { display: none; } .fx-diamant .certfx-disc, .fx-diamant .certfx-disc::before { animation: none; } }

/* ===== Retraite ===== */
.retire-btn { width: 100%; margin-bottom: 8px; }
.retire-confirm { text-align: center; }
.retire-icon { font-size: 44px; line-height: 1; margin-bottom: 6px; }
.retire-confirm p { color: #b8b8c0; font-size: 14px; line-height: 1.5; }
.retire-warn { color: #ff8a90 !important; font-size: 12px !important; font-weight: 700; }

/* ===== Transition vers le bilan ===== */
#endfx { position: fixed; inset: 0; z-index: 500; pointer-events: none; opacity: 0; }
#endfx.fade-black { background: #000; animation: endBlack 1.5s ease-in both; pointer-events: auto; }
@keyframes endBlack { from { opacity: 0; } to { opacity: 1; } }
#endfx.flash-out { background: radial-gradient(circle at 50% 35%, #fff 0%, rgba(255,200,87,.85) 22%, rgba(255,32,43,.35) 45%, #000 75%); animation: endFlash 1.3s ease-out both; }
@keyframes endFlash { 0% { opacity: 1; } 25% { opacity: .9; } 100% { opacity: 0; } }
body.bilan-reveal #content { animation: bilanZoom 1.1s cubic-bezier(.2,1.2,.4,1) both; }
@keyframes bilanZoom { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
body.bilan-reveal #content .card, body.bilan-reveal #content .stat-card, body.bilan-reveal #content .report-stat, body.bilan-reveal #content li { animation: bilanItem .55s cubic-bezier(.2,.8,.2,1) both; }
@keyframes bilanItem { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #endfx.fade-black, #endfx.flash-out, body.bilan-reveal #content, body.bilan-reveal #content * { animation-duration: .01s !important; } }

/* ===== Étape de carrière : fenêtre animée ===== */
.step-pop { text-align: center; }
.step-burst { width: 76px; height: 76px; margin: 0 auto 10px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 36px;
    background: radial-gradient(circle, rgba(255,32,43,.55), rgba(255,32,43,.08) 70%); box-shadow: 0 0 30px rgba(255,32,43,.55); animation: stepBurst .7s cubic-bezier(.2,1.5,.4,1) both, stepGlow 2s .7s ease-in-out infinite; }
@keyframes stepBurst { from { opacity: 0; transform: scale(.3) rotate(-20deg); } to { opacity: 1; transform: none; } }
@keyframes stepGlow { 50% { box-shadow: 0 0 46px rgba(255,32,43,.85); } }
.step-kicker { margin: 0; font-size: 11px; font-weight: 900; letter-spacing: 2px; color: var(--red); animation: certIn .5s .2s var(--ease) both; }
.step-pop h2 { margin: 6px 0; font-family: Oswald, sans-serif; text-transform: uppercase; font-size: 26px; animation: certIn .5s .3s var(--ease) both; }
.step-desc { color: #a3a3ad; font-size: 13px; margin: 0 0 12px; animation: certIn .5s .4s var(--ease) both; }
.step-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 14px; animation: certIn .5s .5s var(--ease) both; }
.step-meta span { font-size: 12px; font-weight: 800; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
@media (prefers-reduced-motion: reduce) { .step-burst, .step-kicker, .step-pop h2, .step-desc, .step-meta { animation: none; } }

/* =========================================================
   CRÉATION D'ARTISTE — design « scène »
   Réutilise la palette du jeu : --red, --red-dark, --yellow, --panel, --border, Oswald/Inter.
   Animations : transform/opacity uniquement, 150–600 ms.
   ========================================================= */
.crea { position: relative; max-width: 1180px; margin: 0 auto; padding-bottom: 30px; isolation: isolate; }

/* Fond : deux projecteurs qui glissent + poussières de lumière */
.crea-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.crea-bg::before, .crea-bg::after { content: ""; position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; will-change: transform; }
.crea-bg::before { left: -25vmax; top: -30vmax; background: radial-gradient(circle, rgba(255,32,43,.20), transparent 62%); animation: creaSpotA 18s ease-in-out infinite alternate; }
.crea-bg::after { right: -30vmax; bottom: -35vmax; background: radial-gradient(circle, rgba(201,0,11,.16), transparent 60%); animation: creaSpotB 22s ease-in-out infinite alternate; }
@keyframes creaSpotA { to { transform: translate(18vmax, 12vmax); } }
@keyframes creaSpotB { to { transform: translate(-16vmax, -10vmax); } }
.crea-bg i { position: absolute; left: var(--x); bottom: -10px; width: 3px; height: 3px; border-radius: 50%; background: rgba(255,120,120,.55); box-shadow: 0 0 6px rgba(255,32,43,.8);
    opacity: 0; animation: creaDust var(--d) var(--w) linear infinite; will-change: transform, opacity; }
@keyframes creaDust { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: .7; } 100% { opacity: 0; transform: translateY(-85vh); } }

/* Titre */
.crea-hero { text-align: center; padding: 6px 0 22px; animation: creaIn .6s var(--ease) both; }
.crea-kicker { margin: 0; font-size: 11px; font-weight: 900; letter-spacing: 3px; color: var(--red); }
.crea-hero h1 { margin: 6px 0 6px; font-family: Oswald, sans-serif; font-size: clamp(34px, 9vw, 64px); line-height: 1; text-transform: uppercase; letter-spacing: 1px; }
.crea-hero h1 span { background: linear-gradient(90deg, var(--red), #ff6a4d, var(--yellow)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 18px rgba(255,32,43,.45)); }
.crea-hero > p:last-child { margin: 0; color: var(--grey); font-size: 14px; }

/* Mise en page : colonne de sections + fiche collante sur ordinateur */
.crea-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.crea-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.crea-desktop-only { display: none; }
@media (min-width: 980px) {
    .crea-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 26px; align-items: start; }
    .crea-desktop-only { display: block; }
    .crea-mobile-only { display: none; }
    .crea-sticky { position: sticky; top: 90px; }
}

/* Sections en cascade */
.crea-sec { padding: 18px; border-radius: 16px; background: linear-gradient(145deg, rgba(17,17,20,.92), rgba(12,12,14,.92)); border: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(0,0,0,.35); animation: creaIn .55s var(--ease) both; }
.crea-main > *:nth-child(1) { animation-delay: .08s; }
.crea-main > *:nth-child(2) { animation-delay: .16s; }
.crea-main > *:nth-child(3) { animation-delay: .24s; }
.crea-main > *:nth-child(4) { animation-delay: .32s; }
.crea-main > *:nth-child(5) { animation-delay: .40s; }
.crea-main > .crea-launch-wrap { animation: creaIn .55s .5s var(--ease) both; }
.crea-side { animation: creaIn .6s .3s var(--ease) both; }
.crea-preview-slot { animation: creaIn .55s .2s var(--ease) both; }
@keyframes creaIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.crea-sec-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.crea-step { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: Oswald, sans-serif; font-size: 16px; font-weight: 700;
    background: linear-gradient(135deg, var(--red), var(--red-dark)); box-shadow: 0 0 14px rgba(255,32,43,.45); }
.crea-sec-head h2 { margin: 0; font-family: Oswald, sans-serif; font-size: 20px; text-transform: uppercase; letter-spacing: .5px; }
.crea-sec-head p { margin: 2px 0 0; color: var(--grey); font-size: 12px; }
.crea-label { margin: 14px 0 8px; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #8a8a92; }
.crea-label:first-of-type { margin-top: 0; }

/* Champ à label flottant + bordure lumineuse */
.crea-field { position: relative; }
.crea-field input { width: 100%; height: 60px; padding: 22px 64px 8px 16px; border-radius: 14px; font: inherit; font-size: 18px; font-weight: 800; color: #fff;
    background: #0b0b0d; border: 1px solid rgba(255,255,255,.12); outline: none; transition: border-color .2s, box-shadow .25s; }
.crea-field label { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); transform-origin: left center; color: #8a8a92; font-size: 15px; font-weight: 700; pointer-events: none;
    transition: transform .2s var(--ease), color .2s; }
.crea-field input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(255,32,43,.18), 0 0 22px rgba(255,32,43,.35); }
.crea-field input:focus + label, .crea-field input:not(:placeholder-shown) + label { transform: translateY(-21px) scale(.72); color: var(--red); }
.crea-count { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 700; color: #6f6f76; }
.crea-field.shake { animation: creaShake .4s ease; }
@keyframes creaShake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* Grille des 8 modèles intégrée à la section */
.crea .avb-models .avb-lead { display: none; }

/* Tuiles sélectionnables */
.crea-tiles { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .crea-tiles.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } .crea-tiles.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.crea-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; padding: 12px; min-height: 92px; border-radius: 14px; cursor: pointer;
    font: inherit; color: #fff; background: linear-gradient(160deg, #1b1b20, #101013); border: 1px solid rgba(255,255,255,.1);
    transition: transform .18s var(--ease), border-color .2s, box-shadow .25s, background .25s; }
.crea-tile:hover { transform: translateY(-2px); border-color: rgba(255,32,43,.45); }
.crea-tile:active { transform: scale(.97); }
.crea-tile:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.crea-tile-ico { font-size: 22px; line-height: 1; transition: transform .25s var(--ease); }
.crea-tile strong { font-size: 13px; line-height: 1.25; }
.crea-tile small { color: #9a9aa2; font-size: 11px; line-height: 1.35; }
.crea-check { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 11px; font-weight: 900;
    background: var(--red); color: #fff; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .25s cubic-bezier(.2,1.6,.4,1); }
.crea-tile.on { border-color: var(--red); background: linear-gradient(160deg, rgba(255,32,43,.16), #111114 70%); box-shadow: 0 0 0 1px var(--red), 0 0 20px rgba(255,32,43,.35); transform: scale(1.02); }
.crea-tile.on .crea-tile-ico { transform: scale(1.15); }
.crea-tile.on .crea-check { opacity: 1; transform: scale(1); }

/* Fiche d'artiste (aperçu en direct) */
.crea-card { border-radius: 18px; overflow: hidden; background: linear-gradient(170deg, #17171b, #0b0b0d); border: 1px solid rgba(255,32,43,.35); box-shadow: 0 0 30px rgba(255,32,43,.18), 0 16px 40px rgba(0,0,0,.45); }
.crea-card-img { aspect-ratio: 300 / 230; overflow: hidden; background: #0b0b0d; line-height: 0; }
.crea-card-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; transition: opacity .3s; }
.crea-card-body { padding: 14px 16px 16px; }
.crea-card-kicker { margin: 0; font-size: 10px; font-weight: 900; letter-spacing: 2px; color: var(--red); }
.crea-card h3 { margin: 4px 0 8px; font-family: Oswald, sans-serif; font-size: 26px; text-transform: uppercase; line-height: 1.05; color: var(--yellow); overflow-wrap: anywhere; }
.crea-card h3.empty { color: #55555c; }
.crea-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.crea-tags span { font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: #cfcfd4; }
.crea-stats { display: grid; gap: 8px; }
.crea-stat { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; font-size: 12px; font-weight: 700; color: #cfcfd4; }
.crea-stat b { color: #fff; font-size: 13px; }
.crea-bar { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: rgba(255,255,255,.07); overflow: hidden; }
.crea-bar i { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left center; border-radius: 6px;
    background: linear-gradient(90deg, var(--red-dark), var(--red), #ff7a4d); box-shadow: 0 0 10px rgba(255,32,43,.6); transition: transform .5s cubic-bezier(.2,1.1,.3,1); will-change: transform; }
.crea-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.crea-chips div { padding: 8px 6px; text-align: center; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); min-width: 0; }
.crea-chips small { display: block; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: #8a8a92; }
.crea-chips b { display: block; font-size: 13px; margin-top: 2px; overflow-wrap: anywhere; }

/* Bouton final */
.crea-launch-wrap { text-align: center; padding-top: 4px; }
.crea-launch { position: relative; overflow: hidden; width: 100%; max-width: 520px; min-height: 60px; border: none; border-radius: 16px; cursor: pointer;
    font: inherit; font-family: Oswald, sans-serif; font-size: 20px; letter-spacing: 1px; text-transform: uppercase; color: #fff;
    background: linear-gradient(120deg, var(--red-dark), var(--red) 45%, #ff5a3c); box-shadow: 0 10px 30px rgba(255,32,43,.45), 0 0 0 1px rgba(255,255,255,.08) inset;
    transition: transform .18s var(--ease), box-shadow .25s; animation: creaPulse 2.4s 1.2s ease-in-out infinite; }
.crea-launch span { position: relative; z-index: 1; }
.crea-launch::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
    transform: skewX(-20deg) translateX(0); transition: transform .6s var(--ease); }
.crea-launch:hover { transform: translateY(-2px) scale(1.01); box-shadow: 0 14px 40px rgba(255,32,43,.6), 0 0 0 1px rgba(255,255,255,.12) inset; }
.crea-launch:hover::after { transform: skewX(-20deg) translateX(420%); }
.crea-launch:active { transform: scale(.97); }
.crea-launch.go { animation: creaGo .42s ease-out both; }
@keyframes creaPulse { 50% { box-shadow: 0 10px 40px rgba(255,32,43,.7), 0 0 0 1px rgba(255,255,255,.1) inset; } }
@keyframes creaGo { 40% { transform: scale(1.06); } 100% { transform: scale(.98); opacity: .85; } }
.crea-hint { margin: 10px 0 0; color: #6f6f76; font-size: 12px; }

/* Flash de lancement */
#creafx { position: fixed; inset: 0; z-index: 480; pointer-events: none; opacity: 0; }
#creafx.flash { background: radial-gradient(circle at 50% 60%, #fff, rgba(255,140,120,.9) 25%, rgba(255,32,43,.55) 50%, rgba(0,0,0,.9) 85%); animation: creaFlashIn .42s ease-out both; }
#creafx.flash.out { animation: creaFlashOut .6s ease-out both; }
@keyframes creaFlashIn { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
@keyframes creaFlashOut { from { opacity: 1; } to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .crea-bg::before, .crea-bg::after, .crea-bg i, .crea-launch { animation: none; }
    .crea-hero, .crea-sec, .crea-side, .crea-preview-slot, .crea-launch-wrap { animation-duration: .01s !important; animation-delay: 0s !important; }
}
/* Création : la grille des 8 modèles occupe toute la largeur (l'ancien éditeur forçait 2 colonnes) */
.crea .avb.avb-models { display: block; }
.crea .model-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 420px) { .crea .model-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .crea-card-img { aspect-ratio: 300 / 260; } .crea-card-img img { object-position: center 30%; } }
/* Fiche : titre aligné à gauche, sans les marges globales des titres ; image cadrée depuis le haut (logo entier) */
.crea-card h3 { text-align: left; padding: 0; min-height: 0; margin: 4px 0 8px; display: block; }
@media (min-width: 980px) { .crea-card-img img { object-position: center top !important; } }
.crea-card-img { aspect-ratio: 300 / 280; }
@media (min-width: 980px) { .crea-card-img { aspect-ratio: 300 / 260; } }


/* ===== Événements de carrière ===== */
.cev { animation: eventAppear .25s ease; }
@keyframes eventAppear { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.cev-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.cev-kicker { font-size: 11px; font-weight: 900; letter-spacing: 2px; color: var(--red); }
.cev-rarity { font-size: 10px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; color: var(--rar); border: 1px solid var(--rar); background: color-mix(in srgb, var(--rar) 12%, transparent); }
.cev h2 { margin: 4px 0 6px; line-height: 1.2; }
.cev-big { margin: 4px 0 0; font-family: Oswald, sans-serif; font-size: 28px; color: var(--yellow); text-shadow: 0 0 18px rgba(255,200,87,.6); }
.cev-desc { color: #a3a3ad; font-size: 13px; margin: 0 0 12px; }
.cev-label { margin: 0 0 6px; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #8a8a92; }
.cev-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.cev-list li { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; font-size: 14px; font-weight: 700; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); }
.cev-list li.good { border-color: rgba(66,230,149,.25); }
.cev-list li.bad { border-color: rgba(255,32,43,.3); }
.cev-note { color: #8a8a92; font-size: 12px; margin: 0 0 12px; }
.cev-btn { width: 100%; letter-spacing: 1px; }
.cev-choices { display: grid; gap: 8px; margin-top: 12px; }
.cev-500 { position: relative; }
.cev-500 h2 { color: #fff; }
.cev-history .cev-h { display: flex; align-items: center; gap: 8px; margin: 0; padding: 7px 0; border-top: 1px solid rgba(255,255,255,.06); font-size: 13px; }
.cev-history .cev-h small { margin-left: auto; color: #6f6f76; white-space: nowrap; font-size: 11px; }
.cev-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ===== Économie : contrat ===== */
.eco-contract .card-title small { color: #8a8a92; font-weight: 700; margin-left: 6px; }
.eco-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
@media (min-width: 700px) { .eco-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.eco-grid div { padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); min-width: 0; }
.eco-grid small { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: #8a8a92; }
.eco-grid b { display: block; font-size: 15px; margin-top: 2px; overflow-wrap: anywhere; }
.eco-bar { height: 6px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: 10px; }
.eco-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--red-dark), var(--green)); }
.eco-line { color: #a3a3ad; font-size: 12px; line-height: 1.5; margin: 8px 0 0; }

/* =========================
   V11 — destin, tendances, label, relations, freestyles, intrigues
========================= */

/* Prédiction de l'algorithme */
.destiny-card { border-color: rgba(178,140,255,.35); background: linear-gradient(135deg, rgba(178,140,255,.10), rgba(17,17,20,.9) 60%); }
.destiny-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11px; font-weight: 900; letter-spacing: 1.2px; color: #b28cff; }
.destiny-head small { color: #8a8a92; font-weight: 700; letter-spacing: 0; }
.destiny-card strong { display: block; font-family: Oswald, sans-serif; font-size: 22px; text-transform: uppercase; margin-top: 6px; }
.destiny-card > p { color: #a3a3ad; font-size: 13px; margin: 4px 0 10px; }
.destiny-range { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; font-size: 12px; color: #cfcfd4; margin-bottom: 6px; }
.destiny-note { display: block; color: #74747e; font-size: 11px; line-height: 1.45; margin-top: 8px; }

/* Intrigues en cours */
.arc-status { border-color: rgba(255,91,99,.35); }
.arc-status p { margin: 4px 0; font-size: 13px; color: #e8e8ec; line-height: 1.45; }
.arc-ev .cev-choices { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }

/* Tendances (studio) */
.trend-banner { display: flex; gap: 12px; align-items: flex-start; border-color: rgba(77,231,255,.25); }
.trend-ico { font-size: 26px; line-height: 1; }
.trend-banner b { font-size: 14px; }
.trend-banner p { margin: 6px 0; display: flex; flex-wrap: wrap; gap: 6px; }
.trend-banner p span { font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); }
.trend-up { color: var(--green); background: rgba(66,230,149,.08); }
.trend-down { color: #ff8a5b; background: rgba(255,138,91,.08); }
.trend-theme { color: var(--yellow); background: rgba(255,200,87,.08); }
.trend-banner small { color: #74747e; font-size: 11px; }

/* « Payé par le label » */
.label-pay { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(66,230,149,.06); border: 1px solid rgba(66,230,149,.25); font-size: 13px; cursor: pointer; text-align: left; }
.label-pay input { width: 20px; height: 20px; min-height: 0; flex-shrink: 0; accent-color: var(--green); margin: 0; }
.label-pay small { display: block; color: #8a8a92; font-size: 11px; margin-top: 2px; }
.label-pay.is-off { opacity: .55; }
.recap-label b { color: var(--green); }

/* Page Label */
.label-contract-head { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.label-contract-head h2 { margin: 2px 0; font-family: Oswald, sans-serif; text-transform: uppercase; }
.label-contract-head small { font-size: 10px; font-weight: 900; letter-spacing: 1.2px; color: var(--red); }
.label-contract-head p { margin: 0; color: #8a8a92; font-size: 12px; }
.label-logo.small { width: 48px; height: 48px; font-size: 16px; margin: 0; flex-shrink: 0; }
.label-sat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0 8px; }
@media (min-width: 700px) { .label-sat { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.label-sat div { padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.label-sat small, .label-terms small { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: #8a8a92; }
.label-sat b, .label-terms b { display: block; font-size: 14px; margin-top: 2px; overflow-wrap: anywhere; }
.label-terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; text-align: left; margin: 10px 0; }
@media (min-width: 700px) { .label-terms { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.label-terms div { padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); min-width: 0; }
.cmp-up { color: var(--green); }
.cmp-down { color: #ff8a5b; }
.label-warn { color: var(--yellow); font-size: 12px; line-height: 1.45; margin: 8px 0; text-align: left; }
.label-renewal { margin-top: 14px; padding: 12px; border-radius: 14px; border: 1px solid rgba(255,200,87,.35); background: rgba(255,200,87,.05); }
.label-offers { display: grid; gap: 12px; }
@media (min-width: 1000px) { .label-offers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.label-offer-card header { display: flex; gap: 10px; align-items: center; }
.label-offer-card h3 { margin: 0; font-size: 16px; }
.label-offer-card header small { color: #8a8a92; font-size: 11px; }
.label-offer-card.is-buzz { border-color: rgba(255,138,91,.45); }
.label-hist { margin: 6px 0; font-size: 13px; color: #cfcfd4; }
.label-news.bad .label-kicker { color: #ff8a5b; }
.label-news.good .label-kicker { color: var(--green); }
.eco-link { display: block; width: 100%; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.eco-link:hover { border-color: rgba(255,32,43,.4); }
.quit-list { text-align: left; color: #cfcfd4; font-size: 13px; line-height: 1.7; padding-left: 4px; list-style: none; }

/* Contacts */
.contact-feud { font-size: 11px; color: #ff8a5b; font-weight: 800; margin: 4px 0; }
.contact-hint { font-size: 11px; color: #8a8a92; margin: 6px 0 0; line-height: 1.4; }
.product-card.is-feud { border-color: rgba(255,91,99,.4); }
.product-card .free-feat-btn { border-color: rgba(66,230,149,.35); }
.known-steps { list-style: none; padding: 0; margin: 8px 0; font-size: 12px; line-height: 1.8; color: #8a8a92; text-align: left; }
.known-steps li.ok { color: var(--green); }
.met-card .product-image { filter: saturate(.75); }
.unknown-card { display: flex; gap: 14px; align-items: center; margin-top: 22px; }
.unknown-card .unknown-ico { font-size: 34px; width: 60px; height: 60px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.04); border: 1px dashed rgba(255,255,255,.18); flex-shrink: 0; }
.unknown-card p { margin: 4px 0 0; color: #a3a3ad; font-size: 13px; line-height: 1.5; }
.ls-dispute .ls-kicker { color: #ff8a5b; }

/* Freestyles */
.rs-fs-btn { margin-top: 8px; }
.rs-type-fs { border-color: rgba(255,200,87,.35) !important; }
.rs-warn { color: var(--yellow); font-size: 12px; }
.fs-card header { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.fs-card header small { display: block; color: #8a8a92; font-size: 11px; }
.fs-ico { font-size: 24px; }
.fs-card.is-viral { border-color: rgba(255,200,87,.5); box-shadow: 0 0 24px rgba(255,200,87,.08); }
.fs-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
@media (min-width: 700px) { .fs-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.fs-stats div { padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.fs-stats small { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; color: #8a8a92; }
.fs-stats b { font-size: 14px; }
.fs-note { color: var(--green); font-size: 12px; margin: 0; }

/* Discographie */
.album-units-note { color: #8a8a92; font-size: 12px; line-height: 1.5; margin: -4px 0 12px; }

/* V11.1 — auditeurs mensuels dans la barre du haut */
.listeners-stat b i { font-style: normal; font-size: .8em; margin-left: 3px; }
.listeners-stat b i.up { color: var(--green); }
.listeners-stat b i.down { color: #ff8a5b; }
@media (max-width: 520px) { .player-stats small { letter-spacing: 0; } .listeners-stat small { font-size: 0; } .listeners-stat small::after { content: "AUD./MOIS"; font-size: 8px; } }

/* V11.2 — Estimation du morceau ↓ Création d'album (même colonne, empilés) */
.studio-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.studio-side .studio-album { margin-top: 0; flex-direction: column; align-items: stretch; border-color: rgba(255,32,43,.35); }
.studio-side .studio-album .primary-btn { width: 100%; }
.studio-side .studio-album .card-title { margin-bottom: 2px; }
.recap-title { margin: 0; }
.album-need { color: #ff8a5b; }
@media (min-width: 900px) {
    .studio-side { position: sticky; top: 90px; max-height: calc(100vh - 100px); overflow-y: auto; }
    .studio-side .studio-recap { position: static; }
}
.ev-portrait { display: flex; justify-content: center; margin: 6px 0 10px; }
.ev-portrait svg { border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,32,43,.7), 0 0 22px rgba(255,32,43,.35); }
.ev-initials { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #3a0a0e, #0b0b0d); border: 2px solid rgba(255,32,43,.7); font-family: Oswald, sans-serif; font-size: 26px; font-weight: 700; color: #fff; }

/* =========================
   V11.3 — Écran titre
========================= */
.title-screen { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; overflow: hidden; background: radial-gradient(120% 90% at 50% 110%, #2a0306 0%, #0b0204 45%, #030303 100%); padding: env(safe-area-inset-top, 0px) 16px env(safe-area-inset-bottom, 0px); transition: opacity .55s ease, transform .55s ease; }
.title-screen.leaving { opacity: 0; transform: scale(1.04); }
.ts-glow { position: absolute; left: 50%; top: 46%; width: min(120vw, 900px); aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(255,32,43,.32) 0%, rgba(255,32,43,.08) 38%, transparent 66%); animation: tsPulse 3.6s ease-in-out infinite; }
.ts-beams span { position: absolute; top: -20%; width: 34vw; max-width: 380px; height: 140%; background: linear-gradient(180deg, rgba(255,60,70,.22), rgba(255,32,43,0) 75%); filter: blur(18px); transform-origin: 50% 0; mix-blend-mode: screen; }
.ts-beams span:nth-child(1) { left: 6%; animation: tsSweep 9s ease-in-out infinite; }
.ts-beams span:nth-child(2) { left: 38%; animation: tsSweep 11s ease-in-out -3s infinite reverse; opacity: .7; }
.ts-beams span:nth-child(3) { right: 6%; animation: tsSweep 8s ease-in-out -5s infinite; }
.ts-sparks b { position: absolute; bottom: -10px; left: var(--x); width: var(--z); height: var(--z); border-radius: 50%; background: #ff4b55; box-shadow: 0 0 8px #ff202b; opacity: 0; animation: tsRise var(--s) linear var(--w) infinite; }
.ts-eq { position: absolute; left: 0; right: 0; bottom: 0; height: 34vh; display: flex; align-items: flex-end; gap: 3px; padding: 0 6px; opacity: .55; -webkit-mask-image: linear-gradient(to top, #000 30%, transparent); mask-image: linear-gradient(to top, #000 30%, transparent); }
.ts-eq i { flex: 1; height: var(--h); background: linear-gradient(to top, #ff202b, #7a0910); border-radius: 3px 3px 0 0; transform-origin: bottom; animation: tsEq var(--d) ease-in-out calc(var(--i) * -0.07s) infinite alternate; }
.ts-center { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.ts-logo { margin: 0; font-family: Inter, -apple-system, 'Segoe UI', Arial, sans-serif; font-weight: 900; font-style: italic; font-size: clamp(56px, 15vw, 150px); letter-spacing: -0.04em; line-height: .9; animation: tsIn .9s cubic-bezier(.2,.8,.2,1) both; }
.ts-rap { color: #fff; text-shadow: 0 0 30px rgba(255,255,255,.15); }
.ts-zody { color: #ff202b; text-shadow: 0 0 24px rgba(255,32,43,.65), 0 0 60px rgba(255,32,43,.35); animation: tsFlicker 5s linear 1.2s infinite; }
.ts-slogan { margin: 0; font-family: Oswald, Impact, sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: .32em; font-size: clamp(12px, 2.6vw, 18px); color: #d8d8de; animation: tsIn .9s cubic-bezier(.2,.8,.2,1) .25s both; }
.ts-start { margin-top: 18px; min-width: 220px; padding: 16px 38px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #ff202b, #c9000b); color: #fff; font-family: Oswald, Impact, sans-serif; font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; cursor: pointer; box-shadow: 0 10px 34px rgba(255,32,43,.45), inset 0 1px 0 rgba(255,255,255,.25); animation: tsIn .9s cubic-bezier(.2,.8,.2,1) .5s both, tsBtn 2.4s ease-in-out 1.4s infinite; transition: transform .15s ease; }
.ts-start:hover { transform: translateY(-2px) scale(1.03); }
.ts-start:active { transform: scale(.97); }
.ts-start:focus-visible { outline: 2px solid #ffc857; outline-offset: 4px; }
@keyframes tsPulse { 0%, 100% { opacity: .75; transform: translate(-50%, -50%) scale(.95); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } }
@keyframes tsSweep { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } }
@keyframes tsRise { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: .9; } 100% { transform: translateY(-105vh); opacity: 0; } }
@keyframes tsEq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
@keyframes tsIn { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes tsFlicker { 0%, 92%, 100% { opacity: 1; } 93% { opacity: .55; } 94% { opacity: 1; } 96% { opacity: .7; } }
@keyframes tsBtn { 0%, 100% { box-shadow: 0 10px 34px rgba(255,32,43,.45), inset 0 1px 0 rgba(255,255,255,.25); } 50% { box-shadow: 0 10px 50px rgba(255,32,43,.75), inset 0 1px 0 rgba(255,255,255,.25); } }
@media (prefers-reduced-motion: reduce) { .title-screen *, .title-screen *::before { animation: none !important; } .ts-sparks { display: none; } }
.ts-beams, .ts-sparks { position: absolute; inset: 0; pointer-events: none; }
.ts-eq { height: 24vh; }
.ts-center { margin-bottom: 8vh; z-index: 1; }

/* =========================
   V11.4 — Studio gratuit, préparation de concert, messages, opportunités
========================= */
.free-tag { color: var(--green); }
.opt-card.is-locked { opacity: .5; cursor: not-allowed; }
.opt-card.is-locked strong { color: #8a8a92; font-size: 11px; }

/* Préparation du concert */
.prep-layout { display: grid; grid-template-columns: 1fr; gap: 14px; }
.prep-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.prep-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
@media (min-width: 980px) {
    .prep-layout { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
    .prep-side { position: sticky; top: 90px; }
}
.prep-sec .card-title small, .card-title small { color: #8a8a92; font-weight: 700; margin-left: 6px; }
.prep-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .prep-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.prep-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: #a3a3ad; font-weight: 700; min-width: 0; }
.prep-field select, .prep-field input[type=range] { width: 100%; }
.prep-field input[type=range] { accent-color: var(--red); min-height: 32px; }
.prep-field b { color: #fff; }
.prep-note { color: #8a8a92; font-size: 12px; line-height: 1.5; margin: 10px 0 0; }
.prep-sat { display: block; font-family: Oswald, sans-serif; font-size: 40px; color: var(--yellow); margin-bottom: 6px; }
.prep-go { width: 100%; font-size: 16px; padding: 16px; }
.sl-details { list-style: none; padding: 0; margin: 10px 0 0; font-size: 12px; color: #a3a3ad; display: flex; flex-direction: column; gap: 4px; }
.sl-details li { display: flex; justify-content: space-between; gap: 10px; }
.sl-details b { color: #fff; font-variant-numeric: tabular-nums; }
.setlist { display: flex; flex-direction: column; gap: 6px; }
.sl-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.sl-num { font-family: Oswald, sans-serif; color: var(--red); font-size: 16px; min-width: 24px; font-variant-numeric: tabular-nums; }
.sl-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sl-title b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-title small { color: #8a8a92; font-size: 11px; }
.sl-btns { display: flex; gap: 4px; flex-shrink: 0; }
.icon-btn { width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: #18181c; color: #fff; font-size: 12px; cursor: pointer; }
.icon-btn:disabled { opacity: .3; cursor: default; }
.icon-btn:hover:not(:disabled) { border-color: rgba(255,32,43,.6); }
.sl-fixed { display: flex; align-items: center; gap: 8px; padding: 6px 10px; margin: 0; border-radius: 10px; border: 1px dashed rgba(255,32,43,.35); font-family: Oswald, sans-serif; letter-spacing: 1px; font-size: 13px; color: #cfcfd4; }
.sl-fixed small { font-family: Inter, sans-serif; letter-spacing: 0; color: #8a8a92; }
.sl-fixed input { width: 18px; height: 18px; min-height: 0; accent-color: var(--red); }
.sl-add summary { cursor: pointer; font-size: 13px; font-weight: 800; margin-top: 12px; color: #cfcfd4; }
.sl-pool { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sl-pool small { color: #8a8a92; margin-left: 4px; }
.guest-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.guest-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(66,230,149,.3); background: rgba(66,230,149,.05); }
.guest-info { flex: 1; min-width: 120px; display: flex; flex-direction: column; }
.guest-info small { color: #8a8a92; font-size: 11px; }
.guest-row select { flex: 1; min-width: 140px; }
.invite-list { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; margin-top: 10px; }
.invite-row { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; border: 1px solid #2e2e34; background: #18181c; color: #fff; text-align: left; font: inherit; cursor: pointer; }
.invite-row:disabled { opacity: .5; cursor: default; }
.invite-row:hover:not(:disabled) { border-color: rgba(255,32,43,.55); }
.invite-row svg { flex-shrink: 0; border-radius: 50%; }
.invite-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.invite-info small { color: #8a8a92; font-size: 11px; }

/* Conversations */
.chat-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.chat-head .ev-portrait { margin: 0; }
.chat-head h2 { margin: 0; font-size: 20px; }
.chat-head small { color: #8a8a92; }
.chat-thread { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; padding: 10px; border-radius: 12px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.06); }
.chat-msg { display: flex; flex-direction: column; margin: 0; max-width: 85%; }
.chat-msg span { padding: 8px 12px; border-radius: 14px; font-size: 13px; line-height: 1.4; }
.chat-msg small { font-size: 10px; color: #74747e; margin-top: 2px; }
.chat-msg.me { align-self: flex-end; align-items: flex-end; }
.chat-msg.me span { background: linear-gradient(135deg, #ff202b, #c9000b); color: #fff; border-bottom-right-radius: 4px; }
.chat-msg.them span { background: #222228; color: #eee; border-bottom-left-radius: 4px; }
.chat-input { width: 100%; min-height: 70px; margin-top: 10px; border-radius: 12px; }
.chat-templates { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chat-templates .secondary-btn, .chat-templates .primary-btn { width: auto; }
.msg-layout { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 900px) { .msg-layout { grid-template-columns: 300px minmax(0, 1fr); align-items: start; } }
.msg-list { display: flex; flex-direction: column; gap: 4px; max-height: 70vh; overflow-y: auto; }
.msg-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; border: 1px solid transparent; background: none; color: #fff; font: inherit; text-align: left; cursor: pointer; }
.msg-item.on, .msg-item:hover { border-color: rgba(255,32,43,.45); background: rgba(255,32,43,.06); }
.msg-item span { display: flex; flex-direction: column; min-width: 0; }
.msg-item small { color: #8a8a92; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-thread { min-width: 0; }

/* Bilan du concert */
.concert-report { text-align: center; }
.cr-kicker, .opp-kicker { margin: 0; font-size: 11px; font-weight: 900; letter-spacing: 2px; color: var(--red); }
.concert-report h2 { margin: 6px 0 2px; }
.concert-report h2 small { color: #8a8a92; font-size: 14px; }
.cr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0; text-align: left; }
.cr-grid div { padding: 10px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.cr-grid small { display: block; font-size: 11px; color: #8a8a92; font-weight: 700; }
.cr-grid b { font-size: 17px; font-variant-numeric: tabular-nums; }
.cr-best { font-size: 15px; margin: 8px 0; }
.cr-surprise { padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,200,87,.45); background: rgba(255,200,87,.06); color: #ffe7a3; font-size: 14px; }
.cr-setlist { text-align: left; margin-top: 10px; font-size: 13px; color: #cfcfd4; }
.cr-setlist summary { cursor: pointer; font-weight: 800; }
.concert-hist { width: 100%; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 10px; }
.concert-hist:hover { background: rgba(255,32,43,.06); }

/* Opportunités */
.opp-score-head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
@media (min-width: 760px) { .opp-score-head { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.opp-score-head div { padding: 10px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.opp-score-head small { display: block; font-size: 10px; font-weight: 900; letter-spacing: 1px; color: #8a8a92; }
.opp-score-head b { display: block; font-family: Oswald, sans-serif; font-size: 22px; }
.opp-score-head span { font-size: 11px; color: #a3a3ad; }
.opp-score details { margin-top: 10px; font-size: 13px; }
.opp-score summary { cursor: pointer; font-weight: 800; color: #cfcfd4; }
.opp-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 900px) { .opp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.opp-card { text-align: center; }
.opp-card.card { border-color: rgba(255,32,43,.3); }
.opp-icon { font-size: 34px; display: flex; justify-content: center; margin: 6px 0; }
.opp-icon .ev-portrait { margin: 0; }
.opp-card h2, .opp-card h3 { margin: 4px 0; font-family: Oswald, sans-serif; letter-spacing: 1px; }
.opp-text { color: #e8e8ec; font-size: 14px; margin: 6px 0; }
.opp-kind { color: #8a8a92; font-size: 11px; margin: 0 0 10px; }
.opp-gains { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.opp-gains span { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: #cfcfd4; }
.opp-gains b { color: #fff; }
@media (max-width: 520px) { .sl-title b { white-space: normal; } .sl-row { gap: 6px; padding: 8px; } .icon-btn { width: 30px; height: 30px; } }
.ts-version { color: rgba(255,255,255,.35); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; margin-top: 6px; }

/* V11.6 — Messages / Contacts réunis */
.hub-tabs { display: flex; gap: 8px; margin: 0 0 18px; flex-wrap: wrap; }
.hub-tab { background: #111; color: #ccc; border: 1px solid #2a2a2a; border-radius: 999px; padding: 9px 18px; font-weight: 700; cursor: pointer; }
.hub-tab span { margin-left: 6px; font-size: .8em; opacity: .7; }
.hub-tab.on { background: #e10600; border-color: #e10600; color: #fff; }
.hub-tab:hover:not(.on) { border-color: #e10600; color: #fff; }
body.nav-open .nav-label { white-space: normal; line-height: 1.15; text-align: left; }

/* V11.8 — tutoriel plus lumineux + icônes du menu en rouge */
.nav-btn span svg { color: var(--red-hot); }
.nav-btn.active span svg, .nav-btn:hover span svg { color: #fff; }
.nav-btn.locked { opacity: .6; filter: none; }
.nav-btn.locked span svg { color: rgba(255,36,51,.55); }

.tuto-spot { background: rgba(255,255,255,.07); border-radius: 14px; animation: tutoPulseBright 1.4s ease-in-out infinite; }
@keyframes tutoPulseBright {
    0%,100% { box-shadow: 0 0 0 9999px rgba(3,4,10,.34), 0 0 0 3px #fff, 0 0 0 6px var(--red-hot), 0 0 26px 6px rgba(255,36,51,.65); }
    50%     { box-shadow: 0 0 0 9999px rgba(3,4,10,.34), 0 0 0 3px #fff, 0 0 0 8px var(--red-hot), 0 0 48px 16px rgba(255,60,70,.9); }
}
.tuto-target { filter: brightness(1.35); }
#tuto.dim::before { background: rgba(3,4,10,.3); }
.tuto-bubble { border: 1px solid rgba(255,36,51,.7) !important; box-shadow: 0 18px 50px rgba(0,0,0,.6), 0 0 30px rgba(255,36,51,.35) !important; }
.tuto-bubble .tuto-title { color: #fff; }

/* V11.10 — bulle du tutoriel plus visible + fenêtre illustrée */
.tuto-bubble { padding: 18px 20px 16px; border: 2px solid var(--red-hot) !important; border-radius: 18px;
    background: linear-gradient(160deg, #1a0709 0%, #0c0c11 55%) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.75), 0 0 0 6px rgba(255,36,51,.12), 0 0 46px rgba(255,36,51,.45) !important; }
.tuto-bubble .tuto-text { font-size: 16px; line-height: 1.5; color: #fff; font-weight: 500; }
.tuto-bubble .tuto-count { font-size: 11px; letter-spacing: 1.6px; }
.tuto-bubble .tuto-skip { color: #b8b8c0; }
.tuto-bubble .tuto-actions button { min-height: 46px; font-size: 15px; }
.tuto-bubble.nudge { animation: tutoNudge .45s ease both; }
@keyframes tutoNudge { 20% { translate: -8px 0; } 40% { translate: 8px 0; } 60% { translate: -5px 0; } 80% { translate: 4px 0; } }
@media (min-width: 900px) {
    .tuto-bubble { left: 0; right: 0; margin: 0 auto; width: 620px; max-width: calc(100% - 48px); bottom: 28px; }
    .tuto-bubble.top { top: 90px; bottom: auto; }
    .tuto-bubble .tuto-text { font-size: 17px; }
}
#tuto.popup::before { content: ""; position: fixed; inset: 0; z-index: 305; background: radial-gradient(circle at 50% 40%, rgba(255,36,51,.16), transparent 60%), rgba(3,4,10,.82); animation: tutoFade .3s both; }
#tuto.popup .tuto-bubble { top: 50%; bottom: auto; transform: translateY(-50%); width: 560px; max-width: calc(100% - 24px); max-height: calc(100vh - 24px); overflow-y: auto; animation: none; }
.tuto-pop { animation: tutoIn .4s var(--ease) both; }
.tuto-art { display: block; width: 100%; height: auto; border-radius: 12px; margin: 4px 0 14px; border: 1px solid rgba(255,36,51,.35); }
.tuto-pop .tuto-title { font-size: 22px; margin-bottom: 6px; }
.tuto-dots { display: flex; justify-content: center; gap: 6px; margin: 12px 0 2px; }
.tuto-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.2); }
.tuto-dots i.on { background: var(--red-hot); width: 22px; border-radius: 4px; }
.tca-beam { transform-origin: 50% 0; animation: tcaSweep 3.2s ease-in-out infinite alternate; mix-blend-mode: screen; }
.tca-beam.b2 { animation-delay: -1.6s; } .tca-beam.b3 { animation-duration: 2.4s; opacity: .7; }
@keyframes tcaSweep { from { transform: rotate(-7deg); opacity: .55; } to { transform: rotate(7deg); opacity: 1; } }
.tca-fan { animation: tcaJump .9s ease-in-out infinite; }
@keyframes tcaJump { 50% { transform: translateY(-4px); } }
.tca-rec { animation: tcaBlink 1s steps(2) infinite; }
@keyframes tcaBlink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tca-beam, .tca-fan, .tca-rec, .tuto-bubble.nudge { animation: none; } }
@media (min-width: 1100px) {
    .tuto-bubble.aside, .tuto-bubble.aside.top { left: auto; right: 20px; top: auto; bottom: 20px; width: 330px; margin: 0; }
    .tuto-bubble.aside .tuto-text { font-size: 15px; }
}

/* V11.11 — mois et année dans la barre du haut */
.mode-badge.date-badge { border-color: rgba(255,200,87,.6); color: var(--yellow); margin-left: -6px; }
@media (min-width: 600px) { .player-stats .mode-badge { display: inline-block; } .player-stats { gap: 14px; } }

/* V11.13 — Mentions légales */
.ts-legal { margin-top: 18px; background: none; border: none; color: rgba(255,255,255,.55); font: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 8px; }
.ts-legal:hover { color: #fff; }
#legal { display: none; position: fixed; inset: 0; z-index: 500; background: rgba(3,3,6,.82); padding: 16px; align-items: center; justify-content: center; }
#legal.on { display: flex; animation: tutoFade .25s both; }
.legal-panel { width: 100%; max-width: 640px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: #0d0d11; border: 1px solid rgba(255,36,51,.5); border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.7), 0 0 40px rgba(255,36,51,.2); color: #fff; overflow: hidden; }
.legal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 8px; font-size: 17px; }
.legal-close { background: #1a1a20; border: 1px solid #2a2a2a; color: #fff; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 15px; }
.legal-tabs { display: flex; gap: 6px; padding: 4px 18px 12px; flex-wrap: wrap; border-bottom: 1px solid #222; }
.legal-tabs button { background: #15151a; color: #bbb; border: 1px solid #2a2a2a; border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.legal-tabs button.on { background: #e10600; border-color: #e10600; color: #fff; }
.legal-body { overflow-y: auto; padding: 4px 18px 20px; font-size: 14px; line-height: 1.6; color: #d6d6dc; }
.legal-body h3 { color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; margin: 18px 0 4px; }
.legal-body p { margin: 0; }

/* =========================================================
   V11.15 — BILAN À PARTAGER
========================================================= */
.bilan { max-width: 980px; margin: 0 auto; }
.bilan-kicker { text-align: center; color: #ff6b74; font-weight: 900; letter-spacing: .2em; font-size: 12px; margin: 6px 0 14px; }

.share-card { position: relative; overflow: hidden; border-radius: 26px; padding: 26px 26px 20px; margin: 0 auto 16px; max-width: 640px;
    background: linear-gradient(170deg, #1d0306 0%, #0a0a0c 55%, #000 100%); border: 2px solid rgba(255,36,51,.65);
    box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 60px rgba(255,36,51,.25); }
.sc-glow { position: absolute; inset: -40% -30% auto auto; width: 120%; height: 120%; background: radial-gradient(circle at 70% 20%, rgba(255,36,51,.45), transparent 50%); animation: scGlow 6s ease-in-out infinite alternate; pointer-events: none; }
@keyframes scGlow { to { transform: translate(-6%, 6%) scale(1.1); opacity: .7; } }
.share-card > *:not(.sc-glow) { position: relative; }
.sc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.sc-logo { font-family: Oswald, sans-serif; font-size: 22px; font-weight: 700; letter-spacing: .02em; }
.sc-logo b { color: #ff2433; }
.sc-years { font-size: 11px; font-weight: 900; letter-spacing: .14em; color: #bdbdc4; border: 1px solid rgba(255,255,255,.18); padding: 5px 10px; border-radius: 999px; }
.sc-id { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; }
.sc-avatar svg { display: block; width: 92px; height: 92px; border-radius: 50%; box-shadow: 0 0 0 3px #ff2433, 0 0 30px rgba(255,36,51,.6); }
.sc-name { min-width: 0; }
.sc-name small { color: #ff6b74; font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.sc-name h1 { margin: 2px 0 6px; font-family: Oswald, sans-serif; font-size: clamp(30px, 7vw, 52px); line-height: 1; text-transform: uppercase; overflow-wrap: anywhere;
    background: linear-gradient(180deg, #fff 30%, #ffb3b8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sc-title { display: inline-block; font-family: Oswald, sans-serif; font-size: 16px; font-weight: 700; color: #1a0f00; background: linear-gradient(90deg, #ffc857, #ffe7a3); padding: 4px 12px; border-radius: 999px; letter-spacing: .04em; box-shadow: 0 0 18px rgba(255,200,87,.45); }
.sc-score { position: relative; width: 96px; height: 96px; display: grid; place-items: center; }
.sc-score svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.sc-ring-bg { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 10; }
.sc-ring { fill: none; stroke: #ff2433; stroke-width: 10; stroke-linecap: round; stroke-dasharray: var(--p) 100; filter: drop-shadow(0 0 6px rgba(255,36,51,.8)); animation: scRing 1.6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes scRing { from { stroke-dasharray: 0 100; } }
.sc-score b { font-family: Oswald, sans-serif; font-size: 34px; line-height: 1; margin-top: 4px; }
.sc-score small { position: absolute; bottom: 22px; font-size: 10px; color: #9a9aa2; font-weight: 800; }
.sc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 20px 0 16px; }
.sc-stats div { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 12px 6px; text-align: center; min-width: 0; }
.sc-stats span { display: block; font-size: 18px; }
.sc-stats b { display: block; font-family: Oswald, sans-serif; font-size: clamp(20px, 4.4vw, 30px); line-height: 1.1; overflow-wrap: anywhere; }
.sc-stats small { display: block; color: #9a9aa2; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.sc-discs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sc-disc { text-align: center; }
.sc-disc .art { width: 74px; height: 74px; display: block; margin: 0 auto 2px; filter: drop-shadow(0 6px 14px rgba(0,0,0,.6)); animation: scFloat 3s ease-in-out infinite; }
.sc-disc:nth-child(2) .art { animation-delay: -1s; } .sc-disc:nth-child(3) .art { animation-delay: -2s; }
@keyframes scFloat { 50% { transform: translateY(-5px) rotate(-3deg); } }
.sc-disc.off .art { opacity: .22; filter: grayscale(1); animation: none; }
@keyframes scSpin { to { transform: rotate(360deg); } }
.sc-disc b { display: block; font-family: Oswald, sans-serif; font-size: 24px; line-height: 1; }
.sc-disc small { color: #9a9aa2; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.sc-top { text-align: center; margin: 14px 0 6px; font-size: 14px; color: #fff; }
.sc-top b { color: #ffc857; }
.sc-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 10px; margin-top: 10px; font-size: 11px; color: #9a9aa2; font-weight: 700; }
.sc-foot span:last-child { color: #ff6b74; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }

.share-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; max-width: 640px; margin: 0 auto 26px; }
.share-actions button { width: auto; flex: 1 1 180px; min-height: 48px; }
.share-main { flex: 1.4 1 220px !important; white-space: nowrap; font-size: 16px; animation: sharePulse 2.2s ease-in-out infinite; }
@keyframes sharePulse { 50% { box-shadow: 0 0 0 6px rgba(255,36,51,.18), 0 0 30px rgba(255,36,51,.6); } }

.cert-totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 8px; }
.cert-total { text-align: center; padding: 16px 8px; border-radius: 18px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); }
.cert-total .art { width: 96px; height: 96px; display: block; margin: 0 auto 6px; filter: drop-shadow(0 8px 18px rgba(0,0,0,.55)); }
.cert-total b { display: block; font-family: Oswald, sans-serif; font-size: 40px; line-height: 1; }
.cert-total small { color: #9a9aa2; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.cert-total-diamant { border-color: rgba(127,227,255,.45); box-shadow: inset 0 0 40px rgba(127,227,255,.08); }
.cert-total-platine { border-color: rgba(230,234,240,.4); box-shadow: inset 0 0 40px rgba(230,234,240,.06); }
.cert-total-or { border-color: rgba(255,200,87,.45); box-shadow: inset 0 0 40px rgba(255,200,87,.08); }
.cert-total.off { opacity: .45; }
.cert-total.off .art { filter: grayscale(1); }
.bilan-certs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 18px; }
.cert-item { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 16px; background: #0f0f13; border: 1px solid rgba(255,255,255,.08); animation: certIn .5s var(--d, 0s) both; }
@keyframes certIn { from { opacity: 0; transform: translateY(12px) scale(.97); } }
.cert-item-diamant { border-color: rgba(127,227,255,.4); }
.cert-item-platine { border-color: rgba(230,234,240,.3); }
.cert-item-or { border-color: rgba(255,200,87,.35); }
.cert-item-disc .art { width: 64px; height: 64px; display: block; }
.cert-item:hover .cert-item-disc .art { transform: scale(1.08) rotate(-4deg); }
.cert-item-disc .art { transition: transform .25s; }
.cert-item-info { min-width: 0; }
.cert-item-info small { color: #ff6b74; font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.cert-item-info strong { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cert-item-info span { display: block; color: #9a9aa2; font-size: 11px; }
.cert-item-info em { display: block; font-style: normal; color: #ffc857; font-size: 12px; font-weight: 700; }
.cert-item-diamant .cert-item-info em { color: #7fe3ff; }
.cert-item-platine .cert-item-info em { color: #e6eaf0; }
.cert-wall-empty { display: flex; gap: 14px; align-items: center; }
.cwe-disc .art { width: 70px; height: 70px; opacity: .3; filter: grayscale(1); }
.title-calc summary { cursor: pointer; font-weight: 800; }
.title-calc[open] summary { margin-bottom: 10px; }
@media (max-width: 560px) {
    .share-card { padding: 18px 14px 14px; border-radius: 20px; }
    .sc-id { grid-template-columns: auto 1fr; }
    .sc-score { grid-column: 1 / -1; justify-self: center; }
    .sc-avatar svg { width: 72px; height: 72px; }
    .sc-stats { grid-template-columns: repeat(2, 1fr); }
    .sc-disc .art { width: 60px; height: 60px; }
    .cert-total .art { width: 70px; height: 70px; }
    .cert-total b { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) { .sc-glow, .sc-ring, .sc-disc .art, .share-main, .cert-item { animation: none; } }