/* ============================================================
   Hub v419 — habillage de toutes les pages (theme Hub / Neutre) :
   fonds animes par page, cartes en verre, espacements, animations d'entree, icones vivantes.
   Tout est scope sur :root:not([data-theme="classique"]) et sans effet sur le fonctionnement.
   ============================================================ */
#hub-bg { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; display: block; opacity: 0; transition: opacity 1.2s ease; }
#hub-bg.on { opacity: 1; }
:root[data-theme="clair"] #hub-bg, :root[data-theme="classique"] #hub-bg, body.lp-on #hub-bg { display: none; }
:root:is([data-theme="hub"], [data-theme="neutre"]) body.hub-app > .sidebar, :root:is([data-theme="hub"], [data-theme="neutre"]) body.hub-app > .main { position: relative; z-index: 1; }
:root:is([data-theme="hub"], [data-theme="neutre"]) body.hub-app .main { background: transparent; }
:root:is([data-theme="hub"], [data-theme="neutre"]) {
  --bg-card: rgba(13, 17, 34, 0.72); --bg-secondary: rgba(8, 11, 23, 0.72); --bg-hover: rgba(255, 255, 255, 0.055); --bg-input: rgba(6, 9, 20, 0.6);
}
:root[data-theme="neutre"] { --bg-card: rgba(14, 14, 14, 0.78); --bg-secondary: rgba(6,6,6,0.75); }

/* ---------- typographie et respiration ---------- */
:root:not([data-theme="classique"]) .main { padding: 28px 34px 60px; }
:root:not([data-theme="classique"]) .page-header { margin-bottom: 26px; }
:root:not([data-theme="classique"]) .page-header p, :root:not([data-theme="classique"]) .page-subtitle, :root:not([data-theme="classique"]) .an-sub { color: var(--text-secondary); font-size: 14px; }
:root:not([data-theme="classique"]) :is(.vd-card-h, .au-t, .settings-card h3, .guide-section-title, .aide-card h3) { font-weight: 500; letter-spacing: -0.01em; }
:root:not([data-theme="classique"]) .vd-card-h { font-size: 14px; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
:root:not([data-theme="classique"]) .vd-card-h::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px rgba(var(--accent-rgb), .9); flex: none; }
:root:not([data-theme="classique"]) .vd-muted { color: var(--text-secondary); }

/* ---------- cartes ---------- */
:root:not([data-theme="classique"]) :is(.vd-card, .vd-kpi, .au-card, .settings-card, .aide-card, .guide-card, .extension-info-card, .install-step, .order-stat-card, .st-ic, .pg-sidebar, .rp-card, .ls-card, .ls-pi) {
  background: linear-gradient(165deg, rgba(255,255,255,0.05), rgba(255,255,255,0.012) 60%), var(--bg-card);
  border: 1px solid var(--border); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 30px rgba(0,0,0,0.18);
}
:root:not([data-theme="classique"]) :is(.vd-card, .au-card, .settings-card, .aide-card, .guide-card, .extension-info-card, .ls-card) { border-radius: 20px; }
:root:not([data-theme="classique"]) .vd-card { padding: 20px 22px; margin-bottom: 16px; }
:root:not([data-theme="classique"]) :is(.vd-grid) { gap: 16px; margin-bottom: 16px; }
/* lumiere qui suit la souris (variables --mx/--my posees par hub-fx.js) */
:root:not([data-theme="classique"]) :is(.vd-card, .vd-kpi, .au-card, .aide-card, .guide-card, .extension-info-card) { position: relative; isolation: isolate; }
:root:not([data-theme="classique"]) :is(.vd-card, .vd-kpi, .au-card, .aide-card, .guide-card, .extension-info-card)::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; opacity: 0; transition: opacity .4s; border-radius: inherit; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, -20%), rgba(var(--accent-rgb), 0.10), transparent 60%); }
:root:not([data-theme="classique"]) :is(.vd-card, .vd-kpi, .au-card, .aide-card, .guide-card, .extension-info-card):hover::after { opacity: 1; }

