/* ============================================================ BPM — Feuille de styles v2 Inclut : badges, événements, nouvelles, rédacteur ============================================================ */ :root { --bg:#050508; --surf:#0d0d14; --s2:#13131e; --s3:#1a1a28; --bdr:#1e1e30; --blue:#2a7fff; --bb:#4d9fff; --glow:#2a7fff18; --text:#e8eaf2; --muted:#5a5e7a; --muted2:#3a3e55; --green:#22c55e; --red:#e24b4a; --orange:#f97316; --purple:#a855f7; --teal:#14b8a6; --yellow:#f59e0b; --font:'DM Sans',sans-serif; --head:'Bebas Neue',sans-serif; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.6;min-height:100vh} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} button,select,input,textarea{font-family:var(--font)} ::-webkit-scrollbar{width:6px;height:6px} ::-webkit-scrollbar-track{background:var(--s2)} ::-webkit-scrollbar-thumb{background:var(--muted2);border-radius:3px} ::-webkit-scrollbar-thumb:hover{background:var(--muted)} /* ── NAVBAR ─────────────────────────────────────────────────── */ .site-nav{background:var(--surf);border-bottom:1px solid var(--bdr);height:54px;padding:0 1.5rem;display:flex;align-items:center;gap:.75rem;position:relative;z-index:10} .logo-with-image{gap:0} .logo-img{width:42px;height:42px;border-radius:50%;display:block;object-fit:contain;filter:drop-shadow(0 0 8px rgba(14,165,255,.28))} .smm-logo-img{width:34px;height:34px;border-radius:50%;display:block;object-fit:contain;filter:drop-shadow(0 0 8px rgba(14,165,255,.25))} .logo{display:flex;align-items:center;gap:9px;margin-right:.375rem;flex-shrink:0} .logo-ring{width:30px;height:30px;border-radius:50%;border:2px solid var(--blue);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff} .logo-txt{font-family:var(--head);font-size:22px;letter-spacing:4px;color:#fff} .nav-links{display:flex;align-items:center;gap:.125rem;flex:1} .nlink{padding:6px 10px;border-radius:7px;color:var(--muted);font-size:13px;transition:.15s;display:flex;align-items:center;gap:4px;white-space:nowrap} .nlink:hover{color:var(--text);background:var(--s2)} .nlink.active{color:var(--bb);background:var(--glow)} .nlink-admin{color:var(--red)!important} .nlink-admin:hover{background:#e24b4a18!important} .nav-right{display:flex;align-items:center;gap:.5rem;margin-left:auto;flex-shrink:0} .notif-bell{position:relative;color:var(--muted);font-size:18px;display:flex;padding:5px;border-radius:7px;transition:.15s} .notif-bell:hover{color:var(--text);background:var(--s2)} .notif-count{position:absolute;top:-2px;right:-2px;background:var(--red);color:#fff;font-size:10px;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:500} /* BPM V149 — Mini messagerie style Messenger depuis l’icône de droite */ .bpm-quickmsg{position:relative;display:flex;align-items:center} .bpm-quickmsg-toggle{border:0;cursor:pointer} .bpm-quickmsg-panel{display:none;position:absolute;top:calc(100% + 10px);right:0;width:min(410px,calc(100vw - 18px));height:min(650px,calc(100vh - 78px));background:rgba(7,10,19,.98);border:1px solid rgba(255,255,255,.10);border-radius:22px;box-shadow:0 24px 70px rgba(0,0,0,.55);z-index:1200;backdrop-filter:blur(18px);overflow:hidden;color:var(--text)} .bpm-quickmsg.open .bpm-quickmsg-panel{display:flex;flex-direction:column} .bpm-quickmsg-panel::before{content:"";position:absolute;top:-6px;right:16px;width:10px;height:10px;background:rgba(7,10,19,.98);border-left:1px solid rgba(255,255,255,.10);border-top:1px solid rgba(255,255,255,.10);transform:rotate(45deg)} .bpm-qm-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 16px 11px;background:linear-gradient(180deg,rgba(19,24,40,.98),rgba(7,10,19,.98));border-bottom:1px solid rgba(255,255,255,.08)} .bpm-qm-head strong{display:block;color:#fff;font-family:var(--head);font-size:28px;letter-spacing:1.2px;line-height:1}.bpm-qm-head small{display:block;color:#8a92a6;font-size:12px;margin-top:4px}.bpm-qm-full-link{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#9ca7c3;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035)}.bpm-qm-full-link:hover{color:#fff;border-color:rgba(77,159,255,.35);background:rgba(42,127,255,.16)} .bpm-qm-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;padding:9px;background:#080b15;border-bottom:1px solid rgba(255,255,255,.07)} .bpm-qm-tabs button{position:relative;border:0;border-radius:13px;background:transparent;color:#7c849b;cursor:pointer;min-width:0;padding:8px 3px 7px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;line-height:1;transition:.15s}.bpm-qm-tabs button i{font-size:18px}.bpm-qm-tabs button:hover{background:rgba(255,255,255,.045);color:#fff}.bpm-qm-tabs button.active{background:rgba(42,127,255,.17);color:#fff}.bpm-qm-tabs button b{position:absolute;top:2px;right:9px;min-width:16px;height:16px;border-radius:99px;background:var(--orange);color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center;padding:0 4px} .bpm-qm-list-screen{display:flex;flex-direction:column;min-height:0;flex:1}.bpm-qm-search{display:flex;align-items:center;gap:8px;margin:11px 12px 7px;padding:8px 11px;border:1px solid rgba(255,255,255,.10);background:#050812;border-radius:14px;color:#7f89a5}.bpm-qm-search input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#fff;font-size:13px}.bpm-qm-search input::placeholder{color:#67708a}.bpm-qm-search.hidden{display:none} .bpm-qm-list{min-height:0;flex:1;overflow:auto;padding:6px 8px 12px}.bpm-qm-list::-webkit-scrollbar,.bpm-qm-messages::-webkit-scrollbar{width:6px}.bpm-qm-list::-webkit-scrollbar-thumb,.bpm-qm-messages::-webkit-scrollbar-thumb{background:#20283a;border-radius:10px} .bpm-qm-empty{min-height:210px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#858da5;padding:24px}.bpm-qm-empty i{font-size:34px;color:#4d9fff;margin-bottom:8px}.bpm-qm-empty strong{color:#fff;margin-bottom:4px}.bpm-qm-empty span{font-size:12px;line-height:1.45} .bpm-qm-item{width:100%;border:0;text-align:left;background:transparent;color:inherit;border-radius:16px;padding:10px;display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:10px;cursor:pointer;transition:.15s}.bpm-qm-item:hover{background:rgba(255,255,255,.05)}.bpm-qm-item.unread{background:rgba(42,127,255,.10)}.bpm-qm-avatar{width:48px;height:48px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#2a7fff,#14b8a6);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;box-shadow:0 0 0 2px rgba(255,255,255,.07)}.bpm-qm-avatar img{width:100%;height:100%;object-fit:cover}.bpm-qm-main{min-width:0}.bpm-qm-name-row{display:flex;align-items:center;gap:6px;min-width:0}.bpm-qm-name{font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bpm-qm-role{font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:#79b7ff;background:rgba(42,127,255,.13);border:1px solid rgba(42,127,255,.22);border-radius:999px;padding:2px 5px;white-space:nowrap}.bpm-qm-preview{font-size:12px;color:#8992aa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}.bpm-qm-side{display:flex;flex-direction:column;align-items:flex-end;gap:5px}.bpm-qm-time{font-size:10px;color:#69728d;white-space:nowrap}.bpm-qm-badge{min-width:19px;height:19px;border-radius:99px;background:var(--orange);color:#fff;font-size:10px;font-weight:900;display:flex;align-items:center;justify-content:center;padding:0 6px}.bpm-qm-action{font-size:11px;color:#fff;background:rgba(42,127,255,.85);border-radius:999px;padding:4px 8px;white-space:nowrap} .bpm-qm-chat-screen{display:none;min-height:0;flex:1;flex-direction:column;background:#050812}.bpm-quickmsg-panel.chat-open .bpm-qm-list-screen{display:none}.bpm-quickmsg-panel.chat-open .bpm-qm-chat-screen{display:flex}.bpm-qm-chat-head{display:grid;grid-template-columns:34px 40px minmax(0,1fr) 34px;align-items:center;gap:9px;padding:11px 12px;border-bottom:1px solid rgba(255,255,255,.08);background:#090d18}.bpm-qm-back,.bpm-qm-open-full{width:34px;height:34px;border:0;border-radius:11px;background:rgba(255,255,255,.05);color:#c8d0e7;display:flex;align-items:center;justify-content:center;cursor:pointer}.bpm-qm-back:hover,.bpm-qm-open-full:hover{background:rgba(42,127,255,.16);color:#fff}.bpm-qm-chat-avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#2a7fff,#14b8a6);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900}.bpm-qm-chat-avatar img{width:100%;height:100%;object-fit:cover}.bpm-qm-chat-title{min-width:0}.bpm-qm-chat-title strong{display:block;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bpm-qm-chat-title small{display:block;color:#778099;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bpm-qm-messages{flex:1;min-height:0;overflow:auto;padding:13px 12px 8px;display:flex;flex-direction:column;gap:7px}.bpm-qm-msg{max-width:82%;display:flex;flex-direction:column}.bpm-qm-msg.me{align-self:flex-end;align-items:flex-end}.bpm-qm-msg.them{align-self:flex-start;align-items:flex-start}.bpm-qm-bubble{border-radius:18px;padding:9px 12px;font-size:13px;line-height:1.35;word-break:break-word;white-space:pre-wrap}.bpm-qm-msg.me .bpm-qm-bubble{background:#2a7fff;color:#fff;border-bottom-right-radius:6px}.bpm-qm-msg.them .bpm-qm-bubble{background:#151b2b;color:#eef2ff;border-bottom-left-radius:6px}.bpm-qm-msg-time{font-size:10px;color:#69728d;margin-top:2px}.bpm-qm-attachment{display:inline-flex;align-items:center;gap:6px;color:#fff}.bpm-qm-attachment img{max-width:180px;border-radius:12px;margin-top:3px} .bpm-qm-compose{display:flex;gap:7px;padding:10px 12px;border-top:1px solid rgba(255,255,255,.08);background:#090d18}.bpm-qm-compose textarea{flex:1;min-height:38px;max-height:88px;resize:none;border:1px solid rgba(255,255,255,.10);border-radius:18px;background:#050812;color:#fff;padding:9px 12px;outline:0;font-size:13px}.bpm-qm-compose textarea:focus{border-color:rgba(77,159,255,.55)}.bpm-qm-compose button{width:40px;height:40px;border:0;border-radius:50%;background:#2a7fff;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;align-self:flex-end}.bpm-qm-compose button:disabled{opacity:.55;cursor:not-allowed}.bpm-qm-note{font-size:10px;color:#6f7890;padding:0 12px 10px;background:#090d18;text-align:center} @media(max-width:760px){.bpm-quickmsg-panel{position:fixed;top:60px;right:8px;left:8px;width:auto;height:calc(100vh - 72px);border-radius:20px;z-index:1500}.bpm-quickmsg-panel::before{right:76px}.bpm-qm-head strong{font-size:25px}.bpm-qm-tabs button span{font-size:9px}.bpm-qm-item{grid-template-columns:44px minmax(0,1fr) auto}.bpm-qm-avatar{width:44px;height:44px}} /* BPM V152 — Mini panneaux rapides pour notifications, billets et lecteur */ .bpm-navdrop{position:relative;display:flex;align-items:center} .bpm-navdrop-toggle{border:0;cursor:pointer;background:transparent} .bpm-navpanel{display:none;position:absolute;top:calc(100% + 10px);right:0;width:min(360px,calc(100vw - 18px));max-height:min(560px,calc(100vh - 78px));background:rgba(7,10,19,.98);border:1px solid rgba(255,255,255,.10);border-radius:22px;box-shadow:0 24px 70px rgba(0,0,0,.55);z-index:1210;backdrop-filter:blur(18px);overflow:hidden;color:var(--text)} .bpm-navdrop.open .bpm-navpanel{display:flex;flex-direction:column} .bpm-navpanel::before{content:"";position:absolute;top:-6px;right:16px;width:10px;height:10px;background:rgba(7,10,19,.98);border-left:1px solid rgba(255,255,255,.10);border-top:1px solid rgba(255,255,255,.10);transform:rotate(45deg)} .bpm-navpanel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 16px 11px;background:linear-gradient(180deg,rgba(19,24,40,.98),rgba(7,10,19,.98));border-bottom:1px solid rgba(255,255,255,.08)} .bpm-navpanel-head strong{display:block;color:#fff;font-family:var(--head);font-size:27px;letter-spacing:1.1px;line-height:1}.bpm-navpanel-head small{display:block;color:#8a92a6;font-size:12px;margin-top:4px} .bpm-navpanel-body{overflow:auto;padding:8px;min-height:0}.bpm-navpanel-body::-webkit-scrollbar{width:6px}.bpm-navpanel-body::-webkit-scrollbar-thumb{background:#20283a;border-radius:10px} .bpm-navpanel-item{position:relative;width:100%;border-radius:16px;padding:10px;display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:10px;transition:.15s;color:inherit}.bpm-navpanel-item:hover{background:rgba(255,255,255,.05)}.bpm-navpanel-item.is-unread{background:rgba(42,127,255,.10)}.bpm-navpanel-item.is-unread::after{content:"";position:absolute;left:5px;top:50%;width:5px;height:5px;border-radius:50%;background:var(--bb);transform:translateY(-50%)} .bpm-navpanel-ico{width:42px;height:42px;border-radius:14px;background:rgba(42,127,255,.14);border:1px solid rgba(42,127,255,.20);color:#8fc5ff;display:flex;align-items:center;justify-content:center;font-size:20px}.bpm-navpanel-ico.ticket{background:rgba(20,184,166,.13);border-color:rgba(20,184,166,.24);color:#6ee7d8} .bpm-navpanel-main{min-width:0}.bpm-navpanel-main strong{display:block;color:#fff;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bpm-navpanel-main small{display:block;color:#8a92a6;font-size:11px;line-height:1.35;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bpm-navpanel-time{font-size:10px;color:#69728d;white-space:nowrap;align-self:start;margin-top:3px}.bpm-navpanel-chip{font-size:10px;color:#bff8ea;background:rgba(20,184,166,.12);border:1px solid rgba(20,184,166,.25);border-radius:999px;padding:3px 7px;text-transform:capitalize;white-space:nowrap}.bpm-navpanel-empty{min-height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#858da5;padding:24px}.bpm-navpanel-empty i{font-size:34px;color:#4d9fff;margin-bottom:8px}.bpm-navpanel-empty strong{color:#fff;margin-bottom:4px}.bpm-navpanel-empty span{font-size:12px;line-height:1.45} .bpm-navpanel-actions{display:flex;gap:7px;flex-wrap:wrap;padding:10px 12px;background:#090d18;border-top:1px solid rgba(255,255,255,.08)}.bpm-navpanel-actions a,.bpm-navpanel-actions button{border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.04);color:#dce6ff;border-radius:999px;padding:7px 10px;font-size:11px;line-height:1;cursor:pointer}.bpm-navpanel-actions a:hover,.bpm-navpanel-actions button:hover{border-color:rgba(77,159,255,.4);background:rgba(42,127,255,.16);color:#fff} .bpm-player-card{margin:12px;border:1px solid rgba(255,255,255,.10);background:radial-gradient(circle at 12% 0%,rgba(42,127,255,.22),transparent 40%),linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.025));border-radius:18px;padding:12px;display:grid;grid-template-columns:46px minmax(0,1fr) 42px;align-items:center;gap:11px}.bpm-player-disc{width:46px;height:46px;border-radius:50%;background:rgba(42,127,255,.18);display:flex;align-items:center;justify-content:center;color:#8fc5ff;font-size:24px}.bpm-player-meta{min-width:0}.bpm-player-meta strong{display:block;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bpm-player-meta small{display:block;color:#8a92a6;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bpm-player-btn{width:42px;height:42px;border:0;border-radius:50%;background:#2a7fff;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px}.bpm-player-btn:hover{background:#4d9fff} .bpm-navpanel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:0 12px 12px}.bpm-navpanel-grid a{border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035);border-radius:16px;padding:12px 8px;display:flex;flex-direction:column;align-items:center;gap:5px;color:#c8d0e7;font-size:12px;text-align:center}.bpm-navpanel-grid a i{font-size:22px;color:#7bbcff}.bpm-navpanel-grid a:hover{border-color:rgba(77,159,255,.35);background:rgba(42,127,255,.13);color:#fff} @media(max-width:760px){.bpm-navpanel{position:fixed;top:60px;right:8px;left:8px;width:auto;max-height:calc(100vh - 72px);border-radius:20px;z-index:1500}.bpm-navpanel::before{display:none}.bpm-navpanel-head strong{font-size:25px}.nav-right .bpm-navdrop.mobile-force,.nav-right .bpm-navdrop .mobile-extra{display:inline-flex!important}} .user-pill{display:flex;align-items:center;gap:7px;padding:4px 10px 4px 4px;border-radius:20px;border:1px solid var(--bdr);background:var(--s2);color:var(--text);font-size:13px;transition:.15s} .user-pill:hover{border-color:var(--blue)} .user-pill img{width:26px;height:26px;border-radius:50%;object-fit:cover} .user-initials{width:26px;height:26px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500} /* ── RADIO BAR ───────────────────────────────────────────────── */ .radio-bar{background:var(--s2);border-bottom:1px solid var(--bdr);height:42px;padding:0 1.5rem;display:flex;align-items:center;gap:12px;position:relative;z-index:9} .rb-live{display:flex;align-items:center;gap:6px;flex-shrink:0} .rb-dot{width:7px;height:7px;border-radius:50%;background:var(--bb);animation:pulse 1.8s infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.2}} .rb-badge{font-size:9px;background:var(--glow);border:1px solid #2a7fff44;color:var(--bb);padding:2px 7px;border-radius:4px;letter-spacing:1.5px;text-transform:uppercase} .rb-sep{width:1px;height:18px;background:var(--bdr);flex-shrink:0} .rb-meta{flex:1;min-width:0;display:flex;align-items:center;gap:8px;overflow:hidden} .rb-label{font-size:11px;color:var(--muted);flex-shrink:0} .rb-wave{display:flex;align-items:center;gap:2px;height:16px;flex-shrink:0} .rb-bar{width:3px;border-radius:2px;background:var(--bb);animation:wave 1.2s ease-in-out infinite} .rb-bar:nth-child(2){animation-delay:.1s}.rb-bar:nth-child(3){animation-delay:.2s} .rb-bar:nth-child(4){animation-delay:.3s}.rb-bar:nth-child(5){animation-delay:.15s} @keyframes wave{0%,100%{height:3px}50%{height:13px}} .rb-track{font-size:13px;font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rb-dash{color:var(--muted2);font-size:12px;flex-shrink:0} .rb-artist{font-size:12px;color:var(--bb);white-space:nowrap;flex-shrink:0} .rb-right{display:flex;align-items:center;gap:8px;flex-shrink:0} .rb-vol{display:flex;align-items:center;gap:6px;color:var(--muted)} .rb-vol i{font-size:14px} .rb-vol-bar{width:60px;height:3px;background:var(--bdr);border-radius:2px;cursor:pointer} .rb-vol-fill{height:100%;width:75%;background:var(--blue);border-radius:2px;transition:.1s} .rb-play-btn{width:28px;height:28px;background:var(--blue);border-radius:50%;border:none;cursor:pointer;color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;transition:.15s} .rb-play-btn:hover{background:var(--bb)} /* ── BOUTONS ─────────────────────────────────────────────────── */ .btn{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:8px;border:none;cursor:pointer;font-size:13px;font-weight:500;font-family:var(--font);transition:.15s;white-space:nowrap;text-decoration:none} .btn-b{background:var(--blue);color:#fff}.btn-b:hover{background:var(--bb)} .btn-o{background:transparent;border:1px solid var(--bdr);color:var(--muted)}.btn-o:hover{border-color:var(--blue);color:var(--blue)} .btn-r{background:#e24b4a18;border:1px solid #e24b4a44;color:var(--red)}.btn-r:hover{background:var(--red);color:#fff} .btn-g{background:#22c55e18;border:1px solid #22c55e44;color:var(--green)}.btn-g:hover{background:var(--green);color:#fff} .btn-t{background:#14b8a618;border:1px solid #14b8a644;color:var(--teal)}.btn-t:hover{background:var(--teal);color:#fff} .btn-full{width:100%;justify-content:center;padding:10px} .btn-sm{font-size:12px;padding:5px 12px} .btn-lg{padding:10px 22px;font-size:14px} /* ── FORMULAIRES ─────────────────────────────────────────────── */ .inp{width:100%;background:var(--s2);border:1px solid var(--bdr);border-radius:8px;padding:8px 11px;color:var(--text);font-size:13px;font-family:var(--font);outline:none;transition:.15s} .inp:focus{border-color:var(--blue)} .inp::placeholder{color:var(--muted2)} select.inp{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a5e7a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;cursor:pointer;padding-right:28px} select.inp option{background:var(--s2)} textarea.inp{resize:vertical} .lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;display:block;margin-bottom:4px} .req{color:var(--red)} .fg{display:flex;flex-direction:column;gap:4px;margin-bottom:.75rem} .fg2{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:.75rem} .fg.full{grid-column:1/-1} .inp-prefix{position:relative} .inp-prefix span{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:13px;pointer-events:none} .inp-prefix input{padding-left:20px} .pw-eye{position:relative} .pw-eye input{padding-right:38px} .pw-eye button{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:transparent;border:none;cursor:pointer;color:var(--muted);font-size:16px;display:flex;transition:.15s} .pw-eye button:hover{color:var(--text)} .pw-strength{height:3px;border-radius:2px;margin-top:5px;background:var(--bdr);transition:.3s} .pw-hint{font-size:11px;margin-top:4px;min-height:16px} .checkbox-row{display:flex;align-items:flex-start;gap:9px;cursor:pointer;font-size:13px;color:var(--muted);line-height:1.5} .checkbox-row input{margin-top:2px;accent-color:var(--blue);flex-shrink:0} .alert{padding:.75rem 1rem;border-radius:9px;font-size:13px;margin-bottom:.875rem;display:flex;align-items:center;gap:8px} .alert i{font-size:16px;flex-shrink:0} .alert-success{background:#0a1f0a;border:1px solid #22c55e44;color:var(--green)} .alert-danger{background:#1a0505;border:1px solid #e24b4a44;color:var(--red)} .alert-info{background:var(--glow);border:1px solid #2a7fff33;color:var(--bb)} .form-section-title{font-size:12px;font-weight:500;color:var(--text);margin:1.25rem 0 .75rem;display:flex;align-items:center;gap:7px;padding-bottom:.5rem;border-bottom:1px solid var(--bdr)} .form-section-title i{font-size:15px;color:var(--blue)} /* ── CARTES ─────────────────────────────────────────────────── */ .card{background:var(--surf);border:1px solid var(--bdr);border-radius:13px;padding:1.1rem;margin-bottom:.875rem} .card-h{display:flex;align-items:center;gap:10px;margin-bottom:.875rem;padding-bottom:.75rem;border-bottom:1px solid var(--bdr)} .ci{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0} .ci-b{background:var(--glow);color:var(--bb)} .ci-g{background:#22c55e18;color:var(--green)} .ci-r{background:#e24b4a18;color:var(--red)} .ci-o{background:#f9731618;color:var(--orange)} .ci-p{background:#a855f718;color:var(--purple)} .ci-t{background:#14b8a618;color:var(--teal)} .ci-y{background:#f59e0b18;color:var(--yellow)} .ct{font-weight:500;font-size:13px;color:#fff} .cs{font-size:11px;color:var(--muted);margin-top:1px} /* ── BADGES ─────────────────────────────────────────────────── */ .badge-role{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;font-size:10px;flex-shrink:0} .badges-list{display:flex;gap:4px;flex-wrap:wrap;align-items:center} .badges-grid{display:flex;gap:6px;flex-wrap:wrap} .badge-item{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:500;cursor:help;transition:.15s} .badge-item:hover{opacity:.85} .badge-item i{font-size:13px} /* ── PAGE D'ACCUEIL — HERO ───────────────────────────────────── */ .hero-banner{position:relative;height:380px;overflow:hidden;background:#040a14} .hero-photo{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.55} .hero-photo-default{position:absolute;inset:0;background:linear-gradient(135deg,#040a18,#0a1830,#0d0520)} .hero-grad-l{position:absolute;top:0;bottom:0;left:0;width:60%;background:linear-gradient(to right,rgba(5,5,8,.96) 50%,transparent)} .hero-grad-b{position:absolute;bottom:0;left:0;right:0;height:120px;background:linear-gradient(to top,var(--bg),transparent)} .hero-content{position:absolute;left:0;top:0;bottom:0;width:52%;display:flex;flex-direction:column;justify-content:center;padding:2rem 2rem 3.5rem} .hero-week-tag{font-size:10px;background:var(--blue);color:#fff;padding:4px 12px;border-radius:20px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:1rem;width:fit-content;display:flex;align-items:center;gap:5px} .hero-name{font-family:var(--head);font-size:56px;letter-spacing:3px;color:#fff;line-height:1;margin-bottom:.375rem} .hero-genre-row{display:flex;align-items:center;gap:8px;margin-bottom:.75rem} .hero-genre-pill{background:var(--glow);border:1px solid #2a7fff33;padding:3px 10px;border-radius:20px;font-size:12px;color:var(--bb)} .hero-loc{font-size:12px;color:rgba(255,255,255,.4);display:flex;align-items:center;gap:4px} .hero-bio{font-size:13px;color:rgba(255,255,255,.55);line-height:1.7;max-width:380px;margin-bottom:1rem} .hero-stats{display:flex;gap:1.5rem;margin-bottom:1.25rem} .hs strong{display:block;font-family:var(--head);font-size:24px;color:#fff} .hs span{font-size:11px;color:var(--muted)} .hero-btns{display:flex;gap:.625rem;flex-wrap:wrap} .hero-btn-primary{padding:9px 20px;background:var(--blue);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;font-family:var(--font);display:flex;align-items:center;gap:6px;transition:.15s} .hero-btn-primary:hover{background:var(--bb)} .hero-btn-sec{padding:9px 16px;background:transparent;border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.8);border-radius:8px;font-size:13px;cursor:pointer;font-family:var(--font);display:flex;align-items:center;gap:6px;transition:.15s} .hero-btn-sec:hover{border-color:rgba(255,255,255,.5);color:#fff} /* ── SECTIONS ACCUEIL ────────────────────────────────────────── */ .home-section{padding:1.5rem 1.5rem 0} .sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.875rem} .sec-title{font-family:var(--head);font-size:21px;letter-spacing:1px;color:var(--text)} .see-all{font-size:12px;color:var(--bb)} .see-all:hover{text-decoration:underline} .albums-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.625rem;margin-bottom:1.5rem} .alb-card{background:var(--surf);border:1px solid var(--bdr);border-radius:10px;overflow:hidden;cursor:pointer;transition:.2s;display:block} .alb-card:hover{border-color:#2a7fff44;transform:translateY(-2px)} .alb-thumb{height:100px;display:flex;align-items:center;justify-content:center;position:relative;background:var(--s2);overflow:hidden} .alb-thumb img{width:100%;height:100%;object-fit:cover} .alb-thumb-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--muted2);font-size:28px} .alb-ov{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;transition:.2s;display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px} .alb-card:hover .alb-ov{opacity:1} .alb-info{padding:.5rem .625rem} .alb-name{font-size:12px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .alb-artist{font-size:11px;color:var(--muted);margin-top:1px} .alb-meta{margin-top:3px} .alb-pill{font-size:10px;background:var(--s3);border:1px solid var(--bdr);border-radius:4px;padding:1px 5px;color:var(--muted);display:inline-block;margin-right:2px} .artistes-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.625rem;margin-bottom:1.5rem} .artist-card{background:var(--surf);border:1px solid var(--bdr);border-radius:10px;padding:1rem .75rem;text-align:center;cursor:pointer;transition:.2s;display:block} .artist-card:hover{border-color:#2a7fff44;transform:translateY(-2px)} .artist-card-ava{width:56px;height:56px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:500;margin:0 auto .625rem;overflow:hidden} .artist-card-ava img{width:100%;height:100%;object-fit:cover} .artist-card-name{font-size:12px;font-weight:500;color:#fff;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .artist-card-genre{font-size:11px;color:var(--muted);margin-bottom:3px} .artist-card-stats{font-size:10px;color:var(--muted2)} /* ── ÉVÉNEMENTS HOME ─────────────────────────────────────────── */ .ev-home-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-bottom:1.5rem} .ev-home-card{background:var(--surf);border:1px solid var(--bdr);border-radius:11px;overflow:hidden;cursor:pointer;transition:.2s;display:flex;flex-direction:column} .ev-home-card:hover{border-color:#2a7fff44;transform:translateY(-2px)} .ev-home-aff{height:110px;background:var(--s2);position:relative;overflow:hidden} .ev-home-aff img{width:100%;height:100%;object-fit:cover} .ev-home-aff-ph{display:flex;align-items:center;justify-content:center;height:100%;font-size:36px;color:var(--muted2)} .ev-home-date{position:absolute;top:8px;left:8px;background:var(--blue);color:#fff;border-radius:8px;padding:5px 8px;text-align:center;line-height:1.1;min-width:36px} .ev-home-date-m{font-size:9px;font-weight:500;text-transform:uppercase;letter-spacing:1px} .ev-home-date-d{font-family:var(--head);font-size:20px} .ev-home-body{padding:.75rem} .ev-home-type{font-size:10px;margin-bottom:.375rem;display:inline-flex;align-items:center;gap:4px} .ev-home-title{font-size:13px;font-weight:500;color:#fff;margin-bottom:.25rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .ev-home-artist{font-size:11px;color:var(--bb);margin-bottom:.375rem} .ev-home-meta{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:5px} .ev-home-prix{font-size:11px;color:var(--green);font-weight:500;margin-top:.25rem} /* ── NEWS HOME ───────────────────────────────────────────────── */ .news-home-grid{display:grid;grid-template-columns:2fr 1fr;gap:1rem;margin-bottom:1.5rem} .news-home-main{background:var(--surf);border:1px solid var(--bdr);border-radius:12px;overflow:hidden;cursor:pointer;transition:.2s} .news-home-main:hover{border-color:#14b8a644} .nhm-img{height:200px;overflow:hidden;background:var(--s2);position:relative} .nhm-img img{width:100%;height:100%;object-fit:cover;transition:.3s} .news-home-main:hover .nhm-img img{transform:scale(1.04)} .nhm-cat{position:absolute;bottom:8px;left:8px;font-size:10px;font-weight:500;padding:3px 9px;border-radius:20px;letter-spacing:.5px} .nhm-body{padding:.875rem} .nhm-title{font-size:15px;font-weight:500;color:#fff;margin-bottom:.375rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .news-home-main:hover .nhm-title{color:var(--teal)} .nhm-extract{font-size:12px;color:var(--muted);line-height:1.5;margin-bottom:.625rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .nhm-meta{font-size:11px;color:var(--muted);display:flex;gap:.75rem} .news-home-side{display:flex;flex-direction:column;gap:.5rem} .nhs-item{background:var(--surf);border:1px solid var(--bdr);border-radius:9px;overflow:hidden;cursor:pointer;transition:.2s;display:flex;gap:.625rem;padding:.625rem} .nhs-item:hover{border-color:#14b8a644} .nhs-img{width:56px;height:56px;border-radius:7px;flex-shrink:0;background:var(--s2);overflow:hidden} .nhs-img img{width:100%;height:100%;object-fit:cover} .nhs-title{font-size:12px;font-weight:500;color:var(--text);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .nhs-item:hover .nhs-title{color:var(--teal)} .nhs-meta{font-size:10px;color:var(--muted);margin-top:3px} /* ── PROFIL PUBLIC ───────────────────────────────────────────── */ .profil-hero{height:240px;position:relative;overflow:hidden;background:linear-gradient(135deg,#040a18,#0a1830)} .ph-bg-img{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.4} .ph-bg-default{position:absolute;inset:0;background:linear-gradient(135deg,#040a18,#0a1830)} .ph-grad{position:absolute;bottom:0;left:0;right:0;height:80px;background:linear-gradient(to top,var(--bg),transparent)} .ph-bottom{position:absolute;bottom:0;left:0;right:0;padding:1.25rem 1.5rem;display:flex;align-items:flex-end;gap:1rem} .ph-ava{width:80px;height:80px;border-radius:50%;border:3px solid var(--bg);overflow:hidden;display:flex;align-items:center;justify-content:center;font-family:var(--head);font-size:28px;color:#fff;flex-shrink:0;background:var(--blue);margin-bottom:-28px} .ph-ava img{width:100%;height:100%;object-fit:cover} .ph-info{flex:1} .ph-name{font-family:var(--head);font-size:32px;letter-spacing:2px;color:#fff;line-height:1} .ph-url{font-size:11px;color:rgba(255,255,255,.35);margin-top:2px} .ph-actions{display:flex;gap:.5rem;margin-bottom:8px;flex-shrink:0} .profil-body{padding:2.5rem 1.5rem 1.5rem} .profil-badges{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem;align-items:center} .pbadge{padding:4px 10px;border-radius:7px;border:1px solid var(--bdr);font-size:12px;color:var(--muted);display:flex;align-items:center;gap:5px;transition:.15s} .pbadge-v{border-color:#2a7fff44;color:var(--bb);background:var(--glow)} .pbadge:hover{border-color:#2a7fff44;color:var(--bb)} .profil-bio{font-size:13px;color:var(--muted);line-height:1.7;margin-bottom:1.25rem;max-width:700px} .profil-layout{display:grid;grid-template-columns:1fr 300px;gap:1.25rem} .profil-main{min-width:0} .profil-sidebar{display:flex;flex-direction:column;gap:.875rem} /* Posts */ .post-card{background:var(--surf);border:1px solid var(--bdr);border-radius:12px;overflow:hidden;margin-bottom:.75rem} .post-head{display:flex;align-items:flex-start;gap:.875rem;padding:.875rem 1rem;border-bottom:1px solid var(--bdr)} .post-cover-img{width:58px;height:58px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--s3);border:1px solid var(--bdr);overflow:hidden;cursor:pointer} .post-cover-img img{width:100%;height:100%;object-fit:cover} .post-cover-img .ti{font-size:24px;color:var(--muted2)} .post-title{font-weight:500;font-size:14px;color:#fff;margin-bottom:3px} .post-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:4px} .pp{font-size:10px;background:var(--s3);border:1px solid var(--bdr);border-radius:4px;padding:1px 6px;color:var(--muted)} .post-desc{font-size:12px;color:var(--muted);line-height:1.5} .post-acts{display:flex;align-items:center;padding:.5rem 1rem;gap:.5rem} .lk-btn,.cm-btn,.sh-btn{display:flex;align-items:center;gap:5px;padding:5px 11px;border-radius:7px;border:1px solid var(--bdr);background:transparent;color:var(--muted);font-size:12px;cursor:pointer;font-family:var(--font);transition:.15s} .lk-btn:hover,.lk-btn.lk-on{border-color:var(--red);color:var(--red)} .lk-btn.lk-on{background:#e24b4a18} .cm-btn:hover{border-color:var(--blue);color:var(--blue)} .sh-btn{margin-left:auto}.sh-btn:hover{border-color:var(--blue);color:var(--blue)} .cmts-section{border-top:1px solid var(--bdr)} .cmts-inner{padding:.75rem 1rem;display:flex;flex-direction:column;gap:.625rem} .cmt{display:flex;gap:.625rem} .c-av{width:30px;height:30px;border-radius:50%;background:var(--s3);border:1px solid var(--bdr);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;flex-shrink:0;color:var(--bb)} .c-bub{background:var(--s2);border:1px solid var(--bdr);border-radius:0 9px 9px 9px;padding:.5rem .75rem;flex:1} .c-name{font-size:12px;font-weight:500;color:#fff;margin-bottom:2px;display:block} .c-name:hover{color:var(--bb)} .c-text{font-size:12px;color:var(--text);line-height:1.5} .c-when{font-size:10px;color:var(--muted);margin-top:3px} .cmt-input-row{display:flex;gap:.5rem;align-items:flex-end;padding:.625rem 1rem .875rem} .av-me{width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;flex-shrink:0} .c-inp{flex:1;background:var(--s3);border:1px solid var(--bdr);border-radius:8px;padding:7px 10px;color:var(--text);font-size:12px;font-family:var(--font);outline:none;transition:.15s;resize:none;min-height:34px;max-height:80px} .c-inp:focus{border-color:var(--blue)} .c-inp::placeholder{color:var(--muted2)} .c-snd{width:30px;height:30px;background:var(--blue);border-radius:50%;border:none;cursor:pointer;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;transition:.15s} .c-snd:hover{background:var(--bb)} .tr{display:flex;align-items:center;gap:.625rem;padding:7px 1rem;border-bottom:1px solid var(--bdr);cursor:pointer;transition:.15s} .tr:last-child{border-bottom:none} .tr:hover{background:var(--s2)} .tr-playing{background:var(--glow)!important} .tr-n{width:20px;text-align:center;font-size:12px;color:var(--muted);flex-shrink:0} .tr-playing .tr-n{color:var(--bb)} .tr-nm{flex:1;font-size:13px;color:var(--text)} .tr-playing .tr-nm{color:var(--bb);font-weight:500} .tr-d{font-size:12px;color:var(--muted);flex-shrink:0} /* Lecteur sidebar */ .ap-player{background:var(--surf);border:1px solid var(--bdr);border-radius:12px;overflow:hidden} .ap-cover{height:180px;display:flex;align-items:center;justify-content:center;background:var(--s2);border-bottom:1px solid var(--bdr);overflow:hidden;position:relative} .ap-cover img{width:100%;height:100%;object-fit:cover} .ap-body{padding:.875rem 1rem} .ap-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:2px} .ap-trk{font-weight:500;font-size:13px;color:#fff;margin-bottom:1px} .ap-art{font-size:12px;color:var(--bb);margin-bottom:.75rem} .ap-prog-bar{width:100%;height:3px;background:var(--bdr);border-radius:2px;margin-bottom:4px;cursor:pointer} .ap-prog-fill{height:100%;width:0;background:var(--blue);border-radius:2px;transition:.4s linear} .ap-times{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:.75rem} .ap-ctrls{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:.75rem} .ap-cb{background:transparent;border:none;cursor:pointer;color:var(--muted);font-size:18px;display:flex;transition:.15s;padding:3px} .ap-cb:hover{color:var(--text)} .ap-cp{width:38px;height:38px;background:var(--blue);border-radius:50%;border:none;cursor:pointer;color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;transition:.15s} .ap-cp:hover{background:var(--bb)} .ap-vol{display:flex;align-items:center;gap:8px} .ap-vol i{font-size:14px;color:var(--muted)} .ap-vbar{flex:1;height:3px;background:var(--bdr);border-radius:2px} .ap-vfill{height:100%;width:70%;background:var(--muted2);border-radius:2px} /* Info cards sidebar */ .ic-card{background:var(--surf);border:1px solid var(--bdr);border-radius:11px;padding:.875rem 1rem} .ic-title{font-size:12px;font-weight:500;color:#fff;margin-bottom:.625rem;display:flex;align-items:center;gap:6px} .ic-title i{font-size:14px;color:var(--muted)} .ic-row{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--bdr);font-size:12px} .ic-row:last-child{border-bottom:none} .ic-row i{font-size:14px;color:var(--muted);width:16px;flex-shrink:0} .stats-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.375rem;margin-top:.5rem} .sg-s{background:var(--s2);border-radius:8px;padding:.5rem;text-align:center;border:1px solid var(--bdr)} .sg-n{font-family:var(--head);font-size:18px;color:var(--bb)} .sg-l{font-size:10px;color:var(--muted)} .ml-list{display:flex;flex-direction:column;gap:5px} .ml-item{display:flex;align-items:center;gap:8px;font-size:12px;padding:3px 0} .ml-av{width:28px;height:28px;border-radius:50%;background:var(--s3);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:500;flex-shrink:0;border:1px solid var(--bdr);color:var(--bb)} .ml-name{font-weight:500;color:#fff} .ml-role{font-size:11px;color:var(--muted)} /* ── ESPACE MEMBRE ───────────────────────────────────────────── */ .espace-shell{display:grid;grid-template-columns:210px 1fr;min-height:calc(100vh - 96px)} .espace-sidebar{background:var(--surf);border-right:1px solid var(--bdr);padding:1rem .75rem;display:flex;flex-direction:column} .espace-main{padding:1.5rem;background:var(--bg)} .sb-profile{text-align:center;padding-bottom:.875rem;border-bottom:1px solid var(--bdr);margin-bottom:.875rem} .sb-ava-wrap{position:relative;display:inline-block;margin-bottom:.5rem} .sb-ava{width:64px;height:64px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:500;overflow:hidden;border:2px solid var(--bdr);margin:0 auto} .sb-ava img{width:100%;height:100%;object-fit:cover} .sb-online{position:absolute;bottom:2px;right:2px;width:12px;height:12px;background:var(--green);border:2px solid var(--surf);border-radius:50%} .sb-name{font-size:14px;font-weight:500;color:#fff;margin-bottom:2px} .sb-role{font-size:11px;color:var(--bb);background:var(--glow);border:1px solid #2a7fff33;padding:2px 9px;border-radius:20px;display:inline-flex;align-items:center;gap:4px;margin-bottom:4px} .sb-loc{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:4px;justify-content:center;margin-bottom:6px} .sb-view-page{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--bb);padding:4px 9px;border-radius:6px;border:1px solid #2a7fff33;background:var(--glow);transition:.15s} .sb-view-page:hover{background:var(--blue);color:#fff} .sb-nav{flex:1} .s-lbl{font-size:10px;text-transform:uppercase;letter-spacing:2px;color:var(--muted2);margin-bottom:.375rem;padding:0 .25rem;margin-top:.875rem} .s-lbl:first-child{margin-top:0} .ni{display:flex;align-items:center;gap:7px;padding:6px 9px;border-radius:7px;cursor:pointer;color:var(--muted);font-size:12px;transition:.15s;margin-bottom:1px;border:1px solid transparent;white-space:nowrap;overflow:hidden} .ni:hover{background:var(--s2);color:var(--text)} .ni.on{background:var(--glow);color:var(--bb);border-color:#2a7fff22} .ni i{font-size:14px;width:16px;text-align:center;flex-shrink:0} .nb-r,.nb-b,.nb-o{font-size:10px;padding:1px 5px;border-radius:8px;margin-left:auto;font-weight:500} .nb-r{background:#e24b4a22;color:var(--red);border:1px solid #e24b4a33} .nb-b{background:var(--glow);color:var(--bb)} .nb-o{background:#f9731622;color:var(--orange);border:1px solid #f9731633} .sb-stats{border-top:1px solid var(--bdr);padding-top:.75rem;display:grid;grid-template-columns:repeat(3,1fr);gap:.25rem;text-align:center;margin-top:auto} .mini-stat strong{display:block;font-family:var(--head);font-size:16px;color:var(--bb)} .mini-stat span{font-size:10px;color:var(--muted)} /* Stats dashboard */ .stats-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:.625rem;margin-bottom:1.25rem} .stat-card{background:var(--surf);border:1px solid var(--bdr);border-radius:10px;padding:.875rem;text-align:center} .sn{font-family:var(--head);font-size:26px} .sn.blue{color:var(--bb)}.sn.green{color:var(--green)}.sn.orange{color:var(--orange)}.sn.purple{color:var(--purple)}.sn.red{color:var(--red)}.sn.teal{color:var(--teal)} .sl{font-size:11px;color:var(--muted);margin-top:2px} .pg-ttl{font-family:var(--head);font-size:21px;letter-spacing:1px;color:var(--text);margin-bottom:1rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .pg-ttl small{font-family:var(--font);font-size:12px;color:var(--muted);font-weight:400;letter-spacing:0} /* URL & Publication */ .url-input-row{display:flex} .url-pfx{background:var(--s3);border:1px solid var(--bdr);border-right:none;border-radius:8px 0 0 8px;padding:8px 11px;font-size:12px;color:var(--muted);white-space:nowrap;display:flex;align-items:center} .url-inp{flex:1;background:var(--s2);border:1px solid var(--bdr);border-radius:0 8px 8px 0;padding:8px 11px;color:var(--text);font-size:13px;font-family:var(--font);outline:none;transition:.15s} .url-inp:focus{border-color:var(--blue)} .url-status{font-size:11px;margin-top:4px;min-height:18px;display:flex;align-items:center;gap:4px} .priv-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--bdr)} .priv-row:last-child{border-bottom:none} .priv-lbl{font-size:13px;color:var(--text)} .priv-sub{font-size:11px;color:var(--muted);margin-top:1px} .tog-wrap input{display:none} .tog{display:inline-block;width:40px;height:22px;border-radius:11px;background:var(--muted2);position:relative;cursor:pointer;transition:.25s;flex-shrink:0} .tog::after{content:'';width:16px;height:16px;border-radius:50%;background:#fff;position:absolute;top:3px;left:3px;transition:.25s} .tog-wrap input:checked+.tog{background:var(--green)} .tog-wrap input:checked+.tog::after{left:21px} /* Tickets */ .ticket-card{background:var(--s2);border:1px solid var(--bdr);border-radius:9px;padding:.75rem .875rem;margin-bottom:.375rem;cursor:pointer;transition:.15s} .ticket-card:hover{border-color:#2a7fff33} .tk-head{display:flex;align-items:center;gap:.625rem;margin-bottom:.375rem} .tk-id{font-size:10px;color:var(--muted2)} .tk-title{font-weight:500;font-size:13px;color:#fff;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tk-meta{display:flex;align-items:center;gap:.5rem;font-size:11px;color:var(--muted);flex-wrap:wrap} /* Status badges */ .sbadge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:500;white-space:nowrap} .sb-ouvert{background:var(--glow);color:var(--bb);border:1px solid #2a7fff33} .sb-traitement{background:#a855f718;color:var(--purple);border:1px solid #a855f733} .sb-resolu{background:#22c55e18;color:var(--green);border:1px solid #22c55e33} .sb-ferme{background:#5a5e7a22;color:var(--muted);border:1px solid #5a5e7a33} .sb-actif{background:#22c55e18;color:var(--green);border:1px solid #22c55e33} .sb-suspendu{background:#5a5e7a22;color:var(--muted);border:1px solid #5a5e7a33} .sb-en_attente{background:#f9731618;color:var(--orange);border:1px solid #f9731633} .sb-approuve{background:#22c55e18;color:var(--green);border:1px solid #22c55e33} .sb-refuse{background:#e24b4a18;color:var(--red);border:1px solid #e24b4a33} .sb-artiste{background:#22c55e18;color:var(--green);border:1px solid #22c55e33} .sb-auditeur{background:var(--glow);color:var(--bb);border:1px solid #2a7fff33} .sb-animateur{background:#a855f718;color:var(--purple);border:1px solid #a855f733} .sb-redacteur{background:#14b8a618;color:var(--teal);border:1px solid #14b8a633} /* ── ADMIN SHELL ─────────────────────────────────────────────── */ .admin-shell{display:grid;grid-template-columns:210px 1fr;min-height:calc(100vh - 96px)} .admin-sidebar{background:var(--surf);border-right:1px solid var(--bdr);padding:.875rem .75rem} .admin-logo{display:flex;align-items:center;gap:8px;margin-bottom:.375rem;padding:.5rem .375rem;font-family:var(--head);font-size:16px;letter-spacing:2px;color:#fff} .admin-logo-ring{width:26px;height:26px;border-radius:50%;border:2px solid var(--blue);display:flex;align-items:center;justify-content:center;font-size:9px;color:#fff;flex-shrink:0} .admin-role-badge{font-size:10px;padding:3px 8px;border-radius:20px;width:fit-content;margin-bottom:.875rem;margin-left:.375rem;display:flex;align-items:center;gap:4px;font-weight:500;background:#e24b4a18;color:var(--red);border:1px solid #e24b4a33} .admin-main{padding:1.5rem;background:var(--bg)} .tbl-wrap{overflow-x:auto} .tbl{width:100%;border-collapse:collapse;min-width:500px} .tbl th{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;padding:.5rem .75rem;border-bottom:1px solid var(--bdr);text-align:left;font-weight:500;background:var(--s2);white-space:nowrap} .tbl td{padding:.5rem .75rem;border-bottom:1px solid var(--bdr);font-size:13px;color:var(--text);vertical-align:middle} .tbl tr:last-child td{border-bottom:none} .tbl tr:hover td{background:var(--s2)} .tbl-ava{width:28px;height:28px;border-radius:50%;background:var(--s3);border:1px solid var(--bdr);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:500;flex-shrink:0;color:var(--bb)} .ab{padding:3px 8px;border-radius:5px;border:1px solid var(--bdr);background:transparent;cursor:pointer;font-size:11px;font-family:var(--font);color:var(--muted);transition:.15s;display:inline-flex;align-items:center;gap:3px;white-space:nowrap} .ab:hover{border-color:var(--blue);color:var(--blue)} .ab-red:hover{border-color:var(--red);color:var(--red)} .ab-green:hover{border-color:var(--green);color:var(--green)} .search-row{display:flex;gap:.5rem;margin-bottom:.875rem;align-items:center} .search-inp{flex:1;background:var(--s2);border:1px solid var(--bdr);border-radius:8px;padding:7px 11px;color:var(--text);font-size:13px;font-family:var(--font);outline:none;transition:.15s} .search-inp:focus{border-color:var(--blue)} .search-inp::placeholder{color:var(--muted2)} .fsel{background:var(--s2);border:1px solid var(--bdr);border-radius:7px;padding:7px 8px;color:var(--text);font-size:11px;font-family:var(--font);outline:none;cursor:pointer;appearance:none;padding-right:22px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%235a5e7a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center} .log-item{display:flex;align-items:center;gap:.625rem;padding:.5rem 0;border-bottom:1px solid var(--bdr)} .log-item:last-child{border-bottom:none} .log-info{flex:1} .log-what{font-size:12px;color:var(--text)} .log-who{font-size:11px;color:var(--muted)} .log-when{font-size:10px;color:var(--muted2);flex-shrink:0} .info-box{background:var(--s3);border-radius:8px;padding:.75rem .875rem;display:flex;gap:8px;border:1px solid var(--bdr);margin-bottom:.75rem} .info-box i{font-size:17px;flex-shrink:0;margin-top:1px} .info-box p{font-size:12px;color:var(--muted);line-height:1.6} .ib-g{border-color:#22c55e33}.ib-g i{color:var(--green)} .ib-o{border-color:#f9731633}.ib-o i{color:var(--orange)} .ib-b{border-color:#2a7fff33}.ib-b i{color:var(--bb)} .ib-r{border-color:#e24b4a33}.ib-r i{color:var(--red)} .ib-t{border-color:#14b8a633}.ib-t i{color:var(--teal)} /* ── AUTH PAGES ──────────────────────────────────────────────── */ .auth-page{min-height:calc(100vh - 96px);display:flex;align-items:center;justify-content:center;padding:2rem 1rem} .auth-card{background:var(--surf);border:1px solid var(--bdr);border-radius:16px;padding:2rem;width:100%;max-width:480px} .auth-logo{text-align:center;margin-bottom:1.5rem} .auth-logo-ring{width:52px;height:52px;border-radius:50%;border:2px solid var(--blue);display:flex;align-items:center;justify-content:center;font-family:var(--head);font-size:16px;letter-spacing:2px;color:#fff;margin:0 auto .875rem} .auth-logo h1{font-family:var(--head);font-size:26px;letter-spacing:1px;color:#fff;margin-bottom:.25rem} .auth-logo p{font-size:13px;color:var(--muted)} .auth-switch{text-align:center;font-size:13px;color:var(--muted)} .auth-switch a{color:var(--bb)} .type-cards{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:1.25rem} .type-card{background:var(--s2);border:2px solid var(--bdr);border-radius:12px;padding:1.25rem 1rem;text-align:center;cursor:pointer;transition:.2s;display:block} .type-card:hover{border-color:var(--blue);background:var(--glow)} .type-card i{font-size:32px;color:var(--bb);display:block;margin-bottom:.625rem} .type-card strong{display:block;font-size:15px;color:#fff;margin-bottom:.25rem} .type-card span{font-size:11px;color:var(--muted);display:block;margin-bottom:.75rem} .type-perks{list-style:none;text-align:left} .type-perks li{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);margin-bottom:3px} .type-perks li i{font-size:12px;color:var(--green);flex-shrink:0} .type-badge-artiste,.type-badge-auditeur,.type-badge-animateur,.type-badge-redacteur{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:500;margin-top:.5rem} .type-badge-artiste{background:#22c55e18;color:var(--green);border:1px solid #22c55e33} .type-badge-auditeur{background:var(--glow);color:var(--bb);border:1px solid #2a7fff33} .type-badge-animateur{background:#a855f718;color:var(--purple);border:1px solid #a855f733} .type-badge-redacteur{background:#14b8a618;color:var(--teal);border:1px solid #14b8a633} .link-sm{font-size:12px;color:var(--bb)} .link-sm:hover{text-decoration:underline} /* ── CTA & FOOTER ────────────────────────────────────────────── */ .home-cta{padding:2.5rem 1.5rem;text-align:center;background:linear-gradient(135deg,#060c1a,#0a1528);border-top:1px solid var(--bdr);margin-top:1.5rem} .cta-inner h2{font-family:var(--head);font-size:32px;letter-spacing:2px;color:#fff;margin-bottom:.5rem} .cta-inner p{font-size:14px;color:var(--muted);margin-bottom:1.5rem} .site-footer{background:var(--surf);border-top:1px solid var(--bdr);margin-top:3rem} .footer-inner{display:grid;grid-template-columns:2fr 1fr;gap:2rem;padding:2rem 1.5rem;align-items:start} .footer-logo{font-family:var(--head);font-size:28px;letter-spacing:4px;color:#fff;margin-bottom:.5rem} .footer-col p{font-size:13px;color:var(--muted);line-height:1.6;margin-bottom:.875rem} .footer-social{display:flex;gap:.5rem} .footer-social a{width:34px;height:34px;border-radius:8px;background:var(--s2);border:1px solid var(--bdr);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:16px;transition:.15s} .footer-social a:hover{color:var(--bb);border-color:var(--blue)} .footer-col strong{display:block;font-size:12px;color:#fff;font-weight:500;margin-bottom:.75rem;letter-spacing:.5px} .footer-col a{display:block;font-size:13px;color:var(--muted);margin-bottom:.375rem;transition:.15s} .footer-col a:hover{color:var(--bb)} .footer-col span{display:block;font-size:12px;margin-bottom:.375rem} .footer-bottom{border-top:1px solid var(--bdr);padding:1rem 1.5rem;font-size:12px;color:var(--muted);text-align:center} /* ── WHY BOX ─────────────────────────────────────────────────── */ .why-box{background:linear-gradient(135deg,#060c1a,#0a1528);border:1px solid #2a7fff22;border-radius:12px;padding:1rem} .why-ttl{font-family:var(--head);font-size:15px;letter-spacing:1px;color:#fff;margin-bottom:.625rem} .why-item{display:flex;align-items:flex-start;gap:8px;margin-bottom:.5rem;font-size:12px;color:var(--muted);line-height:1.6} .why-item i{color:var(--bb);font-size:14px;flex-shrink:0;margin-top:1px} /* ── RESPONSIVE ──────────────────────────────────────────────── */ .text-muted{color:var(--muted);font-size:13px;padding:.5rem 0} @media(max-width:1100px){.albums-grid{grid-template-columns:repeat(4,1fr)}.artistes-grid{grid-template-columns:repeat(4,1fr)}} @media(max-width:900px){.albums-grid{grid-template-columns:repeat(3,1fr)}.artistes-grid{grid-template-columns:repeat(3,1fr)}.profil-layout{grid-template-columns:1fr}.profil-sidebar{order:-1}.espace-shell{grid-template-columns:1fr}.espace-sidebar{display:none}.admin-shell{grid-template-columns:1fr}.admin-sidebar{display:none}.footer-inner{grid-template-columns:1fr 1fr}.stats-grid4{grid-template-columns:1fr 1fr}.ev-home-grid{grid-template-columns:1fr 1fr}.news-home-grid{grid-template-columns:1fr}} @media(max-width:600px){.albums-grid{grid-template-columns:repeat(2,1fr)}.artistes-grid{grid-template-columns:repeat(2,1fr)}.hero-content{width:100%;padding:1.25rem 1.25rem 3rem}.hero-photo{opacity:.3}.fg2{grid-template-columns:1fr}.footer-inner{grid-template-columns:1fr}.nav-links{display:none}.ev-home-grid{grid-template-columns:1fr}.news-home-grid{grid-template-columns:1fr}} /* ═══════════════════════════════════════════════════════ BADGES — 6 rôles : Administrateur, Support, Rédacteur, Artiste, DJ, Auditeur ═══════════════════════════════════════════════════════ */ .badge-role { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: 10px; flex-shrink: 0; margin-left: 2px; } .badges-list { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .badge-item { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 20px; font-size: 11px; font-weight: 500; cursor: help; transition: opacity .15s; white-space: nowrap; } .badge-item:hover { opacity: .85; } .badge-item i { font-size: 13px; } /* Couleurs par rôle */ /* Administrateur : rouge */ .badge-admin { background:#e24b4a1a; border:1px solid #e24b4a40; color:#e24b4a; } /* Support : orange */ .badge-support { background:#f973161a; border:1px solid #f9731640; color:#f97316; } /* Rédacteur : teal */ .badge-redacteur { background:#14b8a61a; border:1px solid #14b8a640; color:#14b8a6; } /* Artiste : vert */ .badge-artiste { background:#22c55e1a; border:1px solid #22c55e40; color:#22c55e; } /* DJ : violet */ .badge-dj { background:#a855f71a; border:1px solid #a855f740; color:#a855f7; } /* Auditeur : bleu */ .badge-auditeur { background:#2a7fff1a; border:1px solid #2a7fff40; color:#2a7fff; } /* Vitrine badges — profil public */ .profil-badges-row { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; align-items: center; } /* ═══════════════════════════════════════════════════════════ MOBILE — ESPACE MEMBRE (menu drawer) Visible sous 900px ═══════════════════════════════════════════════════════════ */ /* Bouton hamburger — visible seulement sur mobile */ .mob-menu-btn { display: none; } /* Overlay fond sombre */ .mob-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 99; backdrop-filter: blur(2px); } .mob-overlay.active { display: block; } @media (max-width: 900px) { /* ── Bouton hamburger ── */ .mob-menu-btn { display: flex; align-items: center; gap: 7px; width: 100%; padding: .75rem 1.25rem; background: var(--surf); border: none; border-bottom: 1px solid var(--bdr); color: var(--text); font-size: 14px; font-family: var(--font); font-weight: 500; cursor: pointer; text-align: left; position: sticky; top: 0; z-index: 50; } .mob-menu-btn i { font-size: 20px; color: var(--bb); } .mob-menu-btn:hover { background: var(--s2); } /* ── Layout shell ── */ .espace-shell { grid-template-columns: 1fr !important; position: relative; } /* ── Sidebar : caché par défaut, drawer depuis la gauche ── */ .espace-sidebar { display: flex !important; /* override le display:none */ position: fixed !important; top: 0; left: -280px; /* caché hors écran */ width: 280px; height: 100vh; overflow-y: auto; z-index: 100; padding: 1rem .875rem; box-shadow: 4px 0 24px rgba(0,0,0,.5); transition: left .25s cubic-bezier(.4,0,.2,1); } /* Drawer ouvert */ .espace-sidebar.mob-open { left: 0; } /* ── Contenu principal ── */ .espace-main { padding: 1rem !important; width: 100% !important; } /* ── Stats grid ── */ .stats-grid4 { grid-template-columns: 1fr 1fr !important; } /* ── Cards formulaires ── */ .fg2 { grid-template-columns: 1fr !important; } } @media (max-width: 480px) { /* ── Barre radio compacte ── */ .radio-bar { height: auto; padding: 6px 12px; flex-wrap: wrap; gap: 6px; } .rb-vol { display: none; /* cacher le volume sur très petit écran */ } .rb-meta { font-size: 12px; } .rb-track { max-width: 160px; } /* ── Navbar compacte ── */ .logo-txt { display: none; } .nav-right .btn-sm span { display: none; } /* ── Stats 1 colonne ── */ .stats-grid4 { grid-template-columns: 1fr !important; } /* ── Sidebar encore plus large sur téléphone ── */ .espace-sidebar { width: 88vw !important; } /* ── Pg titre plus petit ── */ .pg-ttl { font-size: 18px !important; } } /* Admin sidebar mobile — même drawer que espace_membre */ @media (max-width: 900px) { .admin-shell { grid-template-columns: 1fr !important; } .admin-sidebar { display: flex !important; flex-direction: column; position: fixed !important; top: 0; left: -280px; width: 280px; height: 100vh; overflow-y: auto; z-index: 100; box-shadow: 4px 0 24px rgba(0,0,0,.5); transition: left .25s cubic-bezier(.4,0,.2,1); } .admin-sidebar.mob-open { left: 0; } .admin-main { padding: 1rem !important; } } /* ═══════════════════════════════════════════════════════════ SHOWS À VENIR — Section accueil ═══════════════════════════════════════════════════════════ */ .shows-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .875rem; margin-bottom: 1.5rem; } .show-card { background: var(--surf); border: 1px solid var(--bdr); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; cursor: pointer; transition: transform .2s, border-color .2s; text-decoration: none; } .show-card:hover { transform: translateY(-3px); border-color: #f9731644; } /* Image affiche */ .show-card-img { position: relative; height: 190px; background: var(--s2); overflow: hidden; flex-shrink: 0; } .show-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; } .show-card:hover .show-card-img img { transform: scale(1.05); } .show-card-img-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 48px; color: var(--muted2); background: linear-gradient(135deg, #0a1020, #141828); } /* Badge date — coin supérieur gauche */ .show-date-badge { position: absolute; top: 10px; left: 10px; background: var(--orange); color: #fff; border-radius: 9px; padding: 5px 9px; text-align: center; min-width: 44px; line-height: 1; box-shadow: 0 2px 8px rgba(0,0,0,.4); } .sdb-month { display: block; font-size: 9px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; opacity: .9; } .sdb-day { display: block; font-family: var(--head); font-size: 22px; letter-spacing: 1px; line-height: 1.1; } /* Badge type — coin supérieur droit */ .show-type-badge { position: absolute; top: 10px; right: 10px; font-size: 10px; font-weight: 500; padding: 3px 9px; border-radius: 20px; letter-spacing: .5px; backdrop-filter: blur(4px); } .show-type-concert { background: rgba(42,127,255,.85); color: #fff; } .show-type-festival { background: rgba(168,85,247,.85); color: #fff; } .show-type-lancement { background: rgba(34,197,94,.85); color: #fff; } .show-type-set_dj { background: rgba(168,85,247,.85); color: #fff; } .show-type-meet_greet { background: rgba(249,115,22,.85); color: #fff; } .show-type-tournee { background: rgba(20,184,166,.85); color: #fff; } .show-type-autre { background: rgba(90,94,122,.85); color: #fff; } /* Badge gratuit */ .show-free-badge { position: absolute; bottom: 10px; right: 10px; background: rgba(34,197,94,.9); color: #fff; font-size: 10px; font-weight: 600; padding: 3px 9px; border-radius: 20px; letter-spacing: .5px; } /* Corps carte */ .show-card-body { padding: .875rem; display: flex; flex-direction: column; gap: 5px; flex: 1; } .show-card-title { font-weight: 500; font-size: 14px; color: #fff; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .show-card:hover .show-card-title { color: var(--orange); } .show-card-artist { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--bb); font-weight: 500; } .show-artist-ava { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; border: 1px solid var(--bdr); flex-shrink: 0; } .show-card-meta { display: flex; flex-wrap: wrap; gap: .375rem; font-size: 11px; color: var(--muted); } .show-card-meta i { font-size: 12px; } .show-card-prix { font-size: 12px; color: var(--muted); margin-top: 2px; } .show-card-prix strong { color: var(--text); } .show-card-billets { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--orange); background: #f9731618; border: 1px solid #f9731633; border-radius: 6px; padding: 4px 9px; margin-top: 4px; width: fit-content; transition: .15s; } .show-card-billets:hover { background: var(--orange); color: #fff; } /* Responsive shows grid */ @media (max-width: 1100px) { .shows-grid { grid-template-columns: repeat(3,1fr); } } @media (max-width: 768px) { .shows-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 480px) { .shows-grid { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════════ RADIO BAR — AVEC IMAGE POCHETTE ET MÉTADONNÉES ═══════════════════════════════════════════════════════════ */ /* Hauteur augmentée pour l'image */ .radio-bar { height: 56px !important; padding: 0 1rem 0 0 !important; gap: 10px !important; } /* ── Image pochette ── */ .rb-artwork { width: 56px; height: 56px; flex-shrink: 0; position: relative; overflow: hidden; background: var(--s3); } .rb-artwork-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--muted2); background: linear-gradient(135deg, #0d0d1a, #1a1a2e); transition: opacity .3s; } .rb-artwork img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .4s; } /* Overlay disco quand en lecture */ .rb-artwork-pulse { position: absolute; inset: 0; background: rgba(42,127,255,.15); opacity: 0; transition: opacity .3s; pointer-events: none; } .rb-playing .rb-artwork-pulse { opacity: 1; animation: artPulse 2s ease-in-out infinite; } @keyframes artPulse { 0%,100% { opacity: 0; } 50% { opacity: 1; } } /* ── Métadonnées ── */ .rb-meta { flex: 1; min-width: 0; display: flex; align-items: center; } .rb-meta-inner { display: flex; flex-direction: column; gap: 2px; min-width: 0; width: 100%; } .rb-meta-top { display: flex; align-items: center; gap: 7px; } .rb-meta-bot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* Titre — défilement si trop long */ .rb-track { font-size: 13px !important; font-weight: 600 !important; color: #fff !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px; } /* Animation défilement sur les très longs titres */ .rb-track.rb-scroll { animation: rbScroll 12s linear infinite; overflow: visible; } @keyframes rbScroll { 0%,15% { transform: translateX(0); } 85%,100% { transform: translateX(-60%); } } .rb-artist { font-size: 11px !important; color: var(--bb) !important; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; } .rb-album { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; } .rb-album::before { content: '·'; margin-right: 5px; color: var(--muted2); } .rb-album:empty { display: none; } .rb-listeners { font-size: 10px; color: var(--green); display: flex; align-items: center; gap: 3px; } .rb-listeners::before { content: '·'; color: var(--muted2); margin-right: 3px; } /* ── Bouton play ── */ .rb-play-btn { width: 34px !important; height: 34px !important; } /* ── Volume ── */ .rb-vol-bar { width: 70px; } #rbVolIcon { transition: color .15s; } #rbVolIcon:hover { color: var(--text); } /* ── Badge LIVE clignotant en lecture ── */ .rb-playing .rb-dot { background: var(--bb) !important; } .rb-playing .rb-badge { color: var(--bb); border-color: #2a7fff55; } /* ── Mobile radio compacte ── */ @media (max-width: 600px) { .radio-bar { height: 50px !important; } .rb-artwork { width: 50px; height: 50px; } .rb-vol-bar { width: 40px; } .rb-track { max-width: 140px !important; font-size: 12px !important; } .rb-artist { max-width: 100px !important; } .rb-album { display: none; } .rb-listeners{ display: none !important; } .rb-live { display: none; } .rb-sep { display: none; } } @media (max-width: 380px) { .rb-vol { display: none; } .rb-artwork { width: 50px; } } /* ── WALL / PARTAGE / PLAYLISTS BPM ───────────────────────── */ .wall-card,.playlist-card,.player-card{background:var(--surf);border:1px solid var(--bdr);border-radius:13px;padding:1rem;margin-bottom:.875rem;box-shadow:0 12px 36px rgba(0,0,0,.15)} .wall-head{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem}.wall-avatar{width:42px;height:42px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;overflow:hidden;border:2px solid var(--bdr);flex-shrink:0}.wall-avatar img{width:100%;height:100%;object-fit:cover}.wall-name{font-size:13px;color:#fff;font-weight:600}.wall-time{font-size:11px;color:var(--muted)}.wall-content{font-size:14px;color:var(--text);white-space:pre-wrap;margin:.5rem 0}.wall-embed{display:flex;gap:.875rem;background:var(--s2);border:1px solid var(--bdr);border-radius:11px;padding:.75rem;margin-top:.75rem}.wall-cover{width:72px;height:72px;border-radius:10px;background:var(--s3);display:flex;align-items:center;justify-content:center;color:var(--muted);overflow:hidden;flex-shrink:0}.wall-cover img{width:100%;height:100%;object-fit:cover}.wall-embed-title{font-size:15px;color:#fff;font-weight:600}.wall-embed-meta{font-size:12px;color:var(--muted);margin-top:2px}.wall-actions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:.75rem}.wall-composer{background:var(--surf);border:1px solid var(--bdr);border-radius:13px;padding:1rem;margin-bottom:1rem}.wall-composer textarea{min-height:78px}.wall-empty{padding:1.5rem;text-align:center;color:var(--muted);background:var(--s2);border:1px dashed var(--bdr);border-radius:12px}.playlist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.875rem}.playlist-card h3{font-size:15px;color:#fff;margin-bottom:.25rem}.playlist-meta{font-size:11px;color:var(--muted);display:flex;gap:.4rem;flex-wrap:wrap}.playlist-tracks{margin-top:.75rem;border-top:1px solid var(--bdr);padding-top:.5rem}.playlist-track{display:flex;align-items:center;gap:.5rem;padding:.45rem 0;border-bottom:1px solid rgba(255,255,255,.04);cursor:pointer}.playlist-track:hover{color:var(--bb)}.playlist-track-num{width:22px;text-align:center;color:var(--muted);font-size:11px}.playlist-track-title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}.playlist-track-artist{font-size:11px;color:var(--muted)}.mini-player{position:sticky;bottom:0;z-index:20;background:rgba(13,13,20,.95);backdrop-filter:blur(14px);border-top:1px solid var(--bdr);padding:.85rem 1rem;display:flex;align-items:center;gap:.875rem}.mini-player audio{width:100%;max-width:520px}.track-search-card{background:var(--s2);border:1px solid var(--bdr);border-radius:11px;padding:.75rem;margin-bottom:.5rem;display:flex;align-items:center;gap:.75rem}.privacy-pill{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;border:1px solid var(--bdr);font-size:10px;color:var(--muted)}.privacy-pill.public{color:var(--green);border-color:#22c55e44;background:#22c55e12}.privacy-pill.prive{color:var(--orange);border-color:#f9731644;background:#f9731612}.hide-sm{}@media(max-width:760px){.wall-embed{flex-direction:column}.wall-cover{width:100%;height:160px}.playlist-grid{grid-template-columns:1fr}.mini-player{flex-direction:column;align-items:stretch}.hide-sm{display:none!important}} /* BPM V12 — MENU MOBILE DU SITE + ADMIN MOBILE COMPLET */ .mobile-menu-btn{display:none;background:transparent;border:1px solid var(--bdr);color:var(--text);width:38px;height:38px;border-radius:10px;align-items:center;justify-content:center;font-size:22px;cursor:pointer;flex-shrink:0} .mobile-menu-btn:hover{border-color:var(--blue);color:var(--bb);background:var(--glow)} .site-menu-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.68);z-index:998;backdrop-filter:blur(3px)} .site-menu-overlay.open{display:block} .site-mobile-menu{position:fixed;top:0;left:-88vw;width:min(88vw,360px);height:100vh;background:var(--surf);border-right:1px solid var(--bdr);z-index:999;transition:left .25s ease;overflow-y:auto;padding-bottom:2rem;box-shadow:8px 0 32px rgba(0,0,0,.45)} .site-mobile-menu.open{left:0} .smm-head{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 1rem;border-bottom:1px solid var(--bdr);background:var(--s2);position:sticky;top:0;z-index:2} .smm-head button{background:transparent;border:0;color:var(--muted);font-size:24px;display:flex;cursor:pointer}.smm-head button:hover{color:var(--red)} .smm-brand{display:flex;align-items:center;gap:.6rem}.smm-brand .logo-ring{width:28px;height:28px}.smm-brand .logo-txt{font-size:22px} .site-mobile-menu a{display:flex;align-items:center;gap:.75rem;margin:.25rem .75rem;padding:.78rem .85rem;border:1px solid transparent;border-radius:11px;color:var(--text);font-size:15px;background:transparent} .site-mobile-menu a:hover{background:var(--s2);border-color:var(--bdr)} .site-mobile-menu a i{width:22px;text-align:center;font-size:19px;color:var(--bb)} .site-mobile-menu a b{margin-left:auto;background:var(--red);color:#fff;min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:11px} .smm-dd{margin:.25rem .75rem}.smm-dd-toggle{width:100%;display:flex;align-items:center;gap:.75rem;padding:.78rem .85rem;border:1px solid transparent;border-radius:11px;color:var(--text);font-size:15px;background:transparent;font-family:var(--font);cursor:pointer;text-align:left}.smm-dd-toggle:hover{background:var(--s2);border-color:var(--bdr)}.smm-dd-toggle i{width:22px;text-align:center;font-size:19px;color:var(--bb)}.smm-dd-toggle span{flex:1}.smm-dd-toggle b,.smm-dd-panel a b{margin-left:auto;background:var(--red);color:#fff;min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:11px}.smm-dd-chev{margin-left:.25rem!important;width:auto!important;font-size:15px!important;color:var(--muted2)!important;transition:transform .18s ease}.smm-dd.open .smm-dd-chev{transform:rotate(180deg);color:var(--bb)!important}.smm-dd-panel{display:none;margin:2px 0 8px 30px;padding:5px;border-left:1px solid rgba(42,127,255,.28);background:rgba(255,255,255,.018);border-radius:0 11px 11px 0}.smm-dd.open .smm-dd-panel{display:block}.site-mobile-menu .smm-dd-panel a{margin:.12rem 0;padding:.62rem .65rem;font-size:14px} .smm-section{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;margin:1rem 1rem .35rem} .smm-user{background:linear-gradient(135deg,var(--s2),var(--s3))!important;border-color:var(--bdr)!important;margin-top:.85rem!important} .smm-user img,.smm-user span{width:42px;height:42px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;object-fit:cover;flex-shrink:0;font-weight:700} .smm-user strong{display:block;color:#fff}.smm-user small{display:block;color:var(--muted);font-size:12px}.smm-admin{border-color:#e24b4a44!important;background:#e24b4a12!important;color:#ff6b6b!important}.smm-admin i{color:#ff6b6b!important} @media(max-width:760px){ .site-nav{height:auto;min-height:58px;padding:.55rem .75rem;gap:.5rem;position:sticky;top:0;z-index:200;flex-wrap:nowrap} .mobile-menu-btn{display:flex} .nav-links{display:none!important} .logo{margin-right:auto}.logo-ring{width:28px;height:28px}.logo-txt{font-size:21px} .nav-right{gap:.25rem;margin-left:0}.nav-right .user-pill{padding:3px;border-radius:50%;width:34px;height:34px;justify-content:center}.nav-right .user-pill span,.nav-right .user-pill .badge-role{display:none}.nav-right .btn{display:none}.notif-bell{font-size:20px;padding:6px} .radio-bar{height:auto;min-height:44px;padding:.45rem .75rem;gap:.5rem}.rb-artwork,.rb-vol{display:none}.rb-track{max-width:42vw}.rb-right{margin-left:auto} } @media(max-width:900px){ form{max-width:100%}.inp,input,select,textarea{font-size:16px!important;min-height:42px}.btn,.ab{min-height:38px;align-items:center;justify-content:center}.ab{padding:7px 10px} .tbl-wrap{overflow-x:auto;max-width:100%;border-radius:12px;-webkit-overflow-scrolling:touch}.tbl{min-width:740px}.tbl th:last-child,.tbl td:last-child{position:sticky;right:0;background:var(--surf);z-index:2;box-shadow:-8px 0 16px rgba(0,0,0,.38)} .tbl th:last-child{background:var(--s2)}.tbl td{padding:.7rem .75rem}.search-bar{flex-direction:column}.search-bar .btn{width:100%}.fg2,.fg3{grid-template-columns:1fr!important}.card{overflow:visible}.card-head{position:relative;z-index:1}.modal{width:calc(100vw - 1rem);padding:1rem}.modal-bg{padding:.5rem;align-items:flex-start;overflow:auto}.modal-bg.open{display:flex} .footer-inner{grid-template-columns:1fr!important}.site-footer{padding-bottom:4rem} } /* V37 - Logo BPM réel dans le menu du haut */ .logo-with-image .logo-img{background:transparent} @media(max-width:820px){.logo-img{width:38px;height:38px}.smm-logo-img{width:34px;height:34px}} /* V38 - Logo BPM réel dans l'emplacement exact du menu du haut Corrige aussi les anciens navigateurs/cache qui affichent encore le rond + texte BPM. */ .site-nav > .logo{ width:52px!important; min-width:52px!important; height:54px!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:0!important; margin-right:.45rem!important; overflow:visible!important; } .site-nav > .logo.logo-with-image .logo-img, .site-nav > .logo .bpm-top-logo-img{ width:46px!important; height:46px!important; border-radius:50%!important; object-fit:contain!important; display:block!important; background:transparent!important; filter:drop-shadow(0 0 8px rgba(14,165,255,.35))!important; } /* Si l'ancien HTML est encore en cache : transformer le rond bleu vide en vrai logo. */ .site-nav > .logo .logo-ring{ width:46px!important; height:46px!important; border:0!important; border-radius:50%!important; background:url('../img/bpm-logo-menu.png?v=38') center center / contain no-repeat!important; font-size:0!important; color:transparent!important; box-shadow:none!important; } .site-nav > .logo > .logo-txt{ display:none!important; } @media(max-width:820px){ .site-nav > .logo{width:48px!important;min-width:48px!important;height:50px!important;margin-right:.25rem!important;} .site-nav > .logo.logo-with-image .logo-img, .site-nav > .logo .bpm-top-logo-img, .site-nav > .logo .logo-ring{width:42px!important;height:42px!important;} } /* V63 — Page Artistes premium */ .artistes-page{padding:1.5rem;max-width:1440px;margin:0 auto} .artistes-hero{position:relative;overflow:hidden;display:flex;align-items:flex-end;justify-content:space-between;gap:1.25rem;flex-wrap:wrap;margin-bottom:1rem;padding:1.6rem;border:1px solid var(--bdr);border-radius:22px;background:radial-gradient(circle at 15% 10%,rgba(42,127,255,.22),transparent 34%),radial-gradient(circle at 85% 20%,rgba(34,197,94,.12),transparent 32%),linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.015));box-shadow:0 24px 70px rgba(0,0,0,.25)} .artistes-hero:after{content:"";position:absolute;inset:auto -15% -50% 25%;height:180px;background:linear-gradient(90deg,transparent,rgba(42,127,255,.12),transparent);transform:rotate(-6deg);pointer-events:none} .artistes-hero .eyebrow{display:inline-flex;align-items:center;gap:.4rem;color:var(--bb);font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.45rem} .artistes-hero h1{font-size:clamp(30px,4vw,54px);line-height:.95;color:#fff;margin:0 0 .45rem;font-weight:800;letter-spacing:-.04em} .artistes-hero p{max-width:620px;color:var(--muted);font-size:14px;margin:0} .artistes-filter{position:relative;z-index:1;display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;justify-content:flex-end} .artistes-filter .search-inp{min-width:240px;max-width:280px} .artistes-filter .btn{font-size:12px;padding:8px 13px} .artistes-count{font-size:12px;color:var(--muted);margin:.75rem 0 1rem} .artistes-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.75rem;padding:3rem;color:var(--muted);border:1px dashed var(--bdr);border-radius:18px;background:var(--surf)} .artistes-empty i{font-size:48px;color:var(--muted2)} .artistes-premium-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(245px,1fr))!important;gap:1rem!important;margin-bottom:1.5rem} .artist-premium-card{position:relative;overflow:hidden;padding:0!important;text-align:left!important;border-radius:18px!important;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025))!important;border:1px solid rgba(255,255,255,.09)!important;box-shadow:0 18px 45px rgba(0,0,0,.22);min-height:274px;color:inherit} .artist-premium-card:hover{transform:translateY(-4px)!important;border-color:rgba(42,127,255,.55)!important;box-shadow:0 26px 70px rgba(0,0,0,.32)} .artist-premium-cover{position:relative;height:158px;background:linear-gradient(135deg,rgba(42,127,255,.22),rgba(12,18,32,.92));overflow:hidden} .artist-premium-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease,filter .35s ease;filter:saturate(1.08) contrast(1.04)} .artist-premium-card:hover .artist-premium-cover img{transform:scale(1.055);filter:saturate(1.2) contrast(1.08)} .artist-premium-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.66));pointer-events:none} .artist-premium-cover-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.25rem;background:radial-gradient(circle at 35% 25%,rgba(42,127,255,.36),transparent 38%),radial-gradient(circle at 70% 70%,rgba(34,197,94,.18),transparent 35%),linear-gradient(135deg,#08111f,#111827 55%,#05080f);color:rgba(255,255,255,.86)} .artist-premium-cover-placeholder i{font-size:42px;color:var(--bb)} .artist-premium-cover-placeholder span{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.5)} .artist-premium-pill{position:absolute;right:.75rem;top:.75rem;z-index:2;max-width:calc(100% - 1.5rem);padding:.25rem .62rem;border-radius:999px;background:rgba(0,0,0,.56);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(12px);color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.045em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .artist-premium-body{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:.75rem;align-items:center;padding:1rem .95rem 1rem;background:linear-gradient(180deg,rgba(11,15,24,.84),rgba(9,11,18,.96));min-height:116px} .artist-premium-avatar{width:58px;height:58px;border-radius:18px;background:linear-gradient(135deg,var(--blue),#0f172a);border:3px solid rgba(11,15,24,.96);box-shadow:0 14px 30px rgba(0,0,0,.28);display:flex;align-items:center;justify-content:center;overflow:hidden;color:#fff;font-weight:800;font-size:16px;flex-shrink:0;margin-top:-38px;position:relative;z-index:3} .artist-premium-avatar img{width:100%;height:100%;object-fit:cover} .artist-premium-info{min-width:0} .artist-premium-info h2{font-size:16px;line-height:1.15;margin:0 0 .4rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:800;letter-spacing:-.02em} .artist-premium-meta{display:flex;align-items:center;gap:.35rem .55rem;flex-wrap:wrap;color:var(--muted);font-size:11px;line-height:1.25} .artist-premium-meta span{display:inline-flex;align-items:center;gap:.25rem;min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .artist-premium-meta i{font-size:12px;color:var(--bb);flex-shrink:0} .artist-premium-arrow{width:34px;height:34px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.045);display:flex;align-items:center;justify-content:center;color:var(--bb);transition:.25s;flex-shrink:0} .artist-premium-card:hover .artist-premium-arrow{transform:translateX(2px);background:rgba(42,127,255,.16);border-color:rgba(42,127,255,.35)} .artistes-pagination{display:flex;justify-content:center;gap:.4rem;margin-top:1.5rem;flex-wrap:wrap} .artistes-pagination a{padding:7px 12px;border-radius:9px;border:1px solid var(--bdr);background:transparent;color:var(--muted);font-size:13px} .artistes-pagination a.active{border-color:var(--blue);background:var(--glow);color:var(--bb)} @media(max-width:760px){.artistes-page{padding:1rem}.artistes-hero{padding:1.15rem;border-radius:18px;align-items:flex-start}.artistes-filter{width:100%;justify-content:stretch}.artistes-filter .search-inp,.artistes-filter .fsel{min-width:100%;width:100%;max-width:none}.artistes-filter .btn{flex:1}.artistes-premium-grid{grid-template-columns:1fr!important;gap:.85rem!important}.artist-premium-cover{height:170px}.artist-premium-body{padding:.95rem}.artist-premium-info h2{font-size:17px}.artist-premium-avatar{width:62px;height:62px}} /* ============================================================ V64 — Harmonisation visuelle premium globale BPM Objectif : appliquer une apparence cohérente aux pages publiques, espaces membres, billetterie, événements, messagerie, lecteur et cPanel sans changer la logique PHP existante. ============================================================ */ :root{ --premium-bg:#04070f; --premium-panel:rgba(13,18,32,.82); --premium-panel-2:rgba(18,25,42,.78); --premium-line:rgba(255,255,255,.095); --premium-line-strong:rgba(77,159,255,.35); --premium-shadow:0 24px 70px rgba(0,0,0,.34); --premium-soft-shadow:0 14px 34px rgba(0,0,0,.24); --premium-radius:18px; --premium-radius-sm:12px; --premium-text:#f4f7ff; --premium-muted:rgba(232,234,242,.62); } html{background:var(--premium-bg)} body{ background: radial-gradient(circle at 8% -4%,rgba(42,127,255,.18),transparent 28%), radial-gradient(circle at 92% 8%,rgba(20,184,166,.12),transparent 26%), linear-gradient(180deg,#04070f 0%,#050508 46%,#04060c 100%)!important; color:var(--premium-text); } body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.5),transparent 65%)} .site-nav{position:sticky;top:0;z-index:220;background:rgba(7,10,18,.82)!important;backdrop-filter:blur(18px);border-bottom:1px solid var(--premium-line)!important;box-shadow:0 10px 30px rgba(0,0,0,.22)} .radio-bar{position:sticky;top:54px;z-index:210;background:rgba(10,15,28,.86)!important;backdrop-filter:blur(16px);border-bottom:1px solid rgba(77,159,255,.18)!important;box-shadow:0 10px 24px rgba(0,0,0,.16)} .nlink{border:1px solid transparent}.nlink:hover{background:rgba(255,255,255,.055)!important;border-color:rgba(255,255,255,.08);color:#fff}.nlink.active{background:linear-gradient(135deg,rgba(42,127,255,.2),rgba(20,184,166,.08))!important;border-color:rgba(77,159,255,.25);box-shadow:inset 0 0 0 1px rgba(255,255,255,.035)} .user-pill,.notif-bell{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08)} main:not(.auth-page):not(.msg-main):not(.admin-main):not(.espace-main):not(.artistes-page):not(.members-page):not(.redac-main){max-width:1480px;margin:0 auto;width:100%} .home-section,.profil-body,.article-page,.private-player-page,.chatroom-wrap,.studio-wrap,.members-page,.artistes-page{position:relative} .home-section{max-width:1480px;margin:0 auto;padding:1.45rem 1.5rem 0!important} .sec-head,.members-head,.artistes-hero,.pp-hero,.cr-head,.st-head{position:relative} .sec-title,.members-title,.pp-title,.cr-title,.deck-title,.pg-ttl{ color:#fff!important; text-shadow:0 10px 30px rgba(42,127,255,.16); } .sec-title:after,.members-title:after,.pp-title:after,.cr-title:after{content:"";display:block;width:46px;height:2px;margin-top:.35rem;border-radius:999px;background:linear-gradient(90deg,var(--blue),var(--teal),transparent)} .card,.dash-card,.pp-card,.cr-panel,.cr-box,.st-card,.encoder-panel,.deck-panel,.now-box,.device-report,.news-card,.article-une,.ic-card,.post-card,.playlist-card,.event-card,.member-card,.artist-premium-card,.alb-card,.ev-home-card,.news-home-main,.nhs-item,.auth-card,.ticket-type-card,.msg-sidebar,.conv-main,.msg-search-card,.admin-main .card,details.card{ background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.026))!important; border:1px solid var(--premium-line)!important; box-shadow:var(--premium-soft-shadow); backdrop-filter:blur(12px); } .card:hover,.dash-card:hover,.pp-card:hover,.st-card:hover,.news-card:hover,.article-une:hover,.playlist-card:hover,.event-card:hover,.member-card:hover,.alb-card:hover,.ev-home-card:hover,.nhs-item:hover,.artist-premium-card:hover{ border-color:var(--premium-line-strong)!important; box-shadow:var(--premium-shadow); } .card,.dash-card,.pp-card,.cr-panel,.cr-box,.st-card,.encoder-panel,.deck-panel,.now-box,.news-card,.article-une,.ic-card,.post-card,.playlist-card,.auth-card,.msg-sidebar,.conv-main{border-radius:var(--premium-radius)!important} .btn,.ab,.hero-btn-primary,.hero-btn-sec,.ev-home-cta,.cr-send,.st-btn,.tb-btn,.chat-action,.compose-tool{ border-radius:999px!important; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease,color .18s ease!important; } .btn:hover,.ab:hover,.hero-btn-primary:hover,.hero-btn-sec:hover,.ev-home-cta:hover,.cr-send:hover,.st-btn:hover,.chat-action:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(0,0,0,.24)} .btn-b,.ab-green,.hero-btn-primary,.cr-send,.ev-home-cta{background:linear-gradient(135deg,var(--blue),#14b8a6)!important;border:1px solid rgba(255,255,255,.12)!important;color:#fff!important;box-shadow:0 12px 28px rgba(42,127,255,.18)} .btn-o,.hero-btn-sec,.ab{background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.12)!important;color:rgba(255,255,255,.82)!important}.btn-o:hover,.hero-btn-sec:hover,.ab:hover{color:#fff!important;border-color:rgba(77,159,255,.42)!important;background:rgba(42,127,255,.105)!important} .btn-r,.ab-red{background:rgba(226,75,74,.13)!important;border-color:rgba(226,75,74,.32)!important;color:#ff8b8b!important}.btn-g{background:rgba(34,197,94,.13)!important;border-color:rgba(34,197,94,.32)!important;color:#9ff5bb!important}.btn-t{background:rgba(20,184,166,.13)!important;border-color:rgba(20,184,166,.32)!important;color:#82f1e6!important} .inp,input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="date"],input[type="time"],select,textarea,.search-inp,.fsel,.cr-textarea,.cr-select,.st-inp,.st-sel{ background:rgba(6,10,20,.72)!important; border:1px solid rgba(255,255,255,.11)!important; border-radius:13px!important; color:#fff!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.03); } .inp:focus,input:focus,select:focus,textarea:focus,.search-inp:focus,.fsel:focus,.cr-textarea:focus,.st-inp:focus,.st-sel:focus{border-color:rgba(77,159,255,.55)!important;box-shadow:0 0 0 4px rgba(42,127,255,.10),inset 0 1px 0 rgba(255,255,255,.04)!important;outline:none!important} .lbl,.s-lbl,.cs,.cs small,.ct+small{color:var(--premium-muted)!important} .tbl-wrap{border:1px solid rgba(255,255,255,.085);border-radius:16px;overflow:hidden;background:rgba(255,255,255,.025)} .tbl{border-collapse:separate!important;border-spacing:0;width:100%}.tbl th{background:rgba(255,255,255,.055)!important;color:#dfe9ff!important;font-size:11px;text-transform:uppercase;letter-spacing:.07em}.tbl td{border-top:1px solid rgba(255,255,255,.055)!important}.tbl tr:hover td{background:rgba(42,127,255,.05)} /* Accueil */ .hero-banner{max-width:1480px;margin:1.2rem auto 0;border:1px solid rgba(255,255,255,.1);border-radius:28px;overflow:hidden;box-shadow:var(--premium-shadow)} .hero-content{padding:2.25rem!important}.hero-name{font-size:clamp(42px,7vw,92px)!important;text-shadow:0 16px 44px rgba(0,0,0,.45)} .albums-grid,.artistes-grid,.ev-home-grid,.news-home-grid{gap:1rem!important}.alb-thumb{height:140px!important}.alb-card{border-radius:18px!important;overflow:hidden}.alb-info{padding:.85rem!important}.alb-name,.artist-card-name,.ev-home-title,.nhm-title,.nhs-title{font-weight:800!important;letter-spacing:-.01em}.artist-card{border-radius:18px!important;padding:1.15rem .9rem!important;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025))!important}.artist-card-ava{width:70px!important;height:70px!important;border:3px solid rgba(255,255,255,.08);box-shadow:0 16px 30px rgba(0,0,0,.25)} .ev-home-card{border-radius:20px!important;overflow:hidden}.ev-home-aff{height:150px!important}.ev-home-body{padding:1rem!important}.ev-home-date{background:rgba(42,127,255,.92)!important;backdrop-filter:blur(8px);box-shadow:0 10px 25px rgba(0,0,0,.28)} .news-home-main,.news-card{border-radius:20px!important}.nhm-img{height:245px!important}.nhs-item{border-radius:16px!important}.nhs-img{width:68px!important;height:68px!important} /* Pages listes */ .members-page,.artistes-page,.private-player-page,.chatroom-wrap,.studio-wrap{max-width:1480px!important;padding:1.5rem!important;margin:0 auto!important} .members-head,.artistes-hero,.pp-hero,.cr-head{padding:1.35rem!important;border:1px solid var(--premium-line)!important;border-radius:24px!important;background:radial-gradient(circle at 12% 0%,rgba(42,127,255,.22),transparent 35%),radial-gradient(circle at 88% 15%,rgba(20,184,166,.12),transparent 32%),linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02))!important;box-shadow:var(--premium-soft-shadow);margin-bottom:1rem!important} .members-search,.artistes-filter,.pp-searchbar,.msg-search,.search-bar{background:linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.022))!important;border:1px solid var(--premium-line)!important;border-radius:18px!important;box-shadow:var(--premium-soft-shadow)} .member-card{border-radius:20px!important;overflow:hidden}.member-cover{height:105px!important;background:radial-gradient(circle at 30% 20%,rgba(42,127,255,.28),transparent 42%),linear-gradient(135deg,#071225,#0b1322)!important}.member-cover img{opacity:.75!important;filter:saturate(1.08) contrast(1.05)}.member-body{padding:3rem 1rem 1rem!important}.member-name{font-size:16px!important}.member-ava{box-shadow:0 14px 32px rgba(0,0,0,.35)} .event-card{border-radius:18px!important;margin-bottom:.85rem!important;padding:1rem!important}.event-card:hover{transform:translateY(-2px)!important}.ev-date-col{background:linear-gradient(135deg,rgba(42,127,255,.18),rgba(255,255,255,.04))!important;border-color:rgba(77,159,255,.28)!important}.ev-img{width:86px!important;height:86px!important;border-radius:14px!important}.ev-title{font-size:16px!important;font-weight:800!important}.ev-meta,.ev-artist,.ev-prix{line-height:1.55!important} .role-tag,.alb-pill,.pp,.pbadge,.ev-type-badge,.art-cat,.stat-pill,.status-pill,.source-tag{border-radius:999px!important;border:1px solid rgba(255,255,255,.12)!important;background:rgba(255,255,255,.055)!important;backdrop-filter:blur(8px)} .news-grid{gap:1rem!important}.news-card{overflow:hidden}.nc-img{height:185px!important}.nc-body{padding:1rem!important}.nc-title{font-weight:900!important;color:#fff!important}.art-hero,.art-header-plain{border-radius:0 0 28px 28px;overflow:hidden;border-bottom:1px solid var(--premium-line);box-shadow:var(--premium-shadow)} /* Profils */ .profil-hero{max-width:1480px;margin:1rem auto 0;border-radius:28px;overflow:hidden;border:1px solid var(--premium-line);box-shadow:var(--premium-shadow)}.profil-body{max-width:1480px;margin:0 auto}.ph-name{font-size:clamp(36px,5vw,64px)!important}.ph-ava{box-shadow:0 20px 50px rgba(0,0,0,.42)}.profil-layout{gap:1rem!important}.profil-sidebar .card,.profil-main .card,.ic-card,.post-card{overflow:hidden} /* Auth */ .auth-page{background:radial-gradient(circle at 50% 0%,rgba(42,127,255,.18),transparent 38%),linear-gradient(180deg,transparent,rgba(0,0,0,.25));padding-left:1rem!important;padding-right:1rem!important}.auth-card{border-radius:26px!important;box-shadow:var(--premium-shadow)!important;position:relative;overflow:hidden}.auth-card:before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--blue),var(--teal),var(--purple));opacity:.9}.type-card{border-radius:18px!important;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025))!important;border:1px solid var(--premium-line)!important}.type-card:hover,.type-card.active{border-color:rgba(77,159,255,.5)!important;box-shadow:0 16px 38px rgba(42,127,255,.14)} /* Messagerie et chat */ .msg-shell,.cr-grid{gap:1rem!important}.conv-card,.message-row .bubble,.cr-bubble{border:1px solid rgba(255,255,255,.08);box-shadow:0 10px 24px rgba(0,0,0,.12)}.conv-card.active,.conv-card:hover{background:rgba(42,127,255,.12)!important;border-color:rgba(77,159,255,.35)!important}.msg-compose,.cr-compose{background:rgba(6,10,20,.78)!important;border-top:1px solid rgba(255,255,255,.08)!important}.cr-box{overflow:hidden}.cr-body{background:rgba(0,0,0,.16)!important} /* Lecteur et dashboards */ .pp-layout,.profil-layout,.ticket-layout{gap:1rem!important}.playlist-grid,.dash-grid,.stats-row,.mini-grid,.side-grid,.device-grid{gap:1rem!important}.dash-card,.sc,.stat-card{border-radius:18px!important}.pp-cover,.post-cover-img,.art-row-img{border-radius:14px!important}.pp-track,.playlist-track,.queue-row{background:rgba(255,255,255,.035)!important;border:1px solid rgba(255,255,255,.07)!important;border-radius:14px!important;margin-bottom:.45rem}.pp-track:hover,.playlist-track:hover,.queue-row:hover{border-color:rgba(77,159,255,.28)!important;background:rgba(42,127,255,.075)!important} /* Studio / live */ .radio-console,.deck-panel,.encoder-panel,.studio-chatroom-card{border-radius:24px!important;border:1px solid var(--premium-line)!important;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025))!important;box-shadow:var(--premium-soft-shadow)}.deck-art{box-shadow:0 22px 50px rgba(0,0,0,.34)}.mic-round{box-shadow:0 18px 45px rgba(42,127,255,.22)} /* Admin / cPanel */ .admin-main,.redac-main,.espace-main{background:transparent!important}.admin-shell,.redac-shell,.em-shell{background:transparent!important}.admin-main .pg-ttl,.redac-main .pg-ttl{padding:1.15rem 1.25rem;border-radius:22px;border:1px solid var(--premium-line);background:radial-gradient(circle at 12% 0%,rgba(42,127,255,.18),transparent 35%),linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02));box-shadow:var(--premium-soft-shadow);margin-bottom:1rem}.ni{border-radius:13px!important}.ni:hover,.ni.on{background:rgba(42,127,255,.12)!important;border-color:rgba(77,159,255,.26)!important}.card-head,.card-h{border-bottom:1px solid rgba(255,255,255,.075)!important;color:#fff!important} /* Images et placeholders */ .alb-thumb-placeholder,.ev-home-aff-ph,.nc-img-ph,.artistes-empty,.pp-empty,.empty-note,.empty-chat{background:radial-gradient(circle at 40% 20%,rgba(42,127,255,.22),transparent 42%),linear-gradient(135deg,#071225,#0b1322)!important;border:1px dashed rgba(255,255,255,.12)!important;color:rgba(255,255,255,.58)!important} img{image-rendering:auto}.alb-thumb img,.ev-home-aff img,.artist-premium-cover img,.member-cover img,.ev-img img,.nc-img img,.nhm-img img,.ph-bg-img,.profil-cover img{transition:transform .35s ease,filter .35s ease}.alb-card:hover img,.ev-home-card:hover img,.member-card:hover .member-cover img,.event-card:hover .ev-img img,.news-card:hover .nc-img img{transform:scale(1.045);filter:saturate(1.16) contrast(1.06)} /* Responsive général */ @media(max-width:1120px){.albums-grid{grid-template-columns:repeat(4,1fr)!important}.artistes-grid{grid-template-columns:repeat(3,1fr)!important}.ev-home-grid{grid-template-columns:repeat(2,1fr)!important}.news-home-grid{grid-template-columns:1fr!important}main>div[style*="grid-template-columns:1fr 380px"]{grid-template-columns:1fr!important}#events-map{min-height:360px!important}} @media(max-width:900px){.radio-bar{top:58px}.albums-grid,.artistes-grid,.ev-home-grid,.news-grid,.members-grid,.playlist-grid,.dash-grid{grid-template-columns:1fr!important}.home-section,.members-page,.artistes-page,.private-player-page,.chatroom-wrap,.studio-wrap{padding:1rem!important}.hero-banner,.profil-hero{margin:.8rem .8rem 0;border-radius:22px}.hero-content{padding:1.35rem!important}.event-card{display:grid!important;grid-template-columns:auto 1fr!important}.ev-img{grid-column:1/-1;width:100%!important;height:170px!important}.profil-layout,.pp-layout,.ticket-layout,.cr-grid{grid-template-columns:1fr!important}.ph-bottom{align-items:flex-start!important;flex-wrap:wrap}.ph-actions{width:100%;margin-top:.5rem}.tbl th:last-child,.tbl td:last-child{position:static!important;box-shadow:none!important}} @media(max-width:760px){.site-nav{top:0}.radio-bar{top:58px}.sec-head{align-items:flex-start;gap:.55rem;flex-direction:column}.sec-title{font-size:25px!important}.members-head,.artistes-hero,.pp-hero,.cr-head{padding:1rem!important;border-radius:20px!important}.members-title,.artistes-hero h1{font-size:34px!important}.alb-thumb,.ev-home-aff,.nhm-img,.nc-img{height:175px!important}.auth-card{border-radius:22px!important}.btn,.ab{width:auto}.nav-right .notif-bell:nth-of-type(n+3){display:none}.ev-home-meta{display:grid!important;gap:.28rem!important}.msg-shell{height:auto!important;min-height:calc(100vh - 140px)}.msg-sidebar{max-height:45vh;overflow:auto}.conv-main{min-height:60vh}.admin-main .pg-ttl,.redac-main .pg-ttl{border-radius:18px;padding:1rem}.card{padding:1rem!important}} /* BPM V66 — Actions rapides du header mobile */ .mobile-top-icon{display:none} @media(max-width:760px){ .site-nav{align-items:center} .nav-right{margin-left:0;gap:.35rem;align-items:center} .nav-right .desktop-auth{display:none!important} .mobile-top-icon{ width:38px; height:38px; border-radius:14px; border:1px solid rgba(255,255,255,.12); background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03)); color:#fff; display:none; align-items:center; justify-content:center; font-size:21px; box-shadow:0 12px 28px rgba(0,0,0,.18); -webkit-tap-highlight-color:transparent; } .mobile-top-icon:hover,.mobile-top-icon:focus{border-color:rgba(77,159,255,.55);color:var(--bb);background:rgba(42,127,255,.13)} .nav-right .mobile-login-action{display:flex!important} .nav-right .mobile-important{display:flex!important} .nav-right .mobile-extra{display:none!important} .nav-right .notif-bell{ width:38px; height:38px; padding:0!important; align-items:center; justify-content:center; border-radius:14px; border:1px solid rgba(255,255,255,.12); background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03)); color:#fff; box-shadow:0 12px 28px rgba(0,0,0,.18); -webkit-tap-highlight-color:transparent; } .nav-right .notif-bell:hover,.nav-right .notif-bell:focus{border-color:rgba(77,159,255,.55);color:var(--bb);background:rgba(42,127,255,.13)} .nav-right .notif-bell.mobile-important:nth-of-type(n+3){display:flex!important} .nav-right .user-pill{ width:38px!important; height:38px!important; padding:3px!important; border-radius:14px!important; border:1px solid rgba(255,255,255,.12)!important; background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03))!important; box-shadow:0 12px 28px rgba(0,0,0,.18); } .nav-right .user-pill img,.nav-right .user-initials{width:30px;height:30px} .notif-count{top:-4px;right:-4px;min-width:17px;width:auto;height:17px;padding:0 4px;border:2px solid rgba(7,10,18,.95);font-size:10px;font-weight:800} } @media(max-width:390px){ .nav-right{gap:.25rem} .nav-right .notif-bell,.mobile-top-icon,.nav-right .user-pill{width:35px!important;height:35px!important;border-radius:12px!important} .nav-right .user-pill img,.nav-right .user-initials{width:28px;height:28px} } /* BPM V67 — Correctif réel header mobile : action compte à droite + anti-cache CSS */ @media(max-width:760px){ .site-nav{ width:100%!important; display:flex!important; align-items:center!important; flex-wrap:nowrap!important; gap:.55rem!important; } .site-nav > .logo{ order:1!important; margin-right:0!important; flex:0 0 auto!important; } .site-nav > .mobile-menu-btn{ order:2!important; flex:0 0 auto!important; display:flex!important; } .site-nav > .nav-links{display:none!important;} .site-nav > .nav-right{ order:3!important; margin-left:auto!important; display:flex!important; align-items:center!important; justify-content:flex-end!important; gap:.42rem!important; flex:0 0 auto!important; min-width:38px!important; } .site-nav > .nav-right .desktop-auth{display:none!important;} .site-nav > .nav-right .mobile-login-action{ display:inline-flex!important; align-items:center!important; justify-content:center!important; visibility:visible!important; opacity:1!important; } .site-nav > .nav-right .mobile-important{ display:inline-flex!important; align-items:center!important; justify-content:center!important; visibility:visible!important; opacity:1!important; } .site-nav > .nav-right .mobile-extra{display:none!important;} .site-nav > .nav-right .user-pill span, .site-nav > .nav-right .user-pill .badge-role{display:none!important;} .site-nav > .nav-right .user-pill{ display:inline-flex!important; align-items:center!important; justify-content:center!important; width:38px!important; height:38px!important; min-width:38px!important; padding:3px!important; } } /* BPM V96 — Publicité interactive "En onde maintenant" sur la page Découvrir */ .discover-live-ad{ position:relative; isolation:isolate; overflow:hidden; margin:0 0 1.35rem; padding:1.05rem; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:1rem; border:1px solid rgba(77,159,255,.36); border-radius:22px; background: radial-gradient(circle at 12% 20%,rgba(14,165,255,.34),transparent 32%), radial-gradient(circle at 92% 8%,rgba(20,184,166,.18),transparent 38%), linear-gradient(135deg,rgba(10,18,38,.98),rgba(2,6,23,.96)); box-shadow:0 20px 70px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08); } .discover-live-ad:before{ content:""; position:absolute; inset:-35% -8%; background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.06) 38%,transparent 62%); transform:translateX(-35%); animation:dlaSweep 7s linear infinite; z-index:-1; } .discover-live-ad:after{ content:""; position:absolute; inset:0; border-radius:22px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.035); pointer-events:none; } .dla-avatar{ width:88px; height:88px; position:relative; border-radius:24px; overflow:hidden; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,rgba(14,165,255,.45),rgba(20,184,166,.28)); border:1px solid rgba(255,255,255,.16); box-shadow:0 0 0 8px rgba(14,165,255,.08),0 16px 38px rgba(0,0,0,.35); flex:0 0 auto; } .dla-avatar img{width:100%;height:100%;object-fit:cover;display:block} .dla-avatar strong{font-family:var(--head);font-size:30px;letter-spacing:1px} .dla-content{min-width:0;position:relative;z-index:1} .dla-kicker{ display:inline-flex; align-items:center; gap:.42rem; margin-bottom:.32rem; padding:.28rem .55rem; border:1px solid rgba(239,68,68,.38); border-radius:999px; color:#fecaca; background:rgba(239,68,68,.15); font-size:11px; font-weight:900; letter-spacing:.08em; } .dla-kicker em{font-style:normal;color:#fff;background:#ef4444;border-radius:999px;padding:.1rem .34rem;font-size:10px;box-shadow:0 0 18px rgba(239,68,68,.45)} .dla-live-dot{width:8px;height:8px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 0 rgba(239,68,68,.7);animation:dlaPulse 1.35s infinite} .dla-content h2{font-family:var(--head);font-size:clamp(27px,4vw,44px);letter-spacing:1.2px;color:#fff;line-height:.95;margin:0 0 .25rem;text-transform:uppercase} .dla-host{margin:.15rem 0 0;color:#dbeafe;font-size:14px;line-height:1.35}.dla-host strong{color:#fff} .dla-desc{max-width:820px;margin:.42rem 0 0;color:var(--muted);font-size:13px;line-height:1.45} .dla-actions{display:flex;align-items:center;justify-content:flex-end;gap:.55rem;flex-wrap:wrap;position:relative;z-index:1}.dla-listen{box-shadow:0 12px 35px rgba(14,165,255,.26)} .dla-wave{height:24px;display:flex;align-items:flex-end;gap:4px;margin-top:.55rem}.dla-wave i{display:block;width:5px;border-radius:9px;background:linear-gradient(180deg,#7dd3fc,#22d3ee);opacity:.86;animation:dlaBars 1.1s ease-in-out infinite}.dla-wave i:nth-child(1){height:8px;animation-delay:-.2s}.dla-wave i:nth-child(2){height:18px;animation-delay:-.45s}.dla-wave i:nth-child(3){height:12px;animation-delay:-.1s}.dla-wave i:nth-child(4){height:22px;animation-delay:-.35s}.dla-wave i:nth-child(5){height:14px;animation-delay:-.55s}.dla-wave i:nth-child(6){height:9px;animation-delay:-.25s} .dla-orbit{position:absolute;inset:auto 22px 18px auto;width:112px;height:112px;opacity:.35;pointer-events:none}.dla-orbit span{position:absolute;inset:0;border:1px solid rgba(125,211,252,.45);border-radius:50%;animation:dlaOrbit 3.8s linear infinite}.dla-orbit span:nth-child(2){inset:18px;animation-duration:3s;animation-direction:reverse}.dla-orbit span:nth-child(3){inset:36px;animation-duration:2.4s} @keyframes dlaPulse{70%{box-shadow:0 0 0 10px rgba(239,68,68,0)}} @keyframes dlaBars{0%,100%{transform:scaleY(.48);opacity:.55}50%{transform:scaleY(1);opacity:1}} @keyframes dlaSweep{0%{transform:translateX(-45%)}100%{transform:translateX(45%)}} @keyframes dlaOrbit{to{transform:rotate(360deg)}} @media(max-width:820px){.discover-live-ad{grid-template-columns:auto minmax(0,1fr);align-items:flex-start}.dla-actions{grid-column:1/-1;justify-content:flex-start;width:100%}.dla-actions .btn{flex:1 1 190px;justify-content:center}.dla-avatar{width:74px;height:74px;border-radius:20px}.dla-orbit{display:none}} @media(max-width:520px){.discover-live-ad{grid-template-columns:1fr;text-align:center;padding:1rem}.dla-avatar{margin:0 auto}.dla-kicker{justify-content:center}.dla-wave{justify-content:center}.dla-actions{justify-content:center}.dla-actions .btn{width:100%;flex-basis:100%}} /* ═══════════════════════════════════════════════════════════ BPM V101 — LECTEUR RADIO PREMIUM HEADER Design seulement : conserve le flux RCAST et les IDs JS existants. ═══════════════════════════════════════════════════════════ */ .radio-bar{ position:relative!important; z-index:9!important; min-height:68px!important; height:auto!important; padding:.58rem 1.15rem!important; gap:.85rem!important; overflow:hidden!important; background: radial-gradient(circle at 9% 50%, rgba(14,165,255,.22), transparent 28%), radial-gradient(circle at 88% 20%, rgba(34,211,238,.14), transparent 28%), linear-gradient(135deg, rgba(3,9,22,.96), rgba(6,17,36,.94) 52%, rgba(2,11,23,.98))!important; border-top:1px solid rgba(255,255,255,.055)!important; border-bottom:1px solid rgba(59,130,246,.22)!important; box-shadow:0 18px 42px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.055)!important; backdrop-filter:blur(18px) saturate(130%); -webkit-backdrop-filter:blur(18px) saturate(130%); } .radio-bar::before{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(90deg, transparent, rgba(125,211,252,.13), transparent), repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 12px); opacity:.42; transform:translateX(-38%); transition:opacity .25s ease; } .radio-bar::after{ content:""; position:absolute; left:0;right:0;bottom:0; height:1px; background:linear-gradient(90deg, transparent, rgba(14,165,255,.9), rgba(34,211,238,.65), transparent); opacity:.72; } .radio-bar.rb-playing::before{ opacity:.72; animation:rbLightSweep 7s linear infinite; } @keyframes rbLightSweep{0%{transform:translateX(-48%)}100%{transform:translateX(48%)}} .rb-artwork{ width:52px!important; height:52px!important; border-radius:16px!important; border:1px solid rgba(125,211,252,.22)!important; background:linear-gradient(145deg, rgba(5,21,43,.96), rgba(13,35,68,.92))!important; box-shadow:0 14px 28px rgba(0,0,0,.32), 0 0 0 4px rgba(14,165,255,.055)!important; } .rb-artwork-ph{ color:#bdefff!important; background: radial-gradient(circle at 35% 30%, rgba(34,211,238,.28), transparent 34%), linear-gradient(135deg, #061329, #0a2442 58%, #07101f)!important; } .rb-artwork-ph i{filter:drop-shadow(0 0 12px rgba(34,211,238,.42));} .rb-artwork img{border-radius:16px!important;} .rb-artwork-pulse{ background:radial-gradient(circle, rgba(34,211,238,.26), transparent 58%)!important; mix-blend-mode:screen; } .rb-playing .rb-artwork{ border-color:rgba(34,211,238,.42)!important; box-shadow:0 14px 30px rgba(0,0,0,.36), 0 0 22px rgba(14,165,255,.18)!important; } .rb-live{ position:relative; gap:.45rem!important; padding:.34rem .62rem!important; border-radius:999px!important; background:rgba(5,15,31,.72)!important; border:1px solid rgba(34,211,238,.24)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.07)!important; } .rb-dot{ width:8px!important; height:8px!important; background:#18e6ff!important; box-shadow:0 0 0 0 rgba(34,211,238,.7), 0 0 12px rgba(34,211,238,.75)!important; animation:rbLivePulse 1.6s ease-in-out infinite!important; } @keyframes rbLivePulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(34,211,238,.55),0 0 12px rgba(34,211,238,.75)}50%{transform:scale(.82);box-shadow:0 0 0 7px rgba(34,211,238,0),0 0 18px rgba(34,211,238,.95)}} .rb-badge{ background:transparent!important; border:0!important; color:#dff8ff!important; font-size:10px!important; font-weight:800!important; letter-spacing:1.35px!important; padding:0!important; text-shadow:0 0 12px rgba(34,211,238,.45); } .rb-sep{ width:1px!important; height:34px!important; background:linear-gradient(to bottom, transparent, rgba(125,211,252,.34), transparent)!important; } .rb-meta{ flex:1 1 auto!important; min-width:0!important; overflow:hidden!important; } .rb-meta-inner{ position:relative; z-index:1; gap:4px!important; min-width:0!important; } .rb-meta-top{gap:.5rem!important;min-width:0!important;} .rb-station{ flex-shrink:0; display:inline-flex; align-items:center; gap:.3rem; padding:.16rem .5rem; border-radius:999px; background:rgba(14,165,255,.11); border:1px solid rgba(14,165,255,.20); color:#83dcff; font-size:10px; font-weight:800; letter-spacing:.85px; text-transform:uppercase; line-height:1.25; } .rb-station::before{ content:""; width:5px;height:5px;border-radius:50%; background:#22d3ee; box-shadow:0 0 9px rgba(34,211,238,.85); } .rb-track{ max-width:clamp(180px, 37vw, 520px)!important; font-size:14px!important; font-weight:800!important; letter-spacing:.05px!important; color:#ffffff!important; text-shadow:0 0 18px rgba(14,165,255,.17); } .rb-meta-bot{gap:.55rem!important;min-width:0!important;} .rb-artist{ max-width:clamp(120px, 22vw, 320px)!important; color:#9fb1d1!important; font-size:12px!important; font-weight:600!important; } .rb-artist:empty::after{content:"En direct sur BPM";color:#9fb1d1;} .rb-album{ color:#6fdcff!important; font-size:11px!important; opacity:.85; } .rb-listeners{ color:#6ef9c5!important; font-size:11px!important; font-weight:700; } .rb-wave{ opacity:.42; width:27px!important; height:18px!important; align-items:flex-end!important; } .rb-playing .rb-wave{opacity:1!important;} .rb-bar{ width:3px!important; min-height:4px; background:linear-gradient(to top, #1d7dff, #22d3ee, #dff8ff)!important; box-shadow:0 0 10px rgba(34,211,238,.45); animation:rbPremiumWave 1.05s ease-in-out infinite!important; } .rb-bar:nth-child(2){animation-delay:.10s!important}.rb-bar:nth-child(3){animation-delay:.22s!important}.rb-bar:nth-child(4){animation-delay:.34s!important}.rb-bar:nth-child(5){animation-delay:.16s!important} @keyframes rbPremiumWave{0%,100%{height:4px;opacity:.6}50%{height:18px;opacity:1}} .radio-bar:not(.rb-playing) .rb-bar{animation-play-state:paused!important;height:5px!important;opacity:.52!important;} .rb-right{ position:relative; z-index:2; margin-left:auto!important; gap:.75rem!important; } .rb-vol{ height:36px; padding:0 .65rem; border-radius:999px; background:rgba(2,10,22,.48); border:1px solid rgba(148,163,184,.14); color:#9fb1d1!important; } .rb-vol i{font-size:16px!important;color:#7dd3fc;} .rb-vol-bar{ width:82px!important; height:5px!important; background:rgba(148,163,184,.22)!important; border-radius:999px!important; overflow:hidden; } .rb-vol-fill{ background:linear-gradient(90deg, #2563eb, #22d3ee)!important; box-shadow:0 0 12px rgba(34,211,238,.45)!important; } .rb-play-btn{ width:44px!important; height:44px!important; border-radius:16px!important; border:1px solid rgba(255,255,255,.16)!important; background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.24), transparent 28%), linear-gradient(135deg, #0ea5ff, #2563eb 58%, #123ecf)!important; color:#fff!important; font-size:18px!important; box-shadow:0 14px 28px rgba(37,99,235,.34), 0 0 0 5px rgba(14,165,255,.08)!important; transform:translateZ(0); } .rb-play-btn:hover{ transform:translateY(-1px); box-shadow:0 16px 34px rgba(14,165,255,.42), 0 0 0 6px rgba(34,211,238,.10)!important; } .rb-playing .rb-play-btn{ background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.24), transparent 28%), linear-gradient(135deg, #22d3ee, #0ea5ff 50%, #2563eb)!important; } @media(max-width:900px){ .radio-bar{min-height:62px!important;padding:.55rem .85rem!important;gap:.65rem!important;} .rb-artwork{width:48px!important;height:48px!important;border-radius:14px!important;} .rb-play-btn{width:42px!important;height:42px!important;border-radius:15px!important;} .rb-vol-bar{width:58px!important;} .rb-track{max-width:34vw!important;font-size:13px!important;} .rb-artist{max-width:22vw!important;} } @media(max-width:760px){ .site-nav{z-index:200!important;} .radio-bar{ top:auto!important; min-height:62px!important; padding:.55rem .78rem!important; flex-wrap:nowrap!important; } .rb-live,.rb-sep{display:none!important;} .rb-artwork{display:flex!important;width:46px!important;height:46px!important;} .rb-vol{display:none!important;} .rb-station{font-size:9px!important;padding:.13rem .42rem!important;} .rb-track{max-width:calc(100vw - 190px)!important;font-size:12.5px!important;} .rb-artist{max-width:calc(100vw - 210px)!important;font-size:11px!important;} .rb-wave{width:22px!important;} .rb-right{margin-left:.35rem!important;} } @media(max-width:480px){ .radio-bar{min-height:58px!important;padding:.48rem .65rem!important;gap:.5rem!important;} .rb-artwork{width:42px!important;height:42px!important;border-radius:13px!important;} .rb-wave{display:none!important;} .rb-station{display:none!important;} .rb-track{max-width:calc(100vw - 128px)!important;font-size:12px!important;} .rb-artist{max-width:calc(100vw - 135px)!important;font-size:10.5px!important;} .rb-play-btn{width:40px!important;height:40px!important;border-radius:14px!important;font-size:17px!important;} } /* ═══════════════════════════════════════════════════════════ BPM V102 — LECTEUR STICKY + NAVIGATION PERSISTANTE Garde le lecteur premium visible avec le menu et permet la navigation AJAX/PJAX sans détruire l'objet Audio. ═══════════════════════════════════════════════════════════ */ .bpm-sticky-shell{ position:sticky; top:0; z-index:900; width:100%; isolation:isolate; box-shadow:0 18px 42px rgba(0,0,0,.20); } .bpm-sticky-shell .site-nav, .bpm-sticky-shell .radio-bar{ position:relative!important; top:auto!important; left:auto!important; right:auto!important; width:100%!important; } .bpm-sticky-shell .site-nav{ z-index:902!important; } .bpm-sticky-shell .radio-bar{ z-index:901!important; } .bpm-pjax-content{ min-height:calc(100vh - 150px); transition:opacity .16s ease, filter .16s ease; } body.bpm-pjax-loading .bpm-pjax-content{ opacity:.62; filter:blur(.4px); pointer-events:none; } .bpm-sticky-shell::after{ content:""; position:absolute; left:0;right:0;bottom:-1px; height:1px; pointer-events:none; background:linear-gradient(90deg, transparent, rgba(34,211,238,.55), rgba(77,159,255,.35), transparent); } .bpm-persistent-player-ready .radio-bar{ transform:translateZ(0); will-change:transform; } @media(max-width:760px){ .bpm-sticky-shell{ z-index:950; } .bpm-sticky-shell .site-nav{ min-height:58px!important; } .bpm-sticky-shell .radio-bar{ top:auto!important; } .bpm-pjax-content{ min-height:calc(100vh - 128px); } } /* ═══════════════════════════════════════════════════════════ BPM V138 — correction mise en forme lecteur du haut Garde le lecteur connecté aux métadonnées sans toucher au flux audio. ═══════════════════════════════════════════════════════════ */ .radio-bar#radioBar{ display:flex!important; align-items:center!important; width:100%!important; box-sizing:border-box!important; min-height:64px!important; gap:.75rem!important; } #radioBar .rb-artwork{ flex:0 0 50px!important; position:relative!important; overflow:hidden!important; } #radioBar .rb-artwork img{ width:100%!important; height:100%!important; object-fit:cover!important; display:block; } #radioBar .rb-live, #radioBar .rb-right, #radioBar .rb-vol, #radioBar .rb-play-btn{ flex:0 0 auto!important; } #radioBar .rb-meta{ flex:1 1 auto!important; min-width:0!important; overflow:hidden!important; } #radioBar .rb-meta-inner, #radioBar .rb-meta-top, #radioBar .rb-meta-bot{ min-width:0!important; overflow:hidden!important; } #radioBar .rb-track, #radioBar .rb-artist, #radioBar .rb-album, #radioBar .rb-listeners{ white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } #radioBar .rb-track{ display:inline-block!important; max-width:min(44vw,560px)!important; } #radioBar .rb-artist{ display:inline-block!important; max-width:min(24vw,330px)!important; } #radioBar .rb-album{ display:inline-block!important; max-width:min(30vw,420px)!important; } #radioBar .rb-listeners{ display:inline-flex; align-items:center; flex-shrink:0!important; } #radioBar .rb-listeners:not(:empty)::before{ content:"•"; margin:0 .38rem; color:rgba(125,211,252,.65); } @media(max-width:760px){ #radioBar .rb-track{max-width:calc(100vw - 152px)!important;} #radioBar .rb-artist{max-width:calc(100vw - 185px)!important;} #radioBar .rb-album{display:none!important;} #radioBar .rb-listeners{font-size:10px!important;} } @media(max-width:480px){ .radio-bar#radioBar{min-height:56px!important;gap:.45rem!important;} #radioBar .rb-artwork{flex-basis:40px!important;width:40px!important;height:40px!important;} #radioBar .rb-live{display:none!important;} #radioBar .rb-track{max-width:calc(100vw - 104px)!important;} #radioBar .rb-artist{max-width:calc(100vw - 118px)!important;} #radioBar .rb-listeners{display:none!important;} } /* ═══════════════════════════════════════════════════════════ BPM V139 — lecteur haut BPM connecté RCAST, design BPM gardé Aucun iframe RCAST : audio RCAST + métadonnées via /api/rcast-nowplaying.php ═══════════════════════════════════════════════════════════ */ .radio-bar#radioBar{ min-height:66px!important; padding:.55rem 1rem!important; display:flex!important; align-items:center!important; gap:.75rem!important; overflow:hidden!important; } #radioBar .rb-artwork{ width:52px!important; height:52px!important; flex:0 0 52px!important; border-radius:16px!important; background:linear-gradient(135deg,rgba(14,165,255,.25),rgba(15,23,42,.9))!important; box-shadow:0 10px 30px rgba(0,0,0,.30), inset 0 0 0 1px rgba(255,255,255,.08)!important; } #radioBar .rb-artwork img{ width:100%!important; height:100%!important; object-fit:cover!important; border-radius:16px!important; } #radioBar .rb-live{ flex:0 0 auto!important; white-space:nowrap!important; } #radioBar .rb-meta{ flex:1 1 auto!important; min-width:0!important; overflow:hidden!important; } #radioBar .rb-meta-inner{min-width:0!important;width:100%!important;overflow:hidden!important;} #radioBar .rb-meta-top, #radioBar .rb-meta-bot{ display:flex!important; align-items:center!important; min-width:0!important; overflow:hidden!important; } #radioBar .rb-track{ display:block!important; flex:1 1 auto!important; min-width:0!important; max-width:100%!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; font-weight:900!important; letter-spacing:.01em!important; } #radioBar .rb-artist{ display:inline-block!important; max-width:min(34vw,420px)!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } #radioBar .rb-album{ display:inline-block!important; max-width:min(32vw,420px)!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; opacity:.82!important; } #radioBar .rb-listeners{ flex:0 0 auto!important; white-space:nowrap!important; } #radioBar .rb-right{ flex:0 0 auto!important; margin-left:auto!important; display:flex!important; align-items:center!important; gap:.65rem!important; } @media(max-width:760px){ .radio-bar#radioBar{min-height:60px!important;padding:.5rem .65rem!important;gap:.5rem!important;} #radioBar .rb-artwork{display:flex!important;width:44px!important;height:44px!important;flex-basis:44px!important;border-radius:14px!important;} #radioBar .rb-live{display:none!important;} #radioBar .rb-vol{display:none!important;} #radioBar .rb-artist{max-width:calc(100vw - 138px)!important;} #radioBar .rb-album{display:none!important;} } @media(max-width:420px){ #radioBar .rb-station{display:none!important;} #radioBar .rb-artwork{width:40px!important;height:40px!important;flex-basis:40px!important;} #radioBar .rb-listeners{display:none!important;} } /* V159 — Pop-up avis de maintenance BPM */ .bpm-maintenance-open{overflow:hidden} .bpm-maintenance-popup[hidden]{display:none!important} .bpm-maintenance-popup{position:fixed;inset:0;z-index:5000;display:flex;align-items:center;justify-content:center;padding:18px;color:#fff} .bpm-maintenance-backdrop{position:absolute;inset:0;background:rgba(2,6,16,.76);backdrop-filter:blur(10px)} .bpm-maintenance-card{position:relative;width:min(520px,calc(100vw - 28px));overflow:hidden;border-radius:28px;border:1px solid rgba(255,255,255,.13);background:linear-gradient(145deg,rgba(9,14,27,.98),rgba(4,8,18,.98));box-shadow:0 30px 90px rgba(0,0,0,.62),0 0 0 1px rgba(42,127,255,.08) inset;padding:30px;text-align:left;animation:bpmMaintenanceIn .22s ease-out both} .bpm-maintenance-glow{position:absolute;right:-90px;top:-90px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(42,127,255,.34),rgba(20,184,166,.13) 38%,transparent 70%);pointer-events:none} .bpm-maintenance-close{position:absolute;top:13px;right:13px;width:38px;height:38px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.055);color:#dbeafe;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2} .bpm-maintenance-close:hover{background:rgba(255,255,255,.10);color:#fff} .bpm-maintenance-icon{width:64px;height:64px;border-radius:22px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(42,127,255,.22),rgba(20,184,166,.16));border:1px solid rgba(77,159,255,.26);box-shadow:0 16px 38px rgba(42,127,255,.16);font-size:32px;color:#8fc5ff;margin-bottom:16px} .bpm-maintenance-kicker{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(20,184,166,.27);background:rgba(20,184,166,.10);color:#8ff5e5;border-radius:999px;padding:6px 10px;font-size:11px;text-transform:uppercase;letter-spacing:.11em;font-weight:700;margin-bottom:12px} .bpm-maintenance-card h2{font-family:var(--head);font-size:42px;line-height:.95;letter-spacing:1px;margin:0 42px 12px 0;color:#fff} .bpm-maintenance-card p{font-size:14px;line-height:1.65;color:#c9d4ea;margin:0;max-width:450px} .bpm-maintenance-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px} .bpm-maintenance-ok{border:0;border-radius:999px;background:linear-gradient(135deg,var(--bb),#14b8a6);color:#fff;font-weight:800;padding:12px 18px;cursor:pointer;box-shadow:0 14px 32px rgba(42,127,255,.25)} .bpm-maintenance-ok:hover{filter:brightness(1.08)} @keyframes bpmMaintenanceIn{from{opacity:0;transform:translateY(14px) scale(.975)}to{opacity:1;transform:translateY(0) scale(1)}} @media(max-width:560px){.bpm-maintenance-popup{align-items:flex-end;padding:12px}.bpm-maintenance-card{border-radius:24px;padding:24px 20px 22px}.bpm-maintenance-card h2{font-size:34px;margin-right:36px}.bpm-maintenance-card p{font-size:13px}.bpm-maintenance-icon{width:56px;height:56px;border-radius:20px;font-size:28px}} /* BPM V169 — Grande section radio en ligne sur Découvrir */ .discover-radio-now{ position:relative; isolation:isolate; overflow:hidden; margin:0 0 1.35rem; padding:1.1rem; display:grid; grid-template-columns:168px minmax(0,1fr) minmax(210px,260px); align-items:center; gap:1.05rem; border:1px solid rgba(77,159,255,.34); border-radius:26px; background: radial-gradient(circle at 12% 20%,rgba(14,165,255,.30),transparent 32%), radial-gradient(circle at 90% 4%,rgba(20,184,166,.20),transparent 38%), linear-gradient(135deg,rgba(7,15,33,.98),rgba(2,6,23,.96)); box-shadow:0 24px 80px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08); } .discover-radio-now:before{ content:""; position:absolute; inset:-45% -12%; background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.07) 38%,transparent 62%); transform:translateX(-42%); animation:drnSweep 8s linear infinite; z-index:-1; } .discover-radio-now:after{ content:""; position:absolute; inset:0; border-radius:26px; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.035); } .drn-bg{position:absolute;inset:auto -80px -140px auto;width:310px;height:310px;border-radius:50%;background:rgba(14,165,255,.16);filter:blur(12px);z-index:-1} .drn-cover-wrap{position:relative;width:168px;height:168px;border-radius:26px;overflow:hidden;border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 50px rgba(0,0,0,.44),0 0 0 8px rgba(14,165,255,.07)} .drn-cover-glow{position:absolute;inset:-25px;background:radial-gradient(circle,rgba(125,211,252,.22),transparent 60%);z-index:0} .drn-cover{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block;background:#071126} .drn-cover-badge{position:absolute;left:10px;bottom:10px;z-index:2;display:inline-flex;align-items:center;gap:.28rem;padding:.28rem .5rem;border-radius:999px;background:rgba(2,6,23,.76);border:1px solid rgba(255,255,255,.14);color:#e0f2fe;font-size:10px;font-weight:900;letter-spacing:.08em;backdrop-filter:blur(10px)} .drn-main{min-width:0;position:relative;z-index:1} .drn-kicker{display:inline-flex;align-items:center;gap:.42rem;margin-bottom:.45rem;padding:.3rem .58rem;border:1px solid rgba(239,68,68,.38);border-radius:999px;color:#fecaca;background:rgba(239,68,68,.14);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase} .drn-kicker em{font-style:normal;color:#fff;background:#ef4444;border-radius:999px;padding:.1rem .38rem;font-size:10px;box-shadow:0 0 18px rgba(239,68,68,.45)} .drn-live-dot{width:8px;height:8px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 0 rgba(239,68,68,.72);animation:drnPulse 1.35s infinite} .discover-radio-now.is-autodj .drn-kicker{border-color:rgba(56,189,248,.38);color:#bae6fd;background:rgba(14,165,255,.13)} .discover-radio-now.is-autodj .drn-kicker em{background:#0284c7;box-shadow:0 0 18px rgba(14,165,255,.42)} .discover-radio-now.is-autodj .drn-live-dot{background:#38bdf8;box-shadow:0 0 0 0 rgba(56,189,248,.68)} .drn-main h2{font-family:var(--head);font-size:clamp(34px,4.8vw,62px);letter-spacing:1.2px;color:#fff;line-height:.92;margin:0;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis} .drn-artist{margin:.45rem 0 0;color:#dbeafe;font-size:17px;line-height:1.35;font-weight:800;overflow:hidden;text-overflow:ellipsis} .drn-details{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;margin-top:.7rem;color:var(--muted);font-size:12px;line-height:1.35} .drn-details span{display:inline-flex;align-items:center;gap:.3rem;max-width:100%;padding:.3rem .5rem;border:1px solid rgba(255,255,255,.08);border-radius:999px;background:rgba(255,255,255,.04)} .drn-wave{height:28px;display:flex;align-items:flex-end;gap:4px;margin-top:.75rem}.drn-wave i{display:block;width:5px;border-radius:9px;background:linear-gradient(180deg,#7dd3fc,#22d3ee);opacity:.86;animation:drnBars 1.1s ease-in-out infinite}.drn-wave i:nth-child(1){height:9px;animation-delay:-.2s}.drn-wave i:nth-child(2){height:23px;animation-delay:-.45s}.drn-wave i:nth-child(3){height:14px;animation-delay:-.1s}.drn-wave i:nth-child(4){height:28px;animation-delay:-.35s}.drn-wave i:nth-child(5){height:18px;animation-delay:-.55s}.drn-wave i:nth-child(6){height:12px;animation-delay:-.25s}.drn-wave i:nth-child(7){height:21px;animation-delay:-.5s} .drn-host-card{display:flex;align-items:center;gap:.75rem;min-width:0;padding:.75rem;border:1px solid rgba(255,255,255,.10);border-radius:22px;background:rgba(255,255,255,.055);backdrop-filter:blur(12px);position:relative;z-index:1} .drn-host-avatar{width:68px;height:68px;flex:0 0 auto;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.16);background:rgba(14,165,255,.16)} .drn-host-avatar img{width:100%;height:100%;object-fit:cover;display:block} .drn-host-copy{min-width:0}.drn-host-copy span{display:block;color:#93c5fd;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.07em}.drn-host-copy strong{display:block;color:#fff;font-size:15px;line-height:1.15;margin:.2rem 0;overflow:hidden;text-overflow:ellipsis}.drn-host-copy small{display:block;color:var(--muted);font-size:12px;line-height:1.25;overflow:hidden;text-overflow:ellipsis} .drn-actions{grid-column:2/4;display:flex;align-items:center;justify-content:flex-end;gap:.55rem;flex-wrap:wrap;position:relative;z-index:1;margin-top:-.4rem}.drn-listen{box-shadow:0 12px 35px rgba(14,165,255,.28)} @keyframes drnPulse{70%{box-shadow:0 0 0 10px rgba(239,68,68,0)}} @keyframes drnBars{0%,100%{transform:scaleY(.48);opacity:.55}50%{transform:scaleY(1);opacity:1}} @keyframes drnSweep{0%{transform:translateX(-46%)}100%{transform:translateX(46%)}} @media(max-width:980px){.discover-radio-now{grid-template-columns:130px minmax(0,1fr);align-items:flex-start}.drn-cover-wrap{width:130px;height:130px}.drn-host-card{grid-column:1/-1}.drn-actions{grid-column:1/-1;justify-content:flex-start;margin-top:0}.drn-actions .btn{flex:1 1 190px;justify-content:center}.drn-main h2{font-size:clamp(30px,8vw,48px)}} @media(max-width:560px){.discover-radio-now{grid-template-columns:1fr;text-align:center;padding:1rem}.drn-cover-wrap{width:min(76vw,230px);height:min(76vw,230px);margin:0 auto}.drn-kicker,.drn-details,.drn-wave{justify-content:center}.drn-host-card{justify-content:center;text-align:left}.drn-actions{justify-content:center}.drn-actions .btn{width:100%;flex-basis:100%}} /* BPM V171 — bloc radio accueil aligné à la même largeur que les autres sections */ .home-radio-now{ width:100%; max-width:1480px; margin:1.2rem auto 1.5rem; } @media(max-width:560px){.home-radio-now{width:calc(100% - 1rem);margin:.75rem auto 1rem}} /* BPM V173 — icône Lecteur / playlists visible dans le menu de droite sur mobile On garde les autres icônes secondaires cachées pour éviter de surcharger le header. */ @media(max-width:760px){ .site-nav > .nav-right .bpm-navdrop-player{display:inline-flex!important;} .site-nav > .nav-right .bpm-navdrop-player .mobile-player-action, .site-nav > .nav-right .mobile-player-action{ display:inline-flex!important; align-items:center!important; justify-content:center!important; visibility:visible!important; opacity:1!important; } .site-nav > .nav-right .mobile-player-action i{font-size:20px;} } @media(max-width:430px){ .site-nav > .nav-right{gap:.28rem!important;} .site-nav > .nav-right .notif-bell, .mobile-top-icon, .site-nav > .nav-right .user-pill{ width:34px!important; height:34px!important; min-width:34px!important; border-radius:12px!important; } .site-nav > .nav-right .mobile-player-action i{font-size:19px;} } /* BPM V174 — Auto-size photos profils/membres + mobile propre Les images de profil et headers restent visibles au complet au lieu d'être coupées. */ .ph-bg-img{ background-size:contain!important; background-repeat:no-repeat!important; background-position:center center!important; background-color:#050914!important; opacity:.78!important; } .ph-ava img, .member-ava img, .member-cover img, .profil-ava img, .profil-cover img{ object-fit:contain!important; object-position:center center!important; background:#050914!important; } .member-cover img{opacity:.82!important;} .profil-cover, .member-cover{background:linear-gradient(135deg,#040a18,#0a1830,#050520)!important;} @media(max-width:760px){ .profil-hero{ height:auto!important; min-height:360px!important; padding-top:160px!important; overflow:visible!important; } .profil-hero .ph-bottom{ position:relative!important; left:auto!important; right:auto!important; bottom:auto!important; padding:1rem!important; display:flex!important; align-items:flex-start!important; gap:.85rem!important; } .profil-hero .ph-info{min-width:0!important;width:100%!important;} .profil-hero .ph-name{font-size:clamp(26px,9vw,36px)!important;line-height:1!important;word-break:break-word!important;} .profil-hero .ph-url{word-break:break-word!important;} .profil-hero .ph-actions{width:100%!important;justify-content:flex-start!important;gap:.45rem!important;} .profil-hero .ph-actions .btn{flex:1 1 auto!important;justify-content:center!important;min-height:38px!important;} .profil-hero .ph-ava{width:86px!important;height:86px!important;margin:0!important;} .profil-body{padding:1.25rem .95rem 1rem!important;} .profil-layout{grid-template-columns:1fr!important;gap:1rem!important;} .social-card-row{grid-template-columns:repeat(3,minmax(0,1fr))!important;} .members-page{padding:.9rem!important;} .members-search{grid-template-columns:1fr!important;} .members-grid{grid-template-columns:1fr!important;} .member-cover{height:118px!important;} .member-body{padding:2.8rem .9rem 1rem!important;} } @media(max-width:440px){ .profil-hero{min-height:390px!important;padding-top:150px!important;} .profil-hero .ph-bottom{flex-direction:column!important;align-items:flex-start!important;} .profil-hero .ph-actions{display:flex!important;} .profil-hero .ph-actions .btn{width:100%!important;} .social-card-row{grid-template-columns:1fr!important;} } /* BPM V174 — Playlists personnelles jouables dans l'icône Lecteur et le menu mobile gauche */ .bpm-header-playlists{padding:0 12px 12px;display:flex;flex-direction:column;gap:8px;max-height:330px;overflow:auto} .bpm-header-playlist-card{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.028);border-radius:16px;padding:9px;overflow:hidden} .bpm-header-playlist-title{display:flex;align-items:center;gap:7px;color:#fff;font-weight:900;font-size:12px;min-width:0;margin-bottom:6px}.bpm-header-playlist-title i{color:var(--bb)}.bpm-header-playlist-title span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bpm-header-playlist-title small{margin-left:auto;color:var(--muted);font-weight:600;font-size:10px}.bpm-header-track{width:100%;border:0;background:transparent;color:var(--muted);display:grid;grid-template-columns:22px minmax(0,1fr);gap:7px;align-items:center;text-align:left;padding:6px 4px;border-radius:10px;cursor:pointer;font-family:var(--font)}.bpm-header-track:hover,.bpm-header-track.is-playing{background:rgba(42,127,255,.13);color:#fff}.bpm-header-track i{color:var(--bb);font-size:15px}.bpm-header-track strong{display:block;color:inherit;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bpm-header-track small{display:block;color:var(--muted);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bpm-header-playlist-open{display:inline-flex;align-items:center;gap:5px;color:var(--bb);font-size:11px;text-decoration:none;margin-top:4px}.bpm-header-playlist-empty{font-size:11px;color:var(--muted);border:1px dashed var(--bdr);border-radius:12px;padding:8px;background:rgba(255,255,255,.018)}.bpm-header-player-now{display:none;border:1px solid rgba(42,127,255,.25);background:rgba(42,127,255,.09);border-radius:14px;padding:9px}.bpm-header-player-now.on{display:block}.bpm-header-player-now strong{display:block;color:#fff;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bpm-header-player-now small{display:block;color:var(--muted);font-size:10px;margin:2px 0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bpm-header-player-now audio{width:100%;height:30px}.smm-player-mini{margin:6px 10px 10px;padding:10px;border:1px solid rgba(42,127,255,.22);background:rgba(42,127,255,.07);border-radius:16px}.smm-player-mini-title{display:flex;align-items:center;gap:7px;color:#fff;font-size:12px;font-weight:900;margin-bottom:7px}.smm-player-mini-title i{color:var(--bb)}.smm-playlist-name{font-size:11px;color:#dbeafe;font-weight:800;margin:8px 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.smm-playlist-name small{color:var(--muted);font-weight:500}.smm-track-play{width:100%;border:0;background:rgba(255,255,255,.035);color:var(--muted);display:grid;grid-template-columns:22px minmax(0,1fr);gap:6px;align-items:center;text-align:left;border-radius:10px;padding:7px 8px;margin-bottom:4px;font-family:var(--font);cursor:pointer}.smm-track-play:hover,.smm-track-play.is-playing{background:rgba(42,127,255,.16);color:#fff}.smm-track-play i{color:var(--bb)}.smm-track-play span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.smm-player-empty{font-size:11px;color:var(--muted)}.smm-player-mini audio{width:100%;height:30px;margin-top:6px} @media(max-width:760px){.bpm-player-panel{max-height:calc(100vh - 90px);overflow:auto}.bpm-header-playlists{max-height:46vh}} /* BPM V175 — vrai lecteur personnel dans le menu Lecteur / playlists Le lecteur n'est plus en bas du panneau : il remplace la carte statique "Mon lecteur BPM". */ .bpm-personal-player{ margin:12px; border:1px solid rgba(42,127,255,.28); background: radial-gradient(circle at 15% 0%,rgba(42,127,255,.28),transparent 44%), linear-gradient(145deg,rgba(13,24,48,.96),rgba(8,10,20,.98)); border-radius:22px; padding:12px; display:grid; grid-template-columns:76px minmax(0,1fr); gap:12px; align-items:stretch; box-shadow:0 18px 45px rgba(0,0,0,.28); } .bpm-personal-player.is-playing{border-color:rgba(91,177,255,.48);box-shadow:0 20px 55px rgba(42,127,255,.14),0 18px 45px rgba(0,0,0,.32)} .bpm-personal-cover{ width:76px;height:76px;border-radius:18px;overflow:hidden; border:1px solid rgba(255,255,255,.10); background:linear-gradient(145deg,rgba(42,127,255,.25),rgba(255,255,255,.045)); display:flex;align-items:center;justify-content:center;color:#9ed0ff;font-size:34px; } .bpm-personal-cover img{width:100%;height:100%;object-fit:cover;display:block} .bpm-personal-main{min-width:0;display:flex;flex-direction:column;gap:5px} .bpm-personal-label{display:inline-flex;align-items:center;gap:6px;color:#8fc5ff;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em} .bpm-personal-main strong{display:block;color:#fff;font-size:15px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bpm-personal-main small{display:block;color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bpm-personal-main audio{width:100%;height:32px;margin-top:2px;display:block} .bpm-personal-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:2px} .bpm-personal-actions button,.bpm-personal-actions a{border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.045);color:#dbeafe;border-radius:999px;padding:6px 9px;font-size:10px;font-weight:800;text-decoration:none;display:inline-flex;align-items:center;gap:5px;cursor:pointer;font-family:var(--font)} .bpm-personal-actions button:hover,.bpm-personal-actions a:hover{border-color:rgba(77,159,255,.35);background:rgba(42,127,255,.14);color:#fff} @media(max-width:760px){.bpm-personal-player{grid-template-columns:64px minmax(0,1fr);gap:10px;margin:10px}.bpm-personal-cover{width:64px;height:64px;border-radius:16px}.bpm-personal-main strong{font-size:14px}.bpm-personal-actions a,.bpm-personal-actions button{padding:5px 8px}} /* BPM V176 — création/recherche playlists dans le menu Lecteur personnel + doublons retirés */ .bpm-header-playlist-tools{padding:0 12px 10px;display:flex;flex-direction:column;gap:8px} .bpm-header-playlist-search{display:flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.045);border-radius:14px;padding:8px 10px;color:#8fc5ff} .bpm-header-playlist-search input{width:100%;border:0;background:transparent;color:#fff;outline:0;font-family:var(--font);font-size:12px}.bpm-header-playlist-search input::placeholder{color:rgba(220,235,255,.48)} .bpm-header-playlist-create{display:grid;grid-template-columns:minmax(0,1fr) 88px auto;gap:7px;align-items:center}.bpm-header-playlist-create input,.bpm-header-playlist-create select{min-width:0;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.045);color:#fff;border-radius:13px;padding:9px 10px;font-family:var(--font);font-size:12px;outline:0}.bpm-header-playlist-create select option{background:#101827;color:#fff}.bpm-header-playlist-create button{border:1px solid rgba(42,127,255,.32);background:rgba(42,127,255,.16);color:#fff;border-radius:13px;padding:9px 10px;font-family:var(--font);font-size:11px;font-weight:900;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap}.bpm-header-playlist-create button:hover{background:rgba(42,127,255,.26);border-color:rgba(91,177,255,.5)}.bpm-header-playlist-create button:disabled{opacity:.65;cursor:wait} .bpm-header-playlist-status{min-height:15px;font-size:11px;color:var(--muted);padding-left:2px}.bpm-header-playlist-status.is-ok{color:#8af0b4}.bpm-header-playlist-status.is-error{color:#ff9a9a}.bpm-header-player-note{margin:0 12px 12px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.028);border-radius:14px;padding:8px 10px;color:var(--muted);font-size:11px;display:flex;gap:7px;align-items:flex-start}.bpm-header-player-note i{color:var(--bb);margin-top:1px}.bpm-header-playlist-card[hidden],.bpm-header-playlist-noresult[hidden]{display:none!important} @media(max-width:760px){.bpm-header-playlist-create{grid-template-columns:1fr}.bpm-header-playlist-create button{width:100%}.bpm-header-playlist-tools{padding:0 10px 10px}.bpm-header-player-note{margin:0 10px 10px}} /* BPM V177 — cacher le gros bloc Radio en ligne sur mobile seulement Le bloc reste visible sur desktop/tablette large, mais ne prend plus toute la place sur téléphone. */ @media(max-width:760px){ .home-radio-now, .discover-radio-now.mobile-hide-radio, body .home-radio-now.discover-radio-now{ display:none!important; } } /* BPM V179 — médias du wall */ .wall-media{margin-top:.75rem;border-radius:13px;overflow:hidden;background:var(--s2);border:1px solid var(--bdr)} .wall-media img,.wall-media video{display:block;width:100%;max-height:620px;object-fit:contain;background:#05070c} .wall-video-stats{display:flex;align-items:center;gap:.35rem;padding:.55rem .75rem;color:var(--muted);font-size:12px;border-top:1px solid var(--bdr);background:rgba(255,255,255,.02)} .wall-composer-file{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;color:var(--muted);font-size:12px;background:var(--s2);border:1px dashed var(--bdr);border-radius:10px;padding:.55rem .7rem;cursor:pointer} .wall-composer-file input{max-width:240px;color:var(--muted);font-size:12px} .music-upload-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.music-upload-grid .full{grid-column:1/-1}.music-list{display:grid;gap:.75rem}.music-album-admin{background:var(--s2);border:1px solid var(--bdr);border-radius:13px;padding:1rem}.music-track-admin{display:flex;align-items:center;gap:.65rem;padding:.45rem 0;border-top:1px solid rgba(255,255,255,.05);font-size:13px;color:var(--text)} @media(max-width:760px){.music-upload-grid{grid-template-columns:1fr}.wall-composer-file{align-items:flex-start;flex-direction:column}.wall-media img,.wall-media video{max-height:420px}} /* BPM V180 — social pro / commentaires / wallet / EPK */ .wall-social-row{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;margin-top:.85rem;padding-top:.7rem;border-top:1px solid rgba(255,255,255,.07)} .wall-social-btn{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);color:var(--muted);border-radius:999px;padding:.45rem .7rem;font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;font-family:var(--font)} .wall-social-btn:hover,.wall-social-btn.on{border-color:rgba(42,127,255,.45);background:rgba(42,127,255,.14);color:#fff}.wall-social-btn.on i{color:#ff6b8b}.wall-social-btn b{font-weight:900;color:#fff} .wall-comments{display:grid;gap:.45rem;margin-top:.7rem}.wall-comment{display:flex;align-items:flex-start;gap:.5rem}.wall-comment-avatar{width:28px;height:28px;border-radius:50%;background:var(--blue);display:grid;place-items:center;color:#fff;font-weight:900;overflow:hidden;flex:0 0 auto;font-size:11px}.wall-comment-avatar img{width:100%;height:100%;object-fit:cover}.wall-comment-bubble{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.075);border-radius:13px;padding:.45rem .6rem;min-width:0}.wall-comment-bubble a{display:block;color:#fff;font-size:12px;font-weight:800}.wall-comment-bubble span{display:block;color:var(--text);font-size:12px;line-height:1.35}.wall-comment-compose{display:flex;align-items:center;gap:.45rem;margin-top:.65rem}.wall-comment-input{flex:1;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);border-radius:999px;color:#fff;padding:.55rem .8rem;outline:0;font-family:var(--font);font-size:12px}.wall-comment-input:focus{border-color:rgba(42,127,255,.5);box-shadow:0 0 0 3px rgba(42,127,255,.12)} .pro-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.75rem;margin:1rem}.pro-card{background:var(--surf);border:1px solid var(--bdr);border-radius:14px;padding:1rem;box-shadow:0 16px 34px rgba(0,0,0,.16)}.pro-card strong{display:block;color:#fff;font-size:22px;font-family:var(--head);letter-spacing:.5px}.pro-card span{display:block;color:var(--muted);font-size:12px;margin-top:.2rem}.wallet-card{background:linear-gradient(135deg,rgba(34,197,94,.13),rgba(42,127,255,.08));border:1px solid rgba(34,197,94,.24);border-radius:14px;padding:1rem;margin:1rem}.wallet-amount{font-family:var(--head);font-size:28px;color:#fff;letter-spacing:.5px}.wallet-mini{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.6rem}.wallet-mini span{font-size:12px;color:var(--muted);background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);border-radius:999px;padding:.3rem .55rem}.epk-progress{height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}.epk-progress>span{display:block;height:100%;background:linear-gradient(90deg,#2a7fff,#22c55e);border-radius:999px}.discover-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}.discover-card{background:var(--surf);border:1px solid var(--bdr);border-radius:15px;padding:1rem;min-width:0}.discover-cover{width:100%;aspect-ratio:1.6;border-radius:12px;background:var(--s2);display:grid;place-items:center;color:var(--muted);overflow:hidden;margin-bottom:.7rem}.discover-cover img,.discover-cover video{width:100%;height:100%;object-fit:cover}.epk-shell{max-width:1050px;margin:0 auto;padding:1.2rem}.epk-hero{border:1px solid var(--bdr);border-radius:18px;padding:1.25rem;background:linear-gradient(135deg,rgba(42,127,255,.16),rgba(255,255,255,.035));display:flex;gap:1rem;align-items:center;flex-wrap:wrap}.epk-logo{width:94px;height:94px;border-radius:18px;background:var(--s2);display:grid;place-items:center;color:#fff;overflow:hidden}.epk-logo img{width:100%;height:100%;object-fit:cover}.epk-title{font-family:var(--head);font-size:30px;color:#fff;line-height:1}.epk-section{background:var(--surf);border:1px solid var(--bdr);border-radius:15px;padding:1rem;margin-top:1rem}.epk-links{display:flex;gap:.5rem;flex-wrap:wrap}.epk-links a{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.045);color:#fff;border-radius:999px;padding:.5rem .8rem;font-size:12px;font-weight:800}.epk-track{display:flex;align-items:center;gap:.65rem;padding:.55rem 0;border-top:1px solid rgba(255,255,255,.06)} @media(max-width:760px){.wall-social-btn{flex:1;justify-content:center}.pro-grid{grid-template-columns:1fr 1fr;margin:.75rem}.epk-title{font-size:24px}.epk-hero{align-items:flex-start}.wallet-card{margin:.75rem}} /* BPM V181 — Lecteur audio EPK moderne */ .epk-music-section{position:relative;overflow:hidden}.epk-music-section:before{content:"";position:absolute;inset:-80px -120px auto auto;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(42,127,255,.26),transparent 68%);pointer-events:none}.epk-section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1rem;position:relative}.epk-section-head h2{margin:0;color:#fff;font-family:var(--head);letter-spacing:1px}.epk-section-head p{margin:.25rem 0 0;color:var(--muted);font-size:13px}.epk-section-head>span{border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.05);color:#fff;border-radius:999px;padding:.42rem .7rem;font-size:12px;font-weight:800;white-space:nowrap}.epk-music-list{display:grid;gap:.85rem;position:relative}.epk-audio-card{display:grid;grid-template-columns:72px 52px minmax(0,1fr);align-items:center;gap:.85rem;padding:.85rem;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.025));box-shadow:0 14px 34px rgba(0,0,0,.18);transition:transform .18s ease,border-color .18s ease,background .18s ease}.epk-audio-card:hover{transform:translateY(-1px);border-color:rgba(42,127,255,.38);background:linear-gradient(135deg,rgba(42,127,255,.11),rgba(255,255,255,.035))}.epk-audio-card.is-playing{border-color:rgba(34,197,94,.45);background:linear-gradient(135deg,rgba(42,127,255,.16),rgba(34,197,94,.08))}.epk-audio-cover{width:72px;height:72px;border-radius:16px;background:linear-gradient(135deg,rgba(42,127,255,.18),rgba(255,255,255,.06));display:grid;place-items:center;overflow:hidden;color:#fff;font-size:24px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}.epk-audio-cover img{width:100%;height:100%;object-fit:cover}.epk-audio-play{width:52px;height:52px;border:0;border-radius:999px;display:grid;place-items:center;cursor:pointer;color:#fff;font-weight:900;background:linear-gradient(135deg,#2a7fff,#22c55e);box-shadow:0 14px 28px rgba(42,127,255,.24);transition:transform .16s ease,filter .16s ease}.epk-audio-play:hover{transform:scale(1.04);filter:brightness(1.08)}.epk-audio-play span{display:block;line-height:1;font-size:17px;margin-left:2px}.epk-audio-card.is-playing .epk-audio-play span{font-size:15px;margin-left:0;letter-spacing:-2px}.epk-audio-main{min-width:0}.epk-audio-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}.epk-audio-meta{min-width:0}.epk-audio-meta strong{display:block;color:#fff;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.epk-audio-meta span{display:block;color:var(--muted);font-size:12px;margin-top:.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.epk-audio-badge{font-size:10px;font-weight:900;letter-spacing:.08em;color:#b8d6ff;border:1px solid rgba(42,127,255,.28);background:rgba(42,127,255,.11);border-radius:999px;padding:.24rem .45rem}.epk-audio-progress{height:10px;margin-top:.75rem;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}.epk-audio-progress span{display:block;width:0;height:100%;border-radius:999px;background:linear-gradient(90deg,#2a7fff,#22c55e);transition:width .08s linear}.epk-audio-bottom{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;margin-top:.35rem;font-weight:700}.epk-audio-card audio{display:none} @media(max-width:760px){.epk-section-head{flex-direction:column}.epk-audio-card{grid-template-columns:58px 46px minmax(0,1fr);gap:.65rem;padding:.7rem}.epk-audio-cover{width:58px;height:58px;border-radius:14px}.epk-audio-play{width:46px;height:46px}.epk-audio-badge{display:none}.epk-audio-meta strong{font-size:14px}.epk-audio-progress{height:9px}} /* ============================================================ BPM V182 — Lecteur global style Spotify ============================================================ */ body{padding-bottom:92px}.bpm-global-player{position:fixed;left:14px;right:14px;bottom:14px;z-index:120;background:linear-gradient(135deg,rgba(12,16,27,.96),rgba(8,10,18,.96));border:1px solid rgba(255,255,255,.12);box-shadow:0 22px 80px rgba(0,0,0,.55),0 0 0 1px rgba(14,165,255,.08) inset;border-radius:24px;color:#fff;backdrop-filter:blur(22px);font-family:var(--font,DM Sans,sans-serif);overflow:visible}.bpm-gp-main{height:78px;display:grid;grid-template-columns:56px minmax(150px,1.2fr) auto 42px minmax(140px,1fr) 42px 130px auto 38px;gap:12px;align-items:center;padding:10px 12px}.bpm-gp-cover{width:56px;height:56px;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:radial-gradient(circle at 30% 20%,rgba(14,165,255,.38),rgba(34,197,94,.15) 45%,rgba(255,255,255,.04));display:grid;place-items:center;color:#b7c5d8;overflow:hidden;cursor:pointer;position:relative}.bpm-gp-cover img{width:100%;height:100%;object-fit:cover;display:block}.bpm-gp-cover i{font-size:28px}.bpm-gp-meta{min-width:0;cursor:pointer}.bpm-gp-meta strong{display:block;font-size:14px;line-height:1.2;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bpm-gp-meta span{display:block;font-size:12px;color:var(--muted,#9ca3af);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}.bpm-gp-controls{display:flex;align-items:center;gap:6px;justify-content:center}.bpm-gp-icon,.bpm-gp-play,.bpm-gp-search-btn{border:0;cursor:pointer;color:#fff;display:inline-flex;align-items:center;justify-content:center;transition:transform .16s ease,background .16s ease,border-color .16s ease,opacity .16s ease}.bpm-gp-icon{width:34px;height:34px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}.bpm-gp-icon:hover,.bpm-gp-search-btn:hover{background:rgba(255,255,255,.12);transform:translateY(-1px)}.bpm-gp-play{width:44px;height:44px;border-radius:999px;background:linear-gradient(135deg,var(--blue,#2a7fff),var(--teal,#14b8a6));box-shadow:0 8px 28px rgba(14,165,255,.35);font-size:19px}.bpm-gp-play:hover{transform:scale(1.04)}.bpm-gp-progress{height:8px;border:0;border-radius:999px;background:rgba(255,255,255,.10);overflow:hidden;cursor:pointer;padding:0;display:block;width:100%;position:relative}.bpm-gp-progress span{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,var(--blue,#2a7fff),var(--teal,#14b8a6));border-radius:999px}.bpm-gp-time{font-size:11px;color:var(--muted,#9ca3af);font-variant-numeric:tabular-nums;text-align:center}.bpm-gp-volume{display:flex;align-items:center;gap:6px}.bpm-gp-volume input{width:82px;accent-color:var(--blue,#2a7fff)}.bpm-gp-search-btn{height:38px;border-radius:999px;padding:0 13px;gap:6px;border:1px solid rgba(14,165,255,.22);background:rgba(14,165,255,.10);font-size:12px;font-weight:800}.bpm-gp-collapse{opacity:.75}.bpm-global-player.is-empty .bpm-gp-play{background:rgba(255,255,255,.08);box-shadow:none}.bpm-global-player.is-playing .bpm-gp-cover:after{content:"";position:absolute;inset:-4px;border-radius:20px;border:1px solid rgba(14,165,255,.45);animation:bpmGpPulse 1.65s ease-in-out infinite}.bpm-global-player.is-shuffle #bpmGpShuffle,.bpm-global-player.is-repeat #bpmGpRepeat{background:rgba(14,165,255,.22);border-color:rgba(14,165,255,.45);color:#93c5fd}@keyframes bpmGpPulse{0%,100%{opacity:.25;transform:scale(.98)}50%{opacity:1;transform:scale(1.03)}}.bpm-gp-panel{position:absolute;left:0;right:0;bottom:calc(100% + 12px);max-height:min(76vh,680px);background:linear-gradient(135deg,rgba(11,15,26,.98),rgba(6,8,15,.98));border:1px solid rgba(255,255,255,.12);border-radius:24px;box-shadow:0 28px 90px rgba(0,0,0,.65);padding:16px;overflow:hidden}.bpm-gp-panel-head{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;margin-bottom:12px}.bpm-gp-panel-head strong{font-family:var(--head,Bebas Neue);font-size:26px;letter-spacing:.7px;line-height:1;color:#fff}.bpm-gp-panel-head span{display:block;color:var(--muted,#9ca3af);font-size:12px;margin-top:4px}.bpm-gp-search{height:46px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.055);border-radius:999px;padding:0 14px;display:flex;align-items:center;gap:10px;margin-bottom:13px}.bpm-gp-search i{color:#93c5fd;font-size:20px}.bpm-gp-search input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#fff;font-size:15px}.bpm-gp-panel-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:14px;overflow:hidden}.bpm-gp-panel-title{font-size:12px;color:var(--muted,#9ca3af);text-transform:uppercase;letter-spacing:.08em;font-weight:900;margin:0 0 8px;display:flex;align-items:center;gap:6px}.bpm-gp-panel-title button{margin-left:auto;background:transparent;border:0;color:#93c5fd;cursor:pointer;font-size:11px;text-transform:uppercase}.bpm-gp-results,.bpm-gp-queue{max-height:min(52vh,450px);overflow:auto;padding-right:4px}.bpm-gp-result,.bpm-gp-qitem{width:100%;display:flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.045);border-radius:15px;padding:8px;margin-bottom:7px;color:#fff;text-align:left}.bpm-gp-result:hover,.bpm-gp-qitem:hover,.bpm-gp-qitem.on{background:rgba(14,165,255,.12);border-color:rgba(14,165,255,.28)}.bpm-gp-rplay,.bpm-gp-radd{width:36px;height:36px;border-radius:999px;border:0;background:rgba(255,255,255,.08);color:#fff;display:grid;place-items:center;cursor:pointer;flex:0 0 auto}.bpm-gp-rplay{background:linear-gradient(135deg,var(--blue,#2a7fff),var(--teal,#14b8a6))}.bpm-gp-rcover,.bpm-gp-qcover{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.08);display:grid;place-items:center;overflow:hidden;flex:0 0 auto;color:var(--muted,#9ca3af)}.bpm-gp-rcover img,.bpm-gp-qcover img{width:100%;height:100%;object-fit:cover}.bpm-gp-rtxt,.bpm-gp-qtxt{min-width:0;flex:1}.bpm-gp-rtxt strong,.bpm-gp-qtxt strong{display:block;font-size:13px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bpm-gp-rtxt small,.bpm-gp-qtxt small{display:block;font-size:11px;color:var(--muted,#9ca3af);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}.bpm-gp-qitem{cursor:pointer}.bpm-gp-qitem>i{color:#93c5fd}.bpm-gp-empty{border:1px dashed rgba(255,255,255,.14);border-radius:16px;padding:22px 16px;text-align:center;color:var(--muted,#9ca3af);background:rgba(255,255,255,.03)}.bpm-gp-empty i{font-size:28px;color:#93c5fd;display:block;margin-bottom:7px}.bpm-gp-empty strong{display:block;color:#fff;margin-bottom:4px}.bpm-gp-result-head{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#93c5fd;font-weight:900;margin:2px 0 8px}.bpm-gp-toast{position:fixed;right:24px;bottom:110px;background:#0f172a;border:1px solid rgba(255,255,255,.16);border-radius:13px;padding:10px 13px;color:#fff;box-shadow:0 14px 50px rgba(0,0,0,.45);z-index:130;opacity:0;transform:translateY(8px);pointer-events:none;transition:.18s ease}.bpm-gp-toast.show{opacity:1;transform:translateY(0)}.bpm-global-player.is-collapsed{right:auto;width:82px;border-radius:22px}.bpm-global-player.is-collapsed .bpm-gp-main{display:flex;width:82px;height:72px;padding:8px;justify-content:center}.bpm-global-player.is-collapsed .bpm-gp-meta,.bpm-global-player.is-collapsed .bpm-gp-controls,.bpm-global-player.is-collapsed .bpm-gp-time,.bpm-global-player.is-collapsed .bpm-gp-progress,.bpm-global-player.is-collapsed .bpm-gp-volume,.bpm-global-player.is-collapsed .bpm-gp-search-btn,.bpm-global-player.is-collapsed .bpm-gp-collapse{display:none}.bpm-global-player.is-collapsed .bpm-gp-cover{width:56px;height:56px}.bpm-play-global-btn{border:0;background:linear-gradient(135deg,var(--blue,#2a7fff),var(--teal,#14b8a6));color:#fff;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:.35rem;cursor:pointer}.pp-now-global-note{position:static!important;display:block!important;background:rgba(14,165,255,.08)!important;border:1px solid rgba(14,165,255,.18)!important;border-radius:16px!important;margin:1rem 0!important;padding:1rem!important;color:var(--muted)!important}.pp-now-global-note strong{color:#fff}.profile-embed-hidden{display:none!important}@media(max-width:980px){body{padding-bottom:86px}.bpm-global-player{left:8px;right:8px;bottom:8px;border-radius:20px}.bpm-gp-main{height:70px;grid-template-columns:50px minmax(0,1fr) auto auto;gap:9px;padding:10px}.bpm-gp-cover{width:50px;height:50px;border-radius:14px}.bpm-gp-controls{gap:4px}.bpm-gp-controls #bpmGpShuffle,.bpm-gp-controls #bpmGpRepeat,.bpm-gp-controls #bpmGpPrev,.bpm-gp-controls #bpmGpNext{display:none}.bpm-gp-time,.bpm-gp-progress,.bpm-gp-volume,.bpm-gp-duration{display:none}.bpm-gp-search-btn{width:38px;padding:0}.bpm-gp-search-btn span{display:none}.bpm-gp-collapse{display:none}.bpm-gp-panel{bottom:calc(100% + 8px);border-radius:20px;padding:12px;max-height:76vh}.bpm-gp-panel-grid{grid-template-columns:1fr}.bpm-gp-results,.bpm-gp-queue{max-height:31vh}.bpm-gp-panel-head strong{font-size:22px}.bpm-gp-panel-head span{display:none}}@media(max-width:520px){.bpm-gp-main{grid-template-columns:46px minmax(0,1fr) 44px 38px}.bpm-gp-cover{width:46px;height:46px}.bpm-gp-meta strong{font-size:13px}.bpm-gp-meta span{font-size:11px}.bpm-gp-play{width:42px;height:42px}.bpm-gp-panel{left:-2px;right:-2px}.bpm-gp-result,.bpm-gp-qitem{gap:8px;padding:7px}.bpm-gp-rcover,.bpm-gp-qcover{width:40px;height:40px}.bpm-gp-radd{display:none}} /* ============================================================ BPM 183 — Hub social musical / layout 3 colonnes ============================================================ */ body.page-index #bpmPjaxContent{padding-bottom:110px} .bpm183-shell{width:min(1840px,calc(100% - 28px));margin:22px auto 36px;display:grid;grid-template-columns:320px minmax(0,1fr) 350px;gap:22px;align-items:start} .bpm183-sticky-col{position:sticky;top:112px;display:flex;flex-direction:column;gap:16px;min-width:0} .bpm183-main{display:flex;flex-direction:column;gap:18px;min-width:0} .bpm183-card{position:relative;background:linear-gradient(180deg,rgba(13,18,31,.88),rgba(6,9,17,.92));border:1px solid rgba(255,255,255,.09);border-radius:22px;box-shadow:0 20px 55px rgba(0,0,0,.22);overflow:hidden} .bpm183-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 0%,rgba(42,127,255,.13),transparent 38%);pointer-events:none} .bpm183-card>*{position:relative;z-index:1}.bpm183-user-card{padding:18px}.bpm183-user-head{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:center;color:#fff}.bpm183-user-head strong{display:block;font-size:18px;line-height:1.1}.bpm183-user-head small{display:block;color:#4db7ff;margin-top:3px;font-size:12px}.bpm183-avatar-lg{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#14233e,#07101f);border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;overflow:hidden;color:#6db9ff;font-size:30px}.bpm183-avatar-lg img{width:100%;height:100%;object-fit:cover}.bpm183-user-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px}.bpm183-user-stats span{text-align:center;padding:10px 4px;border-radius:15px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.06)}.bpm183-user-stats strong{display:block;color:#fff;font-size:16px}.bpm183-user-stats small{display:block;color:#8992aa;font-size:11px;line-height:1.2}.bpm183-join-card{text-align:center;display:flex;flex-direction:column;align-items:center;gap:11px}.bpm183-join-card p{color:#8a92a6;font-size:13px;line-height:1.45}.bpm183-side-menu{padding:10px}.bpm183-side-menu a{min-height:44px;border-radius:15px;display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:8px;color:#c0c8d9;padding:8px 10px;transition:.16s}.bpm183-side-menu a i{font-size:22px;color:#8aa0c2}.bpm183-side-menu a:hover,.bpm183-side-menu a.active{background:rgba(42,127,255,.16);color:#fff;box-shadow:inset 0 0 0 1px rgba(42,127,255,.26)}.bpm183-side-menu a:hover i,.bpm183-side-menu a.active i{color:#39a9ff}.bpm183-side-menu b{min-width:21px;height:21px;border-radius:99px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;padding:0 6px}.bpm183-mini-radio{padding:17px;text-align:center}.bpm183-section-kicker{display:flex;align-items:center;gap:7px;color:#8bbdff;text-transform:uppercase;letter-spacing:.08em;font-size:11px;font-weight:800}.bpm183-section-kicker span{margin-left:auto;color:#ff4d6d}.bpm183-radio-logo{width:86px;height:86px;border-radius:50%;border:1px solid rgba(42,127,255,.48);box-shadow:0 0 28px rgba(42,127,255,.28);display:flex;align-items:center;justify-content:center;margin:18px auto 10px;background:#030812}.bpm183-radio-logo img{width:70px;height:70px;object-fit:contain}.bpm183-mini-radio strong{display:block;color:#fff;font-size:18px}.bpm183-mini-radio small{display:block;color:#8a92a6;margin-bottom:14px}.bpm183-radio-hero{position:relative;min-height:220px;border-radius:26px;overflow:hidden;border:1px solid rgba(43,146,255,.22);background:linear-gradient(135deg,rgba(8,23,45,.96),rgba(4,14,27,.95));box-shadow:0 25px 70px rgba(0,0,0,.28);display:grid;grid-template-columns:160px minmax(0,1fr) 170px;gap:24px;align-items:center;padding:24px}.bpm183-radio-bg{position:absolute;inset:0;background:radial-gradient(circle at 12% 15%,rgba(42,127,255,.38),transparent 42%),radial-gradient(circle at 82% 28%,rgba(20,184,166,.22),transparent 34%),linear-gradient(90deg,rgba(255,255,255,.04),transparent);opacity:.95}.bpm183-radio-cover,.bpm183-radio-copy,.bpm183-radio-actions{position:relative;z-index:1}.bpm183-radio-cover{width:148px;height:148px;border-radius:24px;border:3px solid #0a8dff;background:#020814;box-shadow:0 0 36px rgba(42,127,255,.34);display:flex;align-items:center;justify-content:center;overflow:hidden}.bpm183-radio-cover img{width:100%;height:100%;object-fit:contain;padding:13px}.bpm183-radio-cover span{position:absolute;right:10px;bottom:10px;background:#0a8dff;color:#fff;border-radius:999px;padding:4px 9px;font-size:10px;font-weight:900}.bpm183-live-pill{display:inline-flex;align-items:center;gap:7px;color:#b8d8ff;text-transform:uppercase;letter-spacing:.09em;font-size:11px;font-weight:900;margin-bottom:8px}.bpm183-live-pill i{width:9px;height:9px;border-radius:50%;background:#0aff9d;box-shadow:0 0 13px rgba(10,255,157,.8)}.bpm183-radio-copy h1{font-family:var(--head);font-size:52px;letter-spacing:1.2px;line-height:.95;color:#fff;text-shadow:0 8px 26px rgba(0,0,0,.45);margin-bottom:8px}.bpm183-radio-copy p{color:#d7e5ff;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:620px}.bpm183-wave{height:34px;display:flex;align-items:end;gap:4px;margin-top:13px}.bpm183-wave i{width:4px;border-radius:6px;background:linear-gradient(180deg,#37d5ff,#2a7fff);animation:bpm183wave 1.2s ease-in-out infinite}.bpm183-wave i:nth-child(1){height:11px}.bpm183-wave i:nth-child(2){height:18px;animation-delay:.08s}.bpm183-wave i:nth-child(3){height:25px;animation-delay:.16s}.bpm183-wave i:nth-child(4){height:15px;animation-delay:.24s}.bpm183-wave i:nth-child(5){height:28px;animation-delay:.32s}.bpm183-wave i:nth-child(6){height:19px;animation-delay:.4s}.bpm183-wave i:nth-child(7){height:31px;animation-delay:.48s}.bpm183-wave i:nth-child(8){height:14px;animation-delay:.56s}.bpm183-wave i:nth-child(9){height:22px;animation-delay:.64s}@keyframes bpm183wave{0%,100%{transform:scaleY(.65);opacity:.72}50%{transform:scaleY(1.1);opacity:1}}.bpm183-radio-actions{display:flex;align-items:center;justify-content:flex-end;gap:16px}.bpm183-listeners{text-align:right}.bpm183-listeners strong{display:block;color:#fff;font-size:28px;line-height:1}.bpm183-listeners span{text-transform:uppercase;color:#93a7c8;font-size:11px;letter-spacing:.08em}.bpm183-round-play{border:0;width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,#0b7cff,#26d3ff);color:#fff;display:flex;align-items:center;justify-content:center;font-size:23px;box-shadow:0 12px 28px rgba(42,127,255,.42);cursor:pointer;transition:.16s}.bpm183-round-play:hover{transform:translateY(-1px) scale(1.03);filter:brightness(1.08)}.bpm183-featured-artist{position:relative;border:1px solid rgba(255,255,255,.09);border-radius:24px;min-height:210px;overflow:hidden;background:linear-gradient(135deg,#061224,#0b0624);box-shadow:0 22px 60px rgba(0,0,0,.24)}.bpm183-featured-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.28;filter:saturate(1.1)}.bpm183-featured-artist::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,8,16,.96),rgba(6,13,30,.83) 48%,rgba(10,5,35,.65))}.bpm183-featured-content{position:relative;z-index:1;padding:24px}.bpm183-featured-content h2{font-family:var(--head);font-size:54px;letter-spacing:1.3px;line-height:1;color:#fff;margin:7px 0 8px}.bpm183-featured-content p{max-width:720px;color:#a9b4c9;font-size:14px}.bpm183-featured-stats{display:flex;gap:20px;margin-top:15px}.bpm183-featured-stats strong{display:block;color:#fff;font-size:18px}.bpm183-featured-stats small{display:block;color:#7f8aa3;font-size:11px}.bpm183-featured-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}.bpm183-verified{color:#1f9bff;font-size:.75em;vertical-align:middle}.bpm183-feed-card{padding:0}.bpm183-feed-head{padding:20px 20px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px}.bpm183-feed-head h2{font-family:var(--head);font-size:32px;color:#fff;letter-spacing:1px;line-height:1}.bpm183-feed-head small{color:#8791aa}.bpm183-feed-tabs{display:flex;gap:8px;padding:0 20px 16px;overflow-x:auto}.bpm183-feed-tabs button{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);color:#9ba6bc;border-radius:12px;padding:9px 14px;font-size:12px;cursor:pointer;white-space:nowrap}.bpm183-feed-tabs button.active,.bpm183-feed-tabs button:hover{background:rgba(42,127,255,.20);border-color:rgba(42,127,255,.35);color:#fff}.bpm183-stories{display:flex;gap:14px;overflow-x:auto;border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07);padding:16px 20px;background:rgba(255,255,255,.018)}.bpm183-story{width:74px;text-align:center;flex:0 0 auto}.bpm183-story span{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden;margin:0 auto 7px;background:#080d18;border:2px solid transparent;background-image:linear-gradient(#080d18,#080d18),linear-gradient(135deg,#0e8cff,#b012ff,#ff5b38);background-origin:border-box;background-clip:padding-box,border-box;color:#9bcaff}.bpm183-story img{width:100%;height:100%;object-fit:cover}.bpm183-story small{display:block;color:#dfe7f5;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bpm183-feed-list{display:flex;flex-direction:column}.bpm183-post{padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.07)}.bpm183-post:last-child{border-bottom:0}.bpm183-post-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.bpm183-post-author{display:flex;align-items:center;gap:11px;min-width:0}.bpm183-avatar-sm{width:46px;height:46px;border-radius:50%;background:#0c1424;border:1px solid rgba(255,255,255,.10);display:flex;align-items:center;justify-content:center;overflow:hidden;color:#82bdff;flex-shrink:0}.bpm183-avatar-sm img{width:100%;height:100%;object-fit:cover}.bpm183-post-author strong{display:block;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:420px}.bpm183-post-author small{display:block;color:#79839a;font-size:12px}.bpm183-more{border:0;background:transparent;color:#78849b;font-size:21px;cursor:pointer}.bpm183-post-text{color:#e9eefb;margin:13px 0 14px;font-size:15px;line-height:1.55}.bpm183-post-media{position:relative;border-radius:18px;overflow:hidden;background:#060b15;border:1px solid rgba(255,255,255,.08);margin-top:12px}.bpm183-post-media img{width:100%;max-height:520px;object-fit:cover}.bpm183-post-media video{width:100%;max-height:520px;display:block;background:#000}.bpm183-post-media span{position:absolute;left:12px;bottom:12px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);color:#fff;border-radius:999px;padding:5px 10px;font-size:12px}.bpm183-audio-card{display:grid;grid-template-columns:82px minmax(0,1fr) 58px;gap:14px;align-items:center;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:linear-gradient(135deg,rgba(42,127,255,.14),rgba(255,255,255,.035));padding:14px;margin-top:12px}.bpm183-audio-icon{width:82px;height:82px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:rgba(42,127,255,.16);color:#75c1ff;font-size:34px}.bpm183-audio-card strong{display:block;color:#fff;font-size:17px}.bpm183-audio-card small{display:block;color:#8f9aaf;margin-top:2px}.bpm183-post-actions{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-top:13px;color:#93a0b6}.bpm183-post-actions span,.bpm183-post-actions button,.bpm183-post-actions a{border:0;background:transparent;color:#93a0b6;font-size:13px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;padding:7px 9px;border-radius:10px}.bpm183-post-actions button:hover,.bpm183-post-actions a:hover{background:rgba(255,255,255,.06);color:#fff}.bpm183-post-actions .ti-heart-filled{color:#ff4e79}.bpm183-card-title{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 17px 9px}.bpm183-card-title strong{text-transform:uppercase;color:#fff;font-weight:900;font-size:14px;letter-spacing:.03em}.bpm183-card-title a{color:#2eabff;font-size:12px}.bpm183-side-list{padding-bottom:12px}.bpm183-rank-row{display:grid;grid-template-columns:24px minmax(0,1fr) 38px;gap:10px;align-items:center;padding:9px 14px}.bpm183-rank{color:#8b96ad;font-size:13px;text-align:center}.bpm183-rank-main{display:grid;grid-template-columns:46px minmax(0,1fr);gap:10px;align-items:center;min-width:0}.bpm183-rank-main strong,.bpm183-track-main strong,.bpm183-video-mini strong,.bpm183-event-mini strong{display:block;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bpm183-rank-main small,.bpm183-track-main small,.bpm183-video-mini small,.bpm183-event-mini small{display:block;color:#818ca3;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bpm183-plus{width:34px;height:34px;border-radius:13px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:#d8e6ff;display:flex;align-items:center;justify-content:center;cursor:pointer}.bpm183-plus:hover{background:rgba(42,127,255,.20);border-color:rgba(42,127,255,.35);color:#fff}.bpm183-plus.is-following{background:rgba(34,197,94,.18);border-color:rgba(34,197,94,.35);color:#9affbd}.bpm183-event-mini{display:grid;grid-template-columns:62px minmax(0,1fr);gap:11px;align-items:center;margin:8px 14px;padding:11px;border-radius:15px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}.bpm183-event-mini>span{height:58px;border-radius:13px;border:1px solid rgba(42,127,255,.35);background:rgba(42,127,255,.12);display:flex;flex-direction:column;align-items:center;justify-content:center}.bpm183-event-mini>span strong{font-size:24px;color:#fff;line-height:1}.bpm183-event-mini>span small{font-size:10px;color:#5ab7ff;text-transform:uppercase;font-weight:900}.bpm183-event-mini em,.bpm183-video-mini em,.bpm183-track-main em{min-width:0;font-style:normal}.bpm183-video-mini{display:grid;grid-template-columns:78px minmax(0,1fr);gap:11px;align-items:center;padding:8px 14px}.bpm183-video-mini>span{width:78px;height:48px;border-radius:10px;overflow:hidden;background:#08101f;display:flex;align-items:center;justify-content:center;color:#77bdff}.bpm183-video-mini video{width:100%;height:100%;object-fit:cover}.bpm183-track-mini{display:grid;grid-template-columns:minmax(0,1fr) 34px;gap:8px;align-items:center;padding:8px 14px}.bpm183-track-main{display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px;align-items:center;min-width:0}.bpm183-track-main>span{width:48px;height:48px;border-radius:10px;overflow:hidden;background:#08101f;display:flex;align-items:center;justify-content:center;color:#7abbff}.bpm183-track-main img{width:100%;height:100%;object-fit:cover}.bpm183-track-mini button{width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}.bpm183-track-mini button:hover{background:var(--blue)}.bpm183-muted,.bpm183-empty{color:#8d97ae;padding:20px;text-align:center}.bpm183-empty{min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}.bpm183-empty i{font-size:38px;color:#4d9fff}.bpm183-empty strong{color:#fff}.bpm183-toast{position:fixed;left:50%;bottom:112px;transform:translateX(-50%) translateY(12px);opacity:0;pointer-events:none;background:rgba(8,13,24,.96);border:1px solid rgba(255,255,255,.10);color:#fff;border-radius:999px;padding:10px 16px;box-shadow:0 18px 48px rgba(0,0,0,.38);z-index:2400;transition:.2s}.bpm183-toast.show{opacity:1;transform:translateX(-50%) translateY(0)} @media(max-width:1480px){.bpm183-shell{grid-template-columns:280px minmax(0,1fr) 310px;gap:16px}.bpm183-radio-copy h1{font-size:44px}.bpm183-radio-hero{grid-template-columns:132px minmax(0,1fr) 120px}.bpm183-radio-cover{width:130px;height:130px}.bpm183-listeners{display:none}} @media(max-width:1160px){.bpm183-shell{grid-template-columns:260px minmax(0,1fr)}.bpm183-right{grid-column:1/-1;position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.bpm183-right .bpm183-card{height:100%}.bpm183-radio-hero{grid-template-columns:120px minmax(0,1fr) 72px}.bpm183-radio-cover{width:112px;height:112px}.bpm183-radio-copy h1{font-size:38px}.bpm183-radio-actions{justify-content:center}.bpm183-radio-actions .bpm183-round-play{width:52px;height:52px}} @media(max-width:820px){.bpm183-shell{width:calc(100% - 16px);grid-template-columns:1fr;margin-top:12px}.bpm183-left,.bpm183-right{position:static}.bpm183-left{display:none}.bpm183-right{display:flex;flex-direction:column}.bpm183-radio-hero{grid-template-columns:84px minmax(0,1fr);padding:16px;border-radius:20px;min-height:142px;gap:13px}.bpm183-radio-cover{width:84px;height:84px;border-radius:18px}.bpm183-radio-actions{grid-column:1/-1;justify-content:flex-start}.bpm183-radio-actions .bpm183-round-play{width:44px;height:44px;font-size:18px}.bpm183-radio-copy h1{font-size:31px}.bpm183-radio-copy p{font-size:13px;white-space:normal}.bpm183-wave{height:22px}.bpm183-featured-content h2{font-size:40px}.bpm183-post{padding:15px}.bpm183-feed-head{padding:16px}.bpm183-feed-tabs{padding:0 16px 13px}.bpm183-stories{padding:13px 16px}.bpm183-audio-card{grid-template-columns:58px minmax(0,1fr) 48px}.bpm183-audio-icon{width:58px;height:58px}.bpm183-post-author strong{max-width:240px}} @media(max-width:520px){.bpm183-shell{width:100%;margin:8px 0 26px}.bpm183-main{gap:12px}.bpm183-card,.bpm183-radio-hero,.bpm183-featured-artist{border-radius:0;border-left:0;border-right:0}.bpm183-feed-card{border-radius:0}.bpm183-right .bpm183-card{border-radius:18px;margin:0 8px}.bpm183-featured-artist{min-height:180px}.bpm183-featured-content{padding:18px}.bpm183-featured-content h2{font-size:35px}.bpm183-post-actions{justify-content:space-between}.bpm183-post-actions span{display:none}.bpm183-post-actions button,.bpm183-post-actions a{font-size:12px;padding:7px 6px}.bpm183-toast{bottom:98px;width:max-content;max-width:calc(100vw - 24px)}} /* ═══════════════════════════════════════════════════════════ BPM V184 — ACCUEIL IDENTIQUE AU MOCKUP SOCIAL MUSICAL Layout 4 colonnes + navbar mockup + lecteur bas pleine largeur. ═══════════════════════════════════════════════════════════ */ .page-index{ --bpm184-line:rgba(255,255,255,.10); --bpm184-line-blue:rgba(14,139,255,.35); --bpm184-card:rgba(9,14,26,.78); --bpm184-card-2:rgba(13,21,38,.72); --bpm184-text:#f8fbff; --bpm184-muted:#8995ad; --bpm184-blue:#0b7cff; --bpm184-cyan:#1fd6ff; --bpm184-shadow:0 24px 70px rgba(0,0,0,.38); overflow-x:hidden; } .page-index main:not(.auth-page):not(.msg-main):not(.admin-main):not(.espace-main):not(.artistes-page):not(.members-page):not(.redac-main){ max-width:none!important; width:100%!important; } .page-index .radio-bar{display:none!important;} .page-index .bpm-sticky-shell{box-shadow:0 18px 44px rgba(0,0,0,.18)!important;} .page-index .site-nav{ height:64px!important; min-height:64px!important; padding:0 18px!important; background:rgba(5,9,17,.92)!important; border-bottom:1px solid rgba(255,255,255,.08)!important; box-shadow:0 14px 42px rgba(0,0,0,.30)!important; } .page-index .site-nav:after{ content:""; position:absolute; left:0;right:0;bottom:-1px;height:1px; background:linear-gradient(90deg,transparent,rgba(14,139,255,.65),rgba(31,214,255,.38),transparent); pointer-events:none; } .page-index .site-nav > .logo{width:98px!important;min-width:98px!important;height:56px!important;margin-right:8px!important;border-right:1px solid rgba(255,255,255,.15);padding-right:18px!important;background:transparent!important;border-radius:0!important;box-shadow:none!important;} .page-index .site-nav > .logo.logo-with-image .logo-img,.page-index .site-nav > .logo .bpm-top-logo-img{width:72px!important;height:38px!important;object-fit:contain!important;filter:drop-shadow(0 0 16px rgba(14,139,255,.35));} .page-index .nav-links{gap:8px!important;align-items:center;} .page-index .nlink{ min-height:38px; display:inline-flex!important; align-items:center; border-radius:14px!important; padding:0 12px!important; color:#d7deeb!important; font-size:15px!important; font-weight:800!important; letter-spacing:.01em; } .page-index .nlink i{font-size:17px;margin-right:4px;color:#8da2c2;} .page-index .nlink.active,.page-index .nlink:hover{ background:rgba(11,124,255,.16)!important; border-color:rgba(11,124,255,.34)!important; color:#fff!important; } .page-index .nav-right{gap:9px!important;align-items:center!important;} .bpm184-nav-action,.page-index .notif-bell{ width:38px!important;height:38px!important;border-radius:50%!important; display:inline-flex!important;align-items:center!important;justify-content:center!important; background:transparent!important;border:0!important;color:#dce6f6!important; font-size:22px!important;position:relative;transition:.16s ease; } .bpm184-nav-action:hover,.page-index .notif-bell:hover{background:rgba(255,255,255,.08)!important;color:#fff!important;transform:translateY(-1px)} .page-index .user-pill{height:42px!important;border-radius:999px!important;padding:3px 9px 3px 3px!important;background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.08)!important;gap:8px!important;} .page-index .user-pill img,.page-index .user-initials{width:34px!important;height:34px!important;border-radius:50%!important;} .page-index .user-pill span{font-weight:900;color:#fff;font-size:13px;} .page-index .desktop-auth.btn{height:34px!important;padding:0 11px!important;} .page-index .bpm184-shell{ width:min(1888px,calc(100vw - 32px))!important; max-width:none!important; margin:24px auto 132px!important; display:grid!important; grid-template-columns:320px minmax(520px,1fr) 430px 360px!important; grid-template-areas: "left hero hero right" "left feed mid right"!important; gap:18px!important; align-items:start!important; } .page-index .bpm183-left{grid-area:left!important;} .page-index .bpm184-radio-hero{grid-area:hero!important;} .page-index .bpm184-main{grid-area:feed!important;} .page-index .bpm184-middle{grid-area:mid!important;display:flex!important;flex-direction:column!important;gap:18px!important;} .page-index .bpm183-right{grid-area:right!important;display:flex!important;flex-direction:column!important;gap:18px!important;} .page-index .bpm183-sticky-col{position:sticky!important;top:86px!important;gap:18px!important;} .page-index .bpm183-card{ background:linear-gradient(180deg,rgba(12,18,31,.82),rgba(6,10,18,.78))!important; border:1px solid var(--bpm184-line)!important; border-radius:22px!important; box-shadow:0 18px 48px rgba(0,0,0,.24)!important; backdrop-filter:blur(18px) saturate(130%); } .page-index .bpm183-card:before{background:radial-gradient(circle at 18% 0%,rgba(14,139,255,.13),transparent 42%)!important;} .page-index .bpm184-profile-card{padding:22px!important;border-radius:18px!important;} .page-index .bpm183-user-head{grid-template-columns:74px minmax(0,1fr)!important;gap:15px!important;} .page-index .bpm183-avatar-lg{width:74px!important;height:74px!important;border:0!important;box-shadow:0 0 0 3px rgba(255,255,255,.08);} .page-index .bpm183-user-head strong{font-size:21px!important;} .page-index .bpm183-user-head small{font-size:14px!important;color:#0ba7ff!important;font-weight:800;} .page-index .bpm183-user-stats{gap:10px!important;margin-top:24px!important;} .page-index .bpm183-user-stats span{background:transparent!important;border:0!important;padding:4px!important;} .page-index .bpm183-user-stats strong{font-size:19px!important;} .page-index .bpm183-user-stats small{font-size:12px!important;color:#8894aa!important;} .page-index .bpm184-side-menu{padding:14px!important;background:transparent!important;border:0!important;box-shadow:none!important;} .page-index .bpm184-side-menu:before{display:none!important;} .page-index .bpm184-side-menu a{ min-height:48px!important; border-radius:18px!important; grid-template-columns:36px minmax(0,1fr) auto!important; gap:10px!important; color:#d0d8e8!important; font-size:15px!important; padding:8px 14px!important; } .page-index .bpm184-side-menu a i{font-size:23px!important;color:#afbed4!important;} .page-index .bpm184-side-menu a.active,.page-index .bpm184-side-menu a:hover{background:rgba(11,124,255,.18)!important;box-shadow:inset 0 0 0 1px rgba(11,124,255,.5)!important;color:#0ba7ff!important;} .page-index .bpm184-side-menu b{background:#0b7cff!important;box-shadow:0 0 18px rgba(11,124,255,.42)} .page-index .bpm184-mini-radio{padding:20px!important;text-align:center!important;background:radial-gradient(circle at 50% 42%,rgba(11,124,255,.18),transparent 39%),linear-gradient(160deg,rgba(28,8,15,.74),rgba(7,12,22,.90))!important;} .page-index .bpm184-mini-radio .bpm183-section-kicker{justify-content:space-between!important;color:#fff!important;} .page-index .bpm184-mini-radio .bpm183-section-kicker span{color:#ff314f!important;text-shadow:0 0 16px rgba(255,49,79,.42);} .page-index .bpm184-mini-radio em{display:block;color:#16b7ff;font-style:normal;margin:8px 0 14px;font-weight:900;} .page-index .bpm184-mini-radio .btn{border-radius:12px!important;height:44px!important;font-weight:900!important;} .page-index .bpm184-radio-hero{ min-height:218px!important; border-radius:22px!important; padding:22px 28px!important; grid-template-columns:160px minmax(0,1fr) 270px!important; gap:26px!important; background:linear-gradient(135deg,rgba(9,22,44,.96),rgba(5,20,36,.94) 56%,rgba(4,35,43,.84))!important; border-color:rgba(60,154,255,.24)!important; box-shadow:0 24px 76px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.06)!important; } .page-index .bpm184-radio-hero .bpm183-radio-cover{width:150px!important;height:150px!important;border-radius:26px!important;border:3px solid #098bff!important;box-shadow:0 0 34px rgba(11,124,255,.36),0 18px 36px rgba(0,0,0,.34)!important;} .page-index .bpm183-live-pill{font-size:12px!important;color:#9fc9ff!important;} .page-index .bpm183-radio-copy h1{font-size:43px!important;line-height:.98!important;letter-spacing:1px!important;max-width:760px;} .page-index .bpm183-radio-copy p{font-size:16px!important;color:#f0f6ff!important;max-width:760px!important;} .page-index .bpm183-wave{height:34px!important;gap:5px!important;} .page-index .bpm183-wave i{width:5px!important;background:linear-gradient(180deg,#28d5ff,#087cff)!important;} .page-index .bpm183-radio-actions{justify-content:flex-end!important;gap:15px!important;} .page-index .bpm183-listeners strong{font-size:24px!important;} .page-index .bpm184-open-player{height:44px;border-radius:999px;padding:0 22px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.22);color:#fff;font-weight:900;cursor:pointer;} .page-index .bpm184-open-player:hover{background:rgba(255,255,255,.10);} .page-index .bpm183-round-play{width:58px!important;height:58px!important;background:linear-gradient(135deg,#0b7cff,#1fd6ff)!important;box-shadow:0 15px 32px rgba(11,124,255,.45)!important;} .page-index .bpm184-feed-card{border-radius:20px!important;overflow:hidden!important;} .page-index .bpm183-feed-head{padding:18px 20px 12px!important;} .page-index .bpm183-feed-head h2,.page-index .bpm183-card-title strong{font-family:var(--head)!important;text-transform:uppercase!important;letter-spacing:.8px!important;color:#fff!important;} .page-index .bpm183-feed-head h2{font-size:26px!important;} .page-index .bpm183-feed-tabs{padding:0 20px 16px!important;display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px!important;} .page-index .bpm183-feed-tabs button{height:40px!important;border-radius:10px!important;font-weight:800!important;background:rgba(255,255,255,.035)!important;} .page-index .bpm183-feed-tabs button.active{background:linear-gradient(135deg,rgba(11,124,255,.78),rgba(15,95,200,.42))!important;color:#fff!important;box-shadow:0 10px 22px rgba(11,124,255,.18)!important;} .page-index .bpm183-post{padding:20px!important;background:rgba(255,255,255,.012)!important;} .page-index .bpm183-post-head{margin-bottom:4px!important;} .page-index .bpm183-avatar-sm{width:50px!important;height:50px!important;} .page-index .bpm183-post-author strong{font-size:16px!important;} .page-index .bpm183-post-author small{font-size:13px!important;color:#0ba7ff!important;} .page-index .bpm183-post-text{font-size:16px!important;color:#f3f6ff!important;} .page-index .bpm184-audio-card{ grid-template-columns:148px minmax(0,1fr) 58px!important; min-height:150px!important; border-radius:16px!important; padding:0 16px 0 0!important; gap:18px!important; background:linear-gradient(135deg,rgba(15,24,40,.90),rgba(13,21,33,.70))!important; overflow:hidden!important; } .page-index .bpm184-audio-card .bpm183-audio-icon{width:148px!important;height:150px!important;border-radius:0!important;background:radial-gradient(circle at 50% 30%,rgba(255,113,60,.36),rgba(6,12,22,.9) 55%),linear-gradient(135deg,#1a2436,#0b1422)!important;color:#fff!important;} .page-index .bpm184-audio-card strong{font-size:21px!important;} .page-index .bpm184-audio-card small{font-size:14px!important;color:#a4afc5!important;} .bpm184-fake-wave{display:flex!important;align-items:center;gap:4px;margin-top:14px;height:24px;max-width:230px;} .bpm184-fake-wave i{display:block;width:3px;height:10px;background:rgba(255,255,255,.52);border-radius:4px;} .bpm184-fake-wave i:nth-child(2){height:18px}.bpm184-fake-wave i:nth-child(3){height:12px}.bpm184-fake-wave i:nth-child(4){height:21px}.bpm184-fake-wave i:nth-child(5){height:8px}.bpm184-fake-wave i:nth-child(6){height:16px}.bpm184-fake-wave i:nth-child(7){height:13px} .page-index .bpm183-post-actions{border-top:1px solid rgba(255,255,255,.065);padding-top:10px!important;justify-content:space-around!important;} .page-index .bpm183-post-actions button,.page-index .bpm183-post-actions a{font-size:14px!important;padding:9px 14px!important;} .page-index .bpm184-stories-card{padding-bottom:14px!important;} .page-index .bpm184-stories-row{display:flex!important;gap:15px!important;padding:0 16px 2px!important;overflow:hidden!important;} .page-index .bpm184-story{width:72px!important;} .page-index .bpm184-story span{width:66px!important;height:66px!important;position:relative!important;} .page-index .bpm184-story span b{position:absolute;right:-2px;bottom:2px;width:23px;height:23px;border-radius:50%;background:#0b7cff;color:#fff;border:2px solid #0a0f1b;display:grid;place-items:center;font-size:18px;line-height:1;} .page-index .bpm184-story small{font-size:12px!important;color:#dce6f6!important;} .page-index .bpm184-suggest-row{display:grid;grid-template-columns:minmax(0,1fr) 86px;gap:10px;align-items:center;padding:10px 16px;} .page-index .bpm184-suggest-row .btn{height:36px!important;border-radius:12px!important;justify-content:center!important;} .page-index .bpm184-see-more{display:block;text-align:center;color:#0ba7ff;font-weight:900;padding:10px 0 12px;} .page-index .bpm183-card-title{padding:16px 18px 12px!important;} .page-index .bpm183-card-title strong{font-size:20px!important;} .page-index .bpm183-card-title a{font-size:13px!important;color:#0ba7ff!important;font-weight:900;} .page-index .bpm183-rank-row{grid-template-columns:24px minmax(0,1fr) 38px!important;padding:10px 18px!important;} .page-index .bpm183-rank{font-size:16px!important;color:#9ca9bf!important;} .page-index .bpm183-rank-main strong,.page-index .bpm183-track-main strong,.page-index .bpm183-video-mini strong,.page-index .bpm183-event-mini strong{font-size:14px!important;color:#fff!important;} .page-index .bpm183-rank-main small,.page-index .bpm183-track-main small,.page-index .bpm183-video-mini small,.page-index .bpm183-event-mini small{font-size:13px!important;color:#8d98ad!important;} .page-index .bpm183-event-mini{grid-template-columns:64px minmax(0,1fr)!important;border-radius:14px!important;margin:8px 16px!important;padding:10px!important;background:rgba(255,255,255,.035)!important;} .page-index .bpm183-event-mini>span{height:62px!important;border-radius:10px!important;} .page-index .bpm183-video-mini{grid-template-columns:84px minmax(0,1fr)!important;padding:10px 16px!important;} .page-index .bpm183-video-mini>span{width:84px!important;height:56px!important;} .page-index .bpm183-track-mini{padding:10px 16px!important;} .page-index .bpm183-track-main>span{width:54px!important;height:54px!important;} .page-index .bpm-global-player{ left:0!important;right:0!important;bottom:0!important;border-radius:0!important; border-left:0!important;border-right:0!important;border-bottom:0!important; background:rgba(8,13,23,.96)!important; box-shadow:0 -20px 55px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.08)!important; z-index:850!important; } .page-index .bpm-gp-main{ height:92px!important; max-width:1888px!important; margin:0 auto!important; padding:12px 22px!important; grid-template-columns:64px minmax(230px,1fr) 360px 48px minmax(280px,1.2fr) 56px 170px 48px 48px!important; gap:16px!important; } .page-index .bpm-gp-cover{width:64px!important;height:64px!important;border-radius:8px!important;} .page-index .bpm-gp-meta strong{font-size:18px!important;} .page-index .bpm-gp-meta span{font-size:14px!important;} .page-index .bpm-gp-controls{gap:20px!important;} .page-index .bpm-gp-icon{background:transparent!important;border:0!important;font-size:24px!important;color:#dce5f5!important;} .page-index .bpm-gp-play{width:56px!important;height:56px!important;font-size:25px!important;background:linear-gradient(135deg,#0b7cff,#1fd6ff)!important;} .page-index .bpm-gp-progress{height:5px!important;background:rgba(255,255,255,.16)!important;} .page-index .bpm-gp-time{font-size:13px!important;color:#a4afc5!important;} .page-index .bpm-gp-search-btn{border:0!important;background:transparent!important;font-size:20px!important;padding:0!important;width:42px!important;} .page-index .bpm-gp-search-btn span{display:none!important;} @media(max-width:1680px){ .page-index .bpm184-shell{grid-template-columns:284px minmax(480px,1fr) 380px 328px!important;gap:16px!important;width:min(1600px,calc(100vw - 24px))!important;} .page-index .bpm183-radio-copy h1{font-size:38px!important;} .page-index .bpm184-radio-hero{grid-template-columns:142px minmax(0,1fr) 230px!important;} .page-index .bpm184-radio-hero .bpm183-radio-cover{width:136px!important;height:136px!important;} } @media(max-width:1360px){ .page-index .bpm184-shell{grid-template-columns:260px minmax(0,1fr) 340px!important;grid-template-areas:"left hero hero" "left feed mid" "left right right"!important;} .page-index .bpm183-right{position:static!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;} .page-index .bpm184-radio-hero{grid-template-columns:120px minmax(0,1fr) 160px!important;} .page-index .bpm184-radio-hero .bpm183-radio-cover{width:116px!important;height:116px!important;} .page-index .bpm183-listeners{display:none!important;} } @media(max-width:1040px){ .page-index .bpm184-shell{grid-template-columns:1fr!important;grid-template-areas:"hero" "feed" "mid" "right"!important;width:calc(100vw - 18px)!important;margin-top:14px!important;} .page-index .bpm183-left{display:none!important;} .page-index .bpm184-middle,.page-index .bpm183-right{position:static!important;display:flex!important;flex-direction:column!important;} .page-index .bpm184-radio-hero{grid-template-columns:94px minmax(0,1fr)!important;min-height:160px!important;padding:16px!important;} .page-index .bpm184-radio-hero .bpm183-radio-cover{width:90px!important;height:90px!important;border-radius:18px!important;} .page-index .bpm183-radio-actions{grid-column:1/-1!important;justify-content:flex-start!important;} .page-index .bpm183-radio-copy h1{font-size:30px!important;} .page-index .bpm183-radio-copy p{white-space:normal!important;font-size:13px!important;} .page-index .bpm183-feed-tabs{grid-template-columns:repeat(3,minmax(0,1fr))!important;} .page-index .bpm-gp-main{grid-template-columns:50px minmax(0,1fr) auto auto!important;height:74px!important;padding:10px!important;} } @media(max-width:620px){ .page-index .site-nav{height:58px!important;min-height:58px!important;padding:0 10px!important;} .page-index .site-nav > .logo{width:62px!important;min-width:62px!important;padding-right:8px!important;} .page-index .site-nav > .logo.logo-with-image .logo-img,.page-index .site-nav > .logo .bpm-top-logo-img{width:48px!important;height:30px!important;} .page-index .bpm184-shell{width:100%!important;margin:8px 0 104px!important;gap:12px!important;} .page-index .bpm183-card,.page-index .bpm184-radio-hero{border-radius:0!important;border-left:0!important;border-right:0!important;} .page-index .bpm183-card-title strong{font-size:18px!important;} .page-index .bpm184-audio-card{grid-template-columns:76px minmax(0,1fr) 46px!important;min-height:92px!important;padding-right:10px!important;} .page-index .bpm184-audio-card .bpm183-audio-icon{width:76px!important;height:92px!important;} .page-index .bpm184-audio-card strong{font-size:16px!important;} .page-index .bpm184-open-player{display:none!important;} .page-index .bpm183-feed-tabs{display:flex!important;} } /* ============================================================ BPM 185 — Social fonctionnel complet Composer accueil, commentaires rapides, filtrage social ============================================================ */ .page-index .bpm185-feed-head small{display:block;color:#8f9bb4;font-family:var(--font);font-size:13px;font-weight:500;margin-top:4px;text-transform:none;letter-spacing:0} .bpm185-composer{margin:0 20px 16px;padding:14px;border-radius:18px;border:1px solid rgba(255,255,255,.085);background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.026));box-shadow:inset 0 1px 0 rgba(255,255,255,.035)} .bpm185-composer-top{display:grid;grid-template-columns:50px minmax(0,1fr);gap:12px;align-items:start} .bpm185-composer textarea{min-height:58px;resize:vertical;width:100%;border:1px solid rgba(255,255,255,.08);background:rgba(4,8,16,.58);border-radius:16px;color:#fff;padding:13px 15px;font-family:var(--font);font-size:14px;outline:0;line-height:1.45} .bpm185-composer textarea:focus{border-color:rgba(27,142,255,.62);box-shadow:0 0 0 4px rgba(27,142,255,.10)} .bpm185-composer-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;padding-left:62px} .bpm185-media-btn{height:38px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035);color:#cbd6ea;border-radius:12px;padding:0 12px;display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:12px;cursor:pointer;transition:.16s} .bpm185-media-btn:hover{background:rgba(11,124,255,.14);color:#fff;border-color:rgba(11,124,255,.28)} .bpm185-media-btn i{font-size:17px;color:#20aaff}.bpm185-title-input{height:38px;min-width:220px;flex:1;border:1px solid rgba(255,255,255,.08);background:rgba(4,8,16,.42);border-radius:12px;color:#fff;padding:0 12px;outline:0;font-size:12px}.bpm185-vis{height:38px;border:1px solid rgba(255,255,255,.08);background:#080d18;color:#dbe7ff;border-radius:12px;padding:0 10px;outline:0;font-size:12px}.bpm185-publish{height:38px!important;border-radius:12px!important;padding:0 15px!important}.bpm185-preview{margin:12px 0 0 62px;border:1px dashed rgba(43,146,255,.28);border-radius:16px;padding:10px;background:rgba(11,124,255,.055);display:grid;gap:10px}.bpm185-preview[hidden]{display:none}.bpm185-preview img,.bpm185-preview video{width:100%;max-height:290px;object-fit:cover;border-radius:12px;background:#020814}.bpm185-preview audio{width:100%}.bpm185-preview-pill{display:flex;align-items:center;gap:8px;color:#dce9ff;font-size:12px;font-weight:800}.bpm185-preview-pill span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bpm185-preview-pill button{margin-left:auto;width:28px;height:28px;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;cursor:pointer}.bpm185-login-card{display:flex;align-items:center;justify-content:space-between;gap:12px}.bpm185-login-card strong{display:block;color:#fff}.bpm185-login-card span{display:block;color:#8e9bb4;font-size:13px;margin-top:3px}.bpm185-comments{display:none;margin:0 20px 18px;padding:12px;border-radius:16px;background:rgba(2,6,13,.32);border:1px solid rgba(255,255,255,.06);gap:8px}.bpm185-comments.is-open,.bpm183-post:hover .bpm185-comments:not(:empty){display:grid}.bpm185-comment-form{display:grid;grid-template-columns:minmax(0,1fr) 38px;gap:8px;margin-top:4px}.bpm185-comment-form input{height:38px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);border-radius:999px;color:#fff;padding:0 13px;outline:0}.bpm185-comment-form input:focus{border-color:rgba(27,142,255,.52);box-shadow:0 0 0 3px rgba(27,142,255,.10)}.bpm185-comment-form button{width:38px;height:38px;border:0;border-radius:50%;background:linear-gradient(135deg,#0b7cff,#1fd6ff);color:#fff;display:grid;place-items:center;cursor:pointer}.bpm183-post-actions button.is-active{color:#38bdf8!important;background:rgba(11,124,255,.14)!important}.bpm185-comments .wall-comment-avatar{width:31px;height:31px}.bpm185-comments .wall-comment-bubble{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.08)} @media(max-width:760px){.bpm185-composer{margin:0 12px 12px;border-radius:14px}.bpm185-composer-top{grid-template-columns:42px minmax(0,1fr)}.bpm185-composer-actions{padding-left:0}.bpm185-title-input{min-width:100%;order:5}.bpm185-vis{flex:1}.bpm185-publish{flex:1}.bpm185-preview{margin-left:0}.bpm185-login-card{align-items:stretch;flex-direction:column}.bpm185-comments{margin:0 12px 12px}} /* ============================================================ BPM 186 — stabilisation, recherche, conditions et mobile ============================================================ */ .bpm186-legal-page,.bpm186-search-page,.bpm186-admin-page{width:min(1320px,calc(100% - 2rem));margin:0 auto;padding:2rem 0 6.5rem}.bpm186-legal-hero,.bpm186-search-hero,.bpm186-admin-hero{background:linear-gradient(135deg,rgba(14,165,255,.18),rgba(2,6,23,.92));border:1px solid rgba(14,165,255,.25);border-radius:22px;padding:1.35rem 1.5rem;box-shadow:0 24px 70px rgba(0,0,0,.28);margin-bottom:1.1rem}.bpm186-legal-hero span,.bpm186-search-hero span,.bpm186-admin-hero span{display:inline-flex;align-items:center;gap:.45rem;color:#38bdf8;text-transform:uppercase;font-size:.78rem;font-weight:800;letter-spacing:.08em}.bpm186-legal-hero h1,.bpm186-search-hero h1,.bpm186-admin-hero h1{font-family:var(--font-title);font-size:clamp(2rem,4vw,4rem);line-height:.95;margin:.5rem 0;color:#fff}.bpm186-legal-hero p,.bpm186-search-hero p,.bpm186-admin-hero p{color:var(--muted);max-width:850px}.bpm186-legal-grid,.bpm186-results-grid,.bpm186-admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.bpm186-legal-card,.bpm186-results-col,.bpm186-admin-card,.bpm186-empty-search{background:rgba(8,16,31,.78);border:1px solid rgba(148,163,184,.14);border-radius:18px;padding:1.1rem;box-shadow:0 18px 48px rgba(0,0,0,.22)}.bpm186-legal-card h2,.bpm186-results-col h2,.bpm186-admin-card h2{margin:0 0 .75rem;color:#fff;font-size:1rem}.bpm186-legal-card p{color:var(--muted);line-height:1.7}.bpm186-search-form{display:flex;align-items:center;gap:.75rem;background:rgba(2,6,23,.66);border:1px solid rgba(148,163,184,.18);border-radius:16px;padding:.65rem;margin-top:1rem}.bpm186-search-form i{color:#38bdf8;font-size:1.25rem}.bpm186-search-form input{flex:1;background:transparent;border:0;outline:0;color:#fff;font-size:1rem}.bpm186-empty-search{display:grid;place-items:center;text-align:center;min-height:210px;color:var(--muted)}.bpm186-empty-search i{font-size:2.5rem;color:#38bdf8}.bpm186-result-card{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:#fff;background:rgba(15,23,42,.62);border:1px solid rgba(148,163,184,.12);border-radius:14px;padding:.7rem;margin:.55rem 0;transition:.18s}.bpm186-result-card:hover{border-color:rgba(14,165,255,.45);transform:translateY(-1px)}.bpm186-result-card>span{width:48px;height:48px;border-radius:12px;background:rgba(14,165,255,.12);display:grid;place-items:center;overflow:hidden;flex:0 0 48px}.bpm186-result-card>span img{width:100%;height:100%;object-fit:cover}.bpm186-result-card em{font-style:normal;min-width:0;flex:1}.bpm186-result-card strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bpm186-result-card small{display:block;color:var(--muted);font-size:.78rem}.bpm186-muted{color:var(--muted);font-size:.9rem}.bpm186-terms-box{background:rgba(14,165,255,.075);border:1px solid rgba(14,165,255,.25);border-radius:12px;padding:1rem;margin-bottom:1rem}.bpm186-terms-title{font-size:13px;font-weight:800;color:#38bdf8;margin-bottom:.75rem;display:flex;align-items:center;gap:.5rem}.bpm186-terms-scroll{max-height:220px;overflow-y:auto;background:rgba(2,6,23,.42);border-radius:8px;padding:.875rem;font-size:12px;color:var(--muted);line-height:1.75;margin-bottom:1rem;border:1px solid rgba(148,163,184,.14)}.bpm186-terms-scroll strong{color:#fff;font-size:13px}.bpm186-terms-box a{color:#38bdf8}.bpm186-admin-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.bpm186-admin-card.wide{grid-column:span 3}.bpm186-admin-row,.bpm186-admin-mini{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.75rem 0;border-bottom:1px solid rgba(148,163,184,.12)}.bpm186-admin-row:last-child,.bpm186-admin-mini:last-child{border-bottom:0}.bpm186-admin-row p{margin:.25rem 0 0;color:var(--muted)}.bpm186-admin-row small,.bpm186-admin-mini small{display:block;color:var(--muted)}.bpm186-admin-actions{display:flex;align-items:center;gap:.45rem}.bpm186-admin-actions select{background:rgba(15,23,42,.9);border:1px solid rgba(148,163,184,.2);color:#fff;border-radius:10px;padding:.5rem}.btn-danger{background:#b91c1c!important;color:#fff!important;border-color:#ef444455!important}.bpm186-admin-mini form{margin-left:auto} @media (max-width:1200px){.bpm186-admin-grid,.bpm186-legal-grid,.bpm186-results-grid{grid-template-columns:1fr}.bpm186-admin-card.wide{grid-column:span 1}.bpm183-shell.bpm184-shell{grid-template-columns:minmax(0,1fr)!important}.bpm183-left,.bpm184-middle,.bpm183-right{position:relative!important;top:auto!important}.bpm184-middle{order:3}.bpm183-right{order:4}.bpm183-radio-hero{order:1}.bpm183-main{order:2}} @media (max-width:720px){.bpm186-legal-page,.bpm186-search-page,.bpm186-admin-page{width:min(100% - 1rem,1320px);padding-top:1rem}.bpm186-search-form{display:grid;grid-template-columns:auto 1fr}.bpm186-search-form button{grid-column:1/-1;width:100%}.bpm186-result-card>span{width:42px;height:42px;flex-basis:42px}.bpm186-admin-row,.bpm186-admin-mini{align-items:flex-start;flex-direction:column}.bpm185-composer-actions{grid-template-columns:1fr 1fr!important}.bpm185-title-input,.bpm185-vis,.bpm185-publish{grid-column:1/-1;width:100%}.bpm183-radio-hero{padding:1rem!important}.bpm183-radio-actions{width:100%;justify-content:flex-start!important}.bpm183-feed-tabs{overflow-x:auto}.bpm183-feed-tabs button{white-space:nowrap}.bpm-global-player{padding-bottom:env(safe-area-inset-bottom)}} /* BPM 187 — Billetterie QR pro / scan entrée */ .ticket-scan-page{padding:1.5rem;max-width:1180px;margin:auto;padding-bottom:120px}.ticket-scan-hero{display:flex;justify-content:space-between;gap:1rem;align-items:flex-end;margin-bottom:1rem;padding:1.25rem;border:1px solid var(--bdr);border-radius:22px;background:linear-gradient(135deg,rgba(14,165,255,.16),rgba(5,10,18,.92) 58%,rgba(16,12,38,.82));box-shadow:0 20px 60px rgba(0,0,0,.28)}.ticket-scan-hero h1{font-family:'Bebas Neue',sans-serif;font-size:46px;line-height:1;margin:.35rem 0;color:#fff;letter-spacing:1.5px}.ticket-scan-hero p{color:var(--muted);margin:0;max-width:660px}.ticket-kicker{display:inline-flex;gap:.45rem;align-items:center;color:#8bd8ff;text-transform:uppercase;font-size:12px;letter-spacing:.12em}.ticket-scan-badges{display:flex;gap:.45rem;flex-wrap:wrap;justify-content:flex-end}.ticket-scan-badges span{display:inline-flex;gap:.35rem;align-items:center;border:1px solid rgba(14,165,255,.28);background:rgba(14,165,255,.08);color:#c8efff;border-radius:999px;padding:.5rem .75rem;font-size:12px}.ticket-scan-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:1rem;margin-bottom:1rem}.ticket-scanner-card,.ticket-manual-card,.ticket-event-card{padding:1.1rem}.ticket-card-title{display:flex;align-items:center;gap:.55rem;color:#fff;font-weight:800;margin-bottom:.9rem}.ticket-card-title i{color:var(--bb)}.ticket-card-head{display:flex;justify-content:space-between;gap:1rem;align-items:center;flex-wrap:wrap}.ticket-camera-shell{position:relative;border-radius:18px;overflow:hidden;min-height:330px;background:radial-gradient(circle at center,rgba(14,165,255,.12),#050a12 68%);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center}.ticket-camera-shell video{width:100%;height:360px;object-fit:cover;background:#02050a}.ticket-scan-frame{position:absolute;inset:20%;border:2px solid #12b7ff;border-radius:22px;box-shadow:0 0 0 999px rgba(0,0,0,.28),0 0 28px rgba(14,165,255,.45);pointer-events:none}.ticket-scan-help{position:absolute;left:1rem;right:1rem;bottom:1rem;background:rgba(2,7,15,.78);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:.75rem;color:#d9efff;font-size:13px;text-align:center}.ticket-scan-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.8rem}.ticket-muted{color:var(--muted);font-size:12px;line-height:1.55;margin:.75rem 0 0}.ticket-manual-form{display:grid;grid-template-columns:1fr auto;gap:.65rem}.ticket-result{margin-top:1rem;border-radius:16px;padding:1rem;border:1px solid rgba(255,255,255,.1)}.ticket-result p{margin:.35rem 0 0;color:#dbe7f7}.ticket-result-ok{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.35)}.ticket-result-warn{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.35)}.ticket-result-err{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.35)}.ticket-result-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;margin-top:.85rem}.ticket-result-details span{display:block;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:.65rem;color:var(--muted);font-size:12px}.ticket-result-details b,.ticket-result-details code{display:block;color:#fff;margin-top:.2rem}.ticket-event-form{display:grid;grid-template-columns:1fr auto;gap:.65rem;margin-top:.6rem}.ticket-stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin:1rem 0}.ticket-stats-row div{border:1px solid rgba(14,165,255,.17);border-radius:16px;background:rgba(14,165,255,.06);padding:.9rem;text-align:center}.ticket-stats-row b{display:block;color:#fff;font-size:24px}.ticket-stats-row span{display:block;color:var(--muted);font-size:12px;margin-top:.2rem}.ticket-table-wrap{margin-top:1rem}.ticket-empty{padding:1rem;text-align:center;color:var(--muted);border:1px dashed var(--bdr);border-radius:14px;margin-top:1rem}@media(max-width:920px){.ticket-scan-hero{align-items:flex-start;flex-direction:column}.ticket-scan-grid{grid-template-columns:1fr}.ticket-stats-row{grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){.ticket-scan-page{padding:1rem;padding-bottom:130px}.ticket-scan-hero h1{font-size:36px}.ticket-manual-form,.ticket-event-form{grid-template-columns:1fr}.ticket-result-details{grid-template-columns:1fr}.ticket-camera-shell{min-height:260px}.ticket-camera-shell video{height:290px}.ticket-stats-row{grid-template-columns:1fr}} /* BPM 188 — Playlists publiques + favoris */ .bpm188-page{max-width:1480px;margin:0 auto;padding:1.25rem 1.25rem 7rem;color:var(--text)} .bpm188-hero,.bpm188-playlist-hero{background:radial-gradient(circle at 12% 0,rgba(14,165,255,.24),transparent 34%),linear-gradient(135deg,rgba(15,23,42,.98),rgba(2,6,23,.92));border:1px solid var(--bdr);border-radius:24px;padding:1.4rem;box-shadow:0 22px 60px rgba(0,0,0,.28);display:flex;align-items:center;justify-content:space-between;gap:1.25rem;margin-bottom:1rem;overflow:hidden;position:relative}.bpm188-hero h1,.bpm188-playlist-hero h1{font-family:var(--head);font-size:clamp(38px,5vw,72px);line-height:.92;color:#fff;margin:.35rem 0}.bpm188-hero p,.bpm188-playlist-hero p,.bpm188-muted{color:var(--muted);font-size:14px;max-width:760px}.bpm188-kicker{display:inline-flex;align-items:center;gap:.45rem;color:#59c7ff;text-transform:uppercase;font-size:11px;font-weight:800;letter-spacing:.08em}.bpm188-hero-actions{display:flex;gap:.55rem;flex-wrap:wrap;align-items:center}.bpm188-search{display:flex;align-items:center;gap:.6rem;background:var(--surf);border:1px solid var(--bdr);border-radius:999px;padding:.55rem .65rem;margin:1rem 0}.bpm188-search i{font-size:21px;color:#7dd3fc;margin-left:.5rem}.bpm188-search input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#fff;font-size:15px;padding:.65rem}.bpm188-grid-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,.52fr);gap:1rem;margin:1rem 0}.bpm188-panel{background:rgba(5,12,25,.82);border:1px solid var(--bdr);border-radius:20px;padding:1rem;box-shadow:0 18px 48px rgba(0,0,0,.22);backdrop-filter:blur(14px)}.bpm188-panel-head{display:flex;justify-content:space-between;align-items:center;gap:.7rem;margin-bottom:.85rem}.bpm188-panel-head strong{font-family:var(--head);font-size:24px;color:#fff;display:flex;align-items:center;gap:.45rem}.bpm188-panel-head a,.bpm188-panel-head span{color:#28a9ff;font-size:13px;text-decoration:none}.bpm188-playlist-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.bpm188-playlist-grid.compact{grid-template-columns:repeat(4,minmax(0,1fr))}.bpm188-mini-playlists{display:grid;grid-template-columns:1fr;gap:.75rem}.bpm188-playlist-card{background:rgba(255,255,255,.035);border:1px solid var(--bdr);border-radius:18px;overflow:hidden;transition:.18s ease;min-width:0}.bpm188-playlist-card:hover{transform:translateY(-2px);border-color:rgba(14,165,255,.55);box-shadow:0 18px 48px rgba(14,165,255,.10)}.bpm188-playlist-cover{height:170px;display:block;position:relative;background:#071224;overflow:hidden}.bpm188-playlist-cover img{width:100%;height:100%;object-fit:cover;filter:saturate(1.1) contrast(1.05)}.bpm188-playlist-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55),transparent)}.bpm188-playlist-cover span{position:absolute;right:1rem;bottom:1rem;width:46px;height:46px;border-radius:999px;background:linear-gradient(135deg,#0ea5ff,#2563eb);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 14px 34px rgba(37,99,235,.38);z-index:2}.bpm188-playlist-body{padding:1rem}.bpm188-playlist-title{display:block;color:#fff;text-decoration:none;font-weight:900;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bpm188-playlist-meta{color:var(--muted);font-size:12px;margin:.25rem 0}.bpm188-chip{display:inline-flex;align-items:center;gap:.35rem;background:rgba(14,165,255,.12);border:1px solid rgba(14,165,255,.25);color:#a5e6ff;border-radius:999px;padding:.28rem .55rem;font-size:11px;font-weight:800}.bpm188-playlist-body p{font-size:12px;color:var(--muted);line-height:1.45;margin:.6rem 0 0}.bpm188-card-actions{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.8rem}.bpm188-card-actions .on,.bpm188-hero-actions .on{border-color:rgba(239,68,68,.55)!important;color:#fecaca!important;background:rgba(239,68,68,.10)!important}.bpm188-empty{border:1px dashed rgba(148,163,184,.28);border-radius:16px;padding:1rem;text-align:center;color:var(--muted);background:rgba(255,255,255,.025)}.bpm188-playlist-bigcover{width:260px;height:260px;border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.16);box-shadow:0 20px 50px rgba(0,0,0,.38);flex-shrink:0}.bpm188-playlist-bigcover img{width:100%;height:100%;object-fit:cover}.bpm188-playlist-info{min-width:0;flex:1}.bpm188-playlist-stats{display:flex;gap:.7rem;flex-wrap:wrap;margin:1rem 0}.bpm188-playlist-stats span{min-width:100px;background:rgba(255,255,255,.045);border:1px solid var(--bdr);border-radius:14px;padding:.75rem .85rem}.bpm188-playlist-stats strong{display:block;color:#fff;font-size:22px}.bpm188-playlist-stats small{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em}.bpm188-owner{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin-bottom:1rem}.bpm188-owner a{display:inline-flex;align-items:center;gap:.5rem;color:#fff;text-decoration:none}.bpm188-owner img{width:32px;height:32px;border-radius:999px;object-fit:cover}.bpm188-owner b{font-size:11px;color:#7dd3fc;border:1px solid rgba(14,165,255,.25);border-radius:999px;padding:.3rem .55rem;background:rgba(14,165,255,.10)}.bpm188-track-list{display:grid;gap:.55rem}.bpm188-track-row{display:grid;grid-template-columns:40px 50px minmax(0,1fr) auto 38px 38px;align-items:center;gap:.65rem;background:rgba(255,255,255,.035);border:1px solid var(--bdr);border-radius:14px;padding:.55rem}.bpm188-track-row:hover{border-color:rgba(14,165,255,.38);background:rgba(14,165,255,.055)}.bpm188-track-play,.bpm188-track-queue,.bpm188-track-fav{width:38px;height:38px;border-radius:999px;border:1px solid var(--bdr);background:rgba(255,255,255,.05);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}.bpm188-track-play{background:linear-gradient(135deg,#0ea5ff,#2563eb);border:0}.bpm188-track-fav.on{color:#fecaca;border-color:rgba(239,68,68,.55);background:rgba(239,68,68,.10)}.bpm188-track-cover{width:50px;height:50px;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;color:var(--muted)}.bpm188-track-cover img{width:100%;height:100%;object-fit:cover}.bpm188-track-main{min-width:0}.bpm188-track-main strong{display:block;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bpm188-track-main small{display:block;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bpm188-track-duration{color:var(--muted);font-size:12px}.bpm188-edit-form{display:grid;gap:.75rem}.bpm188-edit-form label{font-size:12px;color:var(--muted);display:grid;gap:.35rem}.bpm-global-player.is-favorite #bpmGpFavorite{color:#fecaca;background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.42)}@media(max-width:1180px){.bpm188-playlist-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bpm188-playlist-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr))}.bpm188-grid-two{grid-template-columns:1fr}}@media(max-width:760px){.bpm188-page{padding:1rem .8rem 7rem}.bpm188-hero,.bpm188-playlist-hero{display:block;border-radius:18px}.bpm188-playlist-bigcover{width:150px;height:150px;margin-bottom:1rem}.bpm188-playlist-grid,.bpm188-playlist-grid.compact{grid-template-columns:1fr}.bpm188-search{border-radius:18px;align-items:stretch}.bpm188-search input{width:100%}.bpm188-search .btn{padding:.65rem .8rem}.bpm188-track-row{grid-template-columns:36px 44px minmax(0,1fr) 34px 34px}.bpm188-track-duration{display:none}.bpm188-track-cover{width:44px;height:44px}.bpm188-panel{border-radius:16px}.bpm188-panel-head strong{font-size:20px}} /* ============================================================ BPM 190 — Radar découverte / tendances personnalisées ============================================================ */ .bpm190-page{max-width:1600px;margin:0 auto;padding:1.25rem 1.25rem 7.5rem;color:var(--text)} .bpm190-hero{position:relative;overflow:hidden;border:1px solid rgba(14,165,255,.22);background:radial-gradient(circle at 8% 0,rgba(14,165,255,.32),transparent 34%),radial-gradient(circle at 92% 12%,rgba(31,214,255,.13),transparent 30%),linear-gradient(135deg,rgba(7,14,28,.98),rgba(2,6,23,.94));border-radius:26px;padding:1.5rem;box-shadow:0 28px 80px rgba(0,0,0,.36);display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:1rem;align-items:end;margin-bottom:1rem}.bpm190-kicker{display:inline-flex;align-items:center;gap:.45rem;color:#67d7ff;text-transform:uppercase;letter-spacing:.1em;font-weight:900;font-size:11px}.bpm190-hero h1{font-family:var(--head);font-size:clamp(42px,6vw,86px);line-height:.9;color:#fff;margin:.35rem 0;text-shadow:0 16px 50px rgba(0,0,0,.35)}.bpm190-hero p{color:#a7b4ca;max-width:820px;line-height:1.55;margin:0}.bpm190-user-genres{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;margin-top:1rem;color:#cdeaff;font-size:12px}.bpm190-user-genres b{color:#fff}.bpm190-user-genres a{color:#9fe8ff;text-decoration:none;border:1px solid rgba(14,165,255,.24);background:rgba(14,165,255,.10);padding:.35rem .65rem;border-radius:999px;font-weight:800}.bpm190-filters{background:rgba(3,8,18,.62);border:1px solid rgba(255,255,255,.09);border-radius:20px;padding:1rem;display:grid;gap:.75rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);backdrop-filter:blur(12px)}.bpm190-filters label{display:grid;gap:.35rem;color:#8897b0;font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:900}.bpm190-filters select{height:44px;background:#07101f;border:1px solid rgba(255,255,255,.10);border-radius:14px;color:#fff;padding:0 .75rem;outline:0}.bpm190-grid-main{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:1rem}.bpm190-grid-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:1rem 0}.bpm190-panel{background:rgba(5,12,25,.86);border:1px solid rgba(255,255,255,.08);border-radius:22px;box-shadow:0 22px 60px rgba(0,0,0,.24);padding:1rem;backdrop-filter:blur(14px)}.bpm190-big-panel{min-height:400px}.bpm190-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.85rem;margin-bottom:.9rem}.bpm190-panel-head span{display:block;color:#55c7ff;text-transform:uppercase;letter-spacing:.08em;font-size:11px;font-weight:900;margin-bottom:.2rem}.bpm190-panel-head strong{display:block;color:#fff;font-family:var(--head);font-size:clamp(24px,3vw,34px);line-height:.95}.bpm190-panel-head a{color:#8bdfff;text-decoration:none;font-size:13px;font-weight:800}.bpm190-track-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.85rem}.bpm190-track-card{position:relative;overflow:hidden;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);border-radius:18px;transition:.18s ease}.bpm190-track-card:hover{transform:translateY(-2px);border-color:rgba(14,165,255,.55);box-shadow:0 18px 45px rgba(14,165,255,.10)}.bpm190-track-cover{position:relative;width:100%;aspect-ratio:1/1;border:0;background:#071224;color:#9aa8bd;display:grid;place-items:center;overflow:hidden;cursor:pointer}.bpm190-track-cover img{width:100%;height:100%;object-fit:cover;filter:saturate(1.08) contrast(1.04)}.bpm190-track-cover>i{font-size:42px}.bpm190-track-cover span{position:absolute;right:.8rem;bottom:.8rem;width:46px;height:46px;border-radius:999px;display:grid;place-items:center;background:linear-gradient(135deg,#0ea5ff,#2563eb);color:#fff;box-shadow:0 14px 34px rgba(14,165,255,.34);transform:scale(.94);transition:.18s}.bpm190-track-card:hover .bpm190-track-cover span{transform:scale(1)}.bpm190-track-info{padding:.85rem .9rem 1rem}.bpm190-track-info strong{display:block;color:#fff;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bpm190-track-info strong em{font-style:normal;color:#6bd8ff}.bpm190-track-info a{display:block;color:#bfefff;text-decoration:none;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:.18rem 0}.bpm190-track-info a i{color:#3b82f6}.bpm190-track-info small{display:block;color:#8c9ab3;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bpm190-mini-btn{position:absolute;right:.65rem;top:.65rem;width:34px;height:34px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(2,6,14,.55);color:#fff;backdrop-filter:blur(12px);cursor:pointer}.bpm190-list,.bpm190-artist-list,.bpm190-playlist-list,.bpm190-event-list{display:grid;gap:.65rem}.bpm190-rank-row,.bpm190-artist-row,.bpm190-playlist-row,.bpm190-event-row{display:grid;grid-template-columns:42px minmax(0,1fr) 34px;gap:.65rem;align-items:center;width:100%;text-align:left;text-decoration:none;border:1px solid rgba(255,255,255,.075);background:rgba(255,255,255,.035);border-radius:16px;padding:.65rem;color:#fff;transition:.16s;cursor:pointer}.bpm190-rank-row:hover,.bpm190-artist-row:hover,.bpm190-playlist-row:hover,.bpm190-event-row:hover{border-color:rgba(14,165,255,.40);background:rgba(14,165,255,.07)}.bpm190-rank-row b{color:#64d5ff;text-align:center}.bpm190-rank-row span,.bpm190-artist-row strong,.bpm190-playlist-row strong,.bpm190-event-row strong{min-width:0;color:#fff;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bpm190-rank-row small,.bpm190-artist-row small,.bpm190-playlist-row small,.bpm190-event-row small{display:block;color:#8897b0;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.15rem}.bpm190-artist-row{grid-template-columns:48px minmax(0,1fr)}.bpm190-artist-row span{width:48px;height:48px;border-radius:16px;background:rgba(14,165,255,.10);display:grid;place-items:center;overflow:hidden;color:#8bdfff}.bpm190-artist-row img{width:100%;height:100%;object-fit:cover}.bpm190-playlist-row{grid-template-columns:46px minmax(0,1fr)}.bpm190-playlist-row span{width:46px;height:46px;border-radius:16px;background:linear-gradient(135deg,rgba(14,165,255,.24),rgba(37,99,235,.16));display:grid;place-items:center;color:#9fe8ff;font-size:22px}.bpm190-event-row{grid-template-columns:54px minmax(0,1fr)}.bpm190-event-row b{height:54px;border-radius:16px;background:rgba(14,165,255,.12);border:1px solid rgba(14,165,255,.18);display:grid;place-items:center;color:#fff;font-size:22px;line-height:.9}.bpm190-event-row b small{display:block;color:#70d9ff;font-size:11px;letter-spacing:.08em;margin-top:-10px}.bpm190-video-panel{margin-top:1rem}.bpm190-video-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.85rem}.bpm190-video-card{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);border-radius:18px;overflow:hidden;cursor:pointer}.bpm190-video-thumb{position:relative;aspect-ratio:16/10;background:#071224;display:grid;place-items:center;color:#7f8da4}.bpm190-video-thumb video{width:100%;height:100%;object-fit:cover}.bpm190-video-thumb span{position:absolute;left:.65rem;bottom:.65rem;background:rgba(2,6,14,.74);border:1px solid rgba(255,255,255,.11);border-radius:999px;color:#fff;padding:.32rem .55rem;font-size:12px;backdrop-filter:blur(8px)}.bpm190-video-card strong{display:block;color:#fff;padding:.8rem .85rem .2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bpm190-video-card small{display:block;color:#8c9ab3;padding:0 .85rem .85rem;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bpm190-empty{grid-column:1/-1;border:1px dashed rgba(148,163,184,.26);border-radius:16px;padding:1rem;color:#8c9ab3;text-align:center;background:rgba(255,255,255,.025)} @media(max-width:1240px){.bpm190-hero,.bpm190-grid-main{grid-template-columns:1fr}.bpm190-track-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bpm190-grid-three{grid-template-columns:1fr}.bpm190-video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:680px){.bpm190-page{padding:1rem .75rem 7rem}.bpm190-hero{border-radius:18px;padding:1rem}.bpm190-hero h1{font-size:42px}.bpm190-track-grid,.bpm190-video-grid{grid-template-columns:1fr}.bpm190-panel{border-radius:18px;padding:.85rem}.bpm190-filters{border-radius:16px}.bpm190-panel-head{align-items:flex-start;flex-direction:column}} /* ============================================================ BPM 192 — Pages artiste premium ============================================================ */ .bpm192-artist-premium{position:relative;overflow:hidden;margin:1rem 0 1.25rem;border:1px solid rgba(14,165,255,.18);background:radial-gradient(circle at 0 0,rgba(14,165,255,.22),transparent 34%),radial-gradient(circle at 95% 18%,rgba(59,130,246,.15),transparent 34%),linear-gradient(135deg,rgba(6,13,28,.95),rgba(2,6,23,.92));border-radius:26px;padding:1rem;box-shadow:0 28px 85px rgba(0,0,0,.34);color:var(--text)} .bpm192-premium-top{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:1rem;align-items:center}.bpm192-kicker{display:inline-flex;align-items:center;gap:.45rem;color:#79dcff;text-transform:uppercase;letter-spacing:.1em;font-size:11px;font-weight:900}.bpm192-premium-info h2{font-family:var(--head,'Bebas Neue',sans-serif);font-size:clamp(42px,6vw,76px);line-height:.9;color:#fff;margin:.28rem 0;text-shadow:0 18px 55px rgba(0,0,0,.45)}.bpm192-premium-info p{color:#a9b7ce;line-height:1.55;max-width:900px;margin:0}.bpm192-premium-tags{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.85rem}.bpm192-premium-tags span{display:inline-flex;align-items:center;gap:.38rem;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);border-radius:999px;color:#d9efff;font-size:12px;font-weight:800;padding:.42rem .7rem}.bpm192-premium-tags .verified{color:#bff4ff;border-color:rgba(14,165,255,.32);background:rgba(14,165,255,.12)}.bpm192-premium-art{width:220px;height:220px;border-radius:28px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(135deg,rgba(14,165,255,.16),rgba(37,99,235,.08));display:grid;place-items:center;overflow:hidden;box-shadow:0 22px 60px rgba(0,0,0,.35)}.bpm192-premium-art img{width:100%;height:100%;object-fit:cover}.bpm192-premium-art i{font-size:70px;color:#8bdfff}.bpm192-metrics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.6rem;margin:1rem 0}.bpm192-metrics div{border:1px solid rgba(255,255,255,.08);background:rgba(2,6,23,.56);border-radius:18px;padding:.85rem;text-align:center}.bpm192-metrics strong{display:block;color:#fff;font-family:var(--head,'Bebas Neue',sans-serif);font-size:32px;line-height:1}.bpm192-metrics span{display:block;color:#8fa0ba;font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:900;margin-top:.2rem}.bpm192-tabs{display:flex;gap:.55rem;flex-wrap:wrap;margin-bottom:1rem}.bpm192-tabs a{display:inline-flex;align-items:center;gap:.42rem;text-decoration:none;color:#dff6ff;border:1px solid rgba(14,165,255,.22);background:rgba(14,165,255,.08);border-radius:999px;padding:.55rem .8rem;font-size:12px;font-weight:900;transition:.16s}.bpm192-tabs a:hover{background:rgba(14,165,255,.16);border-color:rgba(14,165,255,.48);transform:translateY(-1px)}.bpm192-feature-grid{display:grid;grid-template-columns:1.25fr .9fr .9fr;gap:.8rem}.bpm192-card{border:1px solid rgba(255,255,255,.08);background:rgba(3,10,21,.72);border-radius:20px;padding:.9rem;min-width:0}.bpm192-card-head{display:flex;justify-content:space-between;gap:.75rem;align-items:center;margin-bottom:.7rem}.bpm192-card-head span{display:flex;align-items:center;gap:.4rem;color:#fff;font-weight:900}.bpm192-card-head small{color:#7f91ad;font-size:11px}.bpm192-track{width:100%;border:1px solid rgba(255,255,255,.075);background:rgba(255,255,255,.035);border-radius:14px;padding:.65rem;margin:.45rem 0;display:grid;grid-template-columns:28px minmax(0,1fr) 34px;gap:.6rem;align-items:center;text-align:left;color:#fff;cursor:pointer}.bpm192-track:hover{background:rgba(14,165,255,.08);border-color:rgba(14,165,255,.28)}.bpm192-track b{color:#6ed8ff;text-align:center}.bpm192-track strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bpm192-track small{display:block;color:#8fa0ba;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.1rem}.bpm192-track>i{width:34px;height:34px;border-radius:999px;display:grid;place-items:center;background:linear-gradient(135deg,#0ea5ff,#2563eb);color:white}.bpm192-event-date{width:62px;height:62px;border-radius:18px;background:rgba(14,165,255,.14);border:1px solid rgba(14,165,255,.24);display:grid;place-items:center;margin-bottom:.75rem}.bpm192-event-date b{font-family:var(--head,'Bebas Neue',sans-serif);font-size:32px;color:#fff;line-height:.78}.bpm192-event-date span{color:#80ddff;font-size:11px;font-weight:900;letter-spacing:.08em}.bpm192-card h3{color:#fff;font-size:16px;margin:.15rem 0 .25rem}.bpm192-card p{color:#8fa0ba;font-size:13px;line-height:1.5;margin:0 0 .8rem}.bpm192-links{display:grid;gap:.45rem}.bpm192-links a{display:flex;align-items:center;gap:.55rem;color:#dff6ff;text-decoration:none;border:1px solid rgba(255,255,255,.075);background:rgba(255,255,255,.035);border-radius:14px;padding:.65rem .75rem;font-size:13px;font-weight:850}.bpm192-links a:hover{border-color:rgba(14,165,255,.34);background:rgba(14,165,255,.08)}.bpm192-empty{color:#8fa0ba;border:1px dashed rgba(148,163,184,.25);border-radius:14px;padding:.85rem;text-align:center;background:rgba(255,255,255,.025);font-size:13px}.bpm192-video-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem;margin-bottom:1rem}.bpm192-video-card{overflow:hidden;border:1px solid rgba(255,255,255,.08);background:rgba(5,12,25,.75);border-radius:18px}.bpm192-video-card video{width:100%;aspect-ratio:16/9;object-fit:cover;background:#030812;display:block}.bpm192-video-card div{padding:.75rem}.bpm192-video-card strong{display:block;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bpm192-video-card small{display:block;color:#8fa0ba;font-size:12px;margin-top:.25rem}.bpm192-artist-premium+#bpm192-epk{scroll-margin-top:90px}#bpm192-music,#bpm192-videos,#bpm192-events,#bpm192-wall,#bpm192-epk{scroll-margin-top:92px} @media(max-width:1150px){.bpm192-feature-grid{grid-template-columns:1fr}.bpm192-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.bpm192-premium-top{grid-template-columns:1fr}.bpm192-premium-art{width:160px;height:160px}} @media(max-width:680px){.bpm192-artist-premium{border-radius:18px;padding:.85rem}.bpm192-premium-info h2{font-size:42px}.bpm192-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem}.bpm192-metrics div{border-radius:14px;padding:.65rem}.bpm192-metrics strong{font-size:26px}.bpm192-tabs{overflow:auto;flex-wrap:nowrap;padding-bottom:.25rem}.bpm192-tabs a{white-space:nowrap}.bpm192-video-grid{grid-template-columns:1fr}.bpm192-premium-art{width:130px;height:130px;border-radius:22px}} /* ═══════════════════════════════════════════════════════════════ BPM 194 — Mobile / PWA pro - barre mobile fixe - installation PWA - safe area iPhone - player mobile au-dessus de la nav ═══════════════════════════════════════════════════════════════ */ :root{--bpm194-bottom-nav:0px;--bpm194-player-gap:0px}.bpm194-mobile-nav,.bpm194-install-card{display:none}.bpm194-install-card{position:fixed;left:14px;right:14px;bottom:calc(102px + env(safe-area-inset-bottom));z-index:180;background:linear-gradient(135deg,rgba(10,16,31,.98),rgba(5,9,18,.98));border:1px solid rgba(14,165,255,.24);box-shadow:0 22px 75px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04) inset;border-radius:20px;padding:10px;align-items:center;gap:10px;transform:translateY(18px);opacity:0;transition:.22s ease;backdrop-filter:blur(20px)}.bpm194-install-card.show{display:flex;transform:translateY(0);opacity:1}.bpm194-install-icon{width:44px;height:44px;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.06);display:grid;place-items:center;flex:0 0 auto}.bpm194-install-icon img{width:100%;height:100%;object-fit:cover}.bpm194-install-text{min-width:0;flex:1}.bpm194-install-text strong{display:block;color:#fff;font-size:14px}.bpm194-install-text span{display:block;color:var(--muted);font-size:12px;line-height:1.25}.bpm194-install-btn{border:0;border-radius:999px;background:linear-gradient(135deg,#0ea5ff,#2563eb);color:#fff;font-weight:900;padding:.62rem .78rem;cursor:pointer;box-shadow:0 10px 28px rgba(14,165,255,.26)}.bpm194-install-close{width:34px;height:34px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:#dbeafe;display:grid;place-items:center;cursor:pointer;flex:0 0 auto}.bpm194-app-page{width:min(100% - 2rem,1100px);margin:0 auto;padding:2rem 0 7rem}.bpm194-app-hero{border:1px solid var(--bdr);border-radius:28px;background:radial-gradient(circle at 12% 0,rgba(14,165,255,.28),transparent 34%),linear-gradient(135deg,rgba(15,23,42,.96),rgba(2,6,23,.94));padding:2rem;box-shadow:0 24px 70px rgba(0,0,0,.32);display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:1.5rem;align-items:center;overflow:hidden}.bpm194-app-hero h1{font-family:var(--head);font-size:clamp(46px,8vw,96px);line-height:.88;color:#fff;margin:.5rem 0}.bpm194-app-hero p{color:var(--muted);max-width:720px}.bpm194-app-phone{height:520px;border-radius:42px;border:1px solid rgba(255,255,255,.18);background:linear-gradient(180deg,#0b1222,#05070d);box-shadow:0 22px 80px rgba(0,0,0,.5),0 0 0 8px rgba(255,255,255,.04);padding:14px;position:relative}.bpm194-app-phone:before{content:"";position:absolute;top:10px;left:50%;transform:translateX(-50%);width:82px;height:22px;border-radius:0 0 18px 18px;background:#020617}.bpm194-app-screen{height:100%;border-radius:32px;background:radial-gradient(circle at top,rgba(14,165,255,.22),transparent 36%),#080d18;padding:46px 14px 16px;display:grid;gap:10px;align-content:start}.bpm194-app-chip{display:inline-flex;align-items:center;gap:.45rem;color:#93c5fd;text-transform:uppercase;letter-spacing:.08em;font-size:11px;font-weight:900}.bpm194-screen-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:12px;color:#fff}.bpm194-screen-card small{display:block;color:var(--muted);margin-top:4px}.bpm194-app-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1rem}.bpm194-app-card{border:1px solid var(--bdr);background:rgba(5,12,25,.78);border-radius:20px;padding:1rem}.bpm194-app-card i{font-size:28px;color:#60a5fa}.bpm194-app-card strong{display:block;color:#fff;margin:.45rem 0}.bpm194-app-card p{color:var(--muted);font-size:13px;line-height:1.45;margin:0}.bpm194-install-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem} @media(max-width:760px){:root{--bpm194-bottom-nav:74px}html{scroll-padding-top:74px}body{padding-bottom:calc(154px + env(safe-area-inset-bottom))!important;min-height:calc(var(--bpm-mobile-vh,1vh) * 100)}body:has(.bpm-global-player.is-collapsed){padding-bottom:calc(98px + env(safe-area-inset-bottom))!important}.site-nav{height:58px!important;padding-left:calc(8px + env(safe-area-inset-left));padding-right:calc(8px + env(safe-area-inset-right));backdrop-filter:blur(22px)}.bpm-sticky-shell{z-index:150}.site-mobile-menu{height:calc(var(--bpm-mobile-vh,1vh) * 100);padding-bottom:calc(92px + env(safe-area-inset-bottom));overscroll-behavior:contain}.site-menu-overlay.open{backdrop-filter:blur(4px)}.bpm194-mobile-nav{position:fixed;left:0;right:0;bottom:0;height:calc(68px + env(safe-area-inset-bottom));padding:7px max(8px,env(safe-area-inset-left)) calc(7px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-right));z-index:170;display:grid;grid-template-columns:repeat(5,1fr);gap:3px;background:linear-gradient(180deg,rgba(7,10,18,.84),rgba(5,8,15,.98));border-top:1px solid rgba(255,255,255,.10);box-shadow:0 -18px 45px rgba(0,0,0,.42);backdrop-filter:blur(22px)}.bpm194-mobile-nav a{color:#9ca3af;text-decoration:none;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;font-size:10px;font-weight:850;letter-spacing:-.01em;-webkit-tap-highlight-color:transparent}.bpm194-mobile-nav a i{font-size:22px;line-height:1}.bpm194-mobile-nav a.active{color:#e0f2fe;background:rgba(14,165,255,.13)}.bpm194-mobile-nav a:active{transform:scale(.97);background:rgba(255,255,255,.08)}.bpm194-mobile-nav .bpm194-mobile-main{transform:translateY(-14px);background:linear-gradient(135deg,#0ea5ff,#2563eb);color:#fff;border-radius:24px;box-shadow:0 14px 32px rgba(14,165,255,.34);min-height:58px}.bpm194-mobile-nav .bpm194-mobile-main i{font-size:28px}.bpm194-mobile-nav .bpm194-mobile-main span{font-size:10px}.bpm-global-player{bottom:calc(74px + env(safe-area-inset-bottom))!important;left:8px!important;right:8px!important;border-radius:20px!important;z-index:160!important}.page-index .bpm-global-player{bottom:calc(74px + env(safe-area-inset-bottom))!important;left:8px!important;right:8px!important}.bpm-global-player.is-collapsed{width:70px!important;right:auto!important}.bpm-gp-panel{bottom:calc(100% + 8px)!important;max-height:calc((var(--bpm-mobile-vh,1vh) * 100) - 165px)!important}.bpm-gp-results,.bpm-gp-queue{max-height:28vh!important}.site-footer{padding-bottom:calc(6rem + env(safe-area-inset-bottom))}.btn,.pill-btn,button,input,select,textarea{font-size:16px}.bpm185-composer,.bpm183-panel,.bpm188-panel,.bpm189-panel,.bpm190-panel,.bpm192-section,.bpm193-panel{border-radius:18px!important}.bpm185-composer-actions{gap:.55rem}.bpm185-media-btn,.bpm185-publish,.bpm185-title-input,.bpm185-vis{min-height:44px}.bpm194-install-card{bottom:calc(146px + env(safe-area-inset-bottom));left:10px;right:10px}.bpm194-app-page{width:min(100% - 1rem,1100px);padding-top:1rem}.bpm194-app-hero{display:block;padding:1.2rem;border-radius:22px}.bpm194-app-phone{height:420px;margin-top:1rem}.bpm194-app-grid{grid-template-columns:1fr}.bpm194-install-actions .btn{width:100%;justify-content:center}.bpm183-grid,.bpm184-layout,.bpm184-main,.bpm184-side,.bpm184-right,.bpm183-feed-grid{max-width:100%;overflow:hidden}}@media(max-width:420px){.bpm194-mobile-nav a span{font-size:9px}.bpm194-mobile-nav a i{font-size:20px}.bpm194-mobile-nav .bpm194-mobile-main{min-height:54px}.bpm194-install-text span{display:none}.bpm194-install-btn{padding:.55rem .68rem}.bpm-gp-meta span{max-width:150px}} /* ============================================================ BPM 197 — Radio / AutoDJ pro ============================================================ */ .bpm197-radio-page,.bpm197-admin-page{padding:24px;max-width:1480px;margin:0 auto;color:#eaf6ff;padding-bottom:110px} .bpm197-radio-hero,.bpm197-admin-hero{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,.8fr);gap:18px;margin-bottom:18px} .bpm197-radio-live-card,.bpm197-show-card,.bpm197-panel,.bpm197-admin-hero{position:relative;overflow:hidden;border:1px solid rgba(14,165,255,.18);background:linear-gradient(145deg,rgba(8,18,35,.96),rgba(5,10,20,.92));border-radius:24px;box-shadow:0 24px 70px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.05);padding:22px} .bpm197-live-glow{position:absolute;inset:-120px -80px auto auto;width:280px;height:280px;border-radius:999px;background:radial-gradient(circle,rgba(14,165,255,.42),transparent 65%);filter:blur(6px);pointer-events:none} .bpm197-kicker{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:rgba(14,165,255,.12);border:1px solid rgba(14,165,255,.25);color:#8bd8ff;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.09em} .bpm197-radio-live-card h1,.bpm197-admin-hero h1{font-size:clamp(32px,4vw,62px);line-height:.95;margin:18px 0 10px;letter-spacing:-.04em;color:#fff} .bpm197-radio-live-card p,.bpm197-admin-hero p,.bpm197-show-card p{color:#a9bdd5;line-height:1.6;max-width:760px} .bpm197-nowbox{display:flex;align-items:center;gap:16px;margin-top:20px;padding:16px;border-radius:22px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08)} .bpm197-disc{width:72px;height:72px;border-radius:22px;background:radial-gradient(circle at 35% 25%,#28d5ff,#0c61a8 48%,#061629);display:grid;place-items:center;position:relative;box-shadow:0 14px 35px rgba(14,165,255,.23)} .bpm197-disc i{font-size:34px;color:#fff}.bpm197-disc span{position:absolute;width:18px;height:18px;border-radius:50%;background:#06101f;border:4px solid rgba(255,255,255,.38)} .bpm197-nowbox small,.bpm197-show-card>span,.bpm197-next-track span,.bpm197-panel-head span{display:block;color:#6aa9cc;font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:900} .bpm197-nowbox strong{display:block;color:#fff;font-size:24px;line-height:1.1}.bpm197-nowbox em{display:block;color:#b7c7d9;font-style:normal;margin-top:4px} .bpm197-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.bpm197-actions .btn{border-radius:999px} .bpm197-show-card strong{display:block;color:#fff;font-size:25px;margin:10px 0}.bpm197-show-meta{display:flex;align-items:center;gap:8px;color:#c4d4e9;margin-top:10px;font-size:13px}.bpm197-show-meta i{color:#31c8ff} .bpm197-next-track{margin-top:18px;padding:14px;border-radius:18px;background:rgba(14,165,255,.09);border:1px solid rgba(14,165,255,.15)}.bpm197-next-track strong{font-size:16px;margin:5px 0 2px}.bpm197-next-track small{color:#93a9bf} .bpm197-stats-row,.bpm197-admin-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:18px}.bpm197-stats-row article,.bpm197-admin-stats article{padding:16px;border-radius:18px;background:rgba(255,255,255,.052);border:1px solid rgba(255,255,255,.08);text-align:center}.bpm197-stats-row strong,.bpm197-admin-stats b{display:block;color:#fff;font-size:25px}.bpm197-stats-row span,.bpm197-admin-stats span{color:#8ea4ba;font-size:12px} .bpm197-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(290px,.65fr);gap:18px;margin-bottom:18px}.bpm197-grid.three{grid-template-columns:repeat(3,1fr)} .bpm197-panel-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:15px}.bpm197-panel-head strong{display:block;color:#fff;font-size:20px}.bpm197-panel-head a{color:#7ad7ff;font-size:13px;text-decoration:none} .bpm197-request-form{display:grid;gap:12px}.bpm197-request-form label,.bpm197-admin-form label{display:grid;gap:6px;color:#dbeafe;font-size:13px}.bpm197-request-form input,.bpm197-request-form textarea,.bpm197-request-form select,.bpm197-admin-form input,.bpm197-admin-form textarea,.bpm197-admin-form select{width:100%;border:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.25);color:#fff;border-radius:14px;padding:12px;outline:none}.bpm197-request-form input:focus,.bpm197-request-form textarea:focus,.bpm197-request-form select:focus,.bpm197-admin-form input:focus,.bpm197-admin-form textarea:focus,.bpm197-admin-form select:focus{border-color:rgba(14,165,255,.45);box-shadow:0 0 0 4px rgba(14,165,255,.08)} .bpm197-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.bpm197-form-msg{font-size:13px}.bpm197-form-msg.ok{color:#86efac}.bpm197-form-msg.err{color:#fca5a5} .bpm197-approved-requests{margin-top:18px;display:grid;gap:9px}.bpm197-approved-requests h3{font-size:15px;color:#fff}.bpm197-approved-requests div{padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.06)}.bpm197-approved-requests b{display:block;color:#fff}.bpm197-approved-requests small{color:#8ea4ba} .bpm197-vote-list,.bpm197-schedule-list,.bpm197-history-list,.bpm197-quick-actions,.bpm197-admin-show-list,.bpm197-admin-requests,.bpm197-admin-schedule{display:grid;gap:10px}.bpm197-vote-row,.bpm197-history-list article,.bpm197-schedule-list article,.bpm197-admin-show-list article,.bpm197-admin-requests article,.bpm197-admin-schedule article,.bpm197-quick-actions a{display:flex;align-items:center;gap:12px;width:100%;padding:12px;border-radius:16px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);color:#eaf6ff;text-decoration:none}.bpm197-vote-row{cursor:pointer;text-align:left}.bpm197-vote-row:not(.static):hover,.bpm197-quick-actions a:hover{border-color:rgba(14,165,255,.35);background:rgba(14,165,255,.09)}.bpm197-vote-row i,.bpm197-history-list i,.bpm197-quick-actions i{color:#31c8ff;font-size:20px}.bpm197-vote-row span,.bpm197-history-list span,.bpm197-quick-actions span{flex:1}.bpm197-vote-row b,.bpm197-history-list b,.bpm197-schedule-list strong,.bpm197-admin-schedule strong{display:block;color:#fff}.bpm197-vote-row small,.bpm197-history-list small,.bpm197-schedule-list small,.bpm197-admin-schedule small{display:block;color:#8ea4ba}.bpm197-vote-row em,.bpm197-history-list em{color:#7ad7ff;font-style:normal;font-weight:900}.bpm197-vote-row.is-voted{border-color:rgba(34,197,94,.45);background:rgba(34,197,94,.08)} .bpm197-schedule-list article,.bpm197-admin-schedule article{display:block}.bpm197-schedule-list b,.bpm197-admin-schedule b{display:inline-flex;margin-bottom:7px;color:#7ad7ff;font-size:12px}.bpm197-empty{display:grid;place-items:center;gap:12px;text-align:center;color:#91a6bf;padding:24px;border:1px dashed rgba(255,255,255,.13);border-radius:18px}.bpm197-empty.small{padding:16px;font-size:13px}.bpm197-empty i{font-size:28px;color:#31c8ff}.bpm197-admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}.bpm197-admin-grid.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.bpm197-admin-form{display:grid;gap:12px}.bpm197-admin-form.inline{grid-template-columns:1fr auto;align-items:end}.bpm197-days{display:flex;flex-wrap:wrap;gap:8px}.bpm197-days label{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08)}.bpm197-days input{width:auto}.bpm197-muted{display:block;color:#8ea4ba;margin-top:12px}.bpm197-admin-show-list article,.bpm197-admin-requests article{justify-content:space-between;align-items:flex-start}.bpm197-admin-show-list form,.bpm197-admin-requests form{display:flex;gap:6px;flex-wrap:wrap}.bpm197-admin-show-list em{font-style:normal;color:#001018;background:#38e7ff;border-radius:999px;padding:2px 7px;font-size:10px;margin-left:5px}.bpm197-admin-requests p{color:#b5c6da;margin:.4rem 0;white-space:pre-wrap}.bpm197-admin-requests small{color:#8ea4ba} @media(max-width:1100px){.bpm197-radio-hero,.bpm197-admin-hero,.bpm197-grid,.bpm197-grid.three,.bpm197-admin-grid,.bpm197-admin-grid.two{grid-template-columns:1fr}.bpm197-stats-row,.bpm197-admin-stats{grid-template-columns:repeat(2,1fr)}} @media(max-width:680px){.bpm197-radio-page,.bpm197-admin-page{padding:14px;padding-bottom:130px}.bpm197-radio-live-card,.bpm197-show-card,.bpm197-panel,.bpm197-admin-hero{border-radius:18px;padding:16px}.bpm197-nowbox{align-items:flex-start}.bpm197-disc{width:56px;height:56px;border-radius:18px}.bpm197-nowbox strong{font-size:19px}.bpm197-two,.bpm197-admin-form.inline{grid-template-columns:1fr}.bpm197-stats-row,.bpm197-admin-stats{grid-template-columns:1fr 1fr}.bpm197-admin-show-list article,.bpm197-admin-requests article{display:grid}.bpm197-actions .btn{width:100%;justify-content:center}} /* ========================================================== BPM 198 — Préparation lancement public / SEO / guides ========================================================== */ .bpm198-page{width:min(1180px,calc(100% - 32px));margin:32px auto 80px;color:var(--text,#eaf4ff)} .bpm198-hero{position:relative;overflow:hidden;border:1px solid rgba(14,165,255,.22);border-radius:32px;padding:46px;background:radial-gradient(circle at 15% 20%,rgba(14,165,255,.26),transparent 34%),linear-gradient(135deg,rgba(8,20,36,.96),rgba(4,9,18,.98));box-shadow:0 24px 90px rgba(0,0,0,.38)} .bpm198-hero:after{content:"";position:absolute;right:-90px;top:-110px;width:320px;height:320px;border-radius:50%;background:rgba(0,204,255,.09);filter:blur(6px)} .bpm198-hero.compact{padding:34px 40px} .bpm198-hero h1{font-size:clamp(2.2rem,5vw,4.9rem);line-height:.94;margin:14px 0 16px;letter-spacing:.02em;text-transform:uppercase;font-family:'Bebas Neue',system-ui,sans-serif} .bpm198-hero.compact h1{font-size:clamp(2rem,4vw,3.6rem)} .bpm198-hero p{max-width:760px;color:rgba(234,244,255,.78);font-size:1.05rem;line-height:1.65;margin:0} .bpm198-pill{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(14,165,255,.35);background:rgba(14,165,255,.1);color:#9fe6ff;border-radius:999px;padding:8px 12px;font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em} .bpm198-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px} .bpm198-grid{display:grid;gap:18px;margin-top:24px}.bpm198-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.bpm198-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))} .bpm198-card{border:1px solid rgba(255,255,255,.09);border-radius:24px;background:linear-gradient(180deg,rgba(12,25,42,.92),rgba(7,12,22,.96));padding:24px;box-shadow:0 16px 50px rgba(0,0,0,.22);text-decoration:none;color:inherit} .bpm198-card>i{font-size:2rem;color:#37c9ff;margin-bottom:12px;display:inline-block}.bpm198-card h2{margin:.2rem 0 .65rem;font-size:1.25rem}.bpm198-card p{color:rgba(234,244,255,.72);line-height:1.6;margin:0}.bpm198-link-card{transition:transform .18s ease,border-color .18s ease}.bpm198-link-card:hover{transform:translateY(-3px);border-color:rgba(14,165,255,.38)} .bpm198-split{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:center;margin-top:24px;border:1px solid rgba(255,255,255,.08);border-radius:28px;background:linear-gradient(135deg,rgba(14,165,255,.08),rgba(255,255,255,.025));padding:28px}.bpm198-split h2{font-size:2rem;margin:12px 0}.bpm198-split p{color:rgba(234,244,255,.75);line-height:1.65}.bpm198-checks{display:grid;gap:10px}.bpm198-checks span{display:flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:12px 14px;background:rgba(0,0,0,.18)}.bpm198-checks i{color:#5eead4} .bpm198-timeline{display:grid;gap:14px;margin-top:24px}.bpm198-timeline article{display:grid;grid-template-columns:58px 1fr;gap:18px;align-items:start;border:1px solid rgba(255,255,255,.08);border-radius:22px;background:rgba(8,16,28,.86);padding:20px}.bpm198-timeline b{display:grid;place-items:center;width:44px;height:44px;border-radius:16px;background:linear-gradient(135deg,#0ea5ff,#22d3ee);color:#00111d;font-size:1.2rem}.bpm198-timeline h2{margin:0 0 6px}.bpm198-timeline p{margin:0;color:rgba(234,244,255,.72);line-height:1.55}.bpm198-callout{margin-top:24px;border-color:rgba(94,234,212,.24)} .bpm198-faq{display:grid;gap:12px;margin-top:24px}.bpm198-faq-item{border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(8,16,28,.9);padding:0 18px}.bpm198-faq-item summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:800;padding:18px 0}.bpm198-faq-item p{color:rgba(234,244,255,.74);line-height:1.6;margin:0 0 18px}.bpm198-faq-item[open] summary i{transform:rotate(180deg)} .bpm198-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:22px 0}.bpm198-stats-row div{border:1px solid rgba(14,165,255,.18);border-radius:20px;background:rgba(14,165,255,.07);padding:20px;text-align:center}.bpm198-stats-row strong{display:block;font-size:2.1rem;color:#9fe6ff}.bpm198-stats-row span{color:rgba(234,244,255,.72)} .bpm198-admin-launch{width:min(1320px,calc(100% - 32px));margin:28px auto 90px}.bpm198-admin-hero{display:flex;justify-content:space-between;gap:20px;border:1px solid rgba(14,165,255,.2);border-radius:28px;background:linear-gradient(135deg,rgba(14,165,255,.12),rgba(8,16,28,.96));padding:28px;margin-bottom:18px}.bpm198-admin-hero span{color:#9fe6ff;text-transform:uppercase;font-size:.82rem;font-weight:800;letter-spacing:.08em}.bpm198-admin-hero h1{margin:8px 0;font-size:2.3rem}.bpm198-admin-hero p{margin:0;color:rgba(234,244,255,.72)}.bpm198-progress{min-width:220px;border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:18px;position:relative;overflow:hidden;background:rgba(0,0,0,.18)}.bpm198-progress strong{font-size:2.5rem;display:block}.bpm198-progress span{font-size:.9rem;color:rgba(234,244,255,.72)}.bpm198-progress i{position:absolute;left:0;bottom:0;height:5px;background:linear-gradient(90deg,#0ea5ff,#22d3ee);display:block}.bpm198-admin-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin:16px 0}.bpm198-admin-stats div{border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(8,16,28,.86);padding:16px}.bpm198-admin-stats strong{display:block;font-size:1.6rem;color:#9fe6ff}.bpm198-admin-stats span{font-size:.82rem;color:rgba(234,244,255,.65)}.bpm198-admin-grid{display:grid;grid-template-columns:1.4fr .9fr;gap:18px}.bpm198-admin-card h2{display:flex;align-items:center;gap:8px;margin-top:0}.bpm198-checklist-admin{display:grid;gap:10px}.bpm198-check-row{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:start;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(255,255,255,.025);padding:12px}.bpm198-check-row button{border:0;background:transparent;color:#9fb3c8;font-size:1.4rem;cursor:pointer}.bpm198-check-row.is-done{opacity:.72}.bpm198-check-row.is-done button{color:#5eead4}.bpm198-check-row strong{display:block}.bpm198-check-row small{color:rgba(234,244,255,.55)}.bpm198-check-row p{margin:5px 0 0;color:rgba(234,244,255,.65);font-size:.92rem}.bpm198-admin-form{display:grid;gap:12px}.bpm198-admin-form label{display:grid;gap:6px;color:rgba(234,244,255,.78);font-size:.9rem}.bpm198-admin-form input,.bpm198-admin-form textarea,.bpm198-admin-form select{width:100%;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(0,0,0,.22);color:var(--text,#fff);padding:12px}.bpm198-admin-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.bpm198-admin-links a{border:1px solid rgba(14,165,255,.25);border-radius:999px;color:#9fe6ff;padding:8px 12px;text-decoration:none} @media(max-width:1050px){.bpm198-grid-3,.bpm198-grid-2,.bpm198-split,.bpm198-admin-grid{grid-template-columns:1fr}.bpm198-admin-stats{grid-template-columns:repeat(3,1fr)}.bpm198-admin-hero{display:grid}.bpm198-progress{min-width:0}.bpm198-hero{padding:32px 24px}} @media(max-width:700px){.bpm198-page,.bpm198-admin-launch{width:min(100% - 20px,1180px);margin-top:16px}.bpm198-hero h1{font-size:2.55rem}.bpm198-stats-row,.bpm198-admin-stats{grid-template-columns:1fr 1fr}.bpm198-timeline article{grid-template-columns:1fr}.bpm198-card{padding:18px}.bpm198-split{padding:20px}.bpm198-actions .btn{width:100%;justify-content:center}} /* ============================================================ BPM 200 — Nettoyage final / stabilité admin ============================================================ */ .bpm199-admin-wrap{max-width:1380px;margin:0 auto;padding:28px 18px 120px}.bpm199-hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:22px;border:1px solid rgba(77,159,255,.18);border-radius:28px;padding:26px;background:radial-gradient(circle at 10% 0%,rgba(42,127,255,.28),transparent 38%),linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.025));box-shadow:0 24px 70px rgba(0,0,0,.28)}.bpm199-hero h1{font-family:var(--head);font-size:50px;letter-spacing:1.5px;line-height:.95;color:#fff;margin:8px 0}.bpm199-hero p{max-width:780px;color:#9aa4bf;font-size:14px}.bpm199-kicker{display:inline-flex;align-items:center;gap:8px;color:#9ed0ff;background:rgba(42,127,255,.16);border:1px solid rgba(77,159,255,.25);border-radius:999px;padding:7px 11px;font-size:12px}.bpm199-score{width:145px;height:145px;border-radius:36px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.24);flex-shrink:0}.bpm199-score strong{font-family:var(--head);font-size:56px;line-height:1;color:#fff}.bpm199-score span{font-size:12px;color:#9aa4bf}.bpm199-score.ok{box-shadow:inset 0 0 0 1px rgba(34,197,94,.18),0 0 50px rgba(34,197,94,.08)}.bpm199-score.warn{box-shadow:inset 0 0 0 1px rgba(249,115,22,.18),0 0 50px rgba(249,115,22,.08)}.bpm199-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 0}.bpm199-actions form{display:inline-flex}.bpm199-grid-top{display:grid;grid-template-columns:1.4fr .8fr;gap:16px;margin-bottom:16px}.bpm199-card,.bpm199-panel{background:rgba(13,13,20,.82);border:1px solid rgba(255,255,255,.09);border-radius:22px;padding:18px;box-shadow:0 16px 45px rgba(0,0,0,.22)}.bpm199-card h2,.bpm199-panel h2{display:flex;align-items:center;gap:9px;color:#fff;font-size:18px;margin:0 0 13px}.bpm199-card h2 i,.bpm199-panel h2 i{color:#70b8ff}.bpm199-mini-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.bpm199-mini-stats span{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);border-radius:18px;padding:14px 10px;color:#8d96b2;font-size:12px}.bpm199-mini-stats b{display:block;color:#fff;font-size:24px;line-height:1.05;margin-bottom:4px}.bpm199-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.bpm199-checks{display:grid;gap:9px}.bpm199-check{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:center;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.028);border-radius:15px;padding:10px}.bpm199-check>i{width:34px;height:34px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.05)}.bpm199-check.good>i{color:#5be088;background:rgba(34,197,94,.12)}.bpm199-check.bad>i{color:#ff9a75;background:rgba(249,115,22,.12)}.bpm199-check strong{display:block;color:#fff;font-size:13px}.bpm199-check span{display:block;color:#8c95ad;font-size:12px;line-height:1.35;margin-top:2px}.bpm199-broken{margin-top:16px}.bpm199-broken p{color:#9aa4bf;margin-bottom:12px}.bpm199-link-list{display:flex;flex-wrap:wrap;gap:8px}.bpm199-link-list code{display:inline-flex;border:1px solid rgba(226,75,74,.22);background:rgba(226,75,74,.08);color:#ffc4c3;border-radius:10px;padding:6px 8px;font-size:12px}.alert.ok,.alert.err{display:flex;align-items:center;gap:8px;border-radius:15px;padding:12px 14px;margin:14px 0}.alert.ok{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.25);color:#bdf8cd}.alert.err{background:rgba(226,75,74,.12);border:1px solid rgba(226,75,74,.25);color:#ffd1d1}@media(max-width:980px){.bpm199-hero{align-items:flex-start;flex-direction:column}.bpm199-score{width:100%;height:auto;border-radius:22px;padding:18px}.bpm199-grid-top,.bpm199-panels{grid-template-columns:1fr}.bpm199-mini-stats{grid-template-columns:repeat(2,1fr)}.bpm199-hero h1{font-size:38px}}@media(max-width:560px){.bpm199-admin-wrap{padding:18px 12px 120px}.bpm199-hero{padding:18px;border-radius:22px}.bpm199-mini-stats{grid-template-columns:1fr}.bpm199-actions .btn{width:100%;justify-content:center}.bpm199-actions form{width:100%}} /* ============================================================ BPM 200 — Configuration centrale / installateur ============================================================ */ .bpm200-config{max-width:1400px;margin:0 auto;padding:24px 16px 90px}.bpm200-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;background:linear-gradient(135deg,rgba(14,165,255,.18),rgba(15,23,42,.95) 55%,rgba(34,211,238,.12));border:1px solid rgba(59,130,246,.28);border-radius:26px;padding:24px;box-shadow:0 20px 70px rgba(0,0,0,.35);margin-bottom:18px}.bpm200-kicker{display:inline-flex;gap:.45rem;align-items:center;color:#7dd3fc;font-size:12px;font-weight:1000;text-transform:uppercase;letter-spacing:.14em}.bpm200-hero h1{color:#fff;margin:.35rem 0;font-size:clamp(28px,4vw,44px);letter-spacing:-.04em}.bpm200-hero p{color:var(--muted);max-width:800px;margin:0;line-height:1.55}.bpm200-hero-actions{display:flex;gap:.65rem;flex-wrap:wrap}.bpm200-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.bpm200-card{background:linear-gradient(180deg,rgba(15,23,42,.94),rgba(2,6,23,.82));border:1px solid rgba(148,163,184,.16);border-radius:22px;padding:18px;box-shadow:0 16px 50px rgba(0,0,0,.25)}.bpm200-card h2{color:#fff;margin:0 0 14px;font-size:18px}.bpm200-fields{display:grid;gap:12px}.bpm200-field span{display:block;color:#93a4bd;font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:900;margin-bottom:6px}.bpm200-field input:not([type=checkbox]),.bpm200-field select,.bpm200-field textarea{width:100%;box-sizing:border-box;background:rgba(2,6,23,.74);border:1px solid rgba(148,163,184,.18);color:#fff;border-radius:14px;padding:11px 12px;outline:none}.bpm200-field textarea{resize:vertical}.bpm200-field input:focus,.bpm200-field select:focus,.bpm200-field textarea:focus{border-color:rgba(14,165,255,.7);box-shadow:0 0 0 3px rgba(14,165,255,.13)}.bpm200-field-toggle{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:10px 12px;background:rgba(2,6,23,.35);border:1px solid rgba(148,163,184,.12);border-radius:14px}.bpm200-field-toggle span{margin:0}.bpm200-field-toggle input{width:20px;height:20px;accent-color:#0ea5ff}.bpm200-field-toggle em{font-style:normal;color:var(--muted);font-size:12px}.bpm200-savebar{position:sticky;bottom:14px;z-index:10;margin-top:18px;background:rgba(2,6,23,.9);backdrop-filter:blur(14px);border:1px solid rgba(14,165,255,.24);border-radius:22px;padding:14px;display:flex;align-items:center;justify-content:space-between;gap:1rem;box-shadow:0 18px 55px rgba(0,0,0,.45);color:var(--muted)}.bpm200-savebar strong{color:#fff}@media(max-width:960px){.bpm200-grid{grid-template-columns:1fr}.bpm200-savebar{display:block}.bpm200-savebar .btn{width:100%;justify-content:center;margin-top:12px}.bpm200-config{padding-bottom:120px}} /* ============================================================ BPM 201 — Emails automatiques / admin email center Ajout additif sans toucher aux styles existants. ============================================================ */ .bpm201-email-admin{max-width:1380px;margin:0 auto;padding:1.5rem}.bpm201-email-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem;padding:1.35rem;border:1px solid rgba(14,165,255,.18);border-radius:22px;background:linear-gradient(135deg,rgba(14,165,255,.14),rgba(9,14,25,.92));box-shadow:0 24px 80px rgba(0,0,0,.28)}.bpm201-email-hero h1{margin:.25rem 0;font-family:'Bebas Neue',sans-serif;letter-spacing:2px;font-size:44px;color:#fff}.bpm201-email-hero p{margin:0;color:var(--muted);max-width:760px;line-height:1.6}.bpm201-kicker{display:inline-flex;gap:.4rem;align-items:center;color:#9edcff;font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:12px}.bpm201-email-actions{display:flex;gap:.55rem;flex-wrap:wrap;justify-content:flex-end}.bpm201-email-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin:1rem 0}.bpm201-email-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.bpm201-email-card,.bpm201-email-panel{border:1px solid rgba(148,163,184,.16);border-radius:18px;background:rgba(7,13,24,.84);box-shadow:0 20px 60px rgba(0,0,0,.22)}.bpm201-email-card{padding:1rem}.bpm201-email-card span{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em}.bpm201-email-card strong{display:block;color:#fff;font-size:28px;margin-top:.25rem}.bpm201-email-panel{padding:1rem}.bpm201-email-panel h2{margin:0 0 .85rem;color:#fff;font-size:18px;display:flex;gap:.45rem;align-items:center}.bpm201-email-form{display:grid;gap:.65rem}.bpm201-email-form label{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.65rem;border:1px solid rgba(148,163,184,.13);border-radius:12px;background:rgba(15,23,42,.55);color:#d7e5f5}.bpm201-email-form select,.bpm201-email-form input[type=email],.bpm201-email-test input{width:100%;border:1px solid rgba(148,163,184,.18);background:#07111f;color:#fff;border-radius:11px;padding:.75rem}.bpm201-email-status{display:grid;gap:.55rem;margin-bottom:.8rem}.bpm201-email-status div{padding:.7rem;border:1px solid rgba(148,163,184,.13);border-radius:12px;background:rgba(15,23,42,.55)}.bpm201-email-status span{display:block;color:var(--muted);font-size:12px}.bpm201-email-status strong{color:#fff;font-size:13px;word-break:break-all}.bpm201-email-test{display:flex;gap:.55rem;align-items:center}.bpm201-muted{color:var(--muted);font-size:12px;line-height:1.55}.bpm201-template-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.65rem}.bpm201-template-pill{border:1px solid rgba(14,165,255,.18);border-radius:14px;background:rgba(14,165,255,.07);padding:.75rem}.bpm201-template-pill strong{display:block;color:#fff}.bpm201-template-pill span{display:block;color:#b7c6d9;font-size:12px;margin:.18rem 0}.bpm201-template-pill em{font-style:normal;color:#7dd3fc;font-size:11px}.bpm201-table-wrap{overflow:auto;border-radius:14px;border:1px solid rgba(148,163,184,.12)}.bpm201-email-table{width:100%;border-collapse:collapse;min-width:620px}.bpm201-email-table th,.bpm201-email-table td{padding:.7rem;border-bottom:1px solid rgba(148,163,184,.1);text-align:left;font-size:12px;color:#dce8f7}.bpm201-email-table th{color:#9fb2c9;background:rgba(15,23,42,.75);text-transform:uppercase;letter-spacing:.08em}.bpm201-status{display:inline-flex;align-items:center;padding:.25rem .5rem;border-radius:999px;font-size:11px;font-weight:800}.bpm201-status.ok{background:rgba(34,197,94,.12);color:#86efac}.bpm201-status.bad{background:rgba(239,68,68,.12);color:#fca5a5}.bpm201-status.wait{background:rgba(245,158,11,.12);color:#fcd34d}.bpm201-empty{text-align:center;color:var(--muted)!important;padding:1.5rem!important}@media(max-width:980px){.bpm201-email-hero{flex-direction:column}.bpm201-email-grid,.bpm201-email-grid.two{grid-template-columns:1fr}.bpm201-email-test{flex-direction:column;align-items:stretch}.bpm201-email-admin{padding:1rem}} /* ============================================================ BPM 202 — Sécurité avancée admin ============================================================ */ .bpm-security-page{padding-bottom:120px} .bpm-security-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:24px 0;padding:28px;border:1px solid rgba(14,165,255,.22);border-radius:28px;background:radial-gradient(circle at top left,rgba(14,165,255,.22),transparent 42%),linear-gradient(145deg,rgba(15,23,42,.96),rgba(2,6,23,.96));box-shadow:0 24px 70px rgba(0,0,0,.32)} .bpm-security-hero h1{margin:.15rem 0 .35rem;font-size:clamp(2rem,5vw,4rem);line-height:.95;letter-spacing:.02em} .bpm-security-hero p{max-width:760px;color:rgba(226,232,240,.78);margin:0} .bpm-security-hero .eyebrow{display:inline-flex;align-items:center;gap:8px;color:#7dd3fc;text-transform:uppercase;letter-spacing:.12em;font-weight:800;font-size:.8rem;margin:0} .bpm-security-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px} .bpm-security-stats article{padding:20px;border:1px solid rgba(148,163,184,.18);border-radius:22px;background:linear-gradient(145deg,rgba(15,23,42,.92),rgba(15,23,42,.62));box-shadow:0 16px 38px rgba(0,0,0,.24)} .bpm-security-stats strong{display:block;font-size:2rem;color:#fff} .bpm-security-stats span{color:rgba(203,213,225,.72);font-size:.9rem} .bpm-security-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px;align-items:start} .bpm-security-main,.bpm-security-side{display:flex;flex-direction:column;gap:18px} .bpm-sec-card{border:1px solid rgba(148,163,184,.18);border-radius:24px;background:rgba(15,23,42,.78);box-shadow:0 18px 48px rgba(0,0,0,.22);padding:20px;overflow:hidden} .bpm-sec-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px} .bpm-sec-card-head h2{display:flex;align-items:center;gap:10px;margin:0;font-size:1.1rem;color:#fff} .bpm-sec-card-head span{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:rgba(14,165,255,.12);color:#93c5fd;font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em} .bpm-sec-form{display:flex;flex-direction:column;gap:12px} .bpm-sec-form label{color:rgba(226,232,240,.82);font-size:.9rem;font-weight:700} .bpm-sec-form small{display:block;color:rgba(148,163,184,.78);font-weight:500;margin-top:2px} .sec-toggle{display:flex!important;align-items:center;gap:10px;padding:10px 12px;border:1px solid rgba(148,163,184,.14);border-radius:14px;background:rgba(2,6,23,.32)} .sec-toggle input{width:18px;height:18px;accent-color:#0ea5ff} .bpm-sec-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .bpm-sec-table{width:100%;border-collapse:collapse;font-size:.86rem} .bpm-sec-table th{color:#93c5fd;text-align:left;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid rgba(148,163,184,.16);padding:10px 8px} .bpm-sec-table td{border-bottom:1px solid rgba(148,163,184,.1);padding:10px 8px;color:rgba(226,232,240,.82);vertical-align:top} .bpm-sec-table small{display:block;color:rgba(148,163,184,.75);font-size:.74rem;margin-top:2px} .bpm-sec-table code{color:#bae6fd;background:rgba(14,165,255,.09);padding:2px 6px;border-radius:7px} .sec-pill{display:inline-flex;align-items:center;justify-content:center;padding:4px 8px;border-radius:999px;background:rgba(148,163,184,.16);color:#cbd5e1;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em} .sec-pill.ok{background:rgba(34,197,94,.14);color:#86efac}.sec-pill.bad{background:rgba(239,68,68,.16);color:#fecaca} .bpm-ban-list{display:flex;flex-direction:column;gap:10px}.bpm-ban-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px solid rgba(148,163,184,.14);border-radius:16px;background:rgba(2,6,23,.28)} .bpm-ban-row strong{display:block;color:#fff}.bpm-ban-row small{display:block;color:rgba(203,213,225,.7);font-size:.78rem}.bpm-ban-row.off{opacity:.56} .permission-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}.perm-card{padding:14px;border-radius:16px;border:1px solid rgba(148,163,184,.14);background:rgba(2,6,23,.3)} .perm-card.on{border-color:rgba(34,197,94,.25);background:linear-gradient(145deg,rgba(34,197,94,.12),rgba(2,6,23,.26))}.perm-card.off{opacity:.65} .perm-card strong{display:block;color:#fff;text-transform:uppercase;font-size:.76rem;letter-spacing:.08em}.perm-card span{display:block;color:#93c5fd;font-weight:800;margin:4px 0}.perm-card small{color:rgba(203,213,225,.65)} @media(max-width:1100px){.bpm-security-layout{grid-template-columns:1fr}.bpm-security-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.bpm-security-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:720px){.bpm-security-hero{flex-direction:column;align-items:flex-start;padding:22px;border-radius:22px}.bpm-security-grid,.bpm-security-side,.bpm-sec-two{grid-template-columns:1fr}.bpm-sec-card{padding:16px;border-radius:20px}.bpm-sec-table{min-width:780px}} /* ============================================================ BPM 203 — Optimisation médias / index / worker Ajout isolé : ne modifie pas les composants radio ou sociaux. ============================================================ */ .bpm203-media-page{padding-bottom:120px} .bpm203-media-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin:24px 0;padding:30px;border:1px solid rgba(14,165,255,.22);border-radius:28px;background:radial-gradient(circle at 10% 0,rgba(14,165,255,.23),transparent 38%),linear-gradient(145deg,rgba(15,23,42,.97),rgba(2,6,23,.97));box-shadow:0 24px 70px rgba(0,0,0,.34)} .bpm203-media-hero h1{margin:.15rem 0 .45rem;font-size:clamp(2rem,5vw,4rem);line-height:.96}.bpm203-media-hero p{margin:0;max-width:820px;color:rgba(226,232,240,.78);line-height:1.6}.bpm203-media-hero .eyebrow{display:flex;align-items:center;gap:8px;color:#7dd3fc;text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;font-weight:800}.bpm203-hero-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end} .bpm203-env-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:14px}.bpm203-env-grid article{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid rgba(148,163,184,.16);border-radius:18px;background:rgba(15,23,42,.76)}.bpm203-env-grid article i{display:grid;place-items:center;width:40px;height:40px;border-radius:14px;background:rgba(148,163,184,.12);font-size:1.25rem}.bpm203-env-grid article.ok{border-color:rgba(34,197,94,.24)}.bpm203-env-grid article.ok i{background:rgba(34,197,94,.13);color:#86efac}.bpm203-env-grid article.warn{border-color:rgba(245,158,11,.22)}.bpm203-env-grid article.warn i{background:rgba(245,158,11,.13);color:#fcd34d}.bpm203-env-grid strong,.bpm203-env-grid span{display:block}.bpm203-env-grid strong{color:#fff}.bpm203-env-grid span{color:rgba(203,213,225,.68);font-size:.76rem;line-height:1.35;word-break:break-word} .bpm203-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:18px}.bpm203-stats article{padding:18px;border:1px solid rgba(148,163,184,.16);border-radius:20px;background:linear-gradient(145deg,rgba(15,23,42,.9),rgba(8,15,27,.75))}.bpm203-stats article.danger{border-color:rgba(239,68,68,.3)}.bpm203-stats strong{display:block;color:#fff;font-size:1.7rem}.bpm203-stats span{color:rgba(203,213,225,.7);font-size:.82rem} .bpm203-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px;align-items:start}.bpm203-main,.bpm203-side{display:flex;flex-direction:column;gap:18px}.bpm203-card{padding:20px;border:1px solid rgba(148,163,184,.17);border-radius:24px;background:rgba(15,23,42,.79);box-shadow:0 18px 50px rgba(0,0,0,.24);overflow:hidden}.bpm203-card p{color:rgba(203,213,225,.72);line-height:1.55}.bpm203-card code{color:#bae6fd;background:rgba(14,165,255,.09);padding:3px 7px;border-radius:8px}.bpm203-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}.bpm203-card-head h2{display:flex;align-items:center;gap:9px;margin:0;color:#fff;font-size:1.08rem}.bpm203-card-head>span{padding:5px 9px;border-radius:999px;background:rgba(14,165,255,.11);color:#93c5fd;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em} .bpm203-inline-form{display:grid;grid-template-columns:minmax(160px,260px) auto;gap:10px;align-items:end}.bpm203-inline-form.compact{grid-template-columns:110px auto}.bpm203-inline-form label,.bpm203-settings label{display:grid;gap:6px;color:rgba(226,232,240,.82);font-size:.82rem;font-weight:700}.bpm203-actions-row{display:flex;align-items:end;justify-content:space-between;gap:12px;flex-wrap:wrap}.bpm203-cron{display:grid;gap:7px;margin-top:16px;padding:14px;border:1px solid rgba(14,165,255,.18);border-radius:16px;background:rgba(14,165,255,.06)}.bpm203-cron strong{color:#fff}.bpm203-cron code{word-break:break-all}.bpm203-cron small{color:rgba(203,213,225,.66)} .bpm203-settings{display:grid;gap:11px}.bpm203-toggle{display:flex!important;align-items:center;gap:9px;padding:10px 12px;border:1px solid rgba(148,163,184,.13);border-radius:14px;background:rgba(2,6,23,.28)}.bpm203-toggle input{width:18px;height:18px;accent-color:#0ea5ff}.bpm203-table{width:100%;border-collapse:collapse;min-width:900px}.bpm203-table th,.bpm203-table td{padding:10px 8px;border-bottom:1px solid rgba(148,163,184,.1);text-align:left;vertical-align:top;font-size:.8rem;color:rgba(226,232,240,.82)}.bpm203-table th{color:#93c5fd;text-transform:uppercase;letter-spacing:.07em;font-size:.68rem}.bpm203-table strong,.bpm203-table small{display:block}.bpm203-table small{margin-top:3px;color:rgba(148,163,184,.7);max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bpm203-type,.bpm203-pill{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;background:rgba(148,163,184,.14);color:#cbd5e1}.bpm203-type.image{background:rgba(34,197,94,.12);color:#86efac}.bpm203-type.video{background:rgba(168,85,247,.13);color:#d8b4fe}.bpm203-type.audio{background:rgba(14,165,255,.13);color:#7dd3fc}.bpm203-pill.done,.bpm203-pill.ready,.bpm203-pill.ok{background:rgba(34,197,94,.13);color:#86efac}.bpm203-pill.pending,.bpm203-pill.processing{background:rgba(245,158,11,.13);color:#fcd34d}.bpm203-pill.failed{background:rgba(239,68,68,.15);color:#fecaca}.bpm203-job-list{display:grid;gap:9px}.bpm203-job-list>div{display:grid;grid-template-columns:auto 1fr;gap:7px 9px;align-items:center;padding:10px;border:1px solid rgba(148,163,184,.12);border-radius:14px;background:rgba(2,6,23,.26)}.bpm203-job-list strong{color:#fff;font-size:.8rem}.bpm203-job-list small{grid-column:1/-1;color:rgba(148,163,184,.72);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media(max-width:1120px){.bpm203-layout{grid-template-columns:1fr}.bpm203-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.bpm203-env-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bpm203-stats{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:720px){.bpm203-media-hero{flex-direction:column;padding:21px;border-radius:22px}.bpm203-hero-actions,.bpm203-hero-actions .btn{width:100%}.bpm203-hero-actions .btn{justify-content:center}.bpm203-env-grid,.bpm203-stats,.bpm203-side{grid-template-columns:1fr}.bpm203-inline-form,.bpm203-inline-form.compact{grid-template-columns:1fr}.bpm203-actions-row{display:grid}.bpm203-actions-row form,.bpm203-actions-row .btn{width:100%}.bpm203-card{padding:16px;border-radius:20px}}