/* Site public — couche V3 : même langage que l'app (bannières en dégradé avec un grand emoji discret,
   une couleur par section, cartes en verre, boutons en pilule dégradée, fond très sombre).
   Chargée après toutes les autres feuilles : ne touche ni aux id ni aux data-* utilisés par script.js. */

/* ---------- Jetons ---------- */
html.site-v3 {
  --v3-bg: #0f1013;
  --v3-bg-2: #15161b;
  --v3-glass: rgba(255, 255, 255, .045);
  --v3-glass-2: rgba(255, 255, 255, .075);
  --v3-glass-strong: rgba(22, 23, 29, .82);
  --v3-line: rgba(255, 255, 255, .085);
  --v3-line-2: rgba(255, 255, 255, .16);
  --v3-text: #f6f2ec;
  --v3-muted: #a3a0aa;
  --v3-header: rgba(13, 14, 17, .72);
  --v3-card-shadow: 0 14px 30px -22px rgba(0, 0, 0, .85);
  --v3-orange: #ff6a3d;
  --v3-gold: #ffb347;
  --v3-cta: linear-gradient(90deg, #ff6a3d, #ffb347);
  --v3-ease: cubic-bezier(.2, .8, .2, 1);
  --sec: #ff6a3d;
  --sec-2: #ffb347;
  color-scheme: dark;
}

html.site-v3[data-theme="light"]:not([data-night="true"]) {
  --v3-bg: #f4f1ec;
  --v3-bg-2: #ebe6df;
  --v3-glass: rgba(255, 255, 255, .72);
  --v3-glass-2: rgba(255, 255, 255, .9);
  --v3-glass-strong: rgba(255, 255, 255, .9);
  --v3-line: rgba(24, 20, 30, .09);
  --v3-line-2: rgba(24, 20, 30, .18);
  --v3-text: #17151b;
  --v3-muted: #6b6772;
  --v3-header: rgba(250, 248, 245, .78);
  --v3-card-shadow: 0 22px 46px -32px rgba(40, 30, 20, .45);
  color-scheme: light;
}

/* Une couleur par section (la nav, les bannières et les halos la suivent). */
body[data-page="music"], body[data-page="playlist"] { --sec: #c34dff; --sec-2: #ff5c8a; --sec-emoji: "🎧"; }
body[data-page="clips"] { --sec: #ff3b4e; --sec-2: #ff9f1c; --sec-emoji: "🎬"; }
body[data-page="radio"], body[data-page="obs-radio"] { --sec: #53e6a5; --sec-2: #2bc0ff; --sec-emoji: "📻"; }
body[data-page="game"] { --sec: #ffd32e; --sec-2: #ff6a3d; --sec-emoji: "🎮"; }
body[data-page="store"], body[data-page="cart"], body[data-page="payment"] { --sec: #ff9f1c; --sec-2: #ff5c8a; }
body[data-page="account"], body[data-page="profile"] { --sec: #8fa2ff; --sec-2: #5ec8ff; }
body[data-page="wrapped"] { --sec: #ffd32e; --sec-2: #8b3dff; }
body[data-page="contact"] { --sec: #5ec8ff; --sec-2: #8b3dff; }
body[data-page="legal"], body[data-page="privacy"], body[data-page="credits"] { --sec: #8fa2ff; --sec-2: #53e6a5; }
body[data-page="social"] { --sec: #2bc0ff; --sec-2: #8b3dff; }
body[data-page="admin"] { --sec: #ff6a3d; --sec-2: #8b3dff; }
body[data-page="404"] { --sec: #8b3dff; --sec-2: #ff5c8a; }

/* ---------- Fond ---------- */
html.site-v3.public-site-redesign body {
  background: var(--v3-bg);
  color: var(--v3-text);
}

html.site-v3.public-site-redesign body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: block;
  content: "";
  background:
    radial-gradient(60vw 42vh at 88% -6%, color-mix(in srgb, var(--sec) 16%, transparent), transparent 70%),
    radial-gradient(52vw 40vh at -6% 18%, color-mix(in srgb, var(--sec-2) 10%, transparent), transparent 70%),
    radial-gradient(80vw 50vh at 50% 110%, color-mix(in srgb, var(--sec) 7%, transparent), transparent 70%);
  pointer-events: none;
}

html.site-v3.public-site-redesign body::after { display: none; }
html.site-v3 ::selection { background: color-mix(in srgb, var(--sec) 45%, transparent); color: #fff; }

/* ---------- En-tête ---------- */
html.site-v3.public-site-redesign .site-header {
  border: 0;
  border-bottom: 1px solid var(--v3-line);
  background: transparent;
  color: var(--v3-text);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  isolation: isolate;
}

/* Le flou passe par un pseudo-élément : un backdrop-filter sur l'en-tête piégerait la barre d'onglets fixe. */
html.site-v3.public-site-redesign .site-header::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background: var(--v3-header);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

html.site-v3.public-site-redesign .site-header::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--sec) 70%, transparent), color-mix(in srgb, var(--sec-2) 60%, transparent), transparent);
  opacity: .7;
  transition: background .5s ease;
}

html.site-v3.public-site-redesign .brand { color: var(--v3-text); }
html.site-v3.public-site-redesign .brand-logo {
  border: 0;
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(255, 215, 102, .35), 0 8px 22px -8px rgba(255, 179, 71, .55);
  transition: transform .4s var(--v3-ease);
}
html.site-v3.public-site-redesign .brand:hover .brand-logo { transform: rotate(-6deg) scale(1.05); }
html.site-v3.public-site-redesign .brand-wordmark strong { color: var(--v3-text); letter-spacing: .02em; }
html.site-v3.public-site-redesign .brand-wordmark small { color: var(--v3-muted); }

html.site-v3.public-site-redesign .header-actions :is(.social-link, .theme-toggle, .account-nav-profile, .cart-header-button),
html.site-v3.public-site-redesign .header-actions .soundcloud-accounts {
  border: 1px solid var(--v3-line);
  border-radius: 999px;
  background: var(--v3-glass);
  color: var(--v3-text);
  transition: border-color .2s ease, background .2s ease, transform .2s var(--v3-ease);
}
html.site-v3.public-site-redesign .header-actions :is(.social-link, .theme-toggle, .account-nav-profile, .cart-header-button):hover {
  border-color: color-mix(in srgb, var(--sec) 55%, transparent);
  background: var(--v3-glass-2);
  transform: translateY(-1px);
}
html.site-v3.public-site-redesign .header-actions .cart-header-button,
html.site-v3.public-site-redesign .header-actions .theme-toggle { width: 38px; padding: 0; justify-content: center; }
html.site-v3.public-site-redesign .header-actions .account-nav-profile { padding: 0 14px; }
html.site-v3.public-site-redesign .header-actions .soundcloud-accounts a { border-radius: 999px; }
html.site-v3.public-site-redesign .header-actions .kafpoints-balance {
  border-color: rgba(255, 211, 46, .35);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 211, 46, .14), rgba(139, 61, 255, .14)), #16141c;
}

/* Cloche des notifications dans l'en-tête (membres connectés). */
html.site-v3.public-site-redesign .header-actions .header-bell {
  position: relative;
  display: inline-grid;
  width: 38px;
  min-height: 38px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--v3-line);
  border-radius: 999px;
  background: var(--v3-glass);
  color: var(--v3-text);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
html.site-v3.public-site-redesign .header-actions .header-bell[hidden] { display: none; }
html.site-v3.public-site-redesign .header-actions .header-bell:hover { border-color: rgba(43, 192, 255, .6); background: var(--v3-glass-2); }
html.site-v3.public-site-redesign .header-bell svg { width: 18px; height: 18px; fill: currentColor; }
html.site-v3.public-site-redesign .header-bell.has-unread svg { color: #2bc0ff; }
html.site-v3.public-site-redesign .header-bell b {
  position: absolute;
  top: -4px;
  right: -4px;
  display: grid;
  min-width: 18px;
  height: 18px;
  place-items: center;
  padding: 0 5px;
  border-radius: 999px;
  background: #ff5c8a;
  color: #fff;
  font-size: .62rem;
  font-weight: 900;
  box-shadow: 0 0 0 2px var(--v3-bg), 0 0 10px rgba(255, 92, 138, .6);
}
html.site-v3.public-site-redesign .header-bell b[hidden] { display: none; }
@media (max-width: 1099px) {
  html.site-v3.public-site-redesign .header-actions .header-bell { width: 36px; min-height: 36px; }
}

@media (min-width: 1100px) {
  html.site-v3.public-site-redesign .site-header.site-header-centered {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    min-height: 72px !important;
    grid-template-rows: 72px !important;
    padding: 0 24px !important;
  }

  html.site-v3.public-site-redesign .site-header.site-header-centered > .main-nav {
    align-self: center;
    min-height: 0;
    gap: 2px;
    padding: 4px;
    border: 1px solid var(--v3-line);
    border-radius: 999px;
    background: var(--v3-glass);
  }

  html.site-v3.public-site-redesign .main-nav .nav-link {
    min-height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    color: var(--v3-muted);
    font-size: .74rem;
    letter-spacing: .04em;
    transition: color .2s ease, background .25s ease, box-shadow .25s ease;
  }
  html.site-v3.public-site-redesign .main-nav .nav-link::after { display: none; }
  html.site-v3.public-site-redesign .main-nav .nav-link:hover { background: var(--v3-glass-2); color: var(--v3-text); }
  html.site-v3.public-site-redesign .main-nav .nav-link.active {
    background: linear-gradient(90deg, var(--sec), var(--sec-2));
    color: #160a00;
    box-shadow: 0 8px 22px -10px var(--sec);
  }
}

/* Sur écran moyen, SoundCloud et YouTube passent dans le pied de page pour laisser respirer la nav. */
@media (max-width: 1599px) {
  html.site-v3.public-site-redesign .header-actions :is(.social-platform, .social-link) { display: none !important; }
}

/* ---------- Téléphone et tablette : en-tête compact + barre d'onglets en bas ---------- */
@media (max-width: 1099px) {
  html.site-v3.public-site-redesign .site-header.site-header-centered {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-rows: 60px !important;
    gap: 10px !important;
    min-height: 60px !important;
    padding: 0 12px !important;
  }

  html.site-v3.public-site-redesign .site-header > .brand { grid-column: 1 !important; grid-row: 1 !important; }
  html.site-v3.public-site-redesign .brand-logo { width: 38px; height: 38px; }

  html.site-v3.public-site-redesign .site-header > .header-actions {
    display: flex;
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }

  html.site-v3.public-site-redesign .header-actions :is(.social-platform, .social-link) { display: none !important; }
  html.site-v3.public-site-redesign .header-actions .theme-toggle:not(.night-toggle) { display: inline-flex !important; }
  html.site-v3.public-site-redesign .header-actions :is(.theme-toggle, .cart-header-button) { width: 36px; min-height: 36px; }
  html.site-v3.public-site-redesign .header-actions .account-nav-profile {
    min-height: 36px;
    max-width: 128px;
    overflow: hidden;
    padding: 0 12px;
    font-size: .7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html.site-v3.public-site-redesign .header-actions .kafpoints-balance:not([hidden]) {
    display: inline-flex !important;
    min-height: 36px;
    padding: 0 10px 0 4px;
  }
  html.site-v3.public-site-redesign .header-actions .kafpoints-balance small { display: none; }

  html.site-v3.public-site-redesign .site-header > .main-nav {
    position: fixed !important;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    left: 10px;
    z-index: 80;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-column: auto !important;
    grid-row: auto !important;
    width: auto !important;
    max-width: 560px !important;
    min-height: 0 !important;
    margin: 0 auto;
    padding: 6px !important;
    overflow: visible !important;
    border: 1px solid var(--v3-line-2);
    border-radius: 24px;
    background: var(--v3-glass-strong);
    box-shadow: 0 18px 44px -12px rgba(0, 0, 0, .7);
    backdrop-filter: blur(22px) saturate(1.5);
    -webkit-backdrop-filter: blur(22px) saturate(1.5);
    transform: none !important;
  }

  html.site-v3.public-site-redesign .main-nav .nav-link {
    display: flex;
    min-width: 0;
    min-height: 52px !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0 2px !important;
    border-radius: 18px;
    background: transparent;
    color: var(--v3-muted);
    font-size: .6rem !important;
    letter-spacing: .02em;
    transition: color .2s ease, background .25s ease;
  }
  html.site-v3.public-site-redesign .main-nav .nav-link::before {
    display: block;
    font-size: 1.2rem;
    line-height: 1;
    filter: grayscale(.85) opacity(.7);
    transition: filter .25s ease, transform .3s var(--v3-ease);
  }
  html.site-v3.public-site-redesign .main-nav .nav-link::after { display: none; }
  html.site-v3.public-site-redesign .main-nav .nav-link.active {
    background: color-mix(in srgb, var(--sec) 18%, transparent);
    color: var(--v3-text);
  }
  html.site-v3.public-site-redesign .main-nav .nav-link.active::before { filter: none; transform: translateY(-1px) scale(1.12); }

  html.site-v3.public-site-redesign body { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

  html.site-v3.public-site-redesign .global-music-player {
    bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

html.site-v3 .main-nav .nav-link[data-page="home"]::before { content: "🏠"; }
html.site-v3 .main-nav .nav-link[data-page="music"]::before { content: "🎧"; }
html.site-v3 .main-nav .nav-link[data-page="social"]::before { content: "💬"; }
html.site-v3 .main-nav .nav-link[data-page="game"]::before { content: "🎮"; }
html.site-v3 .main-nav .nav-link[data-page="store"]::before { content: "🛍️"; }
@media (min-width: 1100px) { html.site-v3 .main-nav .nav-link::before { content: none !important; } }

@media (max-width: 420px) {
  html.site-v3.public-site-redesign .brand-wordmark { display: none; }
}

/* ---------- Typo et éléments communs ---------- */
html.site-v3.public-site-redesign :is(.eyebrow, .section-title-row .eyebrow, .page-heading .eyebrow) {
  color: var(--sec);
  letter-spacing: .14em;
}

html.site-v3.public-site-redesign :is(.button, .fake-buy, .community-account-link) {
  min-height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  letter-spacing: .04em;
  transition: transform .2s var(--v3-ease), box-shadow .25s ease, background .2s ease, border-color .2s ease, filter .2s ease;
}

html.site-v3.public-site-redesign :is(.button.primary, .fake-buy) {
  border: 0;
  background: var(--v3-cta);
  color: #1d0a00;
  box-shadow: 0 12px 28px -12px rgba(255, 106, 61, .85);
}
html.site-v3.public-site-redesign :is(.button.primary, .fake-buy):hover {
  background: var(--v3-cta);
  filter: brightness(1.08) saturate(1.05);
  box-shadow: 0 16px 34px -12px rgba(255, 106, 61, .95);
}
html.site-v3.public-site-redesign :is(.button.primary, .fake-buy):disabled { filter: grayscale(.7); opacity: .55; box-shadow: none; }

html.site-v3.public-site-redesign .button.secondary {
  border: 1px solid var(--v3-line-2);
  background: var(--v3-glass);
  color: var(--v3-text);
}
html.site-v3.public-site-redesign .button.secondary:hover {
  border-color: color-mix(in srgb, var(--sec) 60%, transparent);
  background: var(--v3-glass-2);
}
html.site-v3.public-site-redesign :is(.button, .fake-buy):active { transform: scale(.97); }
html.site-v3.public-site-redesign :is(.button, .fake-buy, .nav-link, button):focus-visible {
  outline: 2px solid var(--sec);
  outline-offset: 3px;
}

html.site-v3.public-site-redesign main :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
  border: 1px solid var(--v3-line-2);
  border-radius: 14px;
  background: rgba(0, 0, 0, .22);
  color: var(--v3-text);
  transition: border-color .2s ease, box-shadow .2s ease;
}
html.site-v3[data-theme="light"]:not([data-night="true"]).public-site-redesign main :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
  background: rgba(255, 255, 255, .8);
}
html.site-v3.public-site-redesign main :is(input, select, textarea):focus {
  border-color: var(--sec);
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sec) 22%, transparent);
}
html.site-v3.public-site-redesign main input[type="range"] { accent-color: var(--sec); }

/* Onglets segmentés (Musique / Klips, Titres / Albums...) */
html.site-v3.public-site-redesign :is(.content-surface-tabs, .catalog-tabs) {
  padding: 4px;
  border: 1px solid var(--v3-line);
  border-radius: 999px;
  background: var(--v3-glass);
}
html.site-v3.public-site-redesign :is(.content-surface-tabs, .catalog-tabs) button {
  border-radius: 999px;
  transition: background .25s ease, color .2s ease;
}
html.site-v3.public-site-redesign :is(.content-surface-tabs button.is-active, .catalog-tabs button.active, .catalog-tabs button.is-active) {
  background: linear-gradient(90deg, var(--sec), var(--sec-2));
  color: #fff;
  box-shadow: 0 8px 20px -10px var(--sec);
}

/* Sous-onglets Musique / Klips : un grand sélecteur bien visible en haut de page. */
html.site-v3.public-site-redesign .content-surface-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(520px, 100%);
  margin: 0 auto 18px;
  padding: 5px;
  border: 1px solid var(--v3-line-2);
  border-radius: 999px;
  background: var(--v3-glass-strong);
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .8);
}
html.site-v3.public-site-redesign body[data-page="clips"] .content-surface-tabs.clip-surface-tabs {
  display: grid;
  width: min(520px, calc(100% - 40px));
  margin: 0 auto 18px;
}
html.site-v3.public-site-redesign .content-surface-tabs button {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--v3-text);
  font-size: .95rem;
  font-weight: 900;
  letter-spacing: .03em;
  opacity: .72;
  transition: background .25s ease, opacity .2s ease, box-shadow .25s ease;
}
html.site-v3.public-site-redesign .content-surface-tabs button::before { font-size: 1.15rem; line-height: 1; }
html.site-v3.public-site-redesign .content-surface-tabs button[data-page="music"]::before { content: "🎧"; }
html.site-v3.public-site-redesign .content-surface-tabs button[data-page="clips"]::before { content: "🎬"; }
html.site-v3.public-site-redesign .content-surface-tabs button:hover { background: var(--v3-glass-2); opacity: 1; }
html.site-v3.public-site-redesign .content-surface-tabs button.is-active {
  background: linear-gradient(90deg, var(--sec), var(--sec-2));
  color: #fff;
  opacity: 1;
  box-shadow: 0 10px 26px -10px var(--sec);
}
@media (max-width: 560px) {
  html.site-v3.public-site-redesign .content-surface-tabs { width: 100%; }
  html.site-v3.public-site-redesign body[data-page="clips"] .content-surface-tabs.clip-surface-tabs { width: calc(100% - 160px); min-width: 210px; margin: 0 auto 14px; }
  html.site-v3.public-site-redesign .content-surface-tabs button { min-height: 48px; padding: 0 10px; gap: 6px; }
}

/* ---------- Bannières d'en-tête ---------- */
html.site-v3.public-site-redesign .page-heading {
  position: relative;
  isolation: isolate;
  gap: 6px;
  margin: 0 0 28px;
  padding: clamp(22px, 4vw, 40px) clamp(18px, 4vw, 40px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--sec) 32%, transparent);
  border-radius: 26px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--sec-2) 30%, transparent), transparent 55%),
    linear-gradient(135deg, color-mix(in srgb, var(--sec) 22%, var(--v3-bg-2)), var(--v3-bg-2) 72%);
  box-shadow: 0 30px 60px -40px color-mix(in srgb, var(--sec) 80%, transparent);
}
html.site-v3.public-site-redesign .page-heading::after {
  position: absolute;
  right: clamp(10px, 4vw, 48px);
  bottom: -22px;
  z-index: -1;
  content: var(--page-emoji, var(--sec-emoji, "✦"));
  font-size: clamp(5rem, 13vw, 9rem);
  line-height: 1;
  opacity: .16;
  transform: rotate(-10deg);
  pointer-events: none;
  animation: v3-float 7s ease-in-out infinite;
}
html.site-v3.public-site-redesign .page-heading h1 {
  max-width: 14ch;
  background: linear-gradient(180deg, var(--v3-text) 40%, color-mix(in srgb, var(--sec) 45%, var(--v3-text)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(2.4rem, 7vw, 5.2rem);
  line-height: .92;
}
html.site-v3.public-site-redesign .page-heading > p:last-child:not(.eyebrow) { max-width: 620px; color: var(--v3-muted); }

#storePage { --page-emoji: "🛍️"; }
#cartPage { --page-emoji: "🛒"; }
#paymentPage { --page-emoji: "💳"; }
#accountPage { --page-emoji: "🪪"; }
#contactPage { --page-emoji: "✉️"; }
#legalPage { --page-emoji: "⚖️"; }
#privacyPage { --page-emoji: "🔒"; }
#creditsPage { --page-emoji: "🎞️"; }
#adminPage { --page-emoji: "🛠️"; }
#radioPage, #obsRadioPage { --page-emoji: "📻"; }

html.site-v3.public-site-redesign .page-shell > .page-heading { width: auto; max-width: none; }
html.site-v3.public-site-redesign :is(.section-title-row h2, .feature-card h2, .catalog-panel h2, .soundcloud-panel h2, .community-playlists-panel h2) {
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  line-height: 1;
}

html.site-v3.public-site-redesign .page-shell > .page-heading.account-page-heading {
  display: grid;
  align-items: start;
  justify-items: start;
  margin-inline: 0;
  text-align: left;
}
html.site-v3.public-site-redesign :is(.checkout-step h2, .checkout-summary h2, .legal-card h2, .account-security-heading h2, .account-playlist-heading h2) {
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  line-height: 1.05;
}

/* ---------- Cartes en verre ---------- */
html.site-v3.public-site-redesign :is(
  .feature-card, .catalog-panel, .community-playlists-panel, .soundcloud-panel, .embed-card,
  .daily-vote-card, .web-app-program, .web-passport-section, .checkout-step, .checkout-summary,
  .contact-form, .legal-card, .radio-station, .account-login-card, .account-page-auth,
  .account-profile-panel, .account-security-panel, .account-recent-panel, .community-user-panel,
  .community-create-form, .community-playlist-editor, .admin-control-block
) {
  border: 1px solid var(--v3-line);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012)), var(--v3-glass);
  box-shadow: var(--v3-card-shadow);
}

html.site-v3.public-site-redesign :is(.section-title-row h2, .feature-card h2, .catalog-panel h2, .checkout-summary h2, .legal-card h2) {
  color: var(--v3-text);
  letter-spacing: .01em;
}

/* ---------- Accueil ---------- */
html.site-v3.public-site-redesign .web-app-member-hero {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 28px;
  box-shadow: 0 34px 70px -38px rgba(255, 106, 61, .55), 0 0 0 1px rgba(255, 179, 71, .08) inset;
}
/* Image d'accueil vivante, comme dans l'app : dérive lente, halo qui respire (et suit la souris),
   étoiles, étoile filante, nuages, oiseaux, soleil ou lune à leur vraie place. */
html.site-v3.public-site-redesign .web-living-hero {
  --hero-glow: rgba(255, 138, 36, .2);
  isolation: isolate;
}
html.site-v3.public-site-redesign .web-living-hero[data-period="morning"] { --hero-glow: rgba(255, 197, 92, .24); }
html.site-v3.public-site-redesign .web-living-hero[data-period="afternoon"] { --hero-glow: rgba(53, 215, 231, .18); }
html.site-v3.public-site-redesign .web-living-hero[data-period="evening"] { --hero-glow: rgba(255, 60, 172, .2); }
html.site-v3.public-site-redesign .web-living-hero[data-period="night"] { --hero-glow: rgba(155, 108, 255, .23); }
html.site-v3.public-site-redesign .web-living-hero > .web-living-hero-image {
  transform: scale(1.02);
  animation: web-hero-drift 16s ease-in-out infinite alternate;
  will-change: transform;
}
.web-hero-sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.web-hero-sky > i { position: absolute; display: block; opacity: 0; }
.web-hero-star { border-radius: 50%; background: #fff; box-shadow: 0 0 4px rgba(255, 255, 255, .9); }
.web-living-hero:is([data-period="night"], [data-period="evening"]) .web-hero-star { opacity: .2; animation-name: web-hero-twinkle; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.web-living-hero[data-period="evening"] .web-hero-star:nth-child(2n) { display: none; }
.web-hero-shooting { top: 12%; left: 70%; width: 90px; height: 1.5px; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, .95), transparent); transform: rotate(-24deg); }
.web-living-hero[data-period="night"] .web-hero-shooting { animation: web-hero-shoot 11s ease-in 3s infinite; }
.web-hero-cloud { width: 62%; height: 34%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .5), transparent); }
.web-hero-cloud.is-one { top: 6%; left: -30%; animation: web-hero-cloud 46s linear infinite; }
.web-hero-cloud.is-two { top: 22%; left: -40%; width: 48%; animation: web-hero-cloud 64s linear -22s infinite; }
.web-hero-cloud.is-three { top: 2%; left: -30%; width: 40%; height: 24%; animation: web-hero-cloud 82s linear -50s infinite; }
.web-living-hero:is([data-period="morning"], [data-period="afternoon"]) .web-hero-cloud { opacity: .18; }
.web-living-hero[data-period="evening"] .web-hero-cloud { opacity: .12; background: radial-gradient(closest-side, rgba(255, 170, 120, .55), transparent); }
.web-hero-birds { top: 26%; left: -14%; display: flex !important; gap: 8px; color: rgba(30, 30, 45, .55); }
.web-hero-birds svg { width: 13px; height: 6px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; animation: web-hero-flap .7s ease-in-out infinite alternate; }
.web-hero-birds svg:nth-child(2) { width: 10px; margin-top: 7px; animation-delay: .2s; }
.web-hero-birds svg:nth-child(3) { width: 9px; margin-top: -4px; animation-delay: .35s; }
.web-living-hero:is([data-period="morning"], [data-period="afternoon"], [data-period="evening"]) .web-hero-birds { animation: web-hero-birds 26s linear 4s infinite; }
.web-hero-sky > .web-hero-glow {
  inset: 0;
  opacity: .9;
  background: radial-gradient(circle at var(--hero-pointer-x, 72%) var(--hero-pointer-y, 34%), var(--hero-glow), transparent 36%);
  mix-blend-mode: screen;
  animation: web-hero-breathe 8s ease-in-out infinite alternate;
}
.web-hero-body { position: absolute; z-index: 1; width: 0; height: 0; opacity: 0; pointer-events: none; mix-blend-mode: screen; }
.web-hero-body.is-sun, .web-hero-body.is-moon { opacity: 1; transition: left 1.2s ease, top 1.2s ease; }
.web-hero-body.is-sun { width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: radial-gradient(circle, #fffef6 0 38%, #fff6c8 52%, rgba(255, 244, 200, 0) 72%); box-shadow: 0 0 40px 18px rgba(255, 250, 220, .55), 0 0 140px 70px rgba(255, 248, 225, .32); }
.web-hero-body.is-moon { width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: radial-gradient(circle at 34% 38%, rgba(190, 192, 210, .4) 0 9%, transparent 11%), radial-gradient(circle at 62% 58%, rgba(190, 192, 210, .32) 0 12%, transparent 14%), radial-gradient(circle at 48% 72%, rgba(195, 198, 215, .28) 0 7%, transparent 9%), radial-gradient(circle at 40% 40%, #ffffff, #f3f1ea 70%); box-shadow: 0 0 22px 6px rgba(236, 238, 255, .55), 0 0 90px 36px rgba(180, 190, 255, .22); }
.web-living-hero.is-offscreen,
.web-living-hero.is-offscreen * { animation-play-state: paused !important; }
@keyframes web-hero-drift { to { transform: scale(1.06) translate3d(-.8%, .4%, 0); } }
@keyframes web-hero-drift-soft { to { transform: scale(1.045); } }
@keyframes web-hero-breathe-soft { to { opacity: .5; } }
@keyframes web-hero-breathe { to { opacity: .55; transform: scale(1.06); } }
@keyframes web-hero-twinkle { 0%, 100% { opacity: .15; transform: scale(.8); } 50% { opacity: .95; transform: scale(1.15); } }
@keyframes web-hero-shoot { 0%, 90% { opacity: 0; transform: translate(0, 0) rotate(-24deg); } 92% { opacity: 1; } 100% { opacity: 0; transform: translate(-220px, 100px) rotate(-24deg); } }
@keyframes web-hero-cloud { from { transform: translateX(0); } to { transform: translateX(260%); } }
@keyframes web-hero-birds { 0% { opacity: 0; transform: translate(0, 0); } 4% { opacity: 1; } 60% { opacity: 1; transform: translate(118vw, -40px); } 62%, 100% { opacity: 0; transform: translate(124vw, -42px); } }
@keyframes web-hero-flap { from { transform: scaleY(1); } to { transform: scaleY(-.6); } }
html.site-v3.public-site-redesign .web-app-member-copy h1 { letter-spacing: .01em; text-shadow: 0 6px 30px rgba(0, 0, 0, .45); }
html.site-v3.public-site-redesign .web-app-member-copy #webAppLevel {
  border: 1px solid rgba(255, 211, 46, .45);
  border-radius: 999px;
  background: rgba(15, 16, 19, .55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

html.site-v3.public-site-redesign .web-app-program { --sec: #53e6a5; --sec-2: #2bc0ff; }
html.site-v3.public-site-redesign .web-app-program header small { color: var(--sec); letter-spacing: .14em; }
html.site-v3.public-site-redesign .web-app-program #webAppMissionScore {
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sec) 16%, transparent);
  color: var(--sec);
}
html.site-v3.public-site-redesign #webAppMissions > button {
  border: 1px solid var(--v3-line);
  border-radius: 16px;
  background: rgba(255, 255, 255, .025);
  transition: transform .2s var(--v3-ease), border-color .2s ease, background .2s ease;
}
html.site-v3.public-site-redesign #webAppMissions > button:hover {
  border-color: color-mix(in srgb, var(--sec) 45%, transparent);
  background: rgba(255, 255, 255, .05);
  transform: translateX(3px);
}
html.site-v3.public-site-redesign #webAppMissions > button.is-done {
  background: linear-gradient(90deg, color-mix(in srgb, var(--sec) 12%, transparent), transparent 80%);
  box-shadow: inset 3px 0 0 var(--sec);
}