/* KPI */
:root:not([data-theme="classique"]) .vd-kpis { gap: 14px; }
:root:not([data-theme="classique"]) .vd-kpi { border-radius: 18px; padding: 16px 18px; transition: transform .45s cubic-bezier(0.16,1,0.3,1), border-color .3s, box-shadow .3s; }
:root:not([data-theme="classique"]) .vd-kpi:hover { transform: translateY(-3px); border-color: rgba(var(--accent-rgb), .35); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 28px rgba(var(--accent-rgb), .14), 0 14px 34px rgba(0,0,0,.25); }
:root:not([data-theme="classique"]) .vd-kpi-l { font-size: 12px; color: var(--text-secondary); letter-spacing: .01em; }
:root:not([data-theme="classique"]) .vd-kpi-v { font-size: 26px; font-weight: 400; letter-spacing: -0.03em; margin: 6px 0 4px; text-shadow: 0 0 22px rgba(var(--accent-rgb), .35); font-variant-numeric: tabular-nums; }
:root:not([data-theme="classique"]) .vd-kpi:first-child .vd-kpi-v, :root:not([data-theme="classique"]) .vd-kpi:nth-child(2) .vd-kpi-v { color: #fff; text-shadow: 0 0 26px rgba(var(--accent-rgb), .6); }

/* graphiques */
:root:not([data-theme="classique"]) .vd-chart { position: relative; }

/* listes de commandes / ventes */
:root:not([data-theme="classique"]) .vd-orders { display: flex; flex-direction: column; gap: 8px; }
:root:not([data-theme="classique"]) .vd-order { border: 1px solid var(--border); border-radius: 16px; background: rgba(255,255,255,0.022); transition: background .25s, border-color .25s, transform .4s cubic-bezier(0.16,1,0.3,1); }
:root:not([data-theme="classique"]) .vd-order:hover { background: rgba(var(--accent-rgb), 0.06); border-color: rgba(var(--accent-rgb), 0.28); transform: translateX(4px); }
:root:not([data-theme="classique"]) .vd-order img { border-radius: 12px; box-shadow: 0 6px 16px rgba(0,0,0,.35); transition: transform .4s cubic-bezier(0.16,1,0.3,1); }
:root:not([data-theme="classique"]) .vd-order:hover img { transform: scale(1.08) rotate(-2deg); }
:root:not([data-theme="classique"]) .vd-badge { border-radius: 8px; padding: 3px 9px; font-weight: 500; }
:root:not([data-theme="classique"]) .vd-badge.ok { box-shadow: 0 0 12px rgba(34,197,94,.25); }

/* onglets / filtres / puces */
:root:not([data-theme="classique"]) :is(.au-tabs, .filter-btns, .vd-toolbar .filter-btns) { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 14px; padding: 4px; gap: 4px; }
:root:not([data-theme="classique"]) :is(.au-tab, .filter-btn, .conv-filter, .pp-chip, .st-tab button, .settings-tab) { border-radius: 10px; transition: color .25s, background .25s, box-shadow .3s, transform .3s cubic-bezier(0.16,1,0.3,1); }
:root:not([data-theme="classique"]) :is(.au-tab, .filter-btn, .conv-filter, .pp-chip):hover { transform: translateY(-1px); }
:root:not([data-theme="classique"]) :is(.au-tab.active, .au-tab.on, .filter-btn.active, .conv-filter.active, .pp-chip.active) { background: linear-gradient(180deg, rgba(var(--accent-rgb), .9), rgba(var(--accent-rgb), .7)); color: #fff; box-shadow: 0 0 18px rgba(var(--accent-rgb), .45), inset 0 1px 0 rgba(255,255,255,.25); border-color: transparent; }
:root:not([data-theme="classique"]) .settings-tabs { gap: 6px; border-bottom: 1px solid var(--border); margin-bottom: 22px; }

/* formulaires */
:root:not([data-theme="classique"]) :is(input[type=text], input[type=number], input[type=email], input[type=search], input[type=datetime-local], input[type=date], input[type=time], input:not([type]), textarea, select, .setting-select, .setting-input, .sia-input, .st-input) { border-radius: 11px; transition: border-color .25s, box-shadow .25s, background .25s; }
:root:not([data-theme="classique"]) .toggle-slider { background: rgba(255,255,255,0.14); box-shadow: inset 0 1px 2px rgba(0,0,0,.3); }
:root:not([data-theme="classique"]) .toggle-slider::before { box-shadow: 0 2px 6px rgba(0,0,0,.35); transition: transform .35s cubic-bezier(0.16,1,0.3,1); }
:root:not([data-theme="classique"]) input:checked + .toggle-slider { background: var(--accent); box-shadow: 0 0 14px rgba(var(--accent-rgb), .55); }

/* ---------- automatisations : plus d'air, blocs lisibles ---------- */
:root:not([data-theme="classique"]) .au-card { padding: 24px 26px; margin-bottom: 22px; }
:root:not([data-theme="classique"]) .au-card + .au-card { margin-top: 6px; }
:root:not([data-theme="classique"]) .au-h { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
:root:not([data-theme="classique"]) .au-t { font-size: 17px; }
:root:not([data-theme="classique"]) .au-sub { color: var(--text-secondary); line-height: 1.5; }
:root:not([data-theme="classique"]) .au-row { padding: 12px 0; border-bottom: 1px dashed rgba(255,255,255,0.06); }
:root:not([data-theme="classique"]) .au-row:last-child { border-bottom: 0; }
:root:not([data-theme="classique"]) .au-l { font-weight: 450; }
:root:not([data-theme="classique"]) .au-d { color: var(--text-secondary); font-size: 12.5px; line-height: 1.45; margin-top: 2px; }
:root:not([data-theme="classique"]) .au-tabs { margin-bottom: 24px; }
:root:not([data-theme="classique"]) .order-stat-card { border-radius: 16px; }

/* ---------- chatbox ---------- */
:root:not([data-theme="classique"]) .chatbox-layout { border-top: 0; gap: 0; }
:root:not([data-theme="classique"]) .conv-list-panel { background: rgba(8, 11, 23, 0.55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
:root:not([data-theme="classique"]) .conv-item { margin: 3px 8px; border-radius: 14px; border-bottom: 0; transition: background .25s, transform .35s cubic-bezier(0.16,1,0.3,1), box-shadow .3s; }
:root:not([data-theme="classique"]) .conv-item:hover { transform: translateX(4px); }
:root:not([data-theme="classique"]) .conv-item.active { background: linear-gradient(90deg, rgba(var(--accent-rgb), .22), rgba(var(--accent-rgb), .05)); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .3), 0 0 20px rgba(var(--accent-rgb), .12); }
:root:not([data-theme="classique"]) .conv-avatar { box-shadow: 0 0 0 2px rgba(255,255,255,0.06); }
:root:not([data-theme="classique"]) .chat-header { background: rgba(8, 11, 23, 0.5); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
:root:not([data-theme="classique"]) .message { border-radius: 18px; padding: 11px 15px; box-shadow: 0 6px 18px rgba(0,0,0,.2); animation: hub-msg .45s cubic-bezier(0.16,1,0.3,1) both; }
:root:not([data-theme="classique"]) .message.received { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.08); border-bottom-left-radius: 6px; backdrop-filter: blur(8px); }
:root:not([data-theme="classique"]) .message.sent { background: linear-gradient(160deg, rgba(var(--accent-rgb), 1), rgba(var(--accent-rgb), .72)); border-bottom-right-radius: 6px; box-shadow: 0 8px 22px rgba(var(--accent-rgb), .28); }
:root:not([data-theme="classique"]) .message.system { background: rgba(255,255,255,0.05); color: var(--text-secondary); border: 1px solid var(--border); }
@keyframes hub-msg { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
:root:not([data-theme="classique"]) .chat-input-wrapper { border-radius: 16px; background: rgba(255,255,255,0.04); }
:root:not([data-theme="classique"]) .chat-input-wrapper:focus-within { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15), 0 0 24px rgba(var(--accent-rgb), .18); }
:root:not([data-theme="classique"]) .chat-empty svg { animation: hub-float 4s ease-in-out infinite; filter: drop-shadow(0 0 12px rgba(var(--accent-rgb), .6)); color: var(--accent); }

/* ---------- photo ghost ---------- */
:root:not([data-theme="classique"]) .pg-layout { gap: 18px; }
:root:not([data-theme="classique"]) .pg-sidebar { border-radius: 22px; border-right: 1px solid var(--border); }
:root:not([data-theme="classique"]) .pg-sb-sec { padding: 18px 20px; border-bottom-color: rgba(255,255,255,0.05); }
:root:not([data-theme="classique"]) .pg-sb-lbl { letter-spacing: .14em; color: var(--accent); text-shadow: 0 0 10px rgba(var(--accent-rgb), .6); }
:root:not([data-theme="classique"]) .pg-main { border-radius: 22px; border: 1px solid var(--border); background: linear-gradient(165deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)), var(--bg-card); }
:root:not([data-theme="classique"]) .pg-toggle-row { border-radius: 12px; padding: 8px 10px; transition: background .25s; }
:root:not([data-theme="classique"]) .pg-toggle-row:hover { background: rgba(255,255,255,0.04); }
:root:not([data-theme="classique"]) .pg-prog-fill { background: linear-gradient(90deg, var(--accent), rgba(var(--accent2-rgb), .9)); box-shadow: 0 0 14px rgba(var(--accent-rgb), .7); }

/* ---------- guide ---------- */
:root:not([data-theme="classique"]) .guide-section { margin-bottom: 64px; }
:root:not([data-theme="classique"]) .guide-section-header { border-bottom: 0; margin-bottom: 26px; }
:root:not([data-theme="classique"]) .guide-section-num { width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(140deg, rgba(var(--accent-rgb), 1), rgba(var(--accent-rgb), .45)); box-shadow: 0 0 22px rgba(var(--accent-rgb), .55), inset 0 1px 0 rgba(255,255,255,.35); font-weight: 500; }
:root:not([data-theme="classique"]) .guide-section-title { font-size: 24px; font-weight: 450; letter-spacing: -0.02em; text-shadow: 0 0 24px rgba(var(--accent-rgb), .3); }
:root:not([data-theme="classique"]) .guide-card { padding: 20px; transition: transform .45s cubic-bezier(0.16,1,0.3,1), border-color .3s; }
:root:not([data-theme="classique"]) .guide-card:hover { transform: translateY(-4px); }
:root:not([data-theme="classique"]) .guide-card-icon { font-size: 26px; display: inline-block; transition: transform .5s cubic-bezier(0.16,1,0.3,1); }
:root:not([data-theme="classique"]) .guide-card:hover .guide-card-icon { transform: scale(1.2) rotate(-8deg); }
:root:not([data-theme="classique"]) .guide-card-title { font-size: 14.5px; font-weight: 500; }
:root:not([data-theme="classique"]) .guide-step { border-radius: 16px; transition: background .25s, transform .35s cubic-bezier(0.16,1,0.3,1); }
:root:not([data-theme="classique"]) .guide-step:hover { transform: translateX(4px); }
:root:not([data-theme="classique"]) .guide-step-num { box-shadow: 0 0 16px rgba(var(--accent-rgb), .45); }
:root:not([data-theme="classique"]) .guide-tl-dot { box-shadow: 0 0 12px rgba(var(--accent-rgb), .8); }

/* ---------- centre d'aide / extension ---------- */
:root:not([data-theme="classique"]) .aide-grid { gap: 16px; }
:root:not([data-theme="classique"]) .aide-card { transition: transform .45s cubic-bezier(0.16,1,0.3,1), border-color .3s, box-shadow .3s; }
:root:not([data-theme="classique"]) .aide-card:hover { transform: translateY(-4px); }
:root:not([data-theme="classique"]) .aide-card-icon { transition: transform .5s cubic-bezier(0.16,1,0.3,1); display: inline-flex; }
:root:not([data-theme="classique"]) .aide-card:hover .aide-card-icon { transform: scale(1.15) rotate(-8deg); filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), .7)); }
:root:not([data-theme="classique"]) .aide-search-bar { border-radius: 16px; box-shadow: 0 0 0 1px var(--border); }
:root:not([data-theme="classique"]) .extension-hero { border-radius: 24px; border: 1px solid var(--border); background: radial-gradient(600px 260px at 90% 0%, rgba(var(--accent-rgb), .22), transparent 70%), var(--bg-card); padding: 28px; }
:root:not([data-theme="classique"]) .extension-icon-large { animation: hub-float 4s ease-in-out infinite; filter: drop-shadow(0 0 22px rgba(var(--accent-rgb), .55)); }
:root:not([data-theme="classique"]) .install-step { border-radius: 16px; padding: 14px 16px; transition: transform .35s cubic-bezier(0.16,1,0.3,1); }
:root:not([data-theme="classique"]) .install-step:hover { transform: translateX(5px); }
:root:not([data-theme="classique"]) .step-number { background: var(--accent); box-shadow: 0 0 14px rgba(var(--accent-rgb), .6); }

