/* ═══════════════════════════════════════════════════════════════════
   LA SPHÈRE V3 — finition commune des pages de l'écosystème
   (blog, communauté, BeatSphere, fidélité, parrainage, jeux, guides,
   label, équipe, outils…). Cible les composants récurrents du site
   d'origine ; la logique et le HTML restent inchangés.
   ═══════════════════════════════════════════════════════════════════ */
html[data-v3-uplift], html[data-v3-uplift] body { overflow-x: clip; }
html[data-v3-uplift] body { font-weight: 400; -webkit-font-smoothing: antialiased; }
html[data-v3-uplift] body > *:not([class*='v3-']):not(nav):not(header):not(script) { position: relative; }

/* ── Barres de navigation d'origine → verre V3 ── */
html[data-v3-uplift] body > nav, html[data-v3-uplift] body > header.nav, html[data-v3-uplift] body > .nav, html[data-v3-uplift] body > header:first-of-type:not(.hero) {
  background: color-mix(in oklab, var(--v3-bg) 78%, transparent) !important;
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  border-bottom: 1px solid var(--v3-line) !important; box-shadow: none !important;
}
html[data-v3-uplift] .nav-logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--v3-f-display) !important; font-size: 22px !important; letter-spacing: .08em !important; color: var(--v3-ink) !important; text-shadow: none !important; }
html[data-v3-uplift] .nav-logo:not(:has(img))::before { content: ''; width: 32px; height: 32px; background: url('/assets/images/logo-records.webp') center/contain no-repeat; flex-shrink: 0; }
html[data-v3-uplift] .nav-back, html[data-v3-uplift] .nav-link-back {
  display: inline-flex !important; align-items: center; height: 38px; padding: 0 16px !important; border-radius: 999px !important;
  border: 1px solid var(--v3-line-2) !important; background: none !important; color: var(--v3-ink-2) !important;
  font: 500 13px/1 var(--v3-f-body) !important; letter-spacing: 0 !important; text-transform: none !important; transition: background .3s, color .3s, border-color .3s;
}
html[data-v3-uplift] .nav-back:hover { background: var(--v3-ink) !important; color: var(--v3-bg) !important; border-color: var(--v3-ink) !important; }

/* ── Titres : grotesque V3, lisible, sans halo ── */
html[data-v3-uplift] h1:not(.wordmark), html[data-v3-uplift] .hero-title {
  font-family: var(--v3-f-body) !important; font-weight: 650 !important; letter-spacing: -.045em !important; line-height: .98 !important;
  text-transform: none !important; text-shadow: none !important; -webkit-text-stroke: 0 !important;
}
html[data-v3-uplift] h1:not(.wordmark) { font-size: clamp(36px, 5.2vw, 72px) !important; }
html[data-v3-uplift] .hero-title { font-size: clamp(44px, 7vw, 96px) !important; }
html[data-v3-uplift] h1 span[style*='red'], html[data-v3-uplift] h1 .red, html[data-v3-uplift] h1 em { color: var(--v3-red-hot); font-style: normal; }
html[data-v3-uplift] h2 { text-shadow: none !important; }
html[data-v3-uplift] .label, html[data-v3-uplift] .hero-label, html[data-v3-uplift] .eyebrow, html[data-v3-uplift] .section-label {
  font-family: var(--v3-f-mono) !important; font-size: 11px !important; letter-spacing: .2em !important; text-transform: uppercase; color: var(--v3-red-hot) !important; text-shadow: none !important;
}
html[data-v3-uplift] .sub, html[data-v3-uplift] .hero-sub { font-size: clamp(15px, 1.2vw, 18px) !important; line-height: 1.55 !important; color: var(--v3-ink-2) !important; letter-spacing: 0 !important; }