/* Héros invité */
html.site-v3.public-site-redesign .home-simple-hero {
  position: relative;
  isolation: isolate;
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 106, 61, .3);
  border-radius: 30px;
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 179, 71, .32), transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(139, 61, 255, .22), transparent 55%),
    linear-gradient(135deg, #2a1410, #121217 70%);
  box-shadow: 0 40px 80px -44px rgba(255, 106, 61, .7);
}
html.site-v3[data-theme="light"]:not([data-night="true"]).public-site-redesign .home-simple-hero { color: #fff; }
html.site-v3.public-site-redesign .home-simple-hero .button.secondary {
  border-color: rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .07);
  color: #fff;
}
html.site-v3.public-site-redesign .home-simple-hero::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  background: linear-gradient(90deg, rgba(5, 7, 18, .9) 0%, rgba(5, 7, 18, .55) 48%, rgba(5, 7, 18, .12) 85%);
  pointer-events: none;
}
html.site-v3.public-site-redesign .home-simple-hero > .web-living-hero-image {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 64%;
}
html.site-v3.public-site-redesign .home-simple-hero > .web-hero-sky { z-index: -1; }
html.site-v3.public-site-redesign .home-simple-hero > :is(.home-simple-copy, .home-simple-stats) { position: relative; z-index: 1; }
html.site-v3.public-site-redesign .home-simple-hero { background: #0b0d18; }
html.site-v3.public-site-redesign .home-simple-hero h1 {
  background: linear-gradient(180deg, #fff 35%, #ffc58a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html.site-v3.public-site-redesign .home-simple-hero .home-simple-copy > p:not(.eyebrow) { color: rgba(255, 255, 255, .74); }
html.site-v3.public-site-redesign .home-simple-stats > button {
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 20px;
  background: rgba(255, 255, 255, .06);
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .25s var(--v3-ease), border-color .2s ease, background .2s ease;
}
html.site-v3.public-site-redesign .home-simple-stats > button:hover {
  border-color: rgba(255, 179, 71, .55);
  background: rgba(255, 255, 255, .1);
  transform: translateY(-3px);
}
html.site-v3.public-site-redesign .home-simple-stats strong {
  background: linear-gradient(180deg, #fff, #ffb347);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html.site-v3.public-site-redesign .home-simple-stats > button:nth-child(2) strong { background-image: linear-gradient(180deg, #fff, #ff5c8a); }
html.site-v3.public-site-redesign .home-simple-stats > button:nth-child(3) strong { background-image: linear-gradient(180deg, #fff, #ff3b4e); }

@media (max-width: 760px) {
  html.site-v3.public-site-redesign .home-simple-hero { flex-direction: column; align-items: stretch; gap: 18px; min-height: 0; padding: 26px 18px 18px; }
  html.site-v3.public-site-redesign .home-simple-hero h1 { font-size: clamp(2rem, 10.5vw, 2.7rem); line-height: .95; overflow-wrap: anywhere; }
  html.site-v3.public-site-redesign .home-simple-hero .hero-actions { grid-template-columns: 1fr; }
  html.site-v3.public-site-redesign .home-simple-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 8px; }
  html.site-v3.public-site-redesign .home-simple-hero::after { background: linear-gradient(180deg, rgba(5, 7, 18, .55), rgba(5, 7, 18, .8)); }
}
@media (max-width: 420px) {
  html.site-v3.public-site-redesign .brand .site-v2-badge { display: none; }
}

/* Vote du jour */
html.site-v3.public-site-redesign .daily-vote-card {
  --sec: #ff5c8a;
  --sec-2: #ff9f1c;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--sec) 26%, transparent);
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 159, 28, .16), transparent 50%),
    linear-gradient(180deg, rgba(255, 92, 138, .08), rgba(255, 255, 255, .01)), var(--v3-glass);
}
html.site-v3.public-site-redesign .daily-vote-card::after {
  position: absolute;
  top: -18px;
  right: 18px;
  z-index: -1;
  content: "🗳️";
  font-size: 6.5rem;
  opacity: .1;
  transform: rotate(10deg);
  pointer-events: none;
}
html.site-v3.public-site-redesign .daily-vote-date {
  justify-self: start;
  width: max-content;
  padding: 5px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sec) 16%, transparent);
  color: var(--sec);
}
html.site-v3.public-site-redesign .daily-vote-card-option {
  border: 1px solid var(--v3-line);
  border-radius: 20px;
  background: rgba(255, 255, 255, .03);
  transition: transform .25s var(--v3-ease), border-color .2s ease, box-shadow .25s ease, background .2s ease;
}
html.site-v3.public-site-redesign .daily-vote-card-option:hover { transform: translateY(-3px); }
html.site-v3.public-site-redesign .daily-vote-card-option-keur:hover { border-color: rgba(255, 92, 138, .6); box-shadow: 0 18px 36px -20px #ff5c8a; }
html.site-v3.public-site-redesign .daily-vote-card-option-ouin:hover { border-color: rgba(94, 200, 255, .6); box-shadow: 0 18px 36px -20px #5ec8ff; }
html.site-v3.public-site-redesign .daily-vote-card-option img { border-radius: 14px; }

/* Bandeau application */
html.site-v3.public-site-redesign .home-simple-app {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(139, 61, 255, .3);
  border-radius: 28px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 106, 61, .26), transparent 50%),
    linear-gradient(135deg, rgba(139, 61, 255, .24), var(--v3-bg-2) 70%);
  box-shadow: 0 30px 60px -40px rgba(139, 61, 255, .8);
}
html.site-v3.public-site-redesign .home-simple-app::before { display: none; }
html.site-v3.public-site-redesign .home-simple-app::after {
  position: absolute;
  right: 30%;
  bottom: -26px;
  z-index: -1;
  content: "📱";
  font-size: 7rem;
  opacity: .12;
  transform: rotate(-12deg);
  pointer-events: none;
}
html.site-v3.public-site-redesign .home-simple-app .eyebrow { color: #c79bff; }

/* ---------- Musique ---------- */
html.site-v3.public-site-redesign .track-card,
html.site-v3.public-site-redesign .album-card,
html.site-v3.public-site-redesign .community-playlist-card,
html.site-v3.public-site-redesign .product-card {
  overflow: hidden;
  border: 1px solid var(--v3-line);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .01)), var(--v3-bg-2);
  transition: transform .3s var(--v3-ease), box-shadow .3s ease, border-color .25s ease;
}
html.site-v3.public-site-redesign :is(.track-card, .album-card, .community-playlist-card, .product-card):hover {
  border-color: color-mix(in srgb, var(--sec) 45%, transparent);
  box-shadow: 0 22px 40px -24px var(--sec);
  transform: translateY(-4px);
}
html.site-v3.public-site-redesign :is(.track-card, .album-card, .product-card) img { transition: transform .6s var(--v3-ease); }
html.site-v3.public-site-redesign :is(.track-card, .album-card, .product-card):hover img { transform: scale(1.05); }
html.site-v3.public-site-redesign .track-card .play-badge {
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sec), var(--sec-2));
  color: #fff;
  box-shadow: 0 8px 20px -8px var(--sec);
}
html.site-v3.public-site-redesign .track-card.is-playing,
html.site-v3.public-site-redesign .track-card.playing {
  border-color: var(--sec);
  box-shadow: 0 0 0 1px var(--sec), 0 22px 44px -22px var(--sec);
}
html.site-v3.public-site-redesign .track-card :is(.queue-add-button, .playlist-add-button) {
  border: 1px solid var(--v3-line-2);
  border-radius: 999px;
  background: var(--v3-glass);
  color: var(--v3-text);
  transition: background .2s ease, border-color .2s ease, transform .2s var(--v3-ease);
}
html.site-v3.public-site-redesign .track-card :is(.queue-add-button, .playlist-add-button):hover {
  border-color: var(--sec);
  background: color-mix(in srgb, var(--sec) 20%, transparent);
  transform: scale(1.08);
}

