/* v801 (09/11, agent video-presentation-0911) : video de presentation du Hub (banniere du tableau de bord, bloc video en bas, fenetre de 1re arrivee). Couleurs = theme (accent), jamais de violet en dur. */
.vp-banner { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 16px; padding: 10px 14px 10px 10px; border-radius: 14px; cursor: pointer;
  background: linear-gradient(90deg, rgba(var(--accent-rgb, 255, 138, 91), .12), rgba(var(--accent-rgb, 255, 138, 91), .03) 60%, transparent), var(--bg-card, #111113);
  border: 1px solid rgba(var(--accent-rgb, 255, 138, 91), .28); color: var(--text-primary, #fff); font: inherit; text-align: left; transition: border-color .2s, transform .2s; }
.vp-banner:hover { border-color: var(--accent, #FF8A5B); transform: translateY(-1px); }
.vp-b-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; color: #fff; background: var(--accent, #FF8A5B); box-shadow: 0 0 18px rgba(var(--accent-rgb, 255, 138, 91), .45); }
.vp-b-t { font-weight: 600; font-size: 14px; }
.vp-b-s { color: var(--text-muted, #a1a1aa); font-size: 13px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-b-go { font-size: 13px; font-weight: 500; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(var(--accent-rgb, 255, 138, 91), .45); color: var(--accent, #FF8A5B); flex: none; }
.vp-section .vp-s-sub { color: var(--text-muted, #a1a1aa); font-size: 13px; margin: -8px 0 14px; }
.vp-s-vid { position: relative; border-radius: 14px; overflow: hidden; background: #000; border: 1px solid var(--border, rgba(255,255,255,.08)); max-width: 1100px; }
.vp-s-vid video, .vp-m-vid video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
.vp-section.vp-flash { animation: vpFlash 1.6s ease; }
@keyframes vpFlash { 0%, 100% { box-shadow: none; } 25%, 60% { box-shadow: 0 0 0 2px var(--accent, #FF8A5B), 0 0 30px rgba(var(--accent-rgb, 255, 138, 91), .35); } }
.vp-modal { position: fixed; inset: 0; z-index: 99990; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .78); animation: vpIn .25s ease; }
.vp-modal.vp-out { opacity: 0; transition: opacity .2s; }
@keyframes vpIn { from { opacity: 0; } to { opacity: 1; } }
.vp-m-box { width: min(1080px, 100%); max-height: 100%; overflow: auto; border-radius: 20px; background: var(--bg-secondary, #0f0f11); border: 1px solid var(--border, rgba(255,255,255,.08));
  box-shadow: 0 40px 120px rgba(0, 0, 0, .7); padding: 18px; }
.vp-m-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.vp-m-t { font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: var(--text-primary, #fff); }
.vp-m-s { font-size: 13px; color: var(--text-muted, #a1a1aa); margin-top: 3px; }
.vp-m-skip { flex: none; font: inherit; font-size: 13px; padding: 8px 16px; border-radius: 999px; cursor: pointer; color: var(--text-secondary, #d4d4d8); background: var(--bg-hover, rgba(255,255,255,.06)); border: 1px solid var(--border, rgba(255,255,255,.1)); }
.vp-m-skip:hover { color: #fff; border-color: var(--accent, #FF8A5B); }
.vp-m-vid { position: relative; border-radius: 14px; overflow: hidden; background: #000; }
.vp-m-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 10px; font: inherit; font-weight: 600; font-size: 16px; color: #fff; cursor: pointer;
  padding: 14px 24px; border-radius: 999px; border: 0; white-space: nowrap; background: var(--accent, #FF8A5B); box-shadow: 0 10px 40px rgba(var(--accent-rgb, 255, 138, 91), .5); }
.vp-m-play:hover { filter: brightness(1.08); }
.vp-m-f { font-size: 12px; color: var(--text-muted, #a1a1aa); margin-top: 12px; }
@media (max-width: 640px) { .vp-b-s { display: none; } .vp-m-box { padding: 12px; } .vp-m-t { font-size: 17px; } .vp-m-play { padding: 10px 18px; font-size: 14px; } }