*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}

:root{
  --bg:#08060f;
  --s1:#0e0c1d;
  --s2:#15132a;
  --s3:#1d1a3a;
  --text:#f5f2ff;
  --t2:#b4afd4;
  --muted:#605b85;
  --r:#ff2d75;
  --g:#19ffc6;
  --p:#9a6bff;
  --y:#ffd60a;
  --o:#ff7a3c;
  --b:#46a8ff;
  --border:rgba(255,255,255,0.08);
  --border2:rgba(255,255,255,0.14);
  --card:#0e0c1d;
  --radius:14px;
  --glow-r:0 0 40px rgba(255,45,117,0.32);
  --glow-g:0 0 40px rgba(25,255,198,0.26);
  --glow-p:0 0 40px rgba(154,107,255,0.32);
  --t:0.22s cubic-bezier(.4,0,.2,1);
  --font:'DM Sans',sans-serif;
  --display:'Unbounded',sans-serif;
}
[data-theme="light"]{
  --bg:#f6f5ff;
  --s1:#fff;
  --s2:#ede9fe;
  --s3:#ddd8f8;
  --text:#0f0e22;
  --t2:#3a3860;
  --muted:#8888aa;
  --card:#fff;
  --border:rgba(0,0,0,0.07);
  --border2:rgba(0,0,0,0.13);
}

body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;transition:background .3s,color .3s;}

/* BG FX */
.bg-scene{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
.orb{position:absolute;border-radius:50%;filter:blur(120px);animation:drift 20s ease-in-out infinite alternate;}
.o1{width:800px;height:800px;background:var(--p);opacity:.06;top:-300px;left:-200px;animation-duration:18s;}
.o2{width:600px;height:600px;background:var(--r);opacity:.05;top:50%;right:-200px;animation-duration:15s;animation-delay:-6s;}
.o3{width:500px;height:500px;background:var(--g);opacity:.04;bottom:-150px;left:25%;animation-duration:22s;animation-delay:-11s;}
@keyframes drift{from{transform:translate(0,0) scale(1);}to{transform:translate(60px,40px) scale(1.12);}}
.noise{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.02;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px;}

/* NAV */
nav{position:sticky;top:0;z-index:300;height:58px;
  display:flex;align-items:center;gap:14px;padding:0 22px;
  background:rgba(6,6,14,.9);backdrop-filter:blur(28px);
  border-bottom:1px solid var(--border);}
[data-theme="light"] nav{background:rgba(246,245,255,.92);}

.logo{font-family:var(--display);font-size:1.3rem;font-weight:900;letter-spacing:-1px;
  background:linear-gradient(135deg,var(--r),var(--p),var(--g));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  text-decoration:none;flex-shrink:0;}

.nav-tabs{display:flex;gap:2px;flex:1;overflow:hidden;list-style:none;}
.nav-tabs button{padding:5px 13px;border-radius:100px;border:none;background:transparent;
  color:var(--muted);font-family:var(--font);font-size:.78rem;font-weight:600;
  cursor:pointer;white-space:nowrap;transition:all var(--t);}
.nav-tabs button:hover{color:var(--text);background:var(--s3);}
.nav-tabs button.on{background:linear-gradient(135deg,var(--r),var(--p));color:#fff;}

.nav-r{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.search-wrap{position:relative;display:flex;align-items:center;}
.search-wrap input{padding:7px 14px 7px 34px;border-radius:100px;
  border:1px solid var(--border);background:var(--s2);color:var(--text);
  font-family:var(--font);font-size:.78rem;width:180px;outline:none;
  transition:all var(--t);}
.search-wrap input:focus{border-color:var(--p);width:230px;box-shadow:0 0 0 3px rgba(124,58,237,.15);}
.search-wrap input::placeholder{color:var(--muted);}
.search-ico{position:absolute;left:11px;color:var(--muted);font-size:.82rem;pointer-events:none;}
.ibtn{width:36px;height:36px;border-radius:50%;border:1px solid var(--border);
  background:var(--s2);display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:.95rem;transition:all var(--t);color:var(--text);}
.ibtn:hover{border-color:var(--g);transform:rotate(18deg);}

/* HERO */
.hero{position:relative;z-index:2;text-align:center;padding:60px 20px 44px;overflow:hidden;}
.live-pill{display:inline-flex;align-items:center;gap:7px;padding:5px 16px;border-radius:100px;
  background:rgba(255,26,108,.1);border:1px solid rgba(255,26,108,.25);
  font-size:.68rem;font-weight:700;letter-spacing:1.5px;color:var(--r);text-transform:uppercase;
  margin-bottom:22px;animation:pillPulse 2.5s ease-in-out infinite;}
@keyframes pillPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,26,108,.3);}50%{box-shadow:0 0 0 8px rgba(255,26,108,0);}}
.ldot{width:6px;height:6px;border-radius:50%;background:var(--r);animation:blink 1.2s ease-in-out infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.1;}}

.hero h1{font-family:var(--display);font-size:clamp(2.4rem,7vw,5.5rem);font-weight:900;
  line-height:.92;letter-spacing:-3px;margin-bottom:18px;}