html.site-v3.public-site-redesign .track-card .track-body > small { display: block; padding-right: 74px; }

@media (max-width: 700px) {
  html.site-v3.public-site-redesign .track-card .track-body > small { padding-right: 0; }
  html.site-v3.public-site-redesign .track-card .track-card-actions { position: static; margin-top: 10px; }
  html.site-v3.public-site-redesign .page-shell { padding-top: 22px; }
  html.site-v3.public-site-redesign .page-heading { border-radius: 22px; }
}

html.site-v3.public-site-redesign .random-card {
  border-color: color-mix(in srgb, var(--sec) 30%, transparent);
  background:
    radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--sec) 20%, transparent), transparent 60%),
    var(--v3-glass);
}
html.site-v3.public-site-redesign .shuffle-machine { border-radius: 20px; }
html.site-v3.public-site-redesign .music-library-pages button { border-radius: 999px; }
html.site-v3.public-site-redesign .music-library-pages button:is(.active, .is-active, [aria-current="page"]) {
  border-color: transparent;
  background: linear-gradient(90deg, var(--sec), var(--sec-2));
  color: #fff;
}
html.site-v3.public-site-redesign .music-library-tools button[data-layout] {
  border: 1px solid var(--v3-line-2);
  border-radius: 999px;
  background: var(--v3-glass);
  color: var(--v3-text);
}
html.site-v3.public-site-redesign .music-library-tools button[data-layout].is-active {
  border-color: transparent;
  background: linear-gradient(90deg, var(--sec), var(--sec-2));
  color: #fff;
}