/* ── Cartes ── */
html[data-v3-uplift] .login-box, html[data-v3-uplift] .composer, html[data-v3-uplift] .post-card, html[data-v3-uplift] .article-card,
html[data-v3-uplift] .order-card, html[data-v3-uplift] .fav-card, html[data-v3-uplift] .card, html[data-v3-uplift] .game-wrap,
html[data-v3-uplift] .bonus-box, html[data-v3-uplift] .acct-head, html[data-v3-uplift] .edit-box, html[data-v3-uplift] .profile-head,
html[data-v3-uplift] .conv-list, html[data-v3-uplift] .chat-panel, html[data-v3-uplift] .prog-card, html[data-v3-uplift] .step-card, html[data-v3-uplift] .guide-card, html[data-v3-uplift] .beat-card {
  border-radius: 22px !important; border: 1px solid var(--v3-line) !important; background: var(--v3-surface) !important; box-shadow: var(--v3-elev-1) !important;
}
html[data-v3-uplift][data-v3-theme='light'] :is(.login-box, .composer, .post-card, .article-card, .order-card, .fav-card, .card, .game-wrap, .bonus-box, .acct-head, .edit-box, .profile-head, .conv-list, .chat-panel) { border-color: rgba(255,255,255,.92) !important; }
html[data-v3-uplift] .login-box { padding: clamp(22px, 3vw, 32px) !important; }
html[data-v3-uplift] .article-card { overflow: hidden; transition: translate .5s var(--v3-ease), box-shadow .5s var(--v3-ease) !important; }
html[data-v3-uplift] .article-card:hover { translate: 0 -4px; box-shadow: var(--v3-elev-2) !important; }
html[data-v3-uplift] .article-title { font-family: var(--v3-f-body) !important; font-weight: 650 !important; letter-spacing: -.03em !important; text-transform: none !important; }

/* ── Onglets → contrôle segmenté ── */
html[data-v3-uplift] :is(.auth-tabs, .tabs, .login-tabs, .tabs-main) {
  display: flex !important; gap: 4px !important; padding: 4px !important; border: 0 !important; border-radius: 14px !important;
  background: color-mix(in oklab, var(--v3-ink) 6%, transparent) !important; margin-bottom: 18px !important;
}
html[data-v3-uplift] :is(.auth-tab-btn, .tab-btn, .login-tab, .tab-main) {
  flex: 1; height: 38px !important; padding: 0 12px !important; border: 0 !important; border-radius: 10px !important; background: none !important;
  color: var(--v3-ink-2) !important; font: 500 14px/1 var(--v3-f-body) !important; letter-spacing: 0 !important; text-transform: none !important;
  box-shadow: none !important; transform: none !important; cursor: pointer; transition: background .3s, color .3s;
}
html[data-v3-uplift] :is(.auth-tab-btn, .tab-btn, .login-tab, .tab-main).active { background: var(--v3-surface) !important; color: var(--v3-ink) !important; box-shadow: var(--v3-elev-1) !important; }
html[data-v3-uplift] :is(.auth-tab-btn, .tab-btn, .login-tab, .tab-main)::after { display: none !important; }

/* ── Champs ── */
html[data-v3-uplift] :is(.login-box, .composer, .field, .edit-box, .chat-form, .form, form) :is(input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']), textarea, select) {
  min-height: 48px; padding: 12px 14px !important; border-radius: 12px !important; border: 1px solid var(--v3-line-2) !important;
  background: var(--v3-surface-2) !important; color: var(--v3-ink) !important; font: 400 15px/1.3 var(--v3-f-body) !important; letter-spacing: 0 !important; text-transform: none !important;
  outline: none; transition: border-color .25s, box-shadow .25s;
}
html[data-v3-uplift] :is(input, textarea, select):focus { border-color: var(--v3-red-hot) !important; box-shadow: 0 0 0 4px var(--v3-red-soft) !important; }
html[data-v3-uplift] .field label, html[data-v3-uplift] .login-box label { font: 500 13px/1.2 var(--v3-f-body) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--v3-ink-2) !important; }

