/* ============================================================
   Hub v795 — RETOUCHES DU 08/11 SOIR (agent retouches-perf-0811, demande de SHINO)
   1) Fluidite : plus de flou d'arriere-plan (backdrop-filter) sur les elements repetes (cartes, pastilles, badges, bulles) :
      chaque flou etait recalcule a chaque image du fond anime -> saccades, surtout dans Liens fournisseurs (400 cartes).
   2) Touche orange du theme « Hub » : Radar Niches, Œil des Niches, Incubateur (meme style « nx »), Shop, En direct.
   3) Vue d'ensemble : memes entrees animees que les pages Vinted.
   4) Voile « Bientot disponible » : fenetre centree dans la zone de contenu, voile opaque (sans le menu de gauche).
   5) Shop sur telephone : rangee des plateformes qui defile au lieu d'etre coupee.
   ============================================================ */

/* ---------- 1) fluidite ---------- */
:is(.sl-badge, .nx-tag, .nx-sc, .rd-sc, .rd-tag, .mk-pill, .md-p .rk, .ea-gsel, .dr-vboost, .rp-c-b.vd-badge, .cl-k, .sh-pills span, .sh-card, .sh-plats, .nx-glass, .acx-s span) {
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
:root:not([data-theme="classique"]) .message.received { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.nx-glass { background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)), rgba(12,12,12,.72) !important; }
.sh-card { background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)), rgba(12,12,12,.78) !important; }
.nx-tag, .nx-sc { background: rgba(10,10,11,.86) !important; }
/* animations permanentes : seulement transform / opacite (calculees par la carte graphique, sans repeindre la page) */
.nx-mq { will-change: transform; }
.nx-mark { will-change: translate; }
.account-item.acc-live .account-dot { animation-name: rtBeat !important; box-shadow: 0 0 6px #34d399 !important; }
@keyframes rtBeat { 50% { opacity: .45; } }

/* ---------- 2) touche orange (theme Hub) : Radar Niches, Œil des Niches, Incubateur ---------- */
:root[data-look="hub"] .nx-hero {
  border-color: rgba(255,138,91,.22) !important;
  background: radial-gradient(70% 120% at 92% 18%, rgba(255,138,91,.16), rgba(255,138,91,0) 60%), radial-gradient(60% 90% at 0% 100%, rgba(255,138,91,.06), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 30px 80px -40px rgba(255,120,60,.35);
}
:root[data-look="hub"] .nx-lab { color: rgba(255,170,130,.85) !important; }
:root[data-look="hub"] .nx-h1 em { background: linear-gradient(180deg, #ffd2bd, #ff8a5b 75%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
:root[data-look="hub"] .nx-mq { color: rgba(255,138,91,.045) !important; }
:root[data-look="hub"] .nx-mark { color: #ffb08f; }
:root[data-look="hub"] :is(.nx-seg button.on, .nx-pill.on) { background: linear-gradient(180deg, #ff9a70, #f2733f) !important; color: #140a05 !important; border-color: transparent !important; box-shadow: 0 6px 18px -8px rgba(255,120,60,.7); }
:root[data-look="hub"] .nx-btn:not(.ghost) { background: linear-gradient(180deg, #ff9a70, #f2733f) !important; color: #140a05 !important; }
:root[data-look="hub"] .nx-btn.ghost:hover, :root[data-look="hub"] .nx-pill:not(.on):hover { border-color: rgba(255,138,91,.5) !important; }
:root[data-look="hub"] .nx-bar i { background: linear-gradient(90deg, #ffb08f, #ff8a5b) !important; }
:root[data-look="hub"] .nx-n .ln i { background: linear-gradient(90deg, #ffb08f, #ff8a5b) !important; }
:root[data-look="hub"] :is(.nx-c, .nx-n, .nx-chx):hover { border-color: rgba(255,138,91,.45) !important; box-shadow: 0 18px 40px -22px rgba(255,120,60,.55); }
:root[data-look="hub"] .nx-c .pr b { color: #fff; }
:root[data-look="hub"] .nx-sc { box-shadow: inset 0 0 0 1.5px rgba(255,138,91,.75); color: #ffd2bd; }
:root[data-look="hub"] .nx-glass { border-color: rgba(255,255,255,.08) !important; }
:root[data-look="hub"] .nx-glass:first-of-type { border-color: rgba(255,138,91,.14) !important; }
:root[data-look="hub"] .nx-go:hover { background: rgba(255,138,91,.18) !important; border-color: rgba(255,138,91,.5) !important; }
:root[data-look="hub"] #ib-root :is(.ib-live i, .nx-dot.run) { background: #ff8a5b !important; }
:root[data-look="hub"] #ib-root .ib-sc { border-color: rgba(255,138,91,.14) !important; }

/* ---------- 2b) Shop : touche orange ---------- */
:root[data-look="hub"] #page-shop .sh-hero h1 i { background: linear-gradient(180deg, #ffd2bd, #ff8a5b 80%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .08em; }
:root[data-look="hub"] #page-shop .sh-label { color: rgba(255,170,130,.85); }
:root[data-look="hub"] #page-shop .sh-hero { background: radial-gradient(50% 80% at 78% 40%, rgba(255,138,91,.13), transparent 70%); border-radius: 28px; }
:root[data-look="hub"] #page-shop .sh-hero-mark { filter: drop-shadow(0 20px 50px rgba(255,120,60,.28)); }
:root[data-look="hub"] #page-shop :is(.sh-plats button.on, .sh-seg button.on) { background: linear-gradient(180deg, #ff9a70, #f2733f) !important; color: #140a05 !important; }
:root[data-look="hub"] #page-shop .sh-pills span:first-child { border-color: rgba(255,138,91,.45); color: #ffd2bd; background: rgba(255,138,91,.08); }
:root[data-look="hub"] #page-shop .sh-card.hl { border-color: rgba(255,138,91,.55) !important; background: radial-gradient(120% 70% at 50% 0%, rgba(255,138,91,.14), transparent 60%), rgba(14,14,14,.85) !important; box-shadow: 0 0 0 1px rgba(255,138,91,.15), 0 30px 80px -30px rgba(255,120,60,.45) !important; }
:root[data-look="hub"] #page-shop .sh-card:hover { border-color: rgba(255,138,91,.4) !important; }
:root[data-look="hub"] #page-shop .sh-card.hl .sh-tag { border-color: #ff8a5b; color: #ffb08f; }
:root[data-look="hub"] #page-shop .sh-card .sh-price b { color: #fff; }
:root[data-look="hub"] #page-shop .sh-cta.solid, :root[data-look="hub"] #page-shop .sh-card.hl .sh-cta { background: linear-gradient(180deg, #ff9a70, #f2733f) !important; color: #140a05 !important; border-color: transparent !important; }
:root[data-look="hub"] #page-shop .sh-cta:not(.solid):hover { border-color: rgba(255,138,91,.55); }
:root[data-look="hub"] #page-shop .sh-ck input, :root[data-look="hub"] #page-shop input[type="checkbox"] { accent-color: #ff8a5b; }

/* ---------- 5) Shop sur telephone : rangee des plateformes en defilement horizontal ---------- */
@media (max-width: 760px) {
  #page-shop .sh-plats { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box; border-radius: 18px !important; }
  #page-shop .sh-plats button { min-width: 0; padding: 8px 4px !important; font-size: 12.5px !important; line-height: 1.15; border-radius: 14px !important; display: flex; flex-direction: column; align-items: center; gap: 1px; }
  #page-shop .sh-plats em { margin-left: 0 !important; font-size: 9.5px !important; }
  #page-shop :is(.sh-seg, .sh-ctrl) { max-width: 100%; }
  #page-shop .sh-ctrl { flex-wrap: wrap; }
}

/* ---------- 3) Vue d'ensemble : entrees comme les pages Vinted (montee + leger flou, en cascade) ---------- */
#ov-root .ovm-rv { transform: translateY(18px) scale(.985); filter: blur(4px); transition: opacity .6s cubic-bezier(0.16,1,0.3,1), transform .7s cubic-bezier(0.16,1,0.3,1), filter .6s ease; transition-delay: calc(var(--d, 0) * 50ms); }
#ov-root .ovm-rv.in { transform: none; filter: none; }
#ov-root.ovm-soft .ovm-rv { transform: none; filter: none; }
#ov-root.ovm-out { opacity: 0; transform: translateY(6px); transition: opacity .15s ease, transform .15s ease; }
@media (prefers-reduced-motion: reduce) { #ov-root .ovm-rv { filter: none !important; } }

/* ---------- 4) voile « Bientot disponible » (place hors de la page, calee sur la zone de contenu) ---------- */
.page > .hub-wip.rt-moved { opacity: 0 !important; pointer-events: none !important; }
#rt-veil { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 60; display: none; align-items: center; justify-content: center; padding: 24px;
  background: radial-gradient(70% 60% at 50% 45%, rgba(20,20,20,.9), rgba(4,4,4,.97)); }
#rt-veil.on { display: flex; animation: rtVeil .35s ease both; }
@keyframes rtVeil { from { opacity: 0; } to { opacity: 1; } }
#rt-veil .hub-wip-c { position: relative; margin: 0 auto; max-width: 560px; width: 100%; text-align: center; padding: 38px 40px 32px; border-radius: 28px;
  background: linear-gradient(160deg, rgba(30,30,30,.96), rgba(12,12,12,.98)) !important; box-shadow: 0 40px 120px rgba(0,0,0,.6), inset 0 0 0 1px rgba(var(--accent-rgb, 255,138,91), .25) !important; }
#rt-veil .hub-wip-i { display: flex; justify-content: center; color: #e5e5e5; margin-bottom: 14px; }
#rt-veil .hub-wip-p { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #ffd2bd; padding: 5px 12px; border-radius: 999px; background: rgba(255,138,91,.1); box-shadow: inset 0 0 0 1px rgba(255,138,91,.35); margin-bottom: 14px; }
#rt-veil .hub-wip-p i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent, #ff8a5b); }
#rt-veil h2 { margin: 0; font-size: 40px; line-height: 1.05; font-weight: 650; letter-spacing: -.035em; color: #fff; }
#rt-veil h2 em { font-weight: 300; font-style: italic; color: var(--accent, #ff8a5b); }
#rt-veil p { margin: 14px auto 0; font-size: 14.5px; line-height: 1.6; color: rgba(240,240,240,.78); max-width: 460px; }
#rt-veil .hub-wip-t { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
#rt-veil .hub-wip-t span { font-size: 12px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); color: rgba(240,240,240,.85); }
#rt-veil .hub-wip-close { margin-top: 20px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; font: inherit; font-size: 12.5px; font-weight: 600; padding: 8px 14px; border-radius: 10px; cursor: pointer; }
:root[data-theme="clair"] #rt-veil { background: radial-gradient(70% 60% at 50% 45%, rgba(243,245,249,.92), rgba(243,245,249,.98)); }
:root[data-theme="clair"] #rt-veil .hub-wip-c { background: #fff !important; }
:root[data-theme="clair"] #rt-veil :is(h2, p, .hub-wip-t span) { color: #0d1220; }
@media (max-width: 640px) { #rt-veil .hub-wip-c { padding: 28px 20px 24px; } #rt-veil h2 { font-size: 30px; } }
.nav-item[data-page="unban"]:has(.hub-wip-b) .tu-soon { display: none !important; }

/* ---------- En direct : au niveau visuel du reste ---------- */
#page-direct > .page-header.rt-lvh { display: block !important; position: relative; overflow: hidden; border-radius: 22px; border: 1px solid rgba(255,255,255,.08); padding: 24px 26px 22px; margin: 0 0 16px;
  background: radial-gradient(60% 120% at 95% 10%, rgba(var(--accent-rgb, 255,138,91), .14), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); }
#page-direct .rt-lvh small { font: 600 10.5px/1 ui-monospace, Menlo, monospace; letter-spacing: .18em; text-transform: uppercase; color: var(--accent, #ff8a5b); display: inline-flex; align-items: center; gap: 8px; }
#page-direct .rt-lvh small i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent, #ff8a5b); animation: rtPulse 1.8s ease-in-out infinite; }
@keyframes rtPulse { 50% { opacity: .3; } }
#page-direct .rt-lvh h1 { margin: 10px 0 6px; font-size: 32px; font-weight: 300; letter-spacing: -.03em; }
#page-direct .rt-lvh h1 em { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; color: var(--accent, #ff8a5b); }
#page-direct .rt-lvh p { margin: 0; color: var(--text-secondary, #a1a1a1); font-size: 13.5px; max-width: 640px; line-height: 1.55; }
#page-direct .rt-lvh .lg-switch { position: absolute; right: 22px; top: 22px; margin: 0; }
#page-direct .lv-st { border-radius: 16px; border-color: rgba(var(--accent-rgb, 255,138,91), .25); background: linear-gradient(90deg, rgba(var(--accent-rgb, 255,138,91), .08), transparent 60%), var(--bg-card); }
#page-direct .lv-st.on .lv-dot { background: var(--accent, #ff8a5b) !important; }
#page-direct #lv-root .vd-card { border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)), var(--bg-card); }
#page-direct #lv-root .vd-card-h { font-weight: 600; letter-spacing: -.01em; }
#page-direct #lv-root .lv-logs { scrollbar-width: thin; }
#page-direct #lv-root .lv-act { border-radius: 10px; transition: background .2s; }
#page-direct #lv-root .lv-act:hover { background: rgba(255,255,255,.03); }
@media (max-width: 640px) { #page-direct .rt-lvh .lg-switch { position: static; margin-top: 12px; display: inline-flex; } #page-direct .rt-lvh h1 { font-size: 26px; } }

/* ---------- Panel admin : bouton « Ouvrir la demo » ---------- */
#hub-adm-side .rt-demo { margin-top: 8px; border: 1px solid rgba(255,138,91,.35) !important; background: linear-gradient(90deg, rgba(255,138,91,.14), rgba(255,138,91,.03)) !important; }
#hub-adm-side .rt-demo .adm-av { background: var(--accent, #ff8a5b) !important; color: #140a05 !important; }
#hub-adm-side .rt-demo small { display: block; font-size: 11px; font-weight: 500; color: var(--text-secondary, #a1a1a1); margin-top: 1px; }