/* ---------- statistiques ---------- */
:root:not([data-theme="classique"]) .st-ic { border-radius: 14px; padding: 10px; transition: transform .4s cubic-bezier(0.16,1,0.3,1), border-color .3s; }
:root:not([data-theme="classique"]) .st-ic:hover { transform: translateY(-3px); border-color: rgba(var(--accent-rgb), .35); }
:root:not([data-theme="classique"]) .st-ic img { border-radius: 10px; }

/* ---------- studio / creation d'annonce / republication ---------- */
:root:not([data-theme="classique"]) :is(.st-btn, .sia-btn-secondary, .sia-btn-publish) { border-radius: 11px; transition: transform .3s cubic-bezier(0.16,1,0.3,1), box-shadow .3s, background .25s; }
:root:not([data-theme="classique"]) :is(.st-btn, .sia-btn-secondary, .sia-btn-publish):hover { transform: translateY(-1px); box-shadow: 0 0 16px rgba(var(--accent-rgb), .25); }
:root:not([data-theme="classique"]) .rp-card { border-radius: 16px; padding: 8px; transition: transform .4s cubic-bezier(0.16,1,0.3,1), box-shadow .3s; }
:root:not([data-theme="classique"]) .rp-card:hover { transform: translateY(-4px); box-shadow: 0 0 24px rgba(var(--accent-rgb), .18); }
:root:not([data-theme="classique"]) .rp-card img { border-radius: 12px; }