html.site-v3.public-site-redesign .community-empty-state {
  border: 1px dashed var(--v3-line-2);
  border-radius: 18px;
  background: rgba(255, 255, 255, .02);
}
html.site-v3.public-site-redesign .community-account-link { color: var(--sec); }

html.site-v3.public-site-redesign :is(.track-grid, .album-grid) > .empty-state {
  border: 1px dashed var(--v3-line-2);
  border-radius: 20px;
  background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--sec) 14%, transparent), transparent 60%), rgba(255, 255, 255, .02);
  color: var(--v3-text);
}
html.site-v3.public-site-redesign :is(.track-grid, .album-grid) > .empty-state p:not(.eyebrow) { color: var(--v3-muted); }

/* Klips */
html.site-v3.public-site-redesign .clip-deck-nav {
  border: 1px solid var(--v3-line);
  border-radius: 999px;
  background: var(--v3-glass-strong);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
html.site-v3.public-site-redesign .clip-deck-nav button { border-radius: 999px; }
html.site-v3.public-site-redesign .clip-heading .eyebrow { color: var(--sec); }
html.site-v3.public-site-redesign .clip-stage { background: transparent; }
html.site-v3.public-site-redesign .page-heading.clip-heading {
  width: min(1180px, calc(100% - 40px));
  max-width: none;
  margin: 0 auto 18px;
  padding-left: clamp(18px, 4vw, 40px);
}
@media (max-width: 560px) {
  html.site-v3.public-site-redesign .page-heading.clip-heading { width: calc(100% - 24px); }
}

/* Radio */
html.site-v3.public-site-redesign .radio-station {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--sec) 26%, transparent);
  background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--sec-2) 18%, transparent), transparent 55%), var(--v3-glass);
}
html.site-v3.public-site-redesign .station-topline > :first-child::before {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  content: "";
  border-radius: 50%;
  background: #ff3b4e;
  box-shadow: 0 0 10px #ff3b4e;
  vertical-align: middle;
  animation: v3-onair 1.4s ease-in-out infinite;
}