/* ── Boutons ── */
html[data-v3-uplift] :is(.submit, .btn-red, .btn-main, .btn-primary, .cta-btn, .btn-cta) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 24px !important;
  border: 0 !important; border-radius: 999px !important; color: #fff !important; cursor: pointer;
  background: linear-gradient(180deg, #ff3345, #d0101e) !important; font: 600 15px/1 var(--v3-f-body) !important; letter-spacing: -.01em !important; text-transform: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 26px -10px rgba(208,16,30,.7) !important; transform: none !important;
  transition: scale .3s var(--v3-ease), box-shadow .4s var(--v3-ease), opacity .3s !important;
}
html[data-v3-uplift] :is(.submit, .btn-red, .btn-main, .btn-primary, .cta-btn, .btn-cta):hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 18px 40px -12px rgba(255,42,61,.75) !important; filter: none !important; }
html[data-v3-uplift] :is(.submit, .btn-red, .btn-main, .btn-primary, .cta-btn, .btn-cta, .btn-ghost, .btn-secondary):active { scale: .97; }
html[data-v3-uplift] :is(.submit, .btn-red, .btn-main, .btn-primary):disabled { opacity: .5; }
html[data-v3-uplift] .login-box .submit { width: 100%; }
html[data-v3-uplift] :is(.btn-ghost, .btn-secondary, .logout-btn, .edit-toggle) {
  min-height: 44px; padding: 0 20px !important; border-radius: 999px !important; border: 1px solid var(--v3-line-2) !important; background: none !important;
  color: var(--v3-ink) !important; font: 600 14px/1 var(--v3-f-body) !important; letter-spacing: 0 !important; text-transform: none !important; box-shadow: none !important; transform: none !important; cursor: pointer;
}
html[data-v3-uplift] :is(.btn-ghost, .btn-secondary, .logout-btn, .edit-toggle):hover { background: var(--v3-ink) !important; color: var(--v3-bg) !important; border-color: var(--v3-ink) !important; }

/* ── Messages & états ── */
html[data-v3-uplift] .auth-msg, html[data-v3-uplift] .form-err { font-size: 13px !important; border-radius: 12px; }
html[data-v3-uplift] .hint { font-size: 14px !important; color: var(--v3-ink-2) !important; line-height: 1.5; }
html[data-v3-uplift] :is(.empty, .feed-empty, .chat-empty, .conv-empty) { color: var(--v3-ink-3) !important; font-size: 14px !important; text-align: center; padding: 36px 16px !important; }
html[data-v3-uplift] .bubble { border-radius: 18px !important; }
html[data-v3-uplift] .avatar, html[data-v3-uplift] .avatar-lg { border-radius: 50% !important; }

/* ── Pied de page ── */
html[data-v3-uplift] body > footer { border-top: 1px solid var(--v3-line) !important; color: var(--v3-ink-3) !important; background: none !important; }

/* ── Bandeau cookies (commun à plusieurs pages) ── */
html[data-v3-uplift] #cookieBanner, html[data-v3-uplift] .cookie-banner {
  left: 16px !important; right: 16px !important; bottom: 16px !important; width: auto !important; max-width: 760px; margin: 0 auto;
  border-radius: 20px !important; border: 1px solid var(--v3-line) !important; background: color-mix(in oklab, var(--v3-surface) 92%, transparent) !important;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--v3-elev-3) !important;
}

@media (max-width: 640px) {
  html[data-v3-uplift] .nav-back, html[data-v3-uplift] .nav-link-back { height: 34px; padding: 0 12px !important; font-size: 12px !important; white-space: nowrap; }
  html[data-v3-uplift] body > nav a, html[data-v3-uplift] body > header a { white-space: nowrap; }
  html[data-v3-uplift] .nav-logo { font-size: 0 !important; gap: 0; }
  html[data-v3-uplift] body > nav, html[data-v3-uplift] body > header.nav { padding-left: 10px !important; padding-right: 10px !important; gap: 6px; }
  html[data-v3-uplift] body > nav > div, html[data-v3-uplift] body > nav .nav-right { gap: 6px !important; }
}