/* ---------- icones vivantes ---------- */
@keyframes hub-wiggle { 0% { transform: rotate(0); } 30% { transform: rotate(-12deg) scale(1.15); } 60% { transform: rotate(8deg) scale(1.1); } 100% { transform: rotate(0) scale(1); } }
@keyframes hub-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
:root:not([data-theme="classique"]) .nav-item:hover svg { animation: hub-wiggle .6s cubic-bezier(0.16,1,0.3,1); color: var(--accent); filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), .7)); }
:root:not([data-theme="classique"]) :is(button, a):hover > svg:only-of-type { transition: transform .35s cubic-bezier(0.16,1,0.3,1); transform: scale(1.12); }
:root:not([data-theme="classique"]) .guide-modal-btn:hover svg { animation: hub-wiggle .6s; }

/* ---------- entree des blocs (classe posee par hub-fx.js) ---------- */
@keyframes hub-rise { from { opacity: 0; transform: translateY(18px) scale(.985); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.hub-rise { animation: hub-rise .7s cubic-bezier(0.16,1,0.3,1) both; animation-delay: var(--hd, 0ms); }
@media (prefers-reduced-motion: reduce) { .hub-rise, .message, .page.active { animation: none !important; } #hub-bg { display: none; } }

/* ---------- tableaux ---------- */
:root:not([data-theme="classique"]) :is(.vd-rel, .st-tab) { border-collapse: separate; border-spacing: 0; }
:root:not([data-theme="classique"]) :is(.vd-rel, .st-tab) th { font-weight: 450; letter-spacing: .08em; text-transform: uppercase; font-size: 10.5px; color: var(--text-muted); border-bottom: 1px solid var(--border); }
:root:not([data-theme="classique"]) :is(.vd-rel, .st-tab) td { border-bottom: 1px solid rgba(255,255,255,0.045); transition: background .2s; }
:root:not([data-theme="classique"]) :is(.vd-rel, .st-tab) tbody tr:hover td { background: rgba(var(--accent-rgb), 0.06); }
:root:not([data-theme="classique"]) .st-chev { transition: transform .3s; }
:root:not([data-theme="classique"]) .st-pg.on { box-shadow: 0 0 14px rgba(var(--accent-rgb), .5); }

/* ---------- studio IA ---------- */
:root:not([data-theme="classique"]) :is(.st-card, .st-prompt-card, .st-gen-bar, .st-lib-msg) { border-radius: 18px; background: linear-gradient(165deg, rgba(255,255,255,0.05), rgba(255,255,255,0.012) 60%), var(--bg-card); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); }
:root:not([data-theme="classique"]) .st-card-head h3 { color: var(--accent); text-shadow: 0 0 12px rgba(var(--accent-rgb), .55); letter-spacing: .12em; font-weight: 500; }
:root:not([data-theme="classique"]) :is(.st-mode, .st-engine, .st-fast) { border-radius: 14px; transition: border-color .25s, background .25s, box-shadow .3s, transform .35s cubic-bezier(0.16,1,0.3,1); }
:root:not([data-theme="classique"]) :is(.st-mode, .st-engine):hover { transform: translateY(-2px); }
:root:not([data-theme="classique"]) :is(.st-mode.active, .st-engine.active, .st-fast:has(input:checked)) { box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .6), 0 0 22px rgba(var(--accent-rgb), .25); }
:root:not([data-theme="classique"]) .st-btn-primary { background: linear-gradient(180deg, #ffffff, #dfe3ec); color: #0a0d16; box-shadow: 0 6px 20px rgba(var(--accent-rgb), .25); }
:root:not([data-theme="classique"]) .st-btn-primary:hover { background: #fff; box-shadow: 0 0 26px rgba(var(--accent-rgb), .55); }
:root:not([data-theme="classique"]) :is(.st-drop, .st-multi-add) { border-radius: 16px; transition: border-color .25s, background .25s, box-shadow .3s; }
:root:not([data-theme="classique"]) :is(.st-drop, .st-multi-add):hover { box-shadow: 0 0 24px rgba(var(--accent-rgb), .22); }
:root:not([data-theme="classique"]) .st-drop-empty svg { animation: hub-float 3.5s ease-in-out infinite; }
:root:not([data-theme="classique"]) :is(.st-res, .st-lib-item) { border-radius: 14px; transition: transform .45s cubic-bezier(0.16,1,0.3,1), box-shadow .3s, border-color .3s; }
:root:not([data-theme="classique"]) :is(.st-res, .st-lib-item):hover { transform: translateY(-4px) scale(1.01); box-shadow: 0 14px 30px rgba(0,0,0,.4), 0 0 22px rgba(var(--accent-rgb), .2); }
:root:not([data-theme="classique"]) :is(.st-views, .st-seg) { border-radius: 14px; }
:root:not([data-theme="classique"]) .st-view.active { background: rgba(var(--accent-rgb), .18); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .45), 0 0 16px rgba(var(--accent-rgb), .25); }
:root:not([data-theme="classique"]) .st-modal-box, :root:not([data-theme="classique"]) .st-lb-box { border-radius: 22px; background: rgba(14,18,34,.96); }

/* ---------- creation d'annonce ---------- */
:root:not([data-theme="classique"]) .ls-ph { border-radius: 14px; transition: transform .4s cubic-bezier(0.16,1,0.3,1); }
:root:not([data-theme="classique"]) .ls-ph:hover { transform: scale(1.03); }
:root:not([data-theme="classique"]) .ls-col-p { border-radius: 999px; transition: box-shadow .25s, border-color .25s, transform .25s; }
:root:not([data-theme="classique"]) .ls-col-p.on { box-shadow: 0 0 14px rgba(var(--accent-rgb), .45); }
:root:not([data-theme="classique"]) .ls-col-p:hover { transform: translateY(-1px); }

/* ---------- modales generales ---------- */
:root:not([data-theme="classique"]) :is(.oa-m, .guide-modal, .pg-modal) { border-radius: 22px; background: rgba(14,18,34,.95); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(20px); box-shadow: 0 30px 80px rgba(0,0,0,.55); animation: lp-fade-scale .4s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes lp-fade-scale { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

:root:not([data-theme="classique"]) .step-number { color: #fff; font-weight: 500; }

/* ---------- menus deroulants (hub-select.js) ---------- */
:root:not([data-theme="classique"]) select { -webkit-appearance: none; appearance: none; padding-right: 32px !important; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9d3ee' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 11px center !important; background-size: 13px !important; }
:root:not([data-theme="classique"]) select:hover { border-color: rgba(var(--accent-rgb), .45); }
:root:not([data-theme="classique"]) select.hs-open { border-color: rgba(var(--accent-rgb), .7); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15), 0 0 18px rgba(var(--accent-rgb), .25); }
:root:not([data-theme="classique"]) select option { background: #0e1222; color: #f3f5fb; }
.hs-menu { position: fixed; z-index: 10070; overflow: auto; padding: 6px; border-radius: 16px; background: linear-gradient(180deg, rgba(30,36,58,0.9), rgba(14,18,32,0.94)); border: 1px solid rgba(255,255,255,0.14); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 24px 60px rgba(0,0,0,0.55), 0 0 30px rgba(var(--accent-rgb, 34,184,216), 0.12); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); font-family: "Suisse Int'l", -apple-system, sans-serif; transform-origin: top center; animation: hs-in .26s cubic-bezier(0.16,1,0.3,1) both; scrollbar-width: thin; }
.hs-menu.up { transform-origin: bottom center; }
.hs-menu.out { animation: hs-out .18s ease both; }
@keyframes hs-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes hs-out { to { opacity: 0; transform: translateY(-4px) scale(.98); } }
.hs-o { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-radius: 10px; background: none; color: rgba(240,244,255,0.86); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; white-space: nowrap; opacity: 0; animation: hs-row .3s cubic-bezier(0.16,1,0.3,1) var(--d, 0ms) forwards; transition: background .15s, color .15s; }
@keyframes hs-row { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.hs-o:hover { background: rgba(255,255,255,0.08); color: #fff; }
.hs-o.on { background: rgba(var(--accent-rgb, 34,184,216), 0.18); color: #fff; box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb, 34,184,216), 0.35); }
.hs-o.on i { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--accent, #22B8D8); box-shadow: 0 0 10px var(--accent, #22B8D8); }
.hs-o.dis { opacity: .35 !important; cursor: default; }
.hs-g { padding: 8px 12px 4px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(200,210,235,0.5); }
:root[data-theme="clair"] .hs-menu { background: rgba(255,255,255,0.97); border-color: rgba(15,23,42,0.1); }
:root[data-theme="clair"] .hs-o { color: #0d1220; } :root[data-theme="clair"] .hs-o:hover { background: rgba(15,23,42,0.06); }

/* ---------- Dressing : tendances 7 j + bouton actualiser (v422) ---------- */
.vd-kpi-l:has(.vd-trend) { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vd-trend { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; padding: 2px 7px 2px 5px; border-radius: 999px; white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: 0; animation: vdTrendIn .6s cubic-bezier(.16,1,.3,1) both .25s; }
.vd-trend svg { width: 11px; height: 11px; flex: none; }
.vd-trend.up { color: #34d399; background: rgba(52,211,153,.12); box-shadow: inset 0 0 0 1px rgba(52,211,153,.25); }
.vd-trend.down { color: #f87171; background: rgba(248,113,113,.12); box-shadow: inset 0 0 0 1px rgba(248,113,113,.25); }
.vd-trend.flat { color: #fbbf24; background: rgba(251,191,36,.12); box-shadow: inset 0 0 0 1px rgba(251,191,36,.25); }
.vd-trend.wait { color: var(--text-secondary); background: rgba(255,255,255,.05); font-weight: 500; padding: 2px 7px; }
.vd-trend.up svg { animation: vdUp 2.4s ease-in-out infinite; }
.vd-trend.down svg { animation: vdDown 2.4s ease-in-out infinite; }
@keyframes vdTrendIn { from { opacity: 0; transform: translateY(4px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes vdUp { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes vdDown { 0%,100% { transform: translateY(0); } 50% { transform: translateY(2px); } }
[data-theme="clair"] .vd-trend.up { color: #059669; } [data-theme="clair"] .vd-trend.down { color: #dc2626; } [data-theme="clair"] .vd-trend.flat { color: #b45309; }
.dr-refresh { display: inline-flex; align-items: center; gap: 7px; }
.dr-refresh svg { transition: transform .5s cubic-bezier(.16,1,.3,1); }
.dr-refresh:hover svg { transform: rotate(-90deg); }
.dr-refresh.spin svg { animation: drSpin .9s linear infinite; }
.dr-refresh.spin { pointer-events: none; opacity: .85; }
@keyframes drSpin { to { transform: rotate(360deg); } }

/* ---------- Studio IA : icones des modes (v422) ---------- */
.st-mode .st-ico { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; flex: none; color: var(--text-secondary);
  background: linear-gradient(145deg, rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), .04)); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .18), inset 0 1px 0 rgba(255,255,255,.06);
  transition: color .3s, background .3s, box-shadow .3s, transform .45s cubic-bezier(.16,1,.3,1); }
.st-mode .st-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.st-mode.active .st-ico svg, .st-mode .st-ico svg { stroke: currentColor; }
.st-mode .st-ico .i-fill { fill: rgba(var(--accent-rgb), .22); }
.st-mode .st-ico .i-shadow { fill: rgba(var(--accent-rgb), .25); stroke: none; }
.st-mode:hover .st-ico { color: var(--text-primary); transform: translateY(-1px) rotate(-4deg); }
.st-mode.active .st-ico { color: #fff; background: linear-gradient(145deg, rgba(var(--accent-rgb), .95), rgba(var(--accent-rgb), .55)); box-shadow: 0 6px 18px rgba(var(--accent-rgb), .45), inset 0 1px 0 rgba(255,255,255,.35); }
.st-mode.active .st-ico .i-fill { fill: rgba(255,255,255,.22); }
.st-mode.active .st-ico .i-shadow { fill: rgba(0,0,0,.25); }
.st-ico g, .st-ico path, .st-ico rect, .st-ico circle { transform-box: fill-box; transform-origin: center; transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .4s; }
/* A plat : le t-shirt flotte */
.st-mode:is(:hover, .active) .ico-flat .i-float { animation: icoFloat 2.6s ease-in-out infinite; }
.st-mode:is(:hover, .active) .ico-flat .i-shadow { animation: icoShadow 2.6s ease-in-out infinite; }
@keyframes icoFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1.6px); } }
@keyframes icoShadow { 0%,100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(.8); opacity: .6; } }
/* Porte : le buste respire, la tete s'incline */
.st-mode:is(:hover, .active) .ico-worn .i-head { animation: icoNod 3s ease-in-out infinite; }
.st-mode:is(:hover, .active) .ico-worn .i-body { animation: icoBreath 3s ease-in-out infinite; }
@keyframes icoNod { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-.6px) rotate(-8deg); } }
@keyframes icoBreath { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }
/* Multi-images : les cartes s'eventaillent */
.ico-multi .i-c2, .ico-multi .i-c3 { opacity: 0; }
.st-mode:is(:hover, .active) .ico-multi .i-c3 { opacity: .45; transform: translate(3px, -2px) rotate(12deg); }
.st-mode:is(:hover, .active) .ico-multi .i-c2 { opacity: .7; transform: translate(1.5px, -1px) rotate(6deg); }
.st-mode:is(:hover, .active) .ico-multi .i-c1 { transform: translate(-1.5px, 1px) rotate(-5deg); }
/* Creation : etincelles */
.ico-create .i-spark { fill: currentColor; stroke: none; }
.st-mode:is(:hover, .active) .ico-create .s1 { animation: icoTwinkle 1.8s ease-in-out infinite; }
.st-mode:is(:hover, .active) .ico-create .s2 { animation: icoTwinkle 1.8s ease-in-out infinite .6s; }
@keyframes icoTwinkle { 0%,100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(.4) rotate(45deg); opacity: .4; } }
/* Custom : curseurs qui glissent */
.st-mode:is(:hover, .active) .ico-custom .k1 { animation: icoK1 2.4s ease-in-out infinite; }
.st-mode:is(:hover, .active) .ico-custom .k2 { animation: icoK2 2.4s ease-in-out infinite; }
.st-mode:is(:hover, .active) .ico-custom .k3 { animation: icoK3 2.4s ease-in-out infinite; }
@keyframes icoK1 { 0%,100% { transform: translateX(0); } 50% { transform: translateX(8px); } }
@keyframes icoK2 { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-7px); } }
@keyframes icoK3 { 0%,100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
.st-mode { gap: 10px; padding: 7px 14px 7px 7px; }
@media (prefers-reduced-motion: reduce) { .st-ico * { animation: none !important; } }

/* ---------- Comptes : presence multi-PC (v422) ---------- */
.account-dot.online { box-shadow: 0 0 0 0 rgba(52,211,153,.6); background: #34d399 !important; animation: accPulse 2.2s ease-out infinite; }
.account-dot.idle { opacity: .45; filter: grayscale(.4); }
.account-status.on { color: #34d399; }
@keyframes accPulse { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.55); } 70% { box-shadow: 0 0 0 6px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }
.acc-pres { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--border); }
.acc-pres i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); }
.acc-pres.on { color: #34d399; box-shadow: inset 0 0 0 1px rgba(52,211,153,.3); background: rgba(52,211,153,.08); }
.acc-pres.on i { background: #34d399; animation: accPulse 2.2s ease-out infinite; }

/* ---------- Page Extension + pop-up mise a jour (v422) ---------- */
.xt-hero { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.xt-logo svg { width: 64px; height: 64px; border-radius: 16px; box-shadow: 0 10px 30px rgba(var(--accent-rgb), .35), inset 0 0 0 1px rgba(255,255,255,.1); animation: xtFloat 5s ease-in-out infinite; }
@keyframes xtFloat { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(-3deg); } }
.xt-hero .extension-hero-text { flex: 1; min-width: 240px; }
.xt-badge { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; vertical-align: middle; margin-left: 6px; color: var(--accent); background: rgba(var(--accent-rgb), .12); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .3); }
.xt-status { display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px; border-radius: 12px; font-size: 13px; font-weight: 500; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--border); color: var(--text-secondary); }
.xt-status i { width: 9px; height: 9px; border-radius: 50%; background: var(--text-muted); flex: none; }
.xt-status.ok { color: #34d399; } .xt-status.ok i { background: #34d399; animation: accPulse 2.2s ease-out infinite; }
.xt-status.old { color: #fbbf24; } .xt-status.old i { background: #fbbf24; }
.xt-status.off { color: #f87171; } .xt-status.off i { background: #f87171; }
.xt-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.xt-note { font-size: 12px; color: var(--text-muted); margin: 4px 0 0; }
.xt-p { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin: 0 0 10px; }
.xt-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 26px 0 14px; }
.xt-tab { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text-secondary); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: all .25s; }
.xt-tab:hover { color: var(--text-primary); border-color: rgba(var(--accent-rgb), .4); }
.xt-tab.active { color: #fff; background: rgba(var(--accent-rgb), .9); border-color: transparent; box-shadow: 0 6px 18px rgba(var(--accent-rgb), .35); }
.xt-pane { display: none; } .xt-pane.active { display: block; animation: xtIn .45s cubic-bezier(.16,1,.3,1); }
@keyframes xtIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.xt-pop { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; background: rgba(4,6,16,.55); backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s; padding: 16px; }
.xt-pop.in { opacity: 1; }
.xt-pop-card { width: min(440px, 100%); padding: 26px; border-radius: 22px; background: linear-gradient(160deg, rgba(30,34,66,.92), rgba(10,12,28,.95)); box-shadow: 0 30px 80px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.08), 0 0 60px rgba(var(--accent-rgb), .18); color: var(--text-primary); transform: translateY(16px) scale(.97); transition: transform .45s cubic-bezier(.16,1,.3,1); }
.xt-pop.in .xt-pop-card { transform: none; }
.xt-pop-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, rgba(var(--accent-rgb), 1), rgba(var(--accent-rgb), .55)); box-shadow: 0 8px 24px rgba(var(--accent-rgb), .45); margin-bottom: 14px; }
.xt-pop-ico svg { width: 22px; height: 22px; animation: vdDown 1.8s ease-in-out infinite; }
.xt-pop h3 { margin: 0 0 8px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.xt-pop p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); }
.xt-pop ol { margin: 0 0 18px; padding-left: 20px; font-size: 13px; color: var(--text-secondary); line-height: 1.8; }
.xt-pop-btns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.xt-pop-btns a { text-decoration: none; }
.xt-later { margin-left: auto; background: none; border: 0; color: var(--text-muted); font: inherit; font-size: 13px; cursor: pointer; }
.xt-later:hover { color: var(--text-primary); }
[data-theme="clair"] .xt-pop-card { background: linear-gradient(160deg, #fff, #f4f5fb); }

/* v511 : badge Pro / Particulier sur les comptes du menu */
.acc-kind{flex-shrink:0;font-size:9px;font-weight:800;letter-spacing:.05em;padding:2px 6px;border-radius:6px;margin-left:6px;background:rgba(255,255,255,.07);color:var(--text-secondary,#9aa3b2);border:1px solid rgba(255,255,255,.1)}
.acc-kind.pro{background:linear-gradient(135deg,rgba(9,177,186,.22),rgba(139,92,246,.22));color:#7fe7ee;border-color:rgba(9,177,186,.45)}

/* v514 : plus aucune case a cocher carree dans le Hub -> interrupteur arrondi anime (meme style partout) */
input[type="checkbox"]:not(.toggle input):not(.toggle-switch input):not(.switch input):not([data-raw]) {
  -webkit-appearance: none; appearance: none; width: 34px; height: 20px; min-width: 34px; border-radius: 999px; border: 0; margin: 0 8px 0 0;
  background: rgba(255,255,255,.14); position: relative; cursor: pointer; vertical-align: middle; flex-shrink: 0;
  transition: background .25s ease, box-shadow .25s ease; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
input[type="checkbox"]:not(.toggle input):not(.toggle-switch input):not(.switch input):not([data-raw])::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.35); transition: transform .25s cubic-bezier(.3,1.4,.5,1);
}
input[type="checkbox"]:not(.toggle input):not(.toggle-switch input):not(.switch input):not([data-raw]):checked { background: var(--accent, #8b5cf6); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #8b5cf6) 22%, transparent); }
input[type="checkbox"]:not(.toggle input):not(.toggle-switch input):not(.switch input):not([data-raw]):checked::after { transform: translateX(14px); background: var(--bg-primary, #0b0b10); }
input[type="checkbox"]:not(.toggle input):not(.toggle-switch input):not(.switch input):not([data-raw]):disabled { opacity: .45; cursor: default; }
input[type="checkbox"]:not(.toggle input):not(.toggle-switch input):not(.switch input):not([data-raw]):focus-visible { outline: 2px solid var(--accent, #8b5cf6); outline-offset: 2px; }
:root[data-theme="clair"] input[type="checkbox"]:not(.toggle input):not(.toggle-switch input):not(.switch input):not([data-raw]) { background: rgba(0,0,0,.14); }

/* v514 : Integrations IA, lignes « detecte par l'extension » alignees (meme colonne pour l'abonnement et le badge) */
.ai-k.det { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 8px; row-gap: 4px; }
.ai-k.det > code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-k.det > .ai-pl, .ai-k.det > .ai-auto { white-space: nowrap; justify-self: end; }
.ai-k.det > .ai-auto { grid-column: 3; }
.ai-k.det > span:only-child, .ai-k.det > span[style*="normal"] { grid-column: 1 / -1; font-size: 12px; line-height: 1.5; color: var(--text-secondary); }
.ai-k.det > button { grid-column: 3; justify-self: end; }
.ai-k.det > span[style*="flex:1"] { display: none; }
.ai-k.det:has(> button) > .ai-auto { grid-column: 2; }

/* v514 : ligne de compte du menu sur UNE seule ligne (nom · PRO/PERSO · En ligne) */
.account-item { display: flex; align-items: center; gap: 6px; min-width: 0; }
.account-item .account-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-item .account-status { flex-shrink: 0; white-space: nowrap; font-size: 10.5px; }
.account-item .acc-kind { margin-left: 0; padding: 1px 5px; font-size: 8.5px; }

.lg-grid.lg-solo{grid-template-columns:1fr !important}
/* 29/10 (retours Kagami, Samsung) : brouillons de Creation d'annonce et fenetre Profil sur telephone */
@media (max-width: 760px) {
  .ls-job, .ls-job:not(:has(.ls-sel)) { grid-template-columns: 48px minmax(0, 1fr) auto !important; row-gap: 10px; }
  .ls-job:has(.ls-sel) { grid-template-columns: auto 48px minmax(0, 1fr) auto !important; }
  .ls-job .ls-ja { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; }
  .ls-job .ls-ja .cp-btn { flex: 1 1 auto; min-width: 0; }
  .ls-bulk, [class*="ls-bulk"] { flex-wrap: wrap !important; }
  .ls-bulk input { width: 100% !important; }
  .pf-ov { place-items: start center; padding: 10px; }
  .pf-m { overflow-y: auto !important; -webkit-overflow-scrolling: touch; grid-template-rows: auto auto; max-height: calc(100dvh - 20px) !important; overscroll-behavior: contain; touch-action: pan-y; }
  .pf-body { overflow: visible !important; max-height: none !important; }
}