/* ---------- Jeux ---------- */
html.site-v3.public-site-redesign .game-library-brand img { filter: drop-shadow(0 0 30px rgba(255, 200, 90, .35)); animation: v3-float 6s ease-in-out infinite; }
html.site-v3.public-site-redesign .web-game-banner-grid { gap: 18px; }
html.site-v3.public-site-redesign .web-game-banner-grid > a {
  border: 1px solid var(--v3-line);
  border-radius: 24px;
  box-shadow: 0 22px 48px -26px var(--game-glow, #ff6a3d);
  transition: transform .3s var(--v3-ease), box-shadow .3s ease, border-color .25s ease;
}
html.site-v3.public-site-redesign .web-game-banner-grid > a:nth-child(1) { --game-glow: #5b8cff; }
html.site-v3.public-site-redesign .web-game-banner-grid > a:nth-child(2) { --game-glow: #c34dff; }
html.site-v3.public-site-redesign .web-game-banner-grid > a:nth-child(3) { --game-glow: #ff6a3d; }
html.site-v3.public-site-redesign .web-game-banner-grid > a:nth-child(4) { --game-glow: #53e6a5; }
html.site-v3.public-site-redesign .web-game-banner-grid > a:nth-child(5) { --game-glow: #2f7dff; }
html.site-v3.public-site-redesign .web-game-banner-grid > a:hover {
  border-color: color-mix(in srgb, var(--game-glow) 60%, transparent);
  box-shadow: 0 28px 60px -24px var(--game-glow);
  transform: translateY(-4px);
}
html.site-v3.public-site-redesign .web-game-banner-grid > a::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .6));
  pointer-events: none;
}
html.site-v3.public-site-redesign .web-game-banner-grid > a:not(.is-target)::after {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  padding: 9px 18px;
  content: "JOUER ▶";
  border-radius: 999px;
  background: var(--v3-cta);
  color: #1d0a00;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
  box-shadow: 0 8px 22px rgba(255, 106, 61, .5);
  transition: transform .25s var(--v3-ease);
}
html.site-v3.public-site-redesign .web-game-banner-grid > a:hover::after { transform: scale(1.06); }
html.site-v3.public-site-redesign .web-game-banner-grid > a.is-target span { z-index: 2; }
html.site-v3.public-site-redesign .web-game-banner-grid img { transition: transform .6s var(--v3-ease); }
html.site-v3.public-site-redesign .web-game-banner-grid > a:hover img { transform: scale(1.04); }

/* ---------- Boutique, panier, paiement ---------- */
html.site-v3.public-site-redesign .product-grid { gap: 16px; }
html.site-v3.public-site-redesign .product-card .product-art { background: #fff; }
html.site-v3.public-site-redesign .product-card .eyebrow { color: var(--sec); }
html.site-v3.public-site-redesign .product-card .price {
  background: linear-gradient(90deg, #ffd46a, #ff9f1c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 950;
}
html.site-v3.public-site-redesign .product-card .fake-buy {
  background: linear-gradient(90deg, var(--sec), var(--sec-2));
  color: #1d0a00;
  box-shadow: 0 10px 24px -12px var(--sec);
}
html.site-v3.public-site-redesign .checkout-summary {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--v3-bg-2), var(--v3-bg-2)) padding-box,
    linear-gradient(135deg, var(--sec), var(--sec-2)) border-box;
}
html.site-v3.public-site-redesign .summary-line.total strong {
  background: linear-gradient(90deg, var(--v3-text), #ffd46a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Kompte, légal, kontact ---------- */
html.site-v3.public-site-redesign .account-profile-panel { overflow: hidden; }
html.site-v3.public-site-redesign .account-profile-stats > div {
  border: 1px solid var(--v3-line);
  border-radius: 18px;
  background: var(--v3-glass);
}
html.site-v3.public-site-redesign .account-danger-panel { border-color: rgba(255, 59, 78, .3); }
html.site-v3.public-site-redesign .legal-card { transition: border-color .25s ease, transform .3s var(--v3-ease); }
html.site-v3.public-site-redesign .legal-card:hover { border-color: color-mix(in srgb, var(--sec) 40%, transparent); transform: translateY(-2px); }
html.site-v3.public-site-redesign .legal-card h2 { color: var(--sec); }

/* ---------- Lecteur global ---------- */
html.site-v3.public-site-redesign .global-music-player {
  border: 1px solid var(--v3-line-2);
  background: linear-gradient(90deg, color-mix(in srgb, var(--sec) 14%, transparent), transparent 45%), var(--v3-glass-strong);
  color: var(--v3-text);
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .03) inset;
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
}
html.site-v3.public-site-redesign .global-music-player:not(.is-collapsed) { border-radius: 24px; }
html.site-v3.public-site-redesign .global-player-track img { border-radius: 12px; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .8); }
html.site-v3.public-site-redesign :is(.global-player-button, .global-player-close, .global-player-reopen) { border-radius: 999px; }
html.site-v3.public-site-redesign .global-player-button.is-primary {
  border: 0;
  background: var(--v3-cta);
  color: #1d0a00;
  box-shadow: 0 8px 22px -8px rgba(255, 106, 61, .9);
}
html.site-v3.public-site-redesign .global-player-button[aria-pressed="true"] { color: var(--sec); }
html.site-v3.public-site-redesign .global-music-player input[type="range"] { accent-color: #ff6a3d; }

/* Le contenu ne passe pas sous le lecteur ouvert. */
html.site-v3.public-site-redesign body:has(.global-music-player:not([hidden]):not(.is-collapsed)) { padding-bottom: 120px; }
@media (max-width: 1099px) {
  html.site-v3.public-site-redesign body:has(.global-music-player:not([hidden]):not(.is-collapsed)) { padding-bottom: calc(250px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- 404 ---------- */
html.site-v3.public-site-redesign .not-found-page h1 { font-size: clamp(2.4rem, 11vw, 6rem); overflow-wrap: anywhere; }
html.site-v3.public-site-redesign .not-found-page .eyebrow { color: #c79bff; }

/* Commandes du lecteur bien centrées : colonnes latérales égales, et le bouton de file d'attente
   sort du groupe pour que Lecture soit pile au milieu (2 boutons de chaque côté). */
@media (min-width: 621px) {
  html.site-v3.public-site-redesign .global-music-player:not(.is-collapsed) { grid-template-columns: minmax(0, 1fr) minmax(300px, 520px) minmax(0, 1fr); }
  html.site-v3.public-site-redesign .global-player-volume { justify-self: end; }
}
html.site-v3.public-site-redesign .global-player-main { align-items: stretch; }
html.site-v3.public-site-redesign .global-player-actions { position: relative; width: 100%; justify-content: center; }
html.site-v3.public-site-redesign .global-player-actions .queue-toggle { position: absolute; top: 50%; right: 0; transform: translateY(-50%); }

/* ---------- Pied de page ---------- */
html.site-v3.public-site-redesign .site-footer {
  position: relative;
  border-top: 1px solid var(--v3-line);
  background:
    radial-gradient(60% 120% at 0% 0%, color-mix(in srgb, var(--sec) 10%, transparent), transparent 60%),
    linear-gradient(180deg, transparent, rgba(0, 0, 0, .25)), var(--v3-bg);
  color: var(--v3-text);
}
html.site-v3[data-theme="light"]:not([data-night="true"]).public-site-redesign .site-footer { background: var(--v3-bg-2); }
html.site-v3.public-site-redesign .site-footer > div span {
  background: linear-gradient(90deg, var(--v3-text), #ffb347);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html.site-v3.public-site-redesign .site-footer p,
html.site-v3.public-site-redesign .site-footer small { color: var(--v3-muted); }
html.site-v3.public-site-redesign .site-footer .footer-link {
  padding: 8px 14px;
  border: 1px solid var(--v3-line);
  border-radius: 999px;
  background: var(--v3-glass);
  color: var(--v3-text);
  transition: border-color .2s ease, background .2s ease;
}
html.site-v3.public-site-redesign .site-footer .footer-link:hover { border-color: color-mix(in srgb, var(--sec) 55%, transparent); color: var(--v3-text); }
html.site-v3.public-site-redesign .site-footer nav { flex-wrap: wrap; gap: 8px; }
.site-footer-socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.site-footer-socials a {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 6px;
  padding: 0 13px;
  border: 1px solid var(--v3-line, rgba(255, 255, 255, .12));
  border-radius: 999px;
  background: var(--v3-glass, rgba(255, 255, 255, .05));
  color: inherit;
  font-size: .72rem;
  font-weight: 850;
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}
.site-footer-socials a:hover { border-color: #ff6a3d; transform: translateY(-1px); }
.site-footer-socials a.is-youtube:hover { border-color: #ff0033; }

/* ---------- Apparition douce des blocs ---------- */
html.site-v3.public-site-redesign .page-view.active { animation: none; }
html.site-v3.public-site-redesign .page-view.active:not(#clipsPage) > :not(.page-shell),
html.site-v3.public-site-redesign .page-view.active > .page-shell > * {
  animation: v3-rise .55s var(--v3-ease) backwards;
}
html.site-v3.public-site-redesign .page-view.active > :nth-child(2),
html.site-v3.public-site-redesign .page-view.active > .page-shell > :nth-child(2) { animation-delay: .06s; }
html.site-v3.public-site-redesign .page-view.active > :nth-child(3),
html.site-v3.public-site-redesign .page-view.active > .page-shell > :nth-child(3) { animation-delay: .12s; }
html.site-v3.public-site-redesign .page-view.active > :nth-child(n + 4),
html.site-v3.public-site-redesign .page-view.active > .page-shell > :nth-child(n + 4) { animation-delay: .18s; }

@keyframes v3-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes v3-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes v3-onair { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------- Fluidité ----------
   Sur téléphone et tablette, chaque flou d'arrière-plan est recalculé à chaque image du défilement :
   on les remplace par des fonds presque opaques. Les effets de survol ne servent qu'à la souris. */
/* Partout (ordinateur compris) : un flou d'arrière-plan sous un élément collant ou fixe est recalculé
   à chaque image du défilement (en-tête, barre d'onglets, lecteur). Fonds presque opaques à la place. */
html.site-v3 { --v3-header: rgba(13, 14, 17, .95); --v3-glass-strong: rgba(22, 23, 29, .97); }
html.site-v3[data-theme="light"]:not([data-night="true"]) { --v3-header: rgba(250, 248, 245, .97); --v3-glass-strong: rgba(255, 255, 255, .97); }
html.site-v3 *,
html.site-v3 *::before,
html.site-v3 *::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html.site-v3.public-site-redesign .global-music-player { background: linear-gradient(90deg, color-mix(in srgb, var(--sec) 14%, #16171d), #16171d 45%); }
/* Le halo de fond fixe vit sur sa propre couche : il n'est plus redessiné pendant le défilement. */
html.site-v3 body::before { transform: translateZ(0); will-change: transform; }
/* Les lecteurs SoundCloud intégrés (iframes lourdes) ne sont dessinés que près de l'écran. */
html.site-v3.public-site-redesign :is(.soundcloud-panel, .community-playlists-panel) { content-visibility: auto; contain-intrinsic-size: auto 700px; }
@media (hover: none) {
  html.site-v3 :is(.track-card, .album-card, .community-playlist-card, .product-card, .web-game-banner-grid > a, .daily-vote-card-option, .home-simple-stats > button, .legal-card, .social-post, .social-post-action, .social-member-row, .social-trend-row, #webAppMissions > button):hover,
  html.site-v3 :is(.track-card, .album-card, .product-card, .web-game-banner-grid > a):hover img {
    transform: none;
  }
}
/* Pendant le défilement, aucun survol n'est recalculé (classe posée par site-app-features.js). */
html.site-v3.is-scrolling main,
html.site-v3.is-scrolling .site-footer { pointer-events: none; }

/* Les cartes hors écran ne sont ni mises en page ni dessinées. */
html.site-v3 :is(.product-card, .legal-card) { content-visibility: auto; contain-intrinsic-size: auto 360px; }
html.site-v3 body[data-page="social"] .social-feed > .social-post { content-visibility: auto; contain-intrinsic-size: auto 260px; }

/* Mouvement réduit : on coupe seulement les animations de cette couche (le site garde ses propres
   animations d'apparition, qui doivent aller au bout pour rendre les blocs visibles). */
@media (prefers-reduced-motion: reduce) {
  html.site-v3.public-site-redesign .page-view.active > *,
  html.site-v3.public-site-redesign .page-view.active > .page-shell > *,
  html.site-v3.public-site-redesign :is(.page-heading, .home-simple-hero)::after,
  html.site-v3.public-site-redesign .game-library-brand img,
  html.site-v3.public-site-redesign .station-topline > :first-child::before,
  html.site-v3 .web-hero-shooting,
  html.site-v3 .web-hero-sky svg {
    animation: none !important;
  }
  html.site-v3 .web-hero-birds { display: none !important; }
  /* L'image d'accueil reste vivante, en plus doux : lumière et étoiles qui scintillent,
     nuages lents, dérive à peine perceptible. Pas d'oiseaux ni d'étoile filante. */
  /* !important : styles.css ramène sinon toutes les animations à 0,01 ms en mouvement réduit. */
  html.site-v3.public-site-redesign .web-living-hero > .web-living-hero-image { animation: web-hero-drift-soft 30s ease-in-out infinite alternate !important; }
  html.site-v3.public-site-redesign .web-living-hero .web-hero-glow { animation: web-hero-breathe-soft 8s ease-in-out infinite alternate !important; }
  html.site-v3.public-site-redesign .web-living-hero .web-hero-star { animation-duration: 3.2s !important; animation-iteration-count: infinite !important; }
  html.site-v3.public-site-redesign .web-living-hero .web-hero-star:nth-child(3n) { animation-duration: 4.4s !important; }
  html.site-v3.public-site-redesign .web-living-hero .web-hero-star:nth-child(3n + 1) { animation-duration: 2.6s !important; }
  html.site-v3.public-site-redesign .web-living-hero .web-hero-cloud { animation-iteration-count: infinite !important; }
  html.site-v3.public-site-redesign .web-living-hero .web-hero-cloud.is-one { animation-duration: 46s !important; }
  html.site-v3.public-site-redesign .web-living-hero .web-hero-cloud.is-two { animation-duration: 64s !important; }
  html.site-v3.public-site-redesign .web-living-hero .web-hero-cloud.is-three { animation-duration: 82s !important; }

  html.site-v3 *,
  html.site-v3 *::before,
  html.site-v3 *::after {
    transition-duration: .01ms !important;
  }

  html.site-v3.public-site-redesign :is(.track-card, .album-card, .community-playlist-card, .product-card, .web-game-banner-grid > a, .daily-vote-card-option, .home-simple-stats > button, .legal-card, .button, .fake-buy):hover,
  html.site-v3.public-site-redesign :is(.track-card, .album-card, .product-card, .web-game-banner-grid > a):hover img {
    transform: none;
  }
}

/* ---------- Lecteur : Vinyle et Kafmoments, comme dans l'app (site-app-extras.js) ---------- */
html.site-v3 .global-player-extras { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
html.site-v3 .global-player-extras .hub-player-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; min-width: 26px; justify-content: center; padding: 0 6px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; background: rgba(255, 255, 255, .05); color: rgba(255, 255, 255, .86); font: inherit; font-size: .64rem; font-weight: 800; cursor: pointer; }
/* Icônes seules : la colonne du titre est étroite. Le texte reste lu par les lecteurs d'écran. */
html.site-v3 .global-player-extras .hub-player-chip span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html.site-v3 .global-player-extras { flex-wrap: wrap; }
html.site-v3 .global-player-extras .hub-player-chip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
html.site-v3 .global-player-extras .kafmoment-open svg { fill: currentColor; stroke: none; }
html.site-v3 .global-player-extras .hub-player-chip:is([aria-pressed="true"], [aria-expanded="true"]) { border-color: rgba(255, 106, 61, .7); background: rgba(255, 106, 61, .14); color: #ff6a3d; }
html.site-v3 .global-player-extras .kafmoment-open b { min-width: 16px; height: 16px; font-size: .58rem; }
html.site-v3 .global-player-seek { position: relative; display: flex; flex: 1; min-width: 0; align-items: center; }
html.site-v3 .global-player-seek > input { width: 100%; }
html.site-v3 .global-player-seek .kafmoment-markers { top: -6px; right: 6px; left: 6px; }

/* Les bulles montent juste au-dessus du lecteur ; la fenêtre Kafmoment s'ouvre au-dessus aussi. */
html.site-v3 .global-player-moments { position: absolute; left: 0; bottom: 100%; width: min(360px, 100%); height: 170px; pointer-events: none; }
html.site-v3 .global-player-moments .kafmoment-bubble { bottom: 10px; }
html.site-v3 .global-music-player.is-collapsed .global-player-moments { display: none; }
html.site-v3 .global-music-player .kafmoment-composer { left: auto; right: 0; bottom: calc(100% + 10px); width: min(400px, calc(100vw - 20px)); }
@media (max-width: 620px) {
  html.site-v3 .global-music-player .kafmoment-composer { left: 0; width: auto; }
}

/* Mode vinyle : la pochette devient un disque qui tourne ; on l'attrape pour scratcher. */
html.site-v3 .global-player-disc { position: relative; display: block; flex: 0 0 auto; border-radius: 12px; touch-action: none; }
html.site-v3 .global-music-player.is-vinyl .global-player-disc { overflow: hidden; border-radius: 50%; background: repeating-radial-gradient(circle, #111 0 2px, #1b1b1d 2px 3px); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .8); cursor: grab; }
html.site-v3 .global-music-player.is-vinyl .global-player-disc::after { position: absolute; inset: 0; content: ""; border-radius: 50%; background: radial-gradient(circle, #0c0d10 0 4%, transparent 4.4% 34%, rgba(255, 255, 255, .08) 34.5%, transparent 36%), conic-gradient(from 30deg, transparent 0 10%, rgba(255, 255, 255, .1) 14%, transparent 20% 60%, rgba(255, 255, 255, .08) 64%, transparent 70%); pointer-events: none; }
html.site-v3 .global-music-player.is-vinyl .global-player-track img { display: block; border: 0; border-radius: 50%; box-shadow: none; clip-path: circle(34% at 50% 50%); }
/* !important : styles.css ramène sinon toutes les animations à 0,01 ms en mouvement réduit. */
html.site-v3.public-site-redesign #globalMusicPlayer.is-vinyl.is-playing .global-player-track img { animation: site-vinyl-spin 6s linear infinite !important; }
html.site-v3.public-site-redesign #globalMusicPlayer.is-vinyl.is-scratching .global-player-track img { animation: none !important; will-change: transform; }
html.site-v3 .global-music-player.is-scratching .global-player-disc { cursor: grabbing; transform: scale(.96); }
@keyframes site-vinyl-spin { to { transform: rotate(360deg); } }

/* Petit message des modules partagés avec l'app. */
.site-shared-toast { position: fixed; z-index: 200; left: 50%; bottom: calc(150px + env(safe-area-inset-bottom, 0px)); max-width: min(420px, calc(100vw - 32px)); padding: 10px 16px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; background: rgba(16, 17, 22, .96); color: #fff; font-size: .82rem; font-weight: 700; text-align: center; box-shadow: 0 14px 40px rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; transform: translate(-50%, 8px); transition: opacity .2s, transform .2s; }
.site-shared-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.site-shared-toast.is-error { border-color: rgba(255, 92, 138, .5); }