/* ============================================================
   Hub v687 — VUE D'ENSEMBLE : couleurs qui suivent l'apparence (--accent / html[data-theme])
   + motion design sobre (cascade, barres qui se dessinent) + bulles flottantes harmonisees.
   Charge APRES hub-v435.css et fx.css (surcharges ciblees, aucune mise en page refaite).
   ============================================================ */
:root { --ovm-a: rgb(var(--accent-rgb)); --ovm-ease: cubic-bezier(.22, 1, .36, 1); }

/* ---------- couleurs : plus aucun violet fixe ---------- */
html[data-ovmode] #sidebar { background: linear-gradient(180deg, rgba(var(--accent-rgb), .05), transparent 40%), var(--bg-secondary); }
:root[data-theme="neutre"][data-ovmode] #sidebar { background: rgba(0, 0, 0, .6); }
.ovm-it.on { background: linear-gradient(90deg, rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), .03)); box-shadow: inset 2px 0 0 var(--ovm-a); }
.ovm-it { transition: background .25s var(--ovm-ease), color .25s, box-shadow .25s; }
.ovm-gi { background: rgba(var(--accent-rgb), .12); color: var(--ovm-a); }
.ovm-it > .ovm-pd { flex: none; }   /* les pastilles de plateforme ne s'etirent plus */
.ovm-hb, .ovm-hb[style] { background: linear-gradient(145deg, rgba(var(--accent-rgb), .9), rgba(var(--accent-rgb), .35)); box-shadow: 0 10px 28px rgba(var(--accent-rgb), .22); color: var(--bg-primary, #000); }
:root:not([data-theme="neutre"]):not([data-theme="clair"]) .ovm-hb { color: #fff; }
.ovm-hero { --ovc: var(--ovm-a); background: radial-gradient(600px 240px at 0% 0%, rgba(var(--accent-rgb), .10), transparent 70%), rgba(255, 255, 255, .025); }
.ovm-big { background: linear-gradient(90deg, var(--text-primary), color-mix(in srgb, var(--ovm-a) 55%, var(--text-primary))); -webkit-background-clip: text; background-clip: text; }
.ovm-k > span:not(.ovm-ki) { color: var(--text-secondary); }
.ovm-k.good b { color: var(--up, #34d399); }
em.up { color: var(--up, #34d399) !important; } em.down { color: var(--down, #f87171) !important; }
.ovm-pro, .ovm-champ { background: linear-gradient(135deg, rgba(var(--accent-rgb), .12), rgba(255, 255, 255, .02)); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .26); }
.ovm-pro b { color: var(--text-primary); }
.ovm-crown { color: var(--ovm-a); }
.ovm-al { background: rgba(var(--accent-rgb), .06); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .2); }
.ovm-al > span { color: var(--ovm-a); }
.ovm-al.hot { background: rgba(248, 113, 113, .08); box-shadow: inset 0 0 0 1px rgba(248, 113, 113, .32); }
.ovm-al.hot > span { color: #f87171; }
:root[data-theme="neutre"] .ovm-al.hot { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
:root[data-theme="neutre"] .ovm-al.hot > span { color: #fff; }
.ovm-al.more { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--border); }
.ovm-bt { --ovc: var(--ovm-a); }
.ovm-bt i { background: var(--ovm-a); }
.ovm-share i { background: var(--ovm-a); }
.ovm-pc, .ovm-pod, .ovm-soon { --pc: var(--ovm-a) !important; }
.ovm-pc { background: rgba(255, 255, 255, .025); box-shadow: inset 0 0 0 1px var(--border); }
.ovm-pc:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .4), 0 12px 28px rgba(0, 0, 0, .28); }
.ovm-pod { background: radial-gradient(200px 120px at 50% 0%, rgba(var(--accent-rgb), .10), transparent 70%), rgba(255, 255, 255, .03); }
.ovm-pod.p1 { box-shadow: inset 0 0 0 1.5px rgba(var(--accent-rgb), .45), 0 18px 44px rgba(0, 0, 0, .3); }
.ovm-dow i { background: rgba(var(--accent-rgb), .3); }
.ovm-dow i.best { background: var(--ovm-a); box-shadow: 0 0 14px rgba(var(--accent-rgb), .35); }
.ovm-soon { background: radial-gradient(400px 200px at 50% 0%, rgba(var(--accent-rgb), .10), transparent 70%), rgba(255, 255, 255, .02); }
.ovm-soon .ovm-pd { box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
:root[data-theme="clair"] .ovm-hero, :root[data-theme="clair"] .ovm-card, :root[data-theme="clair"] .ovm-k, :root[data-theme="clair"] .ovm-pc { background: #fff; box-shadow: inset 0 0 0 1px var(--border); }

/* ---------- petits alignements ---------- */
.ovm-bars { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(60px, 1fr) auto; column-gap: 12px; row-gap: 9px; align-items: center; }
.ovm-bars > .ovm-bar { display: contents; }
.ovm-bar > b { text-align: right; font-variant-numeric: tabular-nums; }
.ovm-big, .ovm-k b, .ovm-pc strong, .ovm-pod strong { font-variant-numeric: tabular-nums; }
:root[data-theme="neutre"] .ovm-medal { background: linear-gradient(180deg, #d4d4d4, #8a8a8a); }
:root[data-theme="neutre"] .ovm-pod.p1 .ovm-medal { background: linear-gradient(180deg, #fff, #cfcfcf); }
:root[data-theme="neutre"] .ovm-pod.p3 .ovm-medal { background: linear-gradient(180deg, #9a9a9a, #5a5a5a); color: #f5f5f5; }
.ovm-head .ovm-top { margin-left: auto; }
.ovm-split { margin-top: 18px; }
.ovm-pc { align-items: stretch; } .ovm-pc > * { align-self: flex-start; } .ovm-pc .ovm-share { align-self: stretch; }

/* ---------- transition de page (sans flou, plus courte) ---------- */
:root:not([data-theme="classique"]) #page-overview.page.active { animation: ovmPage .42s var(--ovm-ease) both; }
@keyframes ovmPage { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- apparitions en cascade (seulement ce qui est a l'ecran) ---------- */
#ov-root .ovm-rv { opacity: 0; transform: translateY(12px); transition: opacity .55s var(--ovm-ease), transform .65s var(--ovm-ease); transition-delay: calc(var(--d, 0) * 45ms); }
#ov-root .ovm-rv.in { opacity: 1; transform: none; }
#ov-root.ovm-soft .ovm-rv { transform: none; transition-duration: .3s; transition-delay: 0ms; }
/* barres qui se dessinent */
#ov-root .ovm-rv .ovm-bt i, #ov-root .ovm-rv .ovm-share i { transform: scaleX(0); transform-origin: left center; transition: transform .9s var(--ovm-ease); transition-delay: calc(var(--d, 0) * 55ms + 160ms + var(--j, 0) * 45ms); }
#ov-root .ovm-rv.in .ovm-bt i, #ov-root .ovm-rv.in .ovm-share i { transform: none; }
#ov-root .ovm-rv .ovm-split { clip-path: inset(0 100% 0 0 round 99px); transition: clip-path 1s var(--ovm-ease) calc(var(--d, 0) * 55ms + 200ms); }
#ov-root .ovm-rv.in .ovm-split { clip-path: inset(0 0 0 0 round 99px); }
#ov-root .ovm-rv .ovm-dow i { transform: scaleY(0); transform-origin: center bottom; transition: transform .8s var(--ovm-ease); transition-delay: calc(var(--d, 0) * 55ms + 150ms + var(--j, 0) * 40ms); }
#ov-root .ovm-rv.in .ovm-dow i { transform: none; }
#ov-root.ovm-out { opacity: 0; transform: translateY(4px); transition: opacity .14s ease, transform .14s ease; }
.ovm-seg button { transition: background .25s var(--ovm-ease), color .2s; }
@media (prefers-reduced-motion: reduce) {
  #ov-root .ovm-rv, #ov-root .ovm-rv * { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  #page-overview.page.active { animation: none !important; }
}

/* ---------- bulles flottantes : meme forme, meme taille, empilees ---------- */
:root { --hfs: 50px; }
@media (max-width: 760px) { :root { --hfs: 46px; } }
.hv-btn, #hp .hp-pill {
  width: var(--hfs) !important; height: var(--hfs) !important; max-width: none !important; padding: 0 !important; border-radius: 50% !important;
  display: grid !important; place-items: center; gap: 0; color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .05)), rgba(18, 18, 22, .55) !important;
  border: 1px solid rgba(255, 255, 255, .2) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 28px rgba(0, 0, 0, .45) !important;
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  transition: top .38s var(--ovm-ease), left .38s var(--ovm-ease), transform .3s var(--ovm-ease), box-shadow .3s, background .3s !important;
}
.hv-btn.hf-drag { transition: none !important; }
.hv-btn:hover, #hp .hp-pill:hover { transform: scale(1.06) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 0 1px rgba(255, 255, 255, .06), 0 12px 32px rgba(0, 0, 0, .5) !important; }
:root[data-theme="clair"] .hv-btn, :root[data-theme="clair"] #hp .hp-pill { background: rgba(13, 18, 32, .86) !important; }
#hp .hp-mini { display: none !important; }
#hp .hp-eq { width: 18px; }
#hp:not(.on) .hp-eq i:nth-child(1) { height: 40%; } #hp:not(.on) .hp-eq i:nth-child(2) { height: 85%; } #hp:not(.on) .hp-eq i:nth-child(3) { height: 60%; } #hp:not(.on) .hp-eq i:nth-child(4) { height: 75%; }
#hp:not(.on) .hp-eq i { box-shadow: none; opacity: .9; }
.hv-btn svg { width: 20px; height: 20px; }
.hv-btn i { border-color: rgba(var(--accent-rgb), .55); }
/* position par defaut (avant placement) : assistant au-dessus du lecteur, meme colonne */
#hp { right: 18px; bottom: 18px; }
.hv-btn { right: 18px; bottom: calc(18px + var(--hfs) + 14px); }
.hf.hf-placed { right: auto; }
.hf:not(.hf-drag) { transition: top .38s var(--ovm-ease), left .38s var(--ovm-ease), transform .35s var(--ovm-ease), opacity .25s; }
/* panneau de l'assistant : couleurs de l'apparence */
.hv-top { background: radial-gradient(300px 100px at 0% 0%, rgba(var(--accent-rgb), .12), transparent 70%); }
.hv-orb { background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.hv-orb span { background: var(--ovm-a); }
.hv-hint button:hover { background: rgba(var(--accent-rgb), .14); }
.hv-m.me { background: rgba(var(--accent-rgb), .2); color: var(--text-primary); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .3); }
.hv-act { color: var(--ovm-a); }
.hv-mic { background: rgba(var(--accent-rgb), .22); color: var(--text-primary); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .35); }
.hv-panel[data-st="listen"] .hv-mic { background: linear-gradient(145deg, #f87171, #dc2626); color: #fff; }
.hv-panel.hf-pos { right: auto; bottom: auto; }
:root[data-theme="clair"] .ovm-bt, :root[data-theme="clair"] .ovm-share { background: rgba(15, 23, 42, .07); }