.hero h1 .grad{background:linear-gradient(120deg,var(--r) 0%,var(--p) 45%,var(--g) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  background-size:200% auto;animation:gradSlide 4s ease-in-out infinite alternate;}
@keyframes gradSlide{from{background-position:0%;}to{background-position:100%;}}
.hero-sub{font-size:.95rem;color:var(--t2);max-width:440px;margin:0 auto 28px;line-height:1.65;}
.hstats{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;}
.hstat .num{font-family:var(--display);font-size:1.7rem;font-weight:900;
  background:linear-gradient(135deg,var(--y),var(--r));-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text;}
.hstat .lbl{font-size:.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;margin-top:2px;}

/* TICKER */
.ticker-bar{background:linear-gradient(90deg,var(--r),var(--p),var(--r));padding:8px 0;
  overflow:hidden;position:relative;z-index:2;}
.ticker-inner{display:flex;animation:tick 28s linear infinite;white-space:nowrap;}
.tseg{display:flex;gap:44px;padding-right:44px;
  font-family:var(--display);font-size:.7rem;font-weight:700;letter-spacing:2px;color:#fff;}
.tseg span::before{content:'✦  ';}
@keyframes tick{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* FILTERS */
.filter-bar{position:relative;z-index:400;display:flex;gap:8px;padding:18px 22px 10px;
  overflow-x:auto;scrollbar-width:none;flex-wrap:wrap;}
.fpill{padding:7px 16px;border-radius:100px;border:1px solid var(--border);
  background:var(--s1);color:var(--muted);font-size:.76rem;font-weight:600;
  cursor:pointer;transition:all var(--t);white-space:nowrap;font-family:var(--font);}
.fpill:hover{color:var(--text);border-color:var(--border2);transform:translateY(-1px);}
.fpill.on{background:linear-gradient(135deg,var(--r),var(--p));color:#fff;border-color:transparent;box-shadow:var(--glow-r);}

/* LANG FILTER DROPDOWN */
.lang-wrap{position:relative;flex-shrink:0;z-index:900;}
.lang-btn{display:flex;align-items:center;gap:7px;padding:7px 14px;border-radius:100px;
  border:1px solid var(--border2);background:var(--s2);color:var(--text);
  font-size:.76rem;font-weight:700;cursor:pointer;transition:all var(--t);
  white-space:nowrap;font-family:var(--font);}
.lang-btn:hover,.lang-btn.open{border-color:var(--p);color:var(--p);background:rgba(124,58,237,.12);}
.lang-btn .lang-arrow{font-size:.6rem;transition:transform var(--t);}
.lang-btn.open .lang-arrow{transform:rotate(180deg);}
.lang-flag{font-size:.95rem;line-height:1;}
.lang-dropdown{display:none;position:fixed;
  background:var(--s1);border:1px solid var(--border2);border-radius:14px;
  padding:8px;min-width:200px;z-index:9999;
  box-shadow:0 8px 40px rgba(0,0,0,.6);
  animation:dropIn .18s ease;}
.lang-dropdown.open{display:block;}
@keyframes dropIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}
.lang-option{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;
  cursor:pointer;transition:all var(--t);font-size:.78rem;font-weight:500;color:var(--t2);}
.lang-option:hover{background:var(--s3);color:var(--text);}
.lang-option.selected{background:rgba(124,58,237,.18);color:var(--p);font-weight:700;}
.lang-option .lo-flag{font-size:1.1rem;line-height:1;flex-shrink:0;}
.lang-option .lo-name{flex:1;}
.lang-option .lo-check{font-size:.8rem;opacity:0;}
.lang-option.selected .lo-check{opacity:1;}
.lang-sep{height:1px;background:var(--border);margin:6px 0;}

/* LANGUE — masqué temporairement */
.lang-wrap { display: none !important; }

/* AI STATUS BAR */
.ai-bar{position:relative;z-index:2;margin:10px 22px;padding:12px 18px;
  background:var(--s1);border:1px solid var(--border);border-radius:12px;
  display:flex;align-items:center;gap:16px;font-size:.74rem;color:var(--muted);}
.ab-left{display:flex;align-items:center;gap:12px;flex:1;}
/* Cercle compte-à-rebours */
.ab-clock{position:relative;width:52px;height:52px;flex-shrink:0;}
.ab-clock svg{width:52px;height:52px;transform:rotate(-90deg);}
.ab-clock-bg{fill:none;stroke:var(--s3);stroke-width:4;}
.ab-clock-fill{fill:none;stroke:url(#clockGrad);stroke-width:4;stroke-linecap:round;
  stroke-dasharray:132;stroke-dashoffset:0;transition:stroke-dashoffset 1s linear;}
.ab-clock-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:.55rem;font-weight:900;color:var(--text);line-height:1;}
.ab-info{display:flex;flex-direction:column;gap:3px;}
.ab-info-main{font-size:.74rem;color:var(--text);font-weight:500;}
.ab-info-sub{font-size:.65rem;color:var(--muted);}
.refresh-btn{padding:6px 16px;border-radius:100px;border:1px solid rgba(124,58,237,.4);
  background:rgba(124,58,237,.1);color:var(--p);font-size:.7rem;font-weight:700;
  cursor:pointer;transition:all var(--t);font-family:var(--font);flex-shrink:0;}
.refresh-btn:hover{background:var(--p);color:#fff;}
.refresh-btn:disabled{opacity:.4;cursor:not-allowed;}
.ai-status{display:flex;align-items:center;gap:5px;font-size:.7rem;flex-shrink:0;}
.spin{animation:spin .8s linear infinite;display:inline-block;}
@keyframes spin{to{transform:rotate(360deg);}}

/* LAYOUT */
.wrap{position:relative;z-index:2;max-width:1560px;margin:0 auto;padding:0 22px;
  display:grid;grid-template-columns:1fr 290px;gap:24px;}
@media(max-width:1080px){.wrap{grid-template-columns:1fr;}}

/* SECTIONS */
.sec-head{display:flex;align-items:center;justify-content:space-between;margin:28px 0 14px;}
.sec-title{font-family:var(--display);font-size:1.25rem;font-weight:900;letter-spacing:-0.5px;
  display:flex;align-items:center;gap:8px;}
.sec-more{font-size:.72rem;color:var(--r);text-decoration:none;font-weight:700;
  border:1px solid rgba(255,26,108,.25);padding:4px 13px;border-radius:100px;
  transition:all var(--t);}
.sec-more:hover{background:rgba(255,26,108,.1);}

/* GRIDS */
/* ── Grille uniformisée : toutes les cards ont le même ratio ── */
.vgrid{display:grid;gap:14px;}
.vgrid.g4{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));}
.vgrid.g3{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}

/* Featured : 3 colonnes, card 1 occupe 2 lignes */
.vgrid.featured{
  grid-template-columns: 5fr 3.5fr 3.5fr;
  grid-auto-rows: 1fr;
}
.vgrid.featured .vcard:nth-child(1){grid-column:1; grid-row:1/3;}
.vgrid.featured .vcard:nth-child(2){grid-column:2; grid-row:1;}
.vgrid.featured .vcard:nth-child(3){grid-column:3; grid-row:1;}
.vgrid.featured .vcard:nth-child(4){grid-column:2; grid-row:2;}
.vgrid.featured .vcard:nth-child(5){grid-column:3; grid-row:2;}

@media(max-width:860px){
  .vgrid.featured{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto;}
  .vgrid.featured .vcard{grid-column:span 1!important;grid-row:span 1!important;}
}
@media(max-width:520px){
  .vgrid.g4,.vgrid.g3{grid-template-columns:repeat(2,1fr);}
  .vgrid.featured{grid-template-columns:repeat(2,1fr);}
}

/* VIDEO CARD */
.vcard{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;cursor:pointer;transition:all var(--t);position:relative;}
.vcard:hover{transform:translateY(-5px) scale(1.012);border-color:rgba(255,26,108,.3);
  box-shadow:0 20px 50px rgba(0,0,0,.5),var(--glow-r);}
.vcard.ai-new{border-color:rgba(0,229,176,.4);animation:cardPop .4s ease-out;}
@keyframes cardPop{from{transform:scale(.95);opacity:0;}to{transform:scale(1);opacity:1;}}

/* Thumbnail uniformisé : ratio 9/16 partout */
.vthumb{
  position:relative;overflow:hidden;
  aspect-ratio:9/16;
  width:100%;
  background:#0d0d0d;
}
.vthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
/* Card 1 featured : ratio portrait */
.vgrid.featured .vcard:nth-child(1) .vthumb{aspect-ratio:9/16;}
.vthumb-bg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:3.2rem;transition:transform .5s ease;position:relative;}
.vcard:hover .vthumb-bg{transform:scale(1.07);}

/* Card color palettes */
.vc0{background:linear-gradient(150deg,#150035,#4a0095,#7c3aed);}
.vc1{background:linear-gradient(150deg,#300012,#900038,#ff1a6c);}
.vc2{background:linear-gradient(150deg,#001a16,#004f44,#00e5b0);}
.vc3{background:linear-gradient(150deg,#1a1000,#4d3200,#ffb800);}
.vc4{background:linear-gradient(150deg,#001025,#003070,#0095ff);}
.vc5{background:linear-gradient(150deg,#200010,#680030,#ff6b35);}
.vc6{background:linear-gradient(150deg,#001508,#004020,#00c853);}
.vc7{background:linear-gradient(150deg,#200020,#660060,#e040fb);}

.vbadge{position:absolute;top:9px;left:9px;padding:3px 9px;border-radius:100px;
  font-size:.6rem;font-weight:800;letter-spacing:.5px;text-transform:uppercase;z-index:3;}
.bh{background:var(--r);color:#fff;}
.bn{background:var(--g);color:#001a16;}
.bt{background:var(--y);color:#1a1000;}
.bv{background:var(--p);color:#fff;}
.bo{background:var(--o);color:#fff;}

.vplatform{position:absolute;top:9px;right:9px;width:26px;height:26px;border-radius:7px;
  background:rgba(0,0,0,.6);backdrop-filter:blur(8px);display:flex;align-items:center;
  justify-content:center;font-size:.8rem;z-index:3;}
.vdur{position:absolute;bottom:8px;right:8px;padding:2px 7px;border-radius:5px;
  background:rgba(0,0,0,.75);color:#fff;font-size:.62rem;font-weight:700;z-index:3;}
.vplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.28);opacity:0;transition:opacity var(--t);z-index:3;}
.vcard:hover .vplay{opacity:1;}
.vplay-btn{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.92);
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;
  transform:scale(.8);transition:transform var(--t);backdrop-filter:blur(8px);}
.vcard:hover .vplay-btn{transform:scale(1);}
.ai-badge{position:absolute;bottom:8px;left:8px;padding:2px 7px;border-radius:5px;
  background:rgba(0,229,176,.2);border:1px solid rgba(0,229,176,.4);
  color:var(--g);font-size:.58rem;font-weight:700;z-index:3;}

.vinfo{padding:10px 12px;display:flex;flex-direction:column;gap:4px;}
.vtitle{font-weight:600;font-size:.80rem;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.1em;}
.vmeta{display:flex;align-items:center;justify-content:space-between;font-size:.67rem;color:var(--muted);}
.vstats{display:flex;gap:8px;}
.vtag{display:inline-block;margin-top:4px;padding:2px 7px;border-radius:4px;
  background:var(--s2);font-size:.59rem;font-weight:700;color:var(--muted);}

/* Skeleton */
.skel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.sk-t{aspect-ratio:9/16;background:linear-gradient(90deg,var(--s2) 25%,var(--s3) 50%,var(--s2) 75%);
  background-size:400%;animation:sk 1.6s ease-in-out infinite;}
.sk-l{height:11px;border-radius:4px;margin:11px 13px 5px;
  background:linear-gradient(90deg,var(--s2) 25%,var(--s3) 50%,var(--s2) 75%);
  background-size:400%;animation:sk 1.6s ease-in-out infinite;}
.sk-l.s{width:55%;margin-top:0;}
@keyframes sk{0%{background-position:100% 0;}100%{background-position:-100% 0;}}

/* LOAD MORE */
.load-btn{display:flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 36px;border-radius:100px;margin:36px auto 0;
  background:linear-gradient(135deg,var(--r),var(--p));color:#fff;
  border:none;font-family:var(--font);font-size:.86rem;font-weight:700;
  cursor:pointer;transition:all var(--t);box-shadow:var(--glow-r);}
.load-btn:hover{transform:scale(1.04);box-shadow:var(--glow-p);}
.load-btn:disabled{opacity:.45;cursor:not-allowed;transform:none;}

/* ═══ DESKTOP PLAYER — fixé sous la nav, pousse le contenu ═══ */
/* ═══ OPTION C — Split 45vw responsive ═══ */
.desk-player-wrap{
  display:none;position:fixed;top:58px;left:0;bottom:0;z-index:200;
  width:clamp(400px, 45vw, 720px);
  background:var(--s1);border-right:1px solid var(--border2);
  flex-direction:column;overflow:hidden;
  box-shadow:6px 0 48px rgba(0,0,0,.5);}
.desk-player-wrap.open{display:flex;animation:slideInLeft .3s cubic-bezier(.4,0,.2,1);}
@keyframes slideInLeft{from{transform:translateX(-100%);opacity:0;}to{transform:none;opacity:1;}}
body.player-open .hero,
body.player-open .ticker-bar,
body.player-open .filter-bar,
body.player-open .wrap,
body.player-open footer{
  margin-left:clamp(400px, 45vw, 720px);
  transition:margin-left .3s cubic-bezier(.4,0,.2,1);}
.desk-player-inner{display:flex;flex-direction:column;height:100%;overflow:hidden;}

/* Barre top : titre + ⛶ fullscreen + ✕ fermer */
.desk-nav-top{
  display:flex;align-items:center;gap:8px;padding:8px 12px;
  background:var(--s2);border-bottom:1px solid var(--border);
  flex-shrink:0;min-height:48px;}
.desk-nav-title{
  flex:1;font-family:var(--display);font-size:.72rem;font-weight:900;
  letter-spacing:-.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:linear-gradient(135deg,var(--r),var(--p));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.desk-top-btn{
  width:36px;height:36px;border-radius:50%;
  border:1px solid var(--border2);background:var(--s3);
  color:var(--text);cursor:pointer;font-size:1rem;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--t);}
.desk-top-btn:hover{background:var(--p);color:#fff;border-color:var(--p);transform:scale(1.1);}
.desk-top-close:hover{background:var(--r);color:#fff;border-color:var(--r);}
/* Compat legacy */
.desk-close-top{width:34px;height:34px;border-radius:50%;border:1px solid var(--border2);
  background:var(--s3);color:var(--text);cursor:pointer;font-size:1rem;
  display:flex;align-items:center;justify-content:center;transition:all var(--t);flex-shrink:0;}
.desk-close-top:hover{background:var(--r);color:#fff;border-color:var(--r);}

/* Zone vidéo — contient les boutons flottants */
.desk-player-screen{
  background:#000;aspect-ratio:9/16;position:relative;overflow:hidden;
  flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:6rem;
  max-height:clamp(52vh, 65vh, 70vh);}
.desk-player-screen iframe{position:absolute;inset:0;width:100%;height:100%;border:none;}

/* ⛶ et ✕ superposés en HAUT de la vidéo */
.desk-top-controls{
  position:absolute;top:10px;right:10px;z-index:20;
  display:flex;gap:8px;pointer-events:none;}
.desk-top-controls button{
  pointer-events:all;
  width:38px;height:38px;font-size:1.1rem;}
.desk-btn-close:hover{
  background:rgba(255,26,108,.7)!important;
  border-color:var(--r)!important;}

/* Colonne gauche : boutons nav flottants */
.desk-side-left{
  position:absolute;left:0;top:0;bottom:0;width:80px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  z-index:10;background:linear-gradient(to right,rgba(0,0,0,.72) 0%,rgba(0,0,0,.18) 80%,transparent 100%);
  pointer-events:none;}
.desk-side-left button{pointer-events:all;}

/* Colonne droite : boutons action flottants */
.desk-side-right{
  position:absolute;right:0;top:0;bottom:0;width:90px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  z-index:10;background:linear-gradient(to left,rgba(0,0,0,.72) 0%,rgba(0,0,0,.18) 80%,transparent 100%);
  pointer-events:none;}
.desk-side-right button{pointer-events:all;}

/* Bouton flottant générique — gros & visible */
.desk-float-btn{
  width:62px;height:62px;border-radius:50%;
  border:2px solid rgba(255,255,255,.25);
  background:rgba(20,20,40,.65);backdrop-filter:blur(12px);
  color:#fff;font-size:1.7rem;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  transition:all .18s cubic-bezier(.4,0,.2,1);line-height:1;
  box-shadow:0 4px 20px rgba(0,0,0,.5);}
.desk-float-btn:hover{
  background:rgba(255,255,255,.22);
  border-color:rgba(255,255,255,.6);
  transform:scale(1.15);
  box-shadow:0 6px 28px rgba(0,0,0,.6);}
.desk-float-btn:active{transform:scale(.95);}
.desk-float-btn span.flabel{
  font-size:.52rem;font-weight:800;letter-spacing:.8px;
  text-transform:uppercase;opacity:.9;font-family:var(--font);}
/* Nav buttons : accent violet */
.desk-side-left .desk-float-btn:hover{
  background:rgba(124,58,237,.55);border-color:var(--p);}
/* Action buttons : accent rouge/rose */
.desk-side-right .desk-float-btn:hover{
  background:rgba(255,26,108,.45);border-color:var(--r);}
.desk-float-btn.liked{
  background:rgba(255,26,108,.45);border-color:var(--r);
  box-shadow:0 0 20px rgba(255,26,108,.4);}

/* Bouton Suivante — plus gros + teinte rose vif */
.desk-float-btn.btn-next{
  width:76px;height:76px;font-size:2rem;
  background:linear-gradient(145deg,#e91e8c 0%,#c2185b 100%);
  border-color:rgba(233,30,140,.6);
  box-shadow:0 4px 24px rgba(233,30,140,.45);}
.desk-float-btn.btn-next:hover{
  background:linear-gradient(145deg,#f72fa0 0%,#d81b60 100%);
  border-color:#f72fa0;
  box-shadow:0 6px 32px rgba(247,47,160,.6);
  transform:scale(1.1);}
.desk-float-btn.btn-next .flabel{font-size:.58rem;}

/* ═══ Barre nav Précédente / Suivante — style photo ═══ */
.desk-nav-bottom{
  display:flex;align-items:stretch;gap:0;flex-shrink:0;
  border-top:1px solid var(--border);}
.btn-prev-bar{
  flex:0 0 42%;padding:13px 8px;
  background:var(--s2);color:var(--t2);
  border:none;border-right:1px solid var(--border);
  font-family:var(--font);font-size:.88rem;font-weight:700;
  letter-spacing:.3px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:6px;
  transition:all .18s cubic-bezier(.4,0,.2,1);}
.btn-prev-bar:hover{background:var(--s3);color:var(--text);}
.btn-prev-bar:active{transform:scale(.97);}
.btn-next-bar{
  flex:1;padding:13px 10px;
  background:linear-gradient(90deg,#e91e8c 0%,#c2185b 100%);
  color:#fff;border:none;
  font-family:var(--font);font-size:1rem;font-weight:900;
  letter-spacing:.5px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:7px;
  transition:all .18s cubic-bezier(.4,0,.2,1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);}
.btn-next-bar:hover{
  background:linear-gradient(90deg,#f72fa0 0%,#d81b60 100%);
  box-shadow:0 0 24px rgba(233,30,140,.45);}
.btn-next-bar:active{transform:scale(.97);}

/* Bouton fullscreen — même style que desk-float-btn */
.desk-fullscreen-btn{
  width:62px;height:62px;border-radius:50%;
  border:2px solid rgba(255,255,255,.25);
  background:rgba(20,20,40,.65);backdrop-filter:blur(12px);
  color:#fff;font-size:1.3rem;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  transition:all .18s cubic-bezier(.4,0,.2,1);
  box-shadow:0 4px 20px rgba(0,0,0,.5);}
.desk-fullscreen-btn:hover{
  background:rgba(124,58,237,.55);border-color:var(--p);
  transform:scale(1.15);box-shadow:0 6px 28px rgba(0,0,0,.6);}
.desk-fullscreen-btn .flabel{
  font-size:.52rem;font-weight:800;letter-spacing:.8px;
  text-transform:uppercase;opacity:.9;font-family:var(--font);}

/* Mode fullscreen du player */
.desk-player-wrap.fullscreen-mode{
  position:fixed!important;top:0!important;left:0!important;right:0!important;
  bottom:0!important;width:100vw!important;z-index:9999!important;
  border:none!important;box-shadow:none!important;
  overflow:hidden!important;}
.desk-player-wrap.fullscreen-mode .desk-player-inner{
  overflow:hidden!important;}
.desk-player-wrap.fullscreen-mode .desk-player-screen{
  max-height:none!important;flex:1 1 0;overflow:hidden!important;}
.desk-player-wrap.fullscreen-mode .desk-player-info{
  flex:0 0 16.6vh;max-height:16.6vh;overflow:hidden!important;
  padding:8px 14px;gap:5px;}
.desk-player-wrap.fullscreen-mode .desk-nav-bottom{flex-shrink:0;}
body.player-fullscreen{overflow:hidden!important;}
html:has(body.player-fullscreen){overflow:hidden!important;}
/* Masquer scrollbar partout en fullscreen — multi-navigateur */
body.player-fullscreen::-webkit-scrollbar{display:none!important;}
html:has(body.player-fullscreen)::-webkit-scrollbar{display:none!important;}
body.player-fullscreen .hero,
body.player-fullscreen .ticker-bar,
body.player-fullscreen .filter-bar,
body.player-fullscreen .wrap,
body.player-fullscreen footer{margin-left:0!important;}

/* Infos bas */
.desk-player-info{padding:14px 16px;display:flex;flex-direction:column;gap:10px;overflow-y:auto;flex:1;}
.desk-next-bar{height:3px;background:var(--s3);border-radius:2px;overflow:hidden;margin-top:2px;}
.desk-next-fill{height:100%;background:linear-gradient(90deg,var(--g),var(--r));
  border-radius:2px;width:0%;transition:width 1s linear;}

@media(max-width:1100px){
  .desk-player-wrap{width:clamp(380px, 42vw, 520px);}
  body.player-open .hero,body.player-open .ticker-bar,
  body.player-open .filter-bar,body.player-open .wrap,
  body.player-open footer{margin-left:clamp(380px, 42vw, 520px);}
  .desk-player-screen{max-height:58vh;}
}
@media(max-width:760px){
  .desk-player-wrap{display:none!important;}
  body.player-open .hero,body.player-open .ticker-bar,
  body.player-open .filter-bar,body.player-open .wrap,
  body.player-open footer{margin-left:0;}
}
/* ═══ MOBILE PLAYER — fullscreen scroll snappé ═══ */
.mobile-player-wrap{display:none;position:fixed;inset:0;z-index:700;background:#000;overflow:hidden;}
.mobile-player-wrap.open{display:block;}
.mobile-slides{display:flex;flex-direction:column;height:100%;overflow-y:scroll;
  scroll-snap-type:y mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.mobile-slides::-webkit-scrollbar{display:none;}
.mobile-slide{flex-shrink:0;width:100%;height:100dvh;position:relative;
  scroll-snap-align:start;scroll-snap-stop:always;background:#000;
  display:flex;align-items:center;justify-content:center;overflow:hidden;}
/* Thumbnail cover */
.mobile-slide-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;}
/* Overlay de lecture (tap-to-play) */
.mobile-slide-overlay{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;background:rgba(0,0,0,.35);cursor:pointer;z-index:2;}
.mobile-play-btn{width:72px;height:72px;border-radius:50%;
  background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;
  font-size:2rem;box-shadow:0 4px 24px rgba(0,0,0,.4);transition:transform .15s;}
.mobile-slide-overlay:active .mobile-play-btn{transform:scale(.9);}
/* iframe injectée au tap */
.mobile-slide iframe{position:absolute;inset:0;width:100%;height:100%;border:none;
  object-fit:cover;z-index:3;}
.mobile-slide-emoji-bg{font-size:6rem;opacity:.4;}
.mobile-slide-info{position:absolute;bottom:0;left:0;right:0;padding:16px 16px 36px;
  background:linear-gradient(transparent,rgba(0,0,0,.88));pointer-events:none;z-index:4;}
.mobile-slide-title{font-weight:700;font-size:.9rem;color:#fff;margin-bottom:6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.mobile-slide-meta{display:flex;gap:14px;font-size:.73rem;color:rgba(255,255,255,.8);}
.mobile-side-btns{position:absolute;right:12px;bottom:90px;display:flex;flex-direction:column;
  gap:18px;align-items:center;pointer-events:all;z-index:5;}
.msb{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;color:#fff;}
.msb-ico{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.15);
  backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;font-size:1.4rem;
  transition:transform .15s;border:1px solid rgba(255,255,255,.2);}
.msb:active .msb-ico{transform:scale(.88);}
.msb span{font-size:.62rem;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.8);}
.mobile-close{position:fixed;top:env(safe-area-inset-top,14px);right:14px;
  width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.6);
  backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);color:#fff;
  font-size:1.1rem;display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:710;}
.mobile-idx{position:fixed;top:env(safe-area-inset-top,14px);left:50%;transform:translateX(-50%);
  font-size:.7rem;font-weight:700;color:rgba(255,255,255,.75);
  background:rgba(0,0,0,.5);padding:4px 12px;border-radius:100px;
  backdrop-filter:blur(8px);z-index:710;pointer-events:none;}
/* Masquer le desktop player sur mobile */
@media(max-width:760px){.desk-player-wrap{display:none!important;}}
/* Masquer le mobile player sur desktop */
@media(min-width:761px){.mobile-player-wrap{display:none!important;}}
/* legacy modal — désactivé */
.modal-bg{display:none!important;}
/* Stats partagées */
.mstats{display:flex;gap:10px;flex-wrap:wrap;}
.ms{text-align:center;padding:9px 12px;background:var(--s2);border-radius:9px;flex:1;min-width:60px;}
.ms .mn{font-family:var(--display);font-size:1.1rem;font-weight:900;color:var(--r);}
.ms .ml{font-size:.6rem;color:var(--muted);text-transform:uppercase;letter-spacing:1px;}
.modal-title{font-family:var(--display);font-size:1.1rem;font-weight:900;line-height:1.25;letter-spacing:-0.5px;}
.modal-desc{font-size:.8rem;color:var(--t2);line-height:1.65;}
.mhashes{display:flex;flex-wrap:wrap;gap:5px;}
.mh{padding:3px 9px;border-radius:6px;background:rgba(124,58,237,.12);color:var(--p);font-size:.68rem;font-weight:700;}
.mactions{display:flex;gap:7px;}
.mact{flex:1;padding:9px;border-radius:9px;border:1px solid var(--border);
  background:var(--s2);color:var(--text);font-family:var(--font);font-size:.76rem;
  font-weight:700;cursor:pointer;transition:all var(--t);
  display:flex;align-items:center;justify-content:center;gap:5px;}
.mact:hover{border-color:var(--r);color:var(--r);}
.mact.primary{background:linear-gradient(135deg,var(--r),var(--p));color:#fff;border-color:transparent;}
.mact.primary:hover{box-shadow:var(--glow-r);transform:scale(1.02);color:#fff;}
.ai-badge-modal{display:flex;align-items:center;gap:6px;padding:6px 10px;
  border-radius:8px;background:rgba(0,229,176,.08);border:1px solid rgba(0,229,176,.2);
  font-size:.7rem;color:var(--g);font-weight:600;}

/* SIDEBAR */
.sidebar{display:flex;flex-direction:column;gap:14px;padding:28px 0;}
.sb{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;}
.sb-title{font-family:var(--display);font-weight:900;font-size:.88rem;
  margin-bottom:13px;display:flex;align-items:center;gap:7px;letter-spacing:-0.3px;}

/* Trending items */
.titem{display:flex;align-items:center;gap:9px;padding:8px 0;
  border-bottom:1px solid var(--border);cursor:pointer;transition:opacity var(--t);}
.titem:last-child{border-bottom:none;}
.titem:hover{opacity:.6;}
.trank{font-family:var(--display);font-size:1.1rem;color:var(--muted);
  width:24px;text-align:center;flex-shrink:0;}
.trank.top{color:var(--r);}
.tinfo{flex:1;min-width:0;}
.tname{font-size:.76rem;font-weight:600;margin-bottom:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tviews{font-size:.65rem;color:var(--muted);}
.tarr{color:var(--g);font-size:.7rem;font-weight:700;}

/* AI Search */
.ai-box{background:var(--card);border:1px solid rgba(0,229,176,.2);border-radius:var(--radius);padding:16px;}
.ai-box h3{font-family:var(--display);font-weight:900;font-size:.88rem;color:var(--g);
  margin-bottom:10px;letter-spacing:-0.3px;}
.ai-wrap{display:flex;gap:7px;}
.ai-input{flex:1;padding:7px 11px;border-radius:8px;border:1px solid var(--border);
  background:var(--s2);color:var(--text);font-family:var(--font);font-size:.76rem;outline:none;
  transition:border-color var(--t);}
.ai-input:focus{border-color:var(--g);}
.ai-go{padding:7px 13px;border-radius:8px;background:var(--g);color:#001a16;
  border:none;font-family:var(--font);font-size:.76rem;font-weight:800;
  cursor:pointer;transition:all var(--t);}
.ai-go:hover{transform:scale(1.05);}
.ai-res{margin-top:11px;font-size:.74rem;color:var(--t2);line-height:1.6;min-height:0;}

/* Promo */
.promo{background:var(--card);border:1px solid rgba(255,26,108,.18);border-radius:var(--radius);
  padding:18px;text-align:center;position:relative;overflow:hidden;}
.promo::before{content:'';position:absolute;top:-60%;left:-60%;width:220%;height:220%;
  background:conic-gradient(from 0deg,transparent,rgba(255,26,108,.04),transparent);
  animation:rot 10s linear infinite;}
@keyframes rot{to{transform:rotate(360deg);}}
.promo-in{position:relative;z-index:1;}
.promo h3{font-family:var(--display);font-weight:900;font-size:.88rem;margin-bottom:6px;}
.promo p{font-size:.72rem;color:var(--muted);margin-bottom:12px;line-height:1.5;}
.promo-btn{display:inline-block;padding:7px 18px;border-radius:100px;
  background:linear-gradient(135deg,var(--r),var(--p));color:#fff;
  font-size:.74rem;font-weight:800;text-decoration:none;cursor:pointer;
  transition:all var(--t);border:none;font-family:var(--font);}
.promo-btn:hover{transform:scale(1.05);box-shadow:var(--glow-r);}

/* Merch */
.merch-item{display:flex;align-items:center;gap:9px;padding:9px;
  background:var(--s2);border-radius:9px;cursor:pointer;transition:all var(--t);margin-bottom:7px;}
.merch-item:hover{transform:translateX(3px);opacity:.8;}
.merch-ico{width:40px;height:40px;border-radius:7px;display:flex;align-items:center;
  justify-content:center;font-size:1.3rem;flex-shrink:0;}
.merch-nm{font-size:.76rem;font-weight:700;margin-bottom:1px;}
.merch-p{font-size:.65rem;color:var(--muted);}

/* TOAST */
.toast{position:fixed;bottom:22px;right:22px;z-index:700;
  padding:11px 18px;border-radius:11px;background:var(--s1);
  color:var(--g);font-size:.78rem;font-weight:700;
  display:flex;align-items:center;gap:7px;
  box-shadow:0 8px 30px rgba(0,0,0,.4);border:1px solid var(--g);
  transform:translateY(70px);opacity:0;transition:all .35s cubic-bezier(.4,0,.2,1);max-width:300px;}
.toast.show{transform:translateY(0);opacity:1;}


.shaker-btn{
  position:relative;
  width:110px;height:110px;
  border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(135deg,#ff1a6c,#ffb800,#7c3aed,#00e5b0);
  background-size:300% 300%;
  animation:shakerGrad 3s ease infinite, shakerPulse 2s ease-in-out infinite;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  box-shadow:0 0 0 0 rgba(255,26,108,.5),0 8px 40px rgba(255,26,108,.4);
  transition:transform .15s;
  overflow:visible;
}
.shaker-btn:hover{transform:scale(1.08);}
.shaker-btn:active{transform:scale(.96);}

@keyframes shakerGrad{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}
@keyframes shakerPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,26,108,.5),0 8px 40px rgba(255,26,108,.4);}
  50%{box-shadow:0 0 0 18px rgba(255,26,108,0),0 8px 60px rgba(255,183,0,.5);}
}

.shaker-ico{display:flex;align-items:center;justify-content:center;width:58px;height:68px;}
.shaker-svg-btn{width:52px;height:62px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.35));}
.shaker-label{font-family:var(--display);font-size:.55rem;font-weight:900;color:#fff;
  text-align:center;letter-spacing:1px;line-height:1.2;}
.shaker-label small{font-size:.45rem;opacity:.8;}

/* Anneaux tournants */
.shaker-ring{
  position:absolute;inset:-8px;border-radius:50%;
  border:2px dashed rgba(255,255,255,.25);
  animation:ringRotate 4s linear infinite;
  pointer-events:none;
}
.shaker-ring.r2{
  inset:-16px;border-color:rgba(255,183,0,.2);
  animation-direction:reverse;animation-duration:6s;
}
@keyframes ringRotate{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

.shaker-hint{
  font-size:.7rem;color:var(--muted);
  animation:hintBlink 2s ease-in-out infinite;
}
@keyframes hintBlink{0%,100%{opacity:.4;}50%{opacity:1;}}

/* ─── Bouton en train de shaker ─── */
.shaker-btn.shaking,
.shaker-card-slot.shaking{
  animation:shakerWiggle .08s ease-in-out infinite, shakerGrad 3s ease infinite !important;
}
@keyframes shakerWiggle{
  0%,100%{transform:rotate(-6deg) scale(1.1);}
  25%{transform:rotate(6deg) scale(1.12) translateY(-4px);}
  50%{transform:rotate(-4deg) scale(1.08) translateX(4px);}
  75%{transform:rotate(4deg) scale(1.1) translateY(4px);}
}

/* ─── Cards en vrille pendant le shake ─── */
.vcard.shaker-chaos{
  animation:cardChaos .35s ease-in-out forwards;
}
@keyframes cardChaos{
  0%{transform:translate(0,0) rotate(0deg) scale(1);opacity:1;}
  30%{transform:translate(var(--cx),var(--cy)) rotate(var(--cr)) scale(.8);opacity:.5;}
  60%{transform:translate(calc(var(--cx)*-.5),calc(var(--cy)*-.5)) rotate(calc(var(--cr)*-1)) scale(.9);opacity:.7;}
  100%{transform:translate(0,0) rotate(0deg) scale(1);opacity:1;}
}

/* ─── Overlay chaos ─── */
.shaker-overlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(6,6,14,.0);
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;opacity:0;
  transition:opacity .25s;
}
.shaker-overlay.active{
  opacity:1;pointer-events:all;
  background:rgba(6,6,14,.85);
  backdrop-filter:blur(6px);
}
#shakerCanvas{position:absolute;inset:0;width:100%;height:100%;}

.shaker-center{
  position:relative;z-index:2;text-align:center;
  transform:scale(.5);opacity:0;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .3s;
}
.shaker-overlay.active .shaker-center{transform:scale(1);opacity:1;}

.shaker-big-ico{display:flex;align-items:center;justify-content:center;}
.shaker-svg-big{
  width:120px;height:168px;
  animation:shakerBigSpin .25s ease-in-out infinite;
  filter:drop-shadow(0 0 30px rgba(255,26,108,.6)) drop-shadow(0 0 60px rgba(124,58,237,.4));
}
@keyframes shakerBigSpin{
  0%  {transform:rotate(-18deg) translateX(-6px);}
  25% {transform:rotate(18deg)  translateX(6px) translateY(-10px);}
  50% {transform:rotate(-12deg) translateX(-4px);}
  75% {transform:rotate(14deg)  translateX(4px)  translateY(8px);}
  100%{transform:rotate(-18deg) translateX(-6px);}
}
/* Grains animés dans le SVG overlay */
.grain{animation:grainBounce .2s ease-in-out infinite;}
.g1{animation-delay:0s;    animation-duration:.18s;}
.g2{animation-delay:.05s;  animation-duration:.21s;}
.g3{animation-delay:.10s;  animation-duration:.19s;}
.g4{animation-delay:.03s;  animation-duration:.22s;}
.g5{animation-delay:.08s;  animation-duration:.17s;}
.g6{animation-delay:.13s;  animation-duration:.20s;}
@keyframes grainBounce{
  0%,100%{transform:translate(0,0);}
  25%{transform:translate(5px,-6px);}
  50%{transform:translate(-4px,4px);}
  75%{transform:translate(6px,3px);}
}

.shaker-msg{
  font-family:var(--display);font-size:2.5rem;font-weight:900;
  background:linear-gradient(135deg,var(--r),var(--y),var(--p),var(--g));
  background-size:300%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:shakerGrad 1s ease infinite;
  margin-top:12px;letter-spacing:-1px;
}
.shaker-sub{font-size:.85rem;color:var(--t2);margin-top:6px;opacity:.7;}



/* ═══════════════════════════════════════════
   SHAKER CARD — intégrée dans la grille
═══════════════════════════════════════════ */
.shaker-card-slot{cursor:pointer;}
.shaker-card-slot:hover .shaker-card-bg{filter:brightness(1.15);}

/* vthumb de la shaker-card : même ratio que les vraies cards */
.shaker-vthumb{
  position:relative;overflow:hidden;
  aspect-ratio:9/16;width:100%;
}

.shaker-card-bg{
  position:absolute;inset:0;
  background:linear-gradient(135deg,#1a0a2e,#2d0a1e,#0a1a2e);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.shaker-card-bg::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,26,108,.15),rgba(124,58,237,.15),rgba(0,229,176,.1));
  animation:shakerGrad 3s ease infinite;
  background-size:300% 300%;
}

.shaker-card-inner{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:80px;height:100px;
  animation:shakerCardWiggle 1.8s ease-in-out infinite;
}
@keyframes shakerCardWiggle{
  0%,100%{transform:rotate(-6deg);}
  25%{transform:rotate(6deg) translateY(-4px);}
  50%{transform:rotate(-4deg);}
  75%{transform:rotate(5deg) translateY(3px);}
}

.shaker-svg-card{
  width:70px;height:90px;
  filter:drop-shadow(0 0 12px rgba(255,26,108,.5)) drop-shadow(0 0 24px rgba(124,58,237,.3));
}

.shaker-card-ring{
  position:absolute;inset:-12px;border-radius:50%;
  border:1.5px dashed rgba(255,255,255,.2);
  animation:ringRotate 4s linear infinite;
  pointer-events:none;
}
.shaker-card-title{
  font-family:var(--display);font-size:.75rem;font-weight:900;
  background:linear-gradient(135deg,var(--r),var(--p));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.shaker-card-tag{
  background:linear-gradient(135deg,rgba(255,26,108,.15),rgba(124,58,237,.15));
  color:var(--r);border:1px solid rgba(255,26,108,.2);
}
.shaker-card-ring.r2{
  inset:-22px;border-color:rgba(255,183,0,.15);
  animation-direction:reverse;animation-duration:6s;
}

/* Supprimer l'ancien shaker-zone standalone */
.shaker-zone{display:none !important;}

/* ═══ MODE SHAKER CHAOS — grille unifiée ═══ */
.chaos-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:14px;
  margin-bottom:28px;
}

.shaker-reset-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;margin-bottom:16px;
  background:linear-gradient(135deg,rgba(255,26,108,.12),rgba(124,58,237,.12));
  border:1px solid rgba(255,26,108,.3);
  border-radius:12px;gap:12px;flex-wrap:wrap;
}
.shaker-reset-bar span{
  font-size:.78rem;font-weight:600;
  background:linear-gradient(135deg,var(--r),var(--p));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.shaker-reset-bar button{
  padding:6px 14px;border-radius:8px;border:1px solid rgba(255,26,108,.4);
  background:rgba(255,26,108,.1);color:var(--r);
  font-size:.72rem;font-weight:700;cursor:pointer;
  font-family:var(--font);transition:all var(--t);flex-shrink:0;
}
.shaker-reset-bar button:hover{
  background:var(--r);color:#fff;
}

/* ═══════════════════════════════════════════
   FRUIT GAME CARD — carte mini-jeu dans le feed
═══════════════════════════════════════════ */
.fruit-game-card{cursor:pointer;}
.fruit-game-vthumb{
  position:relative;overflow:hidden;
  aspect-ratio:9/16;width:100%;background:#0d0d0d;
}
.fruit-game-bg{
  position:absolute;inset:0;
  background:linear-gradient(135deg,#0a1a00,#1a0a00,#0a0a1a);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  transition:filter .25s;
}
.fruit-game-bg::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 60% 30%,rgba(255,107,53,.28),transparent 60%),
             radial-gradient(ellipse at 30% 70%,rgba(255,215,0,.2),transparent 60%);
}
.fruit-game-card:hover .fruit-game-bg{filter:brightness(1.2);}
.fruit-game-inner{position:relative;width:90px;height:110px;display:flex;align-items:center;justify-content:center;}
.fruit-float{position:absolute;font-size:1.5rem;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));}
.fruit-float.f1{top:0;left:0;animation:fruitBob 1.3s ease-in-out infinite 0s;}
.fruit-float.f2{top:8px;right:0;animation:fruitBob 1.6s ease-in-out infinite .2s;}
.fruit-float.f3{bottom:30px;left:4px;animation:fruitBob 1.2s ease-in-out infinite .4s;}
.fruit-float.f4{bottom:10px;right:4px;animation:fruitBob 1.5s ease-in-out infinite .1s;}
.fruit-float.f5{top:50%;left:50%;animation:fruitBobC 1.8s ease-in-out infinite .3s;}
@keyframes fruitBob{
  0%,100%{transform:translateY(0) rotate(-8deg);}
  50%{transform:translateY(-8px) rotate(8deg);}
}
@keyframes fruitBobC{
  0%,100%{transform:translate(-50%,-50%) scale(1);}
  50%{transform:translate(-50%,-58%) scale(1.15);}
}
.fruit-sword{
  position:absolute;bottom:-4px;right:-8px;font-size:1.8rem;
  animation:swordSlash 2s ease-in-out infinite;
  filter:drop-shadow(0 0 8px rgba(255,215,0,.7));
}
@keyframes swordSlash{
  0%,100%{transform:rotate(-30deg) scale(1);}
  40%{transform:rotate(20deg) scale(1.15);}
  70%{transform:rotate(-10deg) scale(.9);}
}
.fruit-game-title{
  font-family:var(--display);font-size:.72rem;font-weight:900;line-height:1.3;
  background:linear-gradient(135deg,#ff6b35,#ffd700);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.fruit-game-tag{
  background:rgba(255,107,53,.12);
  color:#ff6b35;border:1px solid rgba(255,107,53,.25);
}

/* FOOTER */
footer{position:relative;z-index:2;text-align:center;padding:44px 22px 28px;
  border-top:1px solid var(--border);margin-top:70px;}
.flogo{font-family:var(--display);font-size:1.8rem;font-weight:900;letter-spacing:-1px;
  background:linear-gradient(135deg,var(--r),var(--p),var(--g));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  display:block;margin-bottom:8px;}
footer p{font-size:.74rem;color:var(--muted);margin-bottom:5px;}
.flinks{display:flex;justify-content:center;gap:18px;margin-top:14px;flex-wrap:wrap;}
.flinks a{font-size:.68rem;color:var(--muted);text-decoration:none;transition:color var(--t);}
.flinks a:hover{color:var(--r);}

/* ═══════════════════════════════════════════════
   NORDVPN AFFILIATE — tous les placements
═══════════════════════════════════════════════ */

/* Header strip */
.vpn-header-strip{
  position:relative;z-index:10;
  transition:background .25s,opacity .25s;
}
.vpn-header-strip:hover{
  background:linear-gradient(90deg,#0f2027 0%,#1a3a4a 50%,#0f2027 100%) !important;
  opacity:.9;
}
.vpn-header-strip u{ text-decoration:none; }

/* Sidebar block */
.vpn-sidebar-block{
  transition:transform .2s,border-color .2s,background .2s;
}
.vpn-sidebar-block:hover{
  transform:translateY(-2px);
  border-color:rgba(70,135,255,.5) !important;
}

/* In-feed card */
.vpn-infeed-card{
  transition:transform .2s,box-shadow .2s;
  border:1px solid rgba(70,135,255,.2) !important;
}
.vpn-infeed-card:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(70,135,255,.18);
  border-color:rgba(70,135,255,.45) !important;
}
.vpn-infeed-card .vthumb{
  min-height:160px;
}

/* Player hint */
.vpn-player-hint{
  transition:background .2s,border-color .2s;
}
.vpn-player-hint:hover{
  background:rgba(70,135,255,.15) !important;
  border-color:rgba(70,135,255,.4) !important;
}

/* Mobile : masquer le header strip sur très petit écran si trop long */
@media(max-width:480px){
  .vpn-header-strip span{ display:none; }
  .vpn-header-strip u{ font-size:.7rem; }
}

/* RESPONSIVE */
@media(max-width:640px){
  nav{padding:0 12px;}
  .nav-tabs{display:none;}
  .search-wrap input{width:130px;}
  .hero{padding:36px 14px 28px;}
  .filter-bar{padding:14px 12px 8px;}
  .ai-bar{margin:8px 12px;}
  .wrap{padding:0 12px;}
}

/* ═══════════════════════════════════════════════════════════════
   ✦ REFRESH 2026 — couche additive « fresh & young » (Lot 1)
   Surcharge non-destructive. Aucune classe d'origine renommée.
   Retour arrière = supprimer ce bloc entre les deux lignes ✦.
═══════════════════════════════════════════════════════════════ */

/* ── Aurora mesh : on dope les orbes + halo conique ── */
.bg-scene{filter:saturate(1.25);}
.orb{filter:blur(95px);}
.o1{opacity:.14;}
.o2{opacity:.12;}
.o3{opacity:.10;}
.bg-scene::after{content:"";position:absolute;inset:-25%;pointer-events:none;
  background:conic-gradient(from 0deg at 50% 50%,transparent,rgba(154,107,255,.10),transparent 28%,rgba(255,45,117,.09),transparent 56%,rgba(25,255,198,.08),transparent);
  mix-blend-mode:screen;animation:auroraSpin 46s linear infinite;}
@keyframes auroraSpin{to{transform:rotate(360deg);}}

/* ── Wordmark kinetic ── */
.logo{background:linear-gradient(110deg,var(--r),var(--y) 30%,var(--g) 60%,var(--p));
  background-size:240% auto;-webkit-background-clip:text;background-clip:text;
  animation:logoSlide 6s linear infinite;}
@keyframes logoSlide{to{background-position:240% center;}}

/* ── Hero plus punchy ── */
.hero h1{letter-spacing:-3px;}
.hero h1 .grad{background:linear-gradient(110deg,var(--r),var(--y) 35%,var(--g) 65%,var(--p));
  background-size:260% auto;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;animation:gradSlide 5s linear infinite;}
.live-pill{backdrop-filter:blur(8px);}
.hstat .num{filter:drop-shadow(0 2px 10px rgba(255,214,10,.28));}

/* ── Nav tabs ── */
.nav-tabs button:hover{transform:translateY(-1px);}
.nav-tabs button.on{box-shadow:0 6px 18px -7px var(--r);}

/* ── Filtres : chips stickers inclinés ── */
.fpill{transition:transform .18s,color .18s,border-color .18s,background .18s,box-shadow .18s;}
.fpill:nth-child(odd){--rot:-1.2deg;}
.fpill:nth-child(even){--rot:1.2deg;}
.fpill:hover{transform:translateY(-2px) rotate(var(--rot,0)) scale(1.04);}
.fpill.on{transform:translateY(-1px) rotate(var(--rot,0));box-shadow:0 6px 18px -7px var(--r);}

/* ── Titres de section : barre accent ── */
.sec-title::before{content:"";display:inline-block;width:5px;height:1em;border-radius:3px;
  background:linear-gradient(var(--r),var(--p));margin-right:3px;}

/* ── ✦ CHAOS CARDS : la signature ✦ ── */
.vcard{border-radius:20px;}
.vcard::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.5) 48%,transparent 62%);
  mix-blend-mode:overlay;transition:opacity .3s;}
.vcard:hover::after{opacity:.55;animation:cardSheen .9s ease;}
@keyframes cardSheen{from{transform:translateX(-25%);}to{transform:translateX(25%);}}
.vcard:hover{transform:translateY(-6px) scale(1.015);border-color:transparent;
  box-shadow:0 0 0 1.5px var(--ring,var(--r)),0 22px 55px -16px var(--ring,var(--r)),0 18px 50px rgba(0,0,0,.5);}
/* Anneau coloré selon le badge (toujours présent sur la carte) */
.vcard:has(.bh):hover{--ring:var(--r);}
.vcard:has(.bn):hover{--ring:var(--g);}
.vcard:has(.bt):hover{--ring:var(--y);}
.vcard:has(.bv):hover{--ring:var(--p);}
.vcard:has(.bo):hover{--ring:var(--o);}

/* ── Badge sticker incliné ── */
.vbadge{border-radius:8px;transform:rotate(-4deg);font-family:var(--display);
  box-shadow:0 4px 10px -3px rgba(0,0,0,.5);}
.vcard:hover .vbadge{transform:rotate(-4deg) scale(1.06);}

/* ── Play glow + tag vif ── */
.vplay-btn{box-shadow:0 0 24px rgba(255,255,255,.4);}
.vtag{background:linear-gradient(135deg,rgba(255,45,117,.14),rgba(154,107,255,.14));
  color:var(--text);border:1px solid var(--border2);}

/* ── Ticker tape oblique ── */
.ticker-bar{transform:rotate(-1deg) scale(1.015);box-shadow:0 8px 30px -12px rgba(0,0,0,.5);}

/* ── Load more : halo pulse ── */
.load-btn{position:relative;}
.load-btn::before{content:"";position:absolute;inset:0;border-radius:100px;pointer-events:none;
  animation:loadPulse 2.6s ease-out infinite;}
@keyframes loadPulse{0%{box-shadow:0 0 0 0 rgba(255,45,117,.4);}70%{box-shadow:0 0 0 13px transparent;}100%{box-shadow:0 0 0 0 transparent;}}

/* ── Sidebar : rank #1-3 glow ── */
.trank.top{filter:drop-shadow(0 0 8px rgba(255,45,117,.5));}

/* ── Accessibilité : respect du reduced-motion ── */
@media(prefers-reduced-motion:reduce){
  .bg-scene::after,.logo,.hero h1 .grad,.vcard:hover::after,.load-btn::before{animation:none!important;}
}
/* ✦ FIN REFRESH 2026 ✦ */